diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.en.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.en.png
new file mode 100644
index 00000000..4148c101
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.en.png differ
diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.lt.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.lt.png
new file mode 100644
index 00000000..1270cbc1
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.lt.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.en.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.en.png
new file mode 100644
index 00000000..e89ba616
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.en.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.lt.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.lt.png
new file mode 100644
index 00000000..f5fecd9c
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.lt.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.en.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.en.png
new file mode 100644
index 00000000..78a6fb81
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.en.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.lt.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.lt.png
new file mode 100644
index 00000000..3be900f1
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.lt.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.en.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.en.png
new file mode 100644
index 00000000..6e5a9ef9
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.en.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.lt.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.lt.png
new file mode 100644
index 00000000..76e0510f
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.lt.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.en.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.en.png
new file mode 100644
index 00000000..474ed401
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.en.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.lt.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.lt.png
new file mode 100644
index 00000000..7dc2fd49
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.lt.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.en.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.en.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.en.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.lt.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.lt.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.lt.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.en.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.en.png
new file mode 100644
index 00000000..ad9341a4
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.en.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.lt.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.lt.png
new file mode 100644
index 00000000..776d3dc7
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.lt.png differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.en.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.en.jpg
new file mode 100644
index 00000000..06fa7e91
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.en.jpg differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.lt.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.lt.jpg
new file mode 100644
index 00000000..0f79dc31
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.lt.jpg differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.en.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.en.png
new file mode 100644
index 00000000..b42a0d08
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.en.png differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.lt.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.lt.png
new file mode 100644
index 00000000..9e0518af
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.lt.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.en.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.en.png
new file mode 100644
index 00000000..0076f9c5
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.en.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.lt.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.lt.png
new file mode 100644
index 00000000..eecf1180
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.lt.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.en.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.en.png
new file mode 100644
index 00000000..9f3e1288
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.en.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.lt.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.lt.png
new file mode 100644
index 00000000..2584dddd
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.lt.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.en.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.en.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.en.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.lt.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.lt.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.lt.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.en.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.en.png
new file mode 100644
index 00000000..42cd0702
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.en.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.lt.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.lt.png
new file mode 100644
index 00000000..e21305ab
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.lt.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.en.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.en.png
new file mode 100644
index 00000000..3220a0f9
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.en.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.lt.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.lt.png
new file mode 100644
index 00000000..c8cc0c1b
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.lt.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.en.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.en.png
new file mode 100644
index 00000000..f0a6fa89
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.en.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.lt.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.lt.png
new file mode 100644
index 00000000..c12444ef
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.lt.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.en.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.en.png
new file mode 100644
index 00000000..aaa3fe3c
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.en.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.lt.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.lt.png
new file mode 100644
index 00000000..ac90e278
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.lt.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.en.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.en.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.en.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.lt.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.lt.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.lt.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.en.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.en.png
new file mode 100644
index 00000000..99e0f52a
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.en.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.lt.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.lt.png
new file mode 100644
index 00000000..a76c43a1
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.lt.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.en.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.en.png
new file mode 100644
index 00000000..67291b68
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.en.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.lt.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.lt.png
new file mode 100644
index 00000000..8aeabab6
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.lt.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.en.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.en.png
new file mode 100644
index 00000000..2dec44d4
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.en.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.lt.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.lt.png
new file mode 100644
index 00000000..e36234a1
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.lt.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.en.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.en.png
new file mode 100644
index 00000000..d4bd5400
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.en.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.lt.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.lt.png
new file mode 100644
index 00000000..30bd0654
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.lt.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.en.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.en.png
new file mode 100644
index 00000000..6de17627
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.en.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.lt.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.lt.png
new file mode 100644
index 00000000..d26b48c3
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.lt.png differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.en.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.en.jpg
new file mode 100644
index 00000000..321b6488
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.en.jpg differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.lt.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.lt.jpg
new file mode 100644
index 00000000..cb09f7bd
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.lt.jpg differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.en.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.en.png
new file mode 100644
index 00000000..b324f620
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.en.png differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.lt.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.lt.png
new file mode 100644
index 00000000..9cadead1
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.lt.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.en.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.en.png
new file mode 100644
index 00000000..2558533f
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.en.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.lt.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.lt.png
new file mode 100644
index 00000000..da48c9b0
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.lt.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.en.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.en.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.en.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.lt.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.lt.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.lt.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.en.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.en.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.en.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.lt.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.lt.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.lt.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.en.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.en.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.en.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.lt.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.lt.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.lt.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.en.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.en.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.en.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.lt.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.lt.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.lt.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.en.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.en.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.en.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.lt.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.lt.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.lt.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.en.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.en.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.en.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.lt.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.lt.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.lt.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.en.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.en.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.en.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.lt.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.lt.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.lt.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.en.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.en.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.en.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.lt.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.lt.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.lt.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.en.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.en.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.en.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.lt.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.lt.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.lt.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.en.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.en.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.en.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.lt.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.lt.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.lt.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.en.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.en.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.en.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.lt.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.lt.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.lt.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.en.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.en.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.en.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.lt.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.lt.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.lt.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.en.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.en.png
new file mode 100644
index 00000000..e8763a28
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.en.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.lt.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.lt.png
new file mode 100644
index 00000000..46a13afd
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.lt.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png
new file mode 100644
index 00000000..00d0890d
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.lt.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.lt.png
new file mode 100644
index 00000000..5b7cd731
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.lt.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.en.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.en.png
new file mode 100644
index 00000000..0b90bfbe
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.en.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.lt.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.lt.png
new file mode 100644
index 00000000..21778864
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.lt.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.en.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.en.png
new file mode 100644
index 00000000..ecc6a080
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.en.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.lt.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.lt.png
new file mode 100644
index 00000000..63e9a1a9
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.lt.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.en.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.en.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.en.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.lt.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.lt.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.lt.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.en.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.en.png
new file mode 100644
index 00000000..5ddd08a2
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.en.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.lt.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.lt.png
new file mode 100644
index 00000000..24179262
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.lt.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.en.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.en.png
new file mode 100644
index 00000000..b66a6718
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.en.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.lt.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.lt.png
new file mode 100644
index 00000000..0c656550
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.lt.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png
new file mode 100644
index 00000000..bcd6d49d
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.lt.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.lt.png
new file mode 100644
index 00000000..6643a59c
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.lt.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.en.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.en.png
new file mode 100644
index 00000000..bcd6d49d
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.en.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.lt.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.lt.png
new file mode 100644
index 00000000..9d0756c0
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.lt.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.en.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.en.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.en.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.lt.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.lt.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.lt.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.en.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.en.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.en.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.lt.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.lt.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.lt.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.en.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.en.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.en.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.lt.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.lt.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.lt.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.en.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.en.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.en.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.lt.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.lt.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.lt.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.en.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.en.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.en.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.lt.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.lt.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.lt.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.en.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.en.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.en.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.lt.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.lt.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.lt.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.en.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.en.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.en.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.lt.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.lt.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.lt.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.en.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.en.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.en.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.lt.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.lt.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.lt.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.en.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.en.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.en.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.lt.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.lt.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.lt.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.en.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.en.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.en.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.lt.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.lt.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.lt.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.en.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.en.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.en.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.lt.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.lt.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.lt.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.en.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.en.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.en.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.lt.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.lt.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.lt.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.en.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.en.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.en.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.lt.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.lt.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.lt.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.en.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.en.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.en.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.lt.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.lt.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.lt.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.en.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.en.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.en.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.lt.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.lt.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.lt.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.en.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.en.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.en.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.lt.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.lt.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.lt.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.en.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.en.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.en.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.lt.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.lt.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.lt.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.en.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.en.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.en.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.lt.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.lt.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.lt.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.en.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.en.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.en.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.lt.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.lt.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.lt.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.en.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.en.png
new file mode 100644
index 00000000..251fcfce
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.en.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.lt.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.lt.png
new file mode 100644
index 00000000..015f82f1
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.lt.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.en.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.en.png
new file mode 100644
index 00000000..10c7c0d0
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.en.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.lt.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.lt.png
new file mode 100644
index 00000000..ff373f68
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.lt.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.en.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.en.png
new file mode 100644
index 00000000..53147dc2
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.en.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.lt.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.lt.png
new file mode 100644
index 00000000..77845bea
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.lt.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.en.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.en.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.en.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.lt.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.lt.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.lt.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.en.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.en.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.en.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.lt.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.lt.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.lt.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.en.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.en.png
new file mode 100644
index 00000000..65b0a4fd
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.en.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.lt.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.lt.png
new file mode 100644
index 00000000..c3babfa1
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.lt.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.en.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.en.png
new file mode 100644
index 00000000..a1eff225
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.en.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.lt.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.lt.png
new file mode 100644
index 00000000..3e85e5f4
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.lt.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.en.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.en.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.en.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.lt.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.lt.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.lt.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.en.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.en.png
new file mode 100644
index 00000000..6032b4ab
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.en.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.lt.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.lt.png
new file mode 100644
index 00000000..b2b6cd85
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.lt.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.en.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.en.png
new file mode 100644
index 00000000..4d858243
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.en.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.lt.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.lt.png
new file mode 100644
index 00000000..d283f343
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.lt.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.en.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.en.png
new file mode 100644
index 00000000..9dc30ee1
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.en.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.lt.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.lt.png
new file mode 100644
index 00000000..9b8b9cf5
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.lt.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.en.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.en.png
new file mode 100644
index 00000000..1c1b335c
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.en.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.lt.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.lt.png
new file mode 100644
index 00000000..2998070e
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.lt.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.en.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.en.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.en.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.lt.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.lt.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.lt.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.en.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.en.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.en.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.lt.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.lt.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.lt.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.en.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.en.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.en.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.lt.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.lt.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.lt.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.en.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.en.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.en.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.lt.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.lt.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.lt.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.en.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.en.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.en.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.lt.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.lt.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.lt.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.en.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.en.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.en.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.lt.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.lt.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.lt.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.en.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.en.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.en.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.lt.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.lt.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.lt.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.en.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.en.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.en.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.lt.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.lt.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.lt.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.en.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.en.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.en.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.lt.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.lt.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.lt.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.en.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.en.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.en.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.lt.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.lt.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.lt.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.en.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.en.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.en.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.lt.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.lt.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.lt.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.en.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.en.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.en.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.lt.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.lt.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.lt.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.en.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.en.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.en.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.lt.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.lt.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.lt.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.en.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.en.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.en.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.lt.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.lt.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.lt.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.en.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.en.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.en.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.lt.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.lt.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.lt.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.en.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.en.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.en.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.lt.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.lt.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.lt.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.en.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.en.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.en.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.lt.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.lt.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.lt.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.en.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.en.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.en.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.lt.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.lt.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.lt.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.en.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.en.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.en.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.lt.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.lt.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.lt.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.en.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.en.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.en.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.lt.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.lt.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.lt.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.en.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.en.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.en.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.lt.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.lt.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.lt.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.en.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.en.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.en.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.lt.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.lt.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.lt.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.en.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.en.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.en.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.lt.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.lt.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.lt.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.en.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.en.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.en.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.lt.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.lt.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.lt.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.en.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.en.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.en.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.lt.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.lt.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.lt.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.en.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.en.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.en.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.lt.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.lt.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.lt.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.en.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.en.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.en.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.lt.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.lt.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.lt.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.en.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.en.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.en.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.lt.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.lt.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.lt.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.en.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.en.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.en.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.lt.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.lt.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.lt.png differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.en.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.en.jpg
new file mode 100644
index 00000000..b776392d
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.en.jpg differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.lt.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.lt.jpg
new file mode 100644
index 00000000..7a23e5c8
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.lt.jpg differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.en.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.en.png
new file mode 100644
index 00000000..c1c079cf
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.en.png differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.lt.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.lt.png
new file mode 100644
index 00000000..2ebf3d30
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.lt.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.en.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.en.png
new file mode 100644
index 00000000..98f02933
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.en.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.lt.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.lt.png
new file mode 100644
index 00000000..937a0b4d
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.lt.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.en.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.en.png
new file mode 100644
index 00000000..755bf0f5
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.en.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.lt.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.lt.png
new file mode 100644
index 00000000..500e42e1
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.lt.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.en.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.en.png
new file mode 100644
index 00000000..9f669d46
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.en.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.lt.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.lt.png
new file mode 100644
index 00000000..5f326ab5
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.lt.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.en.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.en.png
new file mode 100644
index 00000000..91c965e9
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.en.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.lt.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.lt.png
new file mode 100644
index 00000000..12770ac2
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.lt.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.en.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.en.png
new file mode 100644
index 00000000..e56466c7
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.en.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.lt.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.lt.png
new file mode 100644
index 00000000..bd250d96
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.lt.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.en.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.en.png
new file mode 100644
index 00000000..c46266c6
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.en.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.lt.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.lt.png
new file mode 100644
index 00000000..70fbfce0
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.lt.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.en.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.en.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.en.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.lt.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.lt.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.lt.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.en.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.en.png
new file mode 100644
index 00000000..7101e10c
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.en.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.lt.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.lt.png
new file mode 100644
index 00000000..dbc4af41
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.lt.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.en.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.en.png
new file mode 100644
index 00000000..80f8578e
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.en.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.lt.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.lt.png
new file mode 100644
index 00000000..695a46ea
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.lt.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.en.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.en.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.en.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.lt.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.lt.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.lt.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.en.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.en.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.en.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.lt.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.lt.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.lt.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.en.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.en.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.en.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.lt.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.lt.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.lt.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.en.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.en.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.en.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.lt.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.lt.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.lt.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.en.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.en.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.en.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.lt.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.lt.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.lt.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.en.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.en.png
new file mode 100644
index 00000000..c46266c6
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.en.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.lt.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.lt.png
new file mode 100644
index 00000000..70fbfce0
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.lt.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.en.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.en.png
new file mode 100644
index 00000000..50f5d0af
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.en.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.lt.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.lt.png
new file mode 100644
index 00000000..ece77865
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.lt.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.en.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.en.png
new file mode 100644
index 00000000..ca7fed24
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.en.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.lt.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.lt.png
new file mode 100644
index 00000000..1ef8fc88
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.lt.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.en.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.en.png
new file mode 100644
index 00000000..0b483b87
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.en.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.lt.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.lt.png
new file mode 100644
index 00000000..a33ee531
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.lt.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.en.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.en.png
new file mode 100644
index 00000000..b2b0220d
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.en.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.lt.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.lt.png
new file mode 100644
index 00000000..f0e30847
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.lt.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.en.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.en.png
new file mode 100644
index 00000000..098efdf5
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.en.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.lt.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.lt.png
new file mode 100644
index 00000000..76d9ca0d
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.lt.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.en.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.en.png
new file mode 100644
index 00000000..29388480
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.en.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.lt.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.lt.png
new file mode 100644
index 00000000..d2246d43
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.lt.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.en.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.en.png
new file mode 100644
index 00000000..f6cf31b4
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.en.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.lt.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.lt.png
new file mode 100644
index 00000000..04634d8e
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.lt.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.en.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.en.png
new file mode 100644
index 00000000..37c84135
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.en.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.lt.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.lt.png
new file mode 100644
index 00000000..93dad165
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.lt.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.en.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.en.png
new file mode 100644
index 00000000..a7c724e8
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.en.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.lt.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.lt.png
new file mode 100644
index 00000000..21fb5f37
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.lt.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.en.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.en.png
new file mode 100644
index 00000000..7f6ffbf6
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.en.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.lt.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.lt.png
new file mode 100644
index 00000000..b94e1b5c
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.lt.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.en.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.en.png
new file mode 100644
index 00000000..cfce51a5
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.en.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.lt.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.lt.png
new file mode 100644
index 00000000..4a798624
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.lt.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.en.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.en.png
new file mode 100644
index 00000000..259f524b
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.en.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.lt.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.lt.png
new file mode 100644
index 00000000..d7735f7d
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.lt.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.en.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.en.png
new file mode 100644
index 00000000..cb4b0559
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.en.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.lt.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.lt.png
new file mode 100644
index 00000000..159b2591
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.lt.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.en.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.en.png
new file mode 100644
index 00000000..e5bfe564
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.en.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.lt.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.lt.png
new file mode 100644
index 00000000..a651533e
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.lt.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.en.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.en.png
new file mode 100644
index 00000000..129c89ce
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.en.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.lt.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.lt.png
new file mode 100644
index 00000000..50befb87
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.lt.png differ
diff --git a/translations/de/README.md b/translations/de/README.md
index 85bc7a3b..554268e5 100644
--- a/translations/de/README.md
+++ b/translations/de/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b672130244189715ac084c3259f6ab58",
-  "translation_date": "2025-08-24T11:49:10+00:00",
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T10:58:58+00:00",
   "source_file": "README.md",
   "language_code": "de"
 }
@@ -21,88 +21,91 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![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)  
+
+Folgen Sie diesen Schritten, um mit diesen Ressourcen zu beginnen:  
+1. **Repository forken**: Klicken Sie [![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. **Repository klonen**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Treten Sie dem Azure AI Foundry Discord bei und treffen Sie Experten und andere Entwickler**](https://discord.com/invite/ByRwuEEgH4)  
+
 # Webentwicklung für Anfänger – Ein Lehrplan  
 
-Lerne die Grundlagen der Webentwicklung mit unserem umfassenden 12-Wochen-Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen behandelt JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browser-Erweiterungen und Weltraumspiele. Nimm an Quizfragen, Diskussionen und praktischen Aufgaben teil. Verbessere deine Fähigkeiten und optimiere dein Wissen mit unserer effektiven projektbasierten Pädagogik. Starte noch heute deine Programmierreise!  
+Lernen Sie die Grundlagen der Webentwicklung mit unserem 12-wöchigen umfassenden Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen behandelt JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browser-Erweiterungen und Weltraumspiele. Nehmen Sie an Quizfragen, Diskussionen und praktischen Aufgaben teil. Verbessern Sie Ihre Fähigkeiten und optimieren Sie Ihr Wissen mit unserer effektiven projektbasierten Pädagogik. Beginnen Sie Ihre Programmierreise noch heute!  
 
-#### 🧑‍🎓 _Bist du ein Student?_  
+#### 🧑‍🎓 _Sind Sie ein Student?_  
 
-Besuche die [**Student Hub Seite**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), wo du Ressourcen für Anfänger, Studentenpakete und sogar Möglichkeiten findest, einen kostenlosen Zertifikatsgutschein zu erhalten. Diese Seite solltest du dir merken und regelmäßig besuchen, da wir den Inhalt monatlich aktualisieren.  
+Besuchen Sie die [**Student Hub Seite**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), auf der Sie Ressourcen für Anfänger, Studentenpakete und sogar Möglichkeiten finden, einen kostenlosen Zertifikatsgutschein zu erhalten. Dies ist die Seite, die Sie als Lesezeichen speichern und regelmäßig besuchen sollten, da wir den Inhalt monatlich wechseln.  
 
-### 📣 Ankündigung – _Neuer Lehrplan_ zu Generativer KI für JavaScript wurde gerade veröffentlicht  
+### 📣 Ankündigung - _Neuer Lehrplan_ zu Generativer KI für JavaScript wurde gerade veröffentlicht  
 
-Verpasse nicht unseren neuen Lehrplan zur Generativen KI!  
+Verpassen Sie nicht unseren neuen Lehrplan zur Generativen KI!  
 
-Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um loszulegen!  
+Besuchen Sie [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um loszulegen!  
 
-<div>  
-  <img src="./images/background.png" width="600px" />  
-</div>  
+![Hintergrund](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.de.png)  
 
 - Lektionen, die alles von den Grundlagen bis zu RAG abdecken.  
-- Interagiere mit historischen Charakteren mithilfe von GenAI und unserer Begleit-App.  
-- Spannende und unterhaltsame Erzählung – du wirst durch die Zeit reisen!  
+- Interagieren Sie mit historischen Charakteren mithilfe von GenAI und unserer Begleit-App.  
+- Spaßige und fesselnde Erzählung – Sie werden durch die Zeit reisen!  
 
-<div>  
-  <img src="./images/character.png" width="600px" />  
-</div>  
+![Charakter](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.de.png)  
 
-Jede Lektion enthält eine Aufgabe, eine Wissensüberprüfung und eine Herausforderung, um Themen wie folgende zu lernen:  
+Jede Lektion enthält eine Aufgabe, ein Wissensquiz und eine Herausforderung, um Themen wie folgende zu lernen:  
 - Prompting und Prompt-Engineering  
 - Text- und Bild-App-Generierung  
 - Such-Apps  
 
-Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um loszulegen!  
+Besuchen Sie [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), um loszulegen!  
 
 ## 🌱 Erste Schritte  
 
 > **Lehrer**, wir haben [einige Vorschläge](for-teachers.md) hinzugefügt, wie Sie diesen Lehrplan nutzen können. Wir freuen uns über Ihr Feedback [in unserem Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
 
-**[Lernende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, für jede Lektion beginnt mit einem Quiz vor der Vorlesung und arbeitet sich durch das Lesen des Vorlesungsmaterials, das Abschließen der verschiedenen Aktivitäten und überprüft euer Verständnis mit dem Quiz nach der Vorlesung.  
+**[Lernende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, beginnen Sie jede Lektion mit einem Quiz vor der Vorlesung und fahren Sie mit dem Lesen des Vorlesungsmaterials fort, indem Sie die verschiedenen Aktivitäten abschließen und Ihr Verständnis mit dem Quiz nach der Vorlesung überprüfen.  
 
-Um das Lernerlebnis zu verbessern, vernetzt euch mit euren Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind in unserem [Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) erwünscht, wo unser Team von Moderatoren eure Fragen beantworten wird.  
+Um Ihr Lernerlebnis zu verbessern, verbinden Sie sich mit Ihren Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind in unserem [Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) willkommen, wo unser Team von Moderatoren Ihre Fragen beantworten wird.  
 
-Um eure Ausbildung weiterzuführen, empfehlen wir dringend, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) für zusätzliche Lernmaterialien zu erkunden.  
+Um Ihre Ausbildung weiterzuführen, empfehlen wir Ihnen dringend, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) für zusätzliche Lernmaterialien zu erkunden.  
 
-### 📋 Einrichten deiner Umgebung  
+### 📋 Einrichten Ihrer Umgebung  
 
-Dieser Lehrplan hat eine einsatzbereite Entwicklungsumgebung! Zu Beginn kannst du wählen, ob du den Lehrplan in einem [Codespace](https://github.com/features/codespaces/) (_eine browserbasierte Umgebung, keine Installationen erforderlich_) oder lokal auf deinem Computer mit einem Texteditor wie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ausführen möchtest.  
+Dieser Lehrplan hat eine einsatzbereite Entwicklungsumgebung! Wenn Sie beginnen, können Sie den Lehrplan entweder in einem [Codespace](https://github.com/features/codespaces/) (_eine browserbasierte Umgebung, die keine Installationen erfordert_) oder lokal auf Ihrem Computer mit einem Texteditor wie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ausführen.  
 
-#### Erstelle dein Repository  
-Um deine Arbeit einfach zu speichern, wird empfohlen, eine eigene Kopie dieses Repositorys zu erstellen. Du kannst dies tun, indem du oben auf der Seite die Schaltfläche **Use this template** anklickst. Dadurch wird ein neues Repository in deinem GitHub-Konto mit einer Kopie des Lehrplans erstellt.  
+#### Erstellen Sie Ihr Repository  
+Um Ihre Arbeit einfach zu speichern, wird empfohlen, eine eigene Kopie dieses Repositorys zu erstellen. Sie können dies tun, indem Sie oben auf der Seite die Schaltfläche **Use this template** klicken. Dadurch wird ein neues Repository in Ihrem GitHub-Konto mit einer Kopie des Lehrplans erstellt.  
 
-Folge diesen Schritten:  
-1. **Fork das Repository**: Klicke auf die Schaltfläche "Fork" oben rechts auf dieser Seite.  
-2. **Klonen des Repositorys**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+Folgen Sie diesen Schritten:  
+1. **Repository forken**: Klicken Sie auf die Schaltfläche "Fork" oben rechts auf dieser Seite.  
+2. **Repository klonen**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
 
 #### Ausführen des Lehrplans in einem Codespace  
 
-In deiner Kopie dieses Repositorys, die du erstellt hast, klicke auf die Schaltfläche **Code** und wähle **Open with Codespaces**. Dadurch wird ein neuer Codespace erstellt, in dem du arbeiten kannst.  
+In Ihrer Kopie dieses Repositorys, die Sie erstellt haben, klicken Sie auf die Schaltfläche **Code** und wählen **Open with Codespaces**. Dadurch wird ein neuer Codespace erstellt, in dem Sie arbeiten können.  
 
-<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>  
+[!Codespace](../..)./images/createcodespace.png)  
 
-#### Ausführen des Lehrplans lokal auf deinem Computer  
+#### Ausführen des Lehrplans lokal auf Ihrem Computer  
 
-Um diesen Lehrplan lokal auf deinem Computer auszuführen, benötigst du einen Texteditor, einen Browser und ein Befehlszeilentool. Unsere erste Lektion, [Einführung in Programmiersprachen und Werkzeuge](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), führt dich durch verschiedene Optionen für jedes dieser Werkzeuge, damit du auswählen kannst, was am besten für dich funktioniert.  
+Um diesen Lehrplan lokal auf Ihrem Computer auszuführen, benötigen Sie einen Texteditor, einen Browser und ein Befehlszeilentool. Unsere erste Lektion, [Einführung in Programmiersprachen und Werkzeuge](../../1-getting-started-lessons/1-intro-to-programming-languages), führt Sie durch verschiedene Optionen für jedes dieser Werkzeuge, damit Sie auswählen können, was am besten für Sie funktioniert.  
 
-Unsere Empfehlung ist die Verwendung von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als Editor, der auch ein integriertes [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) enthält. Du kannst Visual Studio Code [hier herunterladen](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+Unsere Empfehlung ist die Verwendung von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als Editor, der auch ein integriertes [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) enthält. Sie können Visual Studio Code [hier herunterladen](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
 
-1. Klone dein Repository auf deinen Computer. Du kannst dies tun, indem du auf die Schaltfläche **Code** klickst und die URL kopierst:  
+1. Klonen Sie Ihr Repository auf Ihren Computer. Sie können dies tun, indem Sie auf die Schaltfläche **Code** klicken und die URL kopieren:  
 
-    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>  
+    [!CodeSpace](./images/createcodespace.png)  
 
-    Öffne dann [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) innerhalb von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) und führe den folgenden Befehl aus, wobei `<your-repository-url>` durch die gerade kopierte URL ersetzt wird:  
+    Öffnen Sie dann [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) innerhalb von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) und führen Sie den folgenden Befehl aus, wobei Sie `<your-repository-url>` durch die gerade kopierte URL ersetzen:  
 
     ```bash 
     git clone <your-repository-url>
     ```  
 
-2. Öffne den Ordner in Visual Studio Code. Du kannst dies tun, indem du auf **Datei** > **Ordner öffnen** klickst und den gerade geklonten Ordner auswählst.  
+2. Öffnen Sie den Ordner in Visual Studio Code. Sie können dies tun, indem Sie auf **Datei** > **Ordner öffnen** klicken und den gerade geklonten Ordner auswählen.  
 
 >  Empfohlene Visual Studio Code-Erweiterungen:  
 >  
-> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) – um HTML-Seiten direkt in Visual Studio Code zu sehen  
-> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – um schneller Code zu schreiben  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - um HTML-Seiten direkt in Visual Studio Code anzuzeigen  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - um schneller Code zu schreiben  
 
 ## 📂 Jede Lektion enthält:  
 
@@ -115,90 +118,93 @@ Unsere Empfehlung ist die Verwendung von [Visual Studio Code](https://code.visua
 - eine Herausforderung  
 - ergänzende Lektüre  
 - Aufgabe  
-- Quiz nach der Lektion  
+- [Quiz nach der Lektion](https://ff-quizzes.netlify.app/)  
 
-> **Eine Anmerkung zu den Quizfragen**: Alle Quizfragen befinden sich im Ordner Quiz-app, insgesamt 48 Quizfragen mit jeweils drei Fragen. Sie sind in den Lektionen verlinkt. Die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden; folge den Anweisungen im `quiz-app`-Ordner. Sie werden nach und nach lokalisiert.  
+> **Hinweis zu den Quizfragen**: Alle Quizfragen befinden sich im Ordner Quiz-app, insgesamt 48 Quizfragen mit jeweils drei Fragen. Sie sind [hier](https://ff-quizzes.netlify.app/) verfügbar. Die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden; folgen Sie den Anweisungen im `quiz-app`-Ordner.  
 
 ## 🗃️ Lektionen  
 
 |     |                       Projektname                       |                            Vermittelte Konzepte                            | Lernziele                                                                                                                           |                                                         Verlinkte Lektion                                                          |         Autor          |  
-| :-: | :------------------------------------------------------: | :------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
-| 01  |                     Erste Schritte                      |           Einführung in Programmiersprachen und Werkzeuge                  | Lerne die grundlegenden Prinzipien der meisten Programmiersprachen und über Software, die professionelle Entwickler nutzen          | [Einführung in Programmiersprachen und Werkzeuge](/1-getting-started-lessons/1-intro-to-programming-languages/README.md)        |         Jasmine         |  
-| 02  |                     Erste Schritte                      |             Grundlagen von GitHub, einschließlich Teamarbeit              | Wie man GitHub in einem Projekt verwendet und mit anderen an einem Code-Bestand zusammenarbeitet                                    |                            [Einführung in GitHub](/1-getting-started-lessons/2-github-basics/README.md)                          |          Floor          |  
-| 03  |                     Erste Schritte                      |                             Barrierefreiheit                              | Lerne die Grundlagen der Barrierefreiheit im Web                                                                                   |                       [Grundlagen der Barrierefreiheit](/1-getting-started-lessons/3-accessibility/README.md)                   |       Christopher       |  
-| 04  |                        JS-Grundlagen                    |                         JavaScript-Datentypen                             | Die Grundlagen der JavaScript-Datentypen                                                                                           |                                       [Datentypen](/2-js-basics/1-data-types/README.md)                                          |         Jasmine         |  
-| 05  |                        JS-Grundlagen                    |                         Funktionen und Methoden                           | Lerne, wie Funktionen und Methoden die Logik einer Anwendung steuern können                                                        |                              [Funktionen und Methoden](/2-js-basics/2-functions-methods/README.md)                              | Jasmine und Christopher |  
-| 06  |                        JS-Grundlagen                    |                        Entscheidungen mit JS treffen                      | Lerne, wie man Bedingungen im Code mit Entscheidungsfindungsmethoden erstellt                                                      |                                 [Entscheidungen treffen](/2-js-basics/3-making-decisions/README.md)                             |         Jasmine         |  
-| 07  |                        JS-Grundlagen                    |                            Arrays und Schleifen                           | Arbeite mit Daten mithilfe von Arrays und Schleifen in JavaScript                                                                   |                                   [Arrays und Schleifen](/2-js-basics/4-arrays-loops/README.md)                                  |         Jasmine         |  
-| 08  |       [Terrarium](/3-terrarium/solution/README.md)       |                            HTML in der Praxis                             | Erstelle das HTML, um ein Online-Terrarium zu bauen, mit Fokus auf Layoutgestaltung                                                 |                                 [Einführung in HTML](/3-terrarium/1-intro-to-html/README.md)                                     |           Jen           |  
-| 09  |       [Terrarium](/3-terrarium/solution/README.md)       |                            CSS in der Praxis                              | Erstelle das CSS, um das Online-Terrarium zu gestalten, mit Fokus auf die Grundlagen von CSS, einschließlich responsivem Design     |                                  [Einführung in CSS](/3-terrarium/2-intro-to-css/README.md)                                      |           Jen           |  
-| 10  |            [Terrarium](/3-terrarium/solution/README.md)            |                 JavaScript Closures, DOM-Manipulation                     | Erstelle das JavaScript, um das Terrarium als Drag-and-Drop-Oberfläche funktionsfähig zu machen, mit Fokus auf Closures und DOM-Manipulation |                  [JavaScript Closures, DOM-Manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                     |           Jen           |  
-| 11  |          [Tipp-Spiel](/4-typing-game/solution/README.md)          |                          Erstelle ein Tipp-Spiel                          | Lerne, wie man Tastaturereignisse nutzt, um die Logik einer JavaScript-App zu steuern                                               |                                [Ereignisgesteuerte Programmierung](/4-typing-game/typing-game/README.md)                         |       Christopher       |  
-| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Arbeiten mit Browsern                          | Erfahren Sie, wie Browser funktionieren, ihre Geschichte und wie Sie die ersten Elemente einer Browsererweiterung erstellen können |                               [Über Browser](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Formular erstellen, API aufrufen und Variablen im lokalen Speicher speichern | Erstellen Sie die JavaScript-Elemente Ihrer Browsererweiterung, um eine API mit Variablen aus dem lokalen Speicher aufzurufen      |                [APIs, Formulare und lokaler Speicher](/5-browser-extension/2-forms-browsers-local-storage/README.md)           |           Jen           |
-| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Hintergrundprozesse im Browser, Web-Performance              | Nutzen Sie die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; erfahren Sie mehr über Web-Performance und Optimierungen |             [Hintergrundaufgaben und Performance](/5-browser-extension/3-background-tasks-and-performance/README.md)           |           Jen           |
-| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Fortgeschrittene Spieleentwicklung mit JavaScript          | Lernen Sie Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster kennen, um ein Spiel vorzubereiten                       |                      [Einführung in fortgeschrittene Spieleentwicklung](/6-space-game/1-introduction/README.md)                |          Chris          |
-| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Zeichnen auf Canvas                          | Lernen Sie die Canvas-API kennen, die verwendet wird, um Elemente auf einem Bildschirm zu zeichnen                                |                                [Zeichnen auf Canvas](/6-space-game/2-drawing-to-canvas/README.md)                              |          Chris          |
-| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Elemente auf dem Bildschirm bewegen                  | Entdecken Sie, wie Elemente mithilfe kartesischer Koordinaten und der Canvas-API Bewegung erhalten können                         |                           [Elemente bewegen](/6-space-game/3-moving-elements-around/README.md)                                 |          Chris          |
-| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Kollisionserkennung                           | Lassen Sie Elemente kollidieren und aufeinander reagieren, indem Sie Tastenanschläge verwenden, und fügen Sie eine Abkühlfunktion hinzu, um die Spielleistung sicherzustellen |                              [Kollisionserkennung](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Punktestand führen                         | Führen Sie mathematische Berechnungen basierend auf dem Spielstatus und der Leistung durch                                       |                                    [Punktestand führen](/6-space-game/5-keeping-score/README.md)                               |          Chris          |
-| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Spiel beenden und neu starten                      | Lernen Sie, wie Sie das Spiel beenden und neu starten, einschließlich der Bereinigung von Ressourcen und dem Zurücksetzen von Variablenwerten |                                [Endbedingung](/6-space-game/6-end-condition/README.md)                                         |          Chris          |
-| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 HTML-Vorlagen und Routen in einer Web-App              | Lernen Sie, wie Sie das Grundgerüst der Architektur einer mehrseitigen Website mithilfe von Routing und HTML-Vorlagen erstellen   |                            [HTML-Vorlagen und Routen](/7-bank-project/1-template-route/README.md)                              |          Yohan          |
-| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Login- und Registrierungsformular erstellen           | Lernen Sie, wie man Formulare erstellt und Validierungsroutinen handhabt                                                          |                                           [Formulare](/7-bank-project/2-forms/README.md)                                       |          Yohan          |
-| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Methoden zum Abrufen und Verwenden von Daten         | Erfahren Sie, wie Daten in Ihre App fließen, wie sie abgerufen, gespeichert und verworfen werden                                  |                                            [Daten](/7-bank-project/3-data/README.md)                                           |          Yohan          |
-| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Konzepte des Zustandsmanagements                  | Lernen Sie, wie Ihre App den Zustand beibehält und wie Sie ihn programmatisch verwalten können                                    |                                [Zustandsmanagement](/7-bank-project/4-state-management/README.md)                              |          Yohan          |
+| :-: | :------------------------------------------------------: | :-----------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Erste Schritte                      |           Einführung in Programmiersprachen und Werkzeuge                  | Lernen Sie die grundlegenden Prinzipien der meisten Programmiersprachen und über Software, die professionelle Entwickler nutzen      | [Einführung in Programmiersprachen und Werkzeuge](./1-getting-started-lessons/1-intro-to-programming-languages/README.md)        |         Jasmine         |  
+| 02  |                     Erste Schritte                      |             Grundlagen von GitHub, einschließlich Teamarbeit               | Wie man GitHub in einem Projekt verwendet und mit anderen an einem Code-Basis zusammenarbeitet                                      |                            [Einführung in GitHub](./1-getting-started-lessons/2-github-basics/README.md)                          |          Floor          |  
+| 03  |                     Erste Schritte                      |                             Barrierefreiheit                              | Lernen Sie die Grundlagen der Barrierefreiheit im Web                                                                               |                       [Grundlagen der Barrierefreiheit](./1-getting-started-lessons/3-accessibility/README.md)                   |       Christopher       |  
+| 04  |                        JS Grundlagen                    |                         JavaScript-Datentypen                             | Die Grundlagen der JavaScript-Datentypen                                                                                           |                                       [Datentypen](./2-js-basics/1-data-types/README.md)                                          |         Jasmine         |  
+| 05  |                        JS Grundlagen                    |                         Funktionen und Methoden                           | Lernen Sie Funktionen und Methoden kennen, um den Logikfluss einer Anwendung zu steuern                                             |                              [Funktionen und Methoden](./2-js-basics/2-functions-methods/README.md)                               | Jasmine und Christopher |  
+| 06  |                        JS Grundlagen                    |                        Entscheidungen mit JS treffen                      | Lernen Sie, wie Sie Bedingungen in Ihrem Code mit Entscheidungsfindungsmethoden erstellen                                          |                                 [Entscheidungen treffen](./2-js-basics/3-making-decisions/README.md)                              |         Jasmine         |  
+| 07  |                        JS Grundlagen                    |                            Arrays und Schleifen                           | Arbeiten Sie mit Daten mithilfe von Arrays und Schleifen in JavaScript                                                              |                                   [Arrays und Schleifen](./2-js-basics/4-arrays-loops/README.md)                                  |         Jasmine         |  
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML in der Praxis                             | Erstellen Sie das HTML, um ein Online-Terrarium zu bauen, mit Fokus auf das Layout                                                  |                                 [Einführung in HTML](./3-terrarium/1-intro-to-html/README.md)                                     |           Jen           |  
+| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS in der Praxis                              | Erstellen Sie das CSS, um das Online-Terrarium zu gestalten, mit Fokus auf die Grundlagen von CSS, einschließlich responsivem Design |                                  [Einführung in CSS](./3-terrarium/2-intro-to-css/README.md)                                      |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript Closures, DOM-Manipulation                  | Entwickle das JavaScript, um das Terrarium als Drag-and-Drop-Oberfläche funktionsfähig zu machen, mit Fokus auf Closures und DOM-Manipulation             |                  [JavaScript Closures, DOM-Manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          Ein Schreibspiel erstellen                           | Lerne, wie man Tastaturereignisse nutzt, um die Logik deiner JavaScript-App zu steuern                                                          |                                [Eventgesteuerte Programmierung](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         Arbeiten mit Browsern                          | Lerne, wie Browser funktionieren, ihre Geschichte und wie man die ersten Elemente einer Browser-Erweiterung erstellt                               |                               [Über Browser](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | Ein Formular erstellen, eine API aufrufen und Variablen im lokalen Speicher speichern | Entwickle die JavaScript-Elemente deiner Browser-Erweiterung, um eine API mit Variablen aus dem lokalen Speicher aufzurufen                      |                [APIs, Formulare und lokaler Speicher](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          Hintergrundprozesse im Browser, Web-Performance          | Nutze die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; lerne über Web-Performance und einige Optimierungen   |             [Hintergrundaufgaben und Performance](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             Fortgeschrittene Spieleentwicklung mit JavaScript             | Lerne über Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster, als Vorbereitung auf die Entwicklung eines Spiels              |                      [Einführung in die fortgeschrittene Spieleentwicklung](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           Zeichnen auf Canvas                            | Lerne über die Canvas-API, die verwendet wird, um Elemente auf einem Bildschirm zu zeichnen                                                                       |                                [Zeichnen auf Canvas](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   Elemente auf dem Bildschirm bewegen                    | Entdecke, wie Elemente mit kartesischen Koordinaten und der Canvas-API Bewegung erhalten können                                            |                           [Elemente bewegen](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          Kollisionserkennung                           | Lass Elemente miteinander kollidieren und aufeinander reagieren, indem du Tasteneingaben nutzt, und implementiere eine Abkühlfunktion, um die Leistung des Spiels sicherzustellen    |                              [Kollisionserkennung](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             Punkte zählen                              | Führe mathematische Berechnungen basierend auf dem Status und der Leistung des Spiels durch                                                                |                                    [Punkte zählen](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     Das Spiel beenden und neu starten                     | Lerne, wie man ein Spiel beendet und neu startet, einschließlich der Bereinigung von Assets und dem Zurücksetzen von Variablenwerten                              |                                [Die Endbedingung](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 HTML-Vorlagen und Routen in einer Web-App                 | Lerne, wie man das Gerüst der Architektur einer mehrseitigen Website mit Routing und HTML-Vorlagen erstellt                             |                            [HTML-Vorlagen und Routen](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  Ein Login- und Registrierungsformular erstellen                   | Lerne, wie man Formulare erstellt und Validierungsroutinen handhabt                                                                          |                                           [Formulare](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   Methoden zum Abrufen und Verwenden von Daten                   | Wie Daten in deine App fließen, wie man sie abruft, speichert und entsorgt                                                 |                                            [Daten](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      Konzepte des Zustandsmanagements                      | Lerne, wie deine App den Zustand beibehält und wie man ihn programmatisch verwaltet                                                              |                                [Zustandsmanagement](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
 
 
 ## 🏫 Pädagogik
 
-Unser Lehrplan basiert auf zwei zentralen pädagogischen Prinzipien:
+Unser Lehrplan basiert auf zwei wichtigen pädagogischen Prinzipien:
 * projektbasiertes Lernen
-* regelmäßige Quizze
+* häufige Quizfragen
 
-Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Tools und Techniken, die von heutigen Webentwicklern verwendet werden. Die Studierenden haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Schreibspiel, ein virtuelles Terrarium, eine umweltfreundliche Browsererweiterung, ein Space-Invader-ähnliches Spiel und eine Banking-App für Unternehmen entwickeln. Am Ende der Serie haben die Studierenden ein solides Verständnis für Webentwicklung erlangt.
+Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Tools und Techniken, die von heutigen Webentwicklern verwendet werden. Die Studierenden haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Schreibspiel, ein virtuelles Terrarium, eine umweltfreundliche Browser-Erweiterung, ein Space-Invader-ähnliches Spiel und eine Banking-App für Unternehmen entwickeln. Am Ende der Serie haben die Studierenden ein solides Verständnis für Webentwicklung erlangt.
 
-> 🎓 Sie können die ersten Lektionen dieses Lehrplans als [Lernpfad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) auf Microsoft Learn absolvieren!
 
-Indem sichergestellt wird, dass die Inhalte projektbezogen sind, wird der Lernprozess für die Studierenden ansprechender gestaltet und das Behalten der Konzepte verbessert. Wir haben auch mehrere Einführungslektionen zu den JavaScript-Grundlagen geschrieben, die mit einem Video aus der Sammlung "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" kombiniert sind, von denen einige Autoren zu diesem Lehrplan beigetragen haben.
+> 🎓 Du kannst die ersten Lektionen dieses Lehrplans als [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) auf Microsoft Learn absolvieren!
 
-Darüber hinaus setzt ein niedrigschwelliges Quiz vor dem Unterricht den Fokus der Studierenden auf das Lernen eines Themas, während ein zweites Quiz nach dem Unterricht das Behalten weiter fördert. Dieser Lehrplan wurde so gestaltet, dass er flexibel und unterhaltsam ist und ganz oder teilweise absolviert werden kann. Die Projekte beginnen klein und werden im Laufe des 12-wöchigen Zyklus immer komplexer.
+Indem sichergestellt wird, dass die Inhalte mit Projekten übereinstimmen, wird der Lernprozess für die Studierenden ansprechender gestaltet und die Behaltensquote der Konzepte erhöht. Wir haben auch mehrere Starter-Lektionen zu JavaScript-Grundlagen geschrieben, um Konzepte einzuführen, begleitet von einem Video aus der "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"-Sammlung von Video-Tutorials, zu denen einige der Autoren dieses Lehrplans beigetragen haben.
 
-Obwohl wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten zu konzentrieren, die ein Webentwickler vor der Verwendung eines Frameworks benötigt, wäre ein guter nächster Schritt nach Abschluss dieses Lehrplans das Erlernen von Node.js über eine weitere Videosammlung: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+Darüber hinaus setzt ein niedrigschwelliges Quiz vor einer Klasse die Absicht des Studierenden auf das Lernen eines Themas, während ein zweites Quiz nach der Klasse die Behaltensquote weiter erhöht. Dieser Lehrplan wurde flexibel und unterhaltsam gestaltet und kann ganz oder teilweise absolviert werden. Die Projekte beginnen klein und werden am Ende des 12-Wochen-Zyklus zunehmend komplexer.
 
-> Besuchen Sie unsere [Verhaltensregeln](CODE_OF_CONDUCT.md) und [Beitragsrichtlinien](CONTRIBUTING.md). Wir freuen uns über Ihr konstruktives Feedback!
+Obwohl wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten zu konzentrieren, die als Webentwickler vor der Einführung eines Frameworks benötigt werden, wäre ein guter nächster Schritt nach Abschluss dieses Lehrplans das Lernen über Node.js durch eine weitere Sammlung von Videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Besuche unsere [Verhaltensregeln](CODE_OF_CONDUCT.md) und [Richtlinien für Beiträge](CONTRIBUTING.md). Wir freuen uns über dein konstruktives Feedback!
 
 
 ## 🧭 Offline-Zugriff
 
-Sie können diese Dokumentation offline mit [Docsify](https://docsify.js.org/#/) ausführen. Forken Sie dieses Repository, [installieren Sie Docsify](https://docsify.js.org/#/quickstart) auf Ihrem lokalen Rechner und geben Sie dann im Stammverzeichnis dieses Repos `docsify serve` ein. Die Website wird auf Port 3000 auf Ihrem localhost bereitgestellt: `localhost:3000`.
+Du kannst diese Dokumentation offline mit [Docsify](https://docsify.js.org/#/) ausführen. Forke dieses Repository, [installiere Docsify](https://docsify.js.org/#/quickstart) auf deinem lokalen Rechner und gib dann im Stammordner dieses Repos `docsify serve` ein. Die Website wird auf Port 3000 auf deinem localhost bereitgestellt: `localhost:3000`.
 
 ## 📘 PDF
 
-Eine PDF-Version aller Lektionen finden Sie [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+Eine PDF-Version aller Lektionen findest du [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
 
 
 ## 🎒 Weitere Kurse
 
-Unser Team erstellt weitere Kurse! Schauen Sie sich an:
+Unser Team erstellt weitere Kurse! Schau dir an:
 
-- [Generative KI für Anfänger](https://aka.ms/genai-beginners)
-- [Generative KI für Anfänger .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
-- [Generative KI mit JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
-- [Generative KI mit Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
-- [KI für Anfänger](https://aka.ms/ai-beginners)
-- [Datenwissenschaft für Anfänger](https://aka.ms/datascience-beginners)
-- [Maschinelles Lernen für Anfänger](https://aka.ms/ml-beginners)
-- [Cybersicherheit für Anfänger](https://github.com/microsoft/Security-101)
-- [Webentwicklung für Anfänger](https://aka.ms/webdev-beginners)
-- [IoT für Anfänger](https://aka.ms/iot-beginners)
-- [XR-Entwicklung für Anfänger](https://github.com/microsoft/xr-development-for-beginners)
-- [GitHub Copilot für Agentic Use meistern](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
-- [GitHub Copilot für C#/.NET-Entwickler meistern](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
-- [Wählen Sie Ihr eigenes Copilot-Abenteuer](https://github.com/microsoft/CopilotAdventures)
+- [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)
 
 ## Lizenz
 
-Dieses Repository ist unter der MIT-Lizenz lizenziert. Weitere Informationen finden Sie in der [LICENSE](../../LICENSE)-Datei.
+Dieses Repository ist unter der MIT-Lizenz lizenziert. Siehe die [LICENSE](../../LICENSE)-Datei für weitere Informationen.
+
+---
 
 **Haftungsausschluss**:  
-Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.
\ No newline at end of file
+Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.
\ No newline at end of file
diff --git a/translations/en/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/en/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..db0c4d8c
--- /dev/null
+++ b/translations/en/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -0,0 +1,216 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c63675cfaf1d223b37bb9fecbfe7c252",
+  "translation_date": "2025-08-28T11:59:07+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "en"
+}
+-->
+# Introduction to Programming Languages and Tools of the Trade
+
+This lesson introduces the fundamentals of programming languages. The topics discussed here are relevant to most modern programming languages. In the 'Tools of the Trade' section, you'll explore software that can assist you as a developer.
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.en.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Introduction
+
+In this lesson, we’ll cover:
+
+- What programming is
+- Types of programming languages
+- Basic components of a program
+- Useful software and tools for professional developers
+
+> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## What is Programming?
+
+Programming (or coding) is the process of writing instructions for a device, such as a computer or mobile device. These instructions are written using a programming language, which the device interprets. These instructions can be referred to by various names, such as *program*, *computer program*, *application (app)*, or *executable*.
+
+A *program* can be anything created with code—websites, games, and phone apps are all examples. While some programs can be created without writing code, the underlying logic is interpreted by the device, and that logic is typically written in code. A program that is *running* or *executing* is carrying out instructions. The device you’re using to read this lesson is running a program to display it on your screen.
+
+✅ Do some research: Who is considered the world’s first computer programmer?
+
+## Programming Languages
+
+Programming languages allow developers to write instructions for devices. Devices only understand binary (1s and 0s), which isn’t an efficient way for most developers to communicate. Programming languages act as a bridge between humans and computers.
+
+Programming languages come in various formats and serve different purposes. For instance, JavaScript is primarily used for web applications, while Bash is mainly used for operating systems.
+
+*Low-level languages* require fewer steps for a device to interpret instructions compared to *high-level languages*. However, high-level languages are popular due to their readability and support. JavaScript is considered a high-level language.
+
+The following code demonstrates the difference between a high-level language (JavaScript) and a low-level language (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
+```
+
+Believe it or not, *both are doing the same thing*: printing a Fibonacci sequence up to 10.
+
+✅ A Fibonacci sequence is [defined](https://en.wikipedia.org/wiki/Fibonacci_number) as a series of numbers where each number is the sum of the two preceding ones, starting from 0 and 1. The first 10 numbers in the Fibonacci sequence are 0, 1, 1, 2, 3, 5, 8, 13, 21, and 34.
+
+## Elements of a Program
+
+A single instruction in a program is called a *statement*. Statements usually have a character or line spacing that marks where the instruction ends, or *terminates*. The way a program terminates depends on the programming language.
+
+Statements in a program may depend on data provided by a user or other sources to execute instructions. Data can influence how a program behaves, so programming languages include ways to temporarily store data for later use. These are called *variables*. Variables instruct a device to save data in its memory. In programs, variables are similar to those in algebra—they have unique names, and their values can change over time.
+
+Not all statements in a program will necessarily be executed. This can happen intentionally, as designed by the developer, or accidentally due to unexpected errors. Controlling how a program runs makes it more robust and maintainable. Typically, these changes in control occur when certain conditions are met. A common statement used in modern programming for this purpose is the `if..else` statement.
+
+✅ You’ll learn more about this type of statement in future lessons.
+
+## Tools of the Trade
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+> 🎥 Click the image above to watch a video about tools
+
+In this section, you’ll explore software that can be helpful as you begin your journey as a professional developer.
+
+A **development environment** is a unique set of tools and features that developers use frequently when writing software. These tools are often customized to meet a developer’s specific needs and may evolve over time as priorities shift, personal projects change, or new programming languages are adopted. Development environments are as unique as the developers who use them.
+
+### Editors
+
+One of the most essential tools for software development is the editor. Editors are where developers write and sometimes run their code.
+
+Editors are valuable for several reasons:
+
+- *Debugging* helps identify bugs and errors by stepping through the code line by line. Some editors include debugging features that can be customized for specific programming languages.
+- *Syntax highlighting* uses colors and text formatting to make code easier to read. Most editors allow syntax highlighting to be customized.
+- *Extensions and integrations* are specialized tools created by developers for developers. These tools aren’t part of the base editor. For example, developers often document their code to explain how it works. They might install a spell-check extension to catch typos in the documentation. Most extensions are designed for specific editors, and editors typically include ways to search for available extensions.
+- *Customization* allows developers to tailor their development environment to their needs. Most editors are highly customizable and may even allow developers to create their own extensions.
+
+#### Popular Editors and Web Development Extensions
+
+- [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/)
+
+### Browsers
+
+Another essential tool is the browser. Web developers use browsers to test how their code runs on the web. Browsers also display the visual elements of a web page written in the editor, such as HTML.
+
+Many browsers include *developer tools* (DevTools), which provide features and information to help developers gather and analyze important details about their applications. For example, if a web page has errors, DevTools can be configured to capture information about when the errors occurred.
+
+#### Popular Browsers and 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)
+
+### Command Line Tools
+
+Some developers prefer a less graphical interface for their daily tasks and rely on the command line. Writing code involves a lot of typing, and some developers prefer not to interrupt their workflow by switching between the keyboard and mouse. They use keyboard shortcuts to navigate between windows, work on files, and use tools. While most tasks can be completed with a mouse, the command line allows developers to perform many actions without switching between input devices. Another advantage of the command line is its configurability—you can save custom configurations, modify them later, and import them to other development machines. Since development environments are highly personalized, some developers avoid the command line, others rely on it entirely, and some use a mix of both.
+
+### Popular Command Line Options
+
+Command line options vary depending on the operating system.
+
+*💻 = preinstalled on the operating system.*
+
+#### 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) (also known as 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)
+
+#### Popular Command Line Tools
+
+- [Git](https://git-scm.com/) (💻 on most operating systems)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentation
+
+When developers want to learn something new, they often turn to documentation for guidance. Documentation helps developers understand how to use tools and languages effectively and provides deeper insights into their functionality.
+
+#### Popular Documentation on Web Development
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), from Mozilla, the publishers of the [Firefox](https://www.mozilla.org/firefox/) browser
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), from Google, publishers of [Chrome](https://www.google.com/chrome/)
+- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), for [Microsoft Edge](https://www.microsoft.com/edge)
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+
+✅ Do some research: Now that you understand the basics of a web developer’s environment, compare it to a web designer’s environment.
+
+---
+
+## 🚀 Challenge
+
+Compare some programming languages. What are some unique characteristics of JavaScript versus Java? How about COBOL versus Go?
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Review & Self Study
+
+Explore the different programming languages available. Try writing a line of code in one language, then rewrite it in two others. What did you learn?
+
+## Assignment
+
+[Reading the Docs](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/en/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..44df26d4
--- /dev/null
+++ b/translations/en/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-28T12:00:48+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "en"
+}
+-->
+# Reading the Docs
+
+## Instructions
+
+There are many tools that a web developer might need, which are listed in the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Choose 3 tools that were not covered in the lesson, explain why a web developer would use them, and find a tool within this category to share its documentation. Avoid using the same tool examples provided in the MDN documentation.
+
+## Rubric
+
+Exemplary | Adequate | Needs Improvement
+--- | --- | --- |
+| Explained why a web developer would use the tool | Explained how, but not why a developer would use the tool | Did not mention how or why a developer would use the tool |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/1-getting-started-lessons/2-github-basics/README.md b/translations/en/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..c356d41e
--- /dev/null
+++ b/translations/en/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,338 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-28T12:03:51+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "en"
+}
+-->
+# Introduction to GitHub
+
+This lesson introduces the basics of GitHub, a platform for hosting and managing changes to your code.
+
+![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.en.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Introduction
+
+In this lesson, we’ll explore:
+
+- How to track the work you do on your computer
+- Collaborating on projects with others
+- Contributing to open source software
+
+### Prerequisites
+
+Before starting, ensure Git is installed. In the terminal, type:  
+`git --version`
+
+If Git isn’t installed, [download Git](https://git-scm.com/downloads). Then, set up your local Git profile in the terminal:
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+To verify if Git is already configured, type:  
+`git config --list`
+
+You’ll also need a GitHub account, a code editor (like Visual Studio Code), and access to your terminal (or command prompt).
+
+Visit [github.com](https://github.com/) to create an account if you don’t have one, or log in and complete your profile.
+
+✅ GitHub isn’t the only code repository platform out there, but it’s the most widely used.
+
+### Preparation
+
+You’ll need a folder containing a code project on your local machine (laptop or PC) and a public repository on GitHub. This will serve as an example for contributing to others’ projects.
+
+---
+
+## Code Management
+
+Imagine you have a folder on your computer with a code project, and you want to start tracking your progress using Git, a version control system. Some people liken using Git to writing a love letter to your future self. By reading your commit messages days, weeks, or months later, you can recall why you made certain decisions or even "undo" changes—provided you write clear commit messages.
+
+### Task: Create a Repository and Commit Code  
+
+> Watch the video  
+> 
+> [![Git and GitHub basics video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Create a repository on GitHub**. On GitHub.com, go to the repositories tab or use the navigation bar in the top-right corner to find the **new repo** button.
+
+   1. Name your repository (folder).
+   2. Click **create repository**.
+
+1. **Navigate to your working folder**. In your terminal, switch to the folder (directory) you want to start tracking. Type:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Initialize a Git repository**. In your project folder, type:
+
+   ```bash
+   git init
+   ```
+
+1. **Check the status**. To see the status of your repository, type:
+
+   ```bash
+   git status
+   ```
+
+   The output might look something like this:
+
+   ```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
+   ```
+
+   The `git status` command tells you which files are ready to be saved to the repository or have changes you might want to keep.
+
+1. **Add all files for tracking**. This is also called staging files or adding files to the staging area.
+
+   ```bash
+   git add .
+   ```
+
+   The `git add .` command stages all your files and changes for tracking.
+
+1. **Add selected files for tracking**.
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   This allows you to stage only specific files when you don’t want to commit everything at once.
+
+1. **Unstage all files**.
+
+   ```bash
+   git reset
+   ```
+
+   This command unstages all files at once.
+
+1. **Unstage a specific file**.
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   This command unstages only a specific file that you don’t want to include in the next commit.
+
+1. **Save your work**. At this point, you’ve added files to the staging area, where Git tracks your files. To make the changes permanent, you need to create a commit. A commit represents a save point in your repository’s history. Type the following to create a commit:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   This commits all your files with the message "first commit." For future commits, use more descriptive messages to explain the changes you made.
+
+1. **Connect your local Git repository to GitHub**. While a Git repository on your computer is useful, you’ll eventually want to back up your files and collaborate with others. GitHub is a great place for this. Since we’ve already created a repository on GitHub, we just need to connect it to our local Git repository. Use the `git remote add` command. Type:
+
+   > Before running the command, go to your GitHub repository page to find the repository URL. Replace ```https://github.com/username/repository_name.git``` with your GitHub URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   This creates a remote connection named "origin" pointing to the GitHub repository you created earlier.
+
+1. **Push local files to GitHub**. Now that you’ve connected your local repository to GitHub, send your files to GitHub using the `git push` command:
+
+   > Note: Your branch name may differ from ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   This pushes your commits from the "main" branch to GitHub.
+
+2. **Add more changes**. To continue making changes and pushing them to GitHub, use the following three commands:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Tip: Consider using a `.gitignore` file to exclude files you don’t want to track on GitHub, such as personal notes stored in the same folder. You can find templates for `.gitignore` files at [.gitignore templates](https://github.com/github/gitignore).
+
+#### Commit Messages
+
+A great Git commit subject line completes this sentence:  
+If applied, this commit will <your subject line here>.
+
+For the subject, use the imperative, present tense: "change" instead of "changed" or "changes."  
+In the optional body, also use the imperative, present tense. Explain the motivation for the change and contrast it with previous behavior. Focus on the `why`, not the `how`.
+
+✅ Spend a few minutes exploring GitHub. Can you find an excellent commit message? How about a very minimal one? What information do you think is most important to include in a commit message?
+
+### Task: Collaborate
+
+The main reason for using GitHub is to collaborate with other developers.
+
+## Working on Projects with Others
+
+> Watch the video  
+>
+> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+In your repository, go to `Insights > Community` to see how your project aligns with recommended community standards.
+
+Here are some ways to improve your GitHub repository:
+- **Description**: Did you add a description for your project?
+- **README**: Did you include a README? GitHub offers guidance for writing a [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+- **Contributing Guidelines**: Does your project have [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
+- **Code of Conduct**: Does it include a [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
+- **License**: Most importantly, does it have a [license](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+These resources help onboard new team members. Contributors often review these documents before even looking at your code to decide if your project is worth their time.
+
+✅ README files are often overlooked by busy maintainers, even though they take time to prepare. Can you find an example of a particularly detailed README? Note: There are [tools to help create good READMEs](https://www.makeareadme.com/) that you might find useful.
+
+### Task: Merge Some Code
+
+Contributing documentation helps others contribute to your project. It explains what types of contributions you’re looking for and how the process works. Contributors will need to follow these steps to contribute to your GitHub repository:
+
+1. **Fork your repository**. Contributors will likely fork your project, creating a copy of your repository on their GitHub profile.
+1. **Clone**. They will then clone the project to their local machine.
+1. **Create a branch**. Ask contributors to create a branch for their work.
+1. **Focus on one area**. Encourage contributors to focus on one change at a time. This increases the likelihood of successfully merging their work. For example, if they fix a bug, add a feature, and update tests, what if you only want to implement one or two of those changes?
+
+✅ Think of situations where branches are essential for writing and shipping good code. What use cases come to mind?
+
+> Note: Be the change you want to see—create branches for your own work too. Any commits you make will apply to the branch you’re currently “checked out” to. Use `git status` to see which branch you’re on.
+
+Let’s walk through a contributor workflow. Assume the contributor has already forked and cloned the repository, so they have a Git repository ready to work on locally:
+
+1. **Create a branch**. Use the `git branch` command to create a branch for the changes they want to contribute:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Switch to the working branch**. Switch to the specified branch and update the working directory using `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Make changes**. Add your changes and let Git know about them using the following commands:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Be sure to give your commit a meaningful name for your benefit and the repository maintainer’s.
+
+1. **Merge changes with the `main` branch**. Once you’re done working, merge your changes with the `main` branch. Since the `main` branch may have changed in the meantime, update it first using these commands:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   To ensure any conflicts are resolved in your working branch, run the following commands:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   This brings all changes from `main` into your branch. If there are conflicts, VS Code will highlight them, and you can resolve them by editing the affected files.
+
+1. **Push changes to GitHub**. Pushing your changes to GitHub involves two steps: pushing your branch to your repository and opening a Pull Request (PR).
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   This command creates the branch on your forked repository.
+
+1. **Open a PR**. Navigate to your forked repository on GitHub. You’ll see an option to create a new PR. Click it, and you’ll be taken to an interface where you can edit the commit message title and add a description. The maintainer of the original repository will review your PR and, hopefully, merge it. Congratulations—you’re now a contributor!
+
+1. **Clean up**. After successfully merging a PR, it’s good practice to clean up. Delete both your local branch and the branch you pushed to GitHub. First, delete it locally using this command:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+Ensure you go to the GitHub page for the forked repository next and remove the remote branch you just pushed to it.
+
+`Pull request` might sound like a strange term because, in reality, you're trying to push your changes to the project. However, the maintainer (project owner) or core team needs to review your changes before merging them into the project's "main" branch. Essentially, you're requesting a decision from the maintainer about your proposed changes.
+
+A pull request is where you can compare and discuss the differences introduced in a branch, with reviews, comments, integrated tests, and more. A good pull request follows similar guidelines to a commit message. You can also reference an issue in the issue tracker, for example, when your work resolves a specific issue. This is done by using a `#` followed by the issue number, such as `#97`.
+
+🤞Fingers crossed that all checks pass and the project owner(s) merge your changes into the project 🤞
+
+Update your current local working branch with all the new commits from the corresponding remote branch on GitHub:
+
+`git pull`
+
+## How to contribute to open source
+
+First, find a repository (or **repo**) on GitHub that interests you and to which you'd like to contribute. You'll need to copy its contents to your machine.
+
+✅ A great way to find 'beginner-friendly' repositories is to [search by the tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Copy a repo locally](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.en.png)
+
+There are several ways to copy code. One method is to "clone" the repository's contents using HTTPS, SSH, or the GitHub CLI (Command Line Interface).
+
+Open your terminal and clone the repository like this:
+`git clone https://github.com/ProjectURL`
+
+To start working on the project, navigate to the correct folder:
+`cd ProjectURL`
+
+You can also open the entire project using [Codespaces](https://github.com/features/codespaces), GitHub's built-in code editor and cloud development environment, or [GitHub Desktop](https://desktop.github.com/).
+
+Alternatively, you can download the code as a zipped folder.
+
+### A few more interesting things about GitHub
+
+You can star, watch, and/or "fork" any public repository on GitHub. Your starred repositories can be found in the drop-down menu in the top-right corner. It's like bookmarking, but for code.
+
+Projects typically have an issue tracker, usually found in the "Issues" tab on GitHub unless stated otherwise. This is where people discuss project-related issues. The Pull Requests tab is where discussions and reviews of ongoing changes take place.
+
+Projects may also have discussions in forums, mailing lists, or chat platforms like Slack, Discord, or IRC.
+
+✅ Explore your new GitHub repository and try a few things, such as editing settings, adding information to your repository, or creating a project (like a Kanban board). There's a lot to discover!
+
+---
+
+## 🚀 Challenge
+
+Pair up with a friend to work on each other's code. Create a project together, fork code, create branches, and merge changes.
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Review & Self Study
+
+Read more about [contributing to open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Practice, practice, practice. GitHub offers excellent learning paths through [skills.github.com](https://skills.github.com):
+
+- [First Week on GitHub](https://skills.github.com/#first-week-on-github)
+
+You'll also find more advanced courses.
+
+## Assignment
+
+Complete [the First Week on GitHub course](https://skills.github.com/#first-week-on-github)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/1-getting-started-lessons/3-accessibility/README.md b/translations/en/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..c8caebc8
--- /dev/null
+++ b/translations/en/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,243 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-28T12:01:07+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "en"
+}
+-->
+# Creating Accessible Webpages
+
+![All About Accessibility](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.en.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
+>
+> \- Sir Timothy Berners-Lee, W3C Director and inventor of the World Wide Web
+
+This quote perfectly captures the importance of building accessible websites. An application that excludes certain users is inherently discriminatory. As web developers, we should always prioritize accessibility. By focusing on it from the start, you'll be well on your way to ensuring everyone can access the pages you create. In this lesson, you'll learn about tools that can help you ensure your web assets are accessible and how to design with accessibility in mind.
+
+> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Tools to use
+
+### Screen readers
+
+Screen readers are one of the most widely known accessibility tools.
+
+[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) are commonly used by individuals with vision impairments. While we spend time ensuring browsers display information correctly, we must also ensure screen readers convey the same information effectively.
+
+At their core, screen readers audibly read a page from top to bottom. If your page is entirely text, the reader will present the information similarly to a browser. However, web pages often include links, images, colors, and other visual elements. Care must be taken to ensure this information is interpreted correctly by a screen reader.
+
+Every web developer should familiarize themselves with screen readers. Just as you understand how browsers work, you should learn how screen readers operate. Fortunately, most operating systems come with built-in screen readers.
+
+Some browsers also offer built-in tools and extensions that can read text aloud or provide basic navigation features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). While these tools are useful, they function differently from screen readers and should not be mistaken for screen reader testing tools.
+
+✅ Try a screen reader and browser text reader. On Windows, [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
+
+### Zoom
+
+Zooming is another tool frequently used by individuals with vision impairments. The simplest form of zooming is static zoom, controlled via `Control + plus sign (+)` or by lowering screen resolution. This type of zoom resizes the entire page, so using [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) is crucial for providing a good user experience at higher zoom levels.
+
+Another type of zoom uses specialized software to magnify specific areas of the screen and pan, similar to using a physical magnifying glass. On Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) is built in, while [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is a third-party magnification tool with more features and a larger user base. Both macOS and iOS include built-in magnification software called [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Contrast checkers
+
+Colors on websites must be chosen carefully to accommodate users with color blindness or difficulty seeing low-contrast colors.
+
+✅ Test a website you enjoy using for its color choices with a browser extension like [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). What do you learn?
+
+### Lighthouse
+
+Your browser's developer tools include the Lighthouse tool, which provides an initial analysis of a website's accessibility (along with other metrics). While you shouldn't rely solely on Lighthouse, achieving a 100% score is a helpful starting point.
+
+✅ Locate Lighthouse in your browser's developer tools and run an analysis on any site. What do you discover?
+
+## Designing for accessibility
+
+Accessibility is a broad topic, but there are many resources available to help you.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+While we can't cover every aspect of creating accessible sites, here are some key principles to implement. Designing an accessible page from the beginning is **always** easier than retrofitting an existing page.
+
+## Good display principles
+
+### Color safe palettes
+
+People perceive colors differently. When choosing a color scheme for your site, ensure it's accessible to all. A great [tool for generating color palettes is Color Safe](http://colorsafe.co/).
+
+✅ Identify a website with problematic color usage. Why is it problematic?
+
+### Use the correct HTML
+
+CSS and JavaScript can make any element look like any type of control. For example, `<span>` could be styled to resemble a `<button>`, and `<b>` could mimic a hyperlink. While this might seem convenient for styling, it provides no context to screen readers. Always use the appropriate HTML for controls. If you need a hyperlink, use `<a>`. Using the correct HTML for each control is called Semantic HTML.
+
+✅ Visit a website and check if the designers and developers are using HTML correctly. Can you find a button that should be a link? Hint: Right-click and select 'View Page Source' in your browser to examine the underlying code.
+
+### Create a descriptive heading hierarchy
+
+Screen reader users [rely heavily on headings](https://webaim.org/projects/screenreadersurvey8/#finding) to locate information and navigate pages. Writing descriptive headings and using semantic heading tags are essential for creating a site that's easy to navigate for screen reader users.
+
+### Use good visual clues
+
+CSS allows complete control over the appearance of elements on a page. You can create text boxes without outlines or hyperlinks without underlines. However, removing these visual cues can make it harder for users who depend on them to identify controls.
+
+## The importance of link text
+
+Hyperlinks are fundamental to web navigation. Ensuring screen readers can interpret links properly allows all users to navigate your site.
+
+### Screen readers and links
+
+Screen readers read link text just like any other text on the page. At first glance, the examples below might seem acceptable:
+
+> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. [Click here](https://en.wikipedia.org/wiki/Little_penguin) for more information.
+
+> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. Visit https://en.wikipedia.org/wiki/Little_penguin for more information.
+
+> **NOTE** As you'll see, you should **never** create links like the examples above.
+
+Screen readers are a different interface from browsers, with unique features.
+
+### The problem with using the URL
+
+Screen readers read text aloud. If a URL appears in the text, the screen reader will read the URL, which often doesn't convey meaningful information and can sound unpleasant. You may have experienced this if your phone has ever read a text message with a URL.
+
+### The problem with "click here"
+
+Screen readers can read only the hyperlinks on a page, similar to how sighted users scan for links. If all link text is "click here," the user will hear "click here, click here, click here..." making the links indistinguishable.
+
+### Good link text
+
+Good link text briefly describes the destination of the link. In the example about little penguins, the link leads to the Wikipedia page about the species. The phrase *little penguins* would be ideal link text, as it clearly indicates what the user will learn by clicking.
+
+> The [little penguin](https://en.wikipedia.org/wiki/Little_penguin), sometimes known as the fairy penguin, is the smallest penguin in the world.
+
+✅ Browse the web for a few minutes to find pages with unclear link strategies. Compare them to sites with better link practices. What do you learn?
+
+#### Search engine notes
+
+Using accessible link text also benefits search engines, as they use link text to understand page topics. Good link text helps everyone!
+
+### ARIA
+
+Consider the following page:
+
+| Product      | Description        | Order        |
+| ------------ | ------------------ | ------------ |
+| Widget       | [Description](../../../../1-getting-started-lessons/3-accessibility/') | [Order](../../../../1-getting-started-lessons/3-accessibility/') |
+| Super widget | [Description](../../../../1-getting-started-lessons/3-accessibility/') | [Order](../../../../1-getting-started-lessons/3-accessibility/') |
+
+For browser users, repeating "description" and "order" makes sense. However, screen reader users would only hear "description" and "order" repeatedly without context.
+
+To address this, HTML includes [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) attributes, which provide additional information to screen readers.
+
+> **NOTE**: Browser and screen reader support for ARIA may vary, but most mainstream clients support ARIA attributes.
+
+You can use `aria-label` to describe links when the page format doesn't allow for clear text. For example, the description for "widget" could be set as:
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Generally, using Semantic HTML as described earlier is preferable to ARIA, but ARIA is useful when no semantic equivalent exists (e.g., for a tree structure). The [MDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) offers more details.
+
+```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>
+```
+
+## Images
+
+Screen readers cannot automatically interpret images. Making images accessible is simple—use the `alt` attribute to describe them. All meaningful images should have an `alt` attribute. Decorative images should have an empty `alt` attribute: `alt=""`. This prevents screen readers from announcing unnecessary decorative images.
+
+✅ Search engines also rely on alt text to understand images. Once again, making your page accessible has additional benefits!
+
+## The keyboard
+
+Some users cannot use a mouse or trackpad and rely on keyboard navigation to move between elements. Your website should present content in a logical order so keyboard users can access interactive elements sequentially. Building pages with semantic markup and styling them with CSS should make your site keyboard-navigable, but it's important to test this manually. Learn more about [keyboard navigation strategies](https://webaim.org/techniques/keyboard/).
+
+✅ Visit a website and try navigating it using only your keyboard. What works? What doesn't? Why?
+
+## Summary
+
+A web that's accessible to only some is not truly a "world-wide web." The best way to ensure your sites are accessible is to incorporate accessibility best practices from the start. While it requires extra effort, adopting these practices now will ensure all your future pages are accessible.
+
+---
+
+## 🚀 Challenge
+
+Take this HTML and rewrite it to be as accessible as possible, using the strategies you've learned.
+
+```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>
+```
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## Review & Self Study
+Many governments have laws regarding accessibility requirements. Familiarize yourself with the accessibility laws in your country. What aspects are included, and what are not? An example is [this government web site](https://accessibility.blog.gov.uk/).
+
+## Assignment
+
+[Analyze a non-accessible web site](assignment.md)
+
+Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/1-getting-started-lessons/3-accessibility/assignment.md b/translations/en/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..7287a3a2
--- /dev/null
+++ b/translations/en/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-28T12:03:37+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "en"
+}
+-->
+# Analyze an inaccessible site
+
+## Instructions
+
+Identify a website that you believe is NOT accessible and create an action plan to enhance its accessibility.  
+Your first step is to identify this site, describe the ways in which you think it is inaccessible without using analytical tools, and then run a Lighthouse analysis on it. Save a PDF of the analysis results and create a detailed plan with at least ten points explaining how the site can be improved.
+
+## Table to test site accessibility
+
+| Criteria | Exemplary | Adequate | Needs Improvement |
+|----------|-----------|----------|-------------------|
+|          | missing <10% of what is required | missing 20% of what is required | missing 50% of what is required |
+
+----
+Student Report: includes paragraphs describing how inaccessible the site is, the Lighthouse report saved as a PDF, a list of ten improvement points, and detailed explanations on how to implement them.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/1-getting-started-lessons/README.md b/translations/en/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..8039b4e4
--- /dev/null
+++ b/translations/en/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-28T11:58:49+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "en"
+}
+-->
+# Getting Started with Web Development
+
+In this part of the curriculum, you'll explore foundational concepts that are essential for becoming a professional developer, outside of project-based work.
+
+### Topics
+
+1. [Introduction to Programming Languages and Tools of the Trade](1-intro-to-programming-languages/README.md)
+2. [Introduction to GitHub](2-github-basics/README.md)
+3. [Basics of Accessibility](3-accessibility/README.md)
+
+### Credits
+
+Introduction to Programming Languages and Tools of the Trade was created with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique)
+
+Introduction to GitHub was created with ♥️ by [Floor Drees](https://twitter.com/floordrees)
+
+Basics of Accessibility was created with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/2-js-basics/1-data-types/README.md b/translations/en/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..246c94b8
--- /dev/null
+++ b/translations/en/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-28T11:41:53+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "en"
+}
+-->
+# JavaScript Basics: Data Types
+
+![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.en.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+This lesson introduces the fundamentals of JavaScript, the language that brings interactivity to the web.
+
+> You can explore this lesson on [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")
+
+> 🎥 Click the images above to watch videos about variables and data types.
+
+Let’s dive into variables and the data types they hold!
+
+## Variables
+
+Variables are used to store values that can be accessed and modified throughout your code.
+
+To **declare** a variable, use the syntax **[keyword] [name]**. This consists of two parts:
+
+- **Keyword**. Keywords can be `let` or `var`.  
+
+✅ The `let` keyword, introduced in ES6, provides _block scope_ for your variable. It’s recommended to use `let` instead of `var`. We’ll explore block scopes in more detail later.
+- **Variable name**. This is a name you choose for your variable.
+
+### Task - Working with Variables
+
+1. **Declare a variable**. Use the `let` keyword to declare a variable:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` has now been declared using the `let` keyword, but it doesn’t have a value yet.
+
+1. **Assign a value**. Use the `=` operator to store a value in the variable.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Note: In this lesson, the `=` operator is used as an "assignment operator" to set a value to a variable. It does not mean equality.
+
+   `myVariable` is now *initialized* with the value 123.
+
+1. **Refactor**. Replace your code with the following statement:
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    This is called _explicit initialization_, where a variable is declared and assigned a value at the same time.
+
+1. **Change the variable value**. Update the variable’s value like this:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Once a variable is declared, you can change its value at any point in your code using the `=` operator and the new value.
+
+   ✅ Try it! You can write JavaScript directly in your browser. Open Developer Tools, go to the console, and type `let myVariable = 123`. Press return, then type `myVariable`. What happens? You’ll learn more about these concepts in upcoming lessons.
+
+## Constants
+
+Declaring and initializing a constant is similar to a variable, but you use the `const` keyword. Constants are often written in uppercase letters.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Constants are like variables, but with two key differences:
+
+- **Must have a value**. Constants must be initialized, or an error will occur when the code runs.
+- **Reference cannot be changed**. Once initialized, the reference of a constant cannot be changed, or an error will occur. Let’s look at two examples:
+   - **Simple value**. The following is NOT allowed:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Object reference is protected**. The following is NOT allowed:
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Object value is not protected**. The following IS allowed:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      In this case, you’re changing the value of the object but not its reference, which is allowed.
+
+   > Note: A `const` protects the reference from reassignment. However, the value itself is not _immutable_ and can change, especially for complex constructs like objects.
+
+## Data Types
+
+Variables can hold different types of values, such as numbers or text. These types of values are called **data types**. Understanding data types is crucial for software development because it helps developers decide how to write code and how the software should behave. Additionally, some data types have unique features that allow you to transform or extract more information from a value.
+
+✅ Data types are also known as JavaScript data primitives, as they are the most basic data types provided by the language. There are 7 primitive data types: string, number, bigint, boolean, undefined, null, and symbol. Take a moment to think about what each of these might represent. What is a `zebra`? How about `0`? `true`?
+
+### Numbers
+
+In the previous section, the value of `myVariable` was a number data type.
+
+`let myVariable = 123;`
+
+Variables can store all kinds of numbers, including decimals and negative numbers. Numbers can also be used with arithmetic operators, which are covered in the [next section](../../../../2-js-basics/1-data-types).
+
+### Arithmetic Operators
+
+Here are some common operators for performing arithmetic operations:
+
+| Symbol | Description                                                              | Example                          |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **Addition**: Adds two numbers                                           | `1 + 2 //expected answer is 3`   |
+| `-`    | **Subtraction**: Subtracts one number from another                       | `1 - 2 //expected answer is -1`  |
+| `*`    | **Multiplication**: Multiplies two numbers                               | `1 * 2 //expected answer is 2`   |
+| `/`    | **Division**: Divides one number by another                              | `1 / 2 //expected answer is 0.5` |
+| `%`    | **Remainder**: Finds the remainder when dividing two numbers             | `1 % 2 //expected answer is 1`   |
+
+✅ Try it! Test an arithmetic operation in your browser’s console. Were the results what you expected?
+
+### Strings
+
+Strings are sequences of characters enclosed in single or double quotes.
+
+- `'This is a string'`
+- `"This is also a string"`
+- `let myString = 'This is a string value stored in a variable';`
+
+Always use quotes when writing a string; otherwise, JavaScript will assume it’s a variable name.
+
+### Formatting Strings
+
+Strings are textual and often need formatting.
+
+To **concatenate** two or more strings (combine them), use the `+` operator.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Why does `1 + 1 = 2` in JavaScript, but `'1' + '1' = 11?` Think about it. What happens with `'1' + 1`?
+
+**Template literals** offer another way to format strings. Instead of quotes, use backticks. Anything that isn’t plain text must be placed inside `${ }`, including variables.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Both methods can achieve your formatting goals, but template literals preserve spaces and line breaks.
+
+✅ When would you choose a template literal over a plain string?
+
+### Booleans
+
+Booleans have only two possible values: `true` or `false`. They are useful for making decisions about which lines of code should execute under certain conditions. Often, [operators](../../../../2-js-basics/1-data-types) are used to set the value of a Boolean, and you’ll frequently see variables being initialized or updated with an operator.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ A variable is considered 'truthy' if it evaluates to a boolean `true`. Interestingly, in JavaScript, [all values are truthy unless defined as falsy](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Challenge
+
+JavaScript is known for its surprising behavior with data types. Research some of these quirks. For example: case sensitivity can be tricky! Try this in your console: `let age = 1; let Age = 2; age == Age` (returns `false` -- why?). What other quirks can you discover?
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Review & Self Study
+
+Check out [this list of JavaScript exercises](https://css-tricks.com/snippets/javascript/) and try one. What did you learn?
+
+## Assignment
+
+[Data Types Practice](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/2-js-basics/1-data-types/assignment.md b/translations/en/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..02d4e1dc
--- /dev/null
+++ b/translations/en/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-28T11:46:22+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "en"
+}
+-->
+# Data Types Practice
+
+## Instructions
+
+Imagine you are creating a shopping cart. Write some documentation about the data types you would need to create a complete shopping experience. How did you decide on your choices?
+
+## Rubric
+
+Criteria | Exemplary | Adequate | Needs Improvement
+--- | --- | --- | --- |
+||The six data types are listed and thoroughly explained, including their purpose|Four data types are explained|Two data types are explained|
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/2-js-basics/2-functions-methods/README.md b/translations/en/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..4236029c
--- /dev/null
+++ b/translations/en/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-28T11:39:31+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "en"
+}
+-->
+# JavaScript Basics: Methods and Functions
+
+![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.en.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+When writing code, it's important to prioritize readability. While it may seem counterintuitive, code is read far more often than it is written. One essential tool in a developer's toolkit for creating maintainable code is the **function**.
+
+[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
+
+> 🎥 Click the image above for a video about methods and functions.
+
+> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Functions
+
+At its core, a function is a block of code that can be executed whenever needed. This is especially useful when you need to perform the same task multiple times. Instead of duplicating the logic in several places (which would make updates difficult), you can centralize it in one location and call it whenever necessary. You can even call functions from within other functions!
+
+Equally important is the ability to name a function. While this might seem minor, the name serves as a quick way to document what the code does. Think of it like a label on a button. If you see a button labeled "Cancel timer," you immediately know it will stop the clock.
+
+## Creating and Calling a Function
+
+The syntax for creating a function looks like this:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+For example, if you wanted to create a function to display a greeting, it might look like this:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+To call (or invoke) the function, you use its name followed by `()`. It's worth noting that the function can be defined either before or after you call it; the JavaScript compiler will locate it for you.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** There is a special type of function called a **method**, which you've already been using! For instance, in the example above, we used `console.log`. The difference between a method and a function is that a method is attached to an object (like `console` in this case), while a function is standalone. However, many developers use these terms interchangeably.
+
+### Best Practices for Functions
+
+Here are some best practices to keep in mind when creating functions:
+
+- Always use descriptive names so it's clear what the function does.
+- Use **camelCasing** to combine words.
+- Keep your functions focused on a specific task.
+
+## Passing Information to a Function
+
+To make a function more versatile, you can pass information into it. For example, the `displayGreeting` function above only displays **Hello, world!**, which isn't very flexible. To make it more useful, you can allow the user to specify the name of the person being greeted by adding a **parameter**. A parameter (sometimes called an **argument**) is additional information passed to a function.
+
+Parameters are listed in the function definition inside parentheses and are separated by commas, like this:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+We can update the `displayGreeting` function to accept a name and display it.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+When calling the function, you pass the parameter inside the parentheses.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Default Values
+
+You can make a function even more flexible by adding additional parameters. But what if you don't want to require every parameter to be specified? For example, in the greeting function, you might want the name to be required (since you need to know who you're greeting), but allow the greeting itself to be optional. If no custom greeting is provided, you can use a default value. To set a default value for a parameter, you assign it just like you would a variable: `parameterName = 'defaultValue'`. Here's a complete example:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+When calling the function, you can decide whether or not to provide a value for `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Return Values
+
+So far, the functions we've created always output to the [console](https://developer.mozilla.org/docs/Web/API/console). This is fine for some cases, especially when calling other services. But what if you want a function to perform a calculation and return the result so you can use it elsewhere?
+
+This is where **return values** come in. A return value is sent back by the function and can be stored in a variable, just like a string or number.
+
+If a function returns something, the `return` keyword is used. The `return` keyword expects a value or reference to return, like this:
+
+```javascript
+return myVariable;
+```  
+
+For example, you could create a function that generates a greeting message and returns it to the caller:
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+When calling this function, you can store the returned value in a variable, just like assigning a static value (e.g., `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Functions as Parameters for Functions
+
+As you advance in programming, you'll encounter functions that accept other functions as parameters. This is especially useful when you don't know exactly when something will happen, but you know you need to perform an action in response.
+
+For example, consider [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), which starts a timer and executes code when the timer ends. You need to specify what code to execute, which is a perfect use case for a function!
+
+If you run the code below, you'll see the message **3 seconds has elapsed** after 3 seconds.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Anonymous Functions
+
+Take another look at the example above. We're creating a function with a name that will only be used once. As applications grow more complex, you might find yourself creating many one-time-use functions. This isn't ideal. Fortunately, you don't always need to give a function a name!
+
+When passing a function as a parameter, you can create it directly within the parameter. This is called an anonymous function. You use the `function` keyword, but you don't assign a name.
+
+Here's the previous example rewritten with an anonymous function:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+If you run this code, you'll get the same result. The function is created without a name!
+
+### Fat Arrow Functions
+
+Many programming languages, including JavaScript, offer a shortcut called **arrow functions** or **fat arrow functions**. These use the `=>` symbol, which looks like an arrow. By using `=>`, you can skip the `function` keyword.
+
+Let's rewrite the example one more time using a fat arrow function:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### When to Use Each Approach
+
+Now that you've seen three ways to pass a function as a parameter, you might wonder when to use each. If you plan to reuse the function, define it normally. If it's only needed in one place, an anonymous function is usually best. Whether you use a fat arrow function or the traditional `function` syntax is up to you, but most modern developers prefer `=>`.
+
+---
+
+## 🚀 Challenge
+
+Can you explain the difference between functions and methods in one sentence? Give it a try!
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Review & Self Study
+
+It's a good idea to [read more about arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), as they are increasingly common in modern codebases. Practice writing a function and then rewriting it using this syntax.
+
+## Assignment
+
+[Fun with Functions](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/2-js-basics/2-functions-methods/assignment.md b/translations/en/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..e80b69a1
--- /dev/null
+++ b/translations/en/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-28T11:40:30+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "en"
+}
+-->
+# Fun with Functions
+
+## Instructions
+
+Create various functions, including ones that return a value and ones that don't.
+
+Try to create a function that combines regular parameters with parameters that have default values.
+
+## Rubric
+
+| Criteria | Outstanding                                                                          | Satisfactory                                                   | Needs Improvement |
+| -------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------- | ----------------- |
+|          | Solution includes two or more well-designed functions with a variety of parameters | Solution includes one functional example with limited parameters | Solution contains errors |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/2-js-basics/3-making-decisions/README.md b/translations/en/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..00dfd3bb
--- /dev/null
+++ b/translations/en/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,231 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-28T11:40:43+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "en"
+}
+-->
+# JavaScript Basics: Making Decisions
+
+![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.en.png)
+
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Making decisions and controlling the flow of your code makes it reusable and reliable. This section explains the syntax for managing data flow in JavaScript and its importance when working with Boolean data types.
+
+[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
+
+> 🎥 Click the image above to watch a video about making decisions.
+
+> You can explore this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## A Brief Recap on Booleans
+
+Booleans can only have two values: `true` or `false`. They are used to decide which lines of code should execute when certain conditions are met.
+
+You can set a Boolean value like this:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Booleans are named after George Boole, an English mathematician, philosopher, and logician (1815–1864).
+
+## Comparison Operators and Booleans
+
+Operators are used to evaluate conditions by comparing values, resulting in a Boolean value. Below is a list of commonly used operators:
+
+| Symbol | Description                                                                                                                                                   | Example            |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **Less than**: Compares two values and returns `true` if the value on the left is smaller than the value on the right                                         | `5 < 6 // true`    |
+| `<=`   | **Less than or equal to**: Compares two values and returns `true` if the value on the left is smaller than or equal to the value on the right                 | `5 <= 6 // true`   |
+| `>`    | **Greater than**: Compares two values and returns `true` if the value on the left is larger than the value on the right                                       | `5 > 6 // false`   |
+| `>=`   | **Greater than or equal to**: Compares two values and returns `true` if the value on the left is larger than or equal to the value on the right               | `5 >= 6 // false`  |
+| `===`  | **Strict equality**: Compares two values and returns `true` if the values are equal and of the same data type                                                 | `5 === 6 // false` |
+| `!==`  | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return                                    | `5 !== 6 // true`  |
+
+✅ Test your understanding by writing some comparisons in your browser's console. Were any results unexpected?
+
+## If Statement
+
+An `if` statement runs the code inside its block if the condition evaluates to `true`.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Logical operators are often used to create the condition.
+
+```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
+
+The `else` statement runs the code inside its block when the condition is `false`. It is optional when using an `if` statement.
+
+```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!");
+}
+```
+
+✅ Test your understanding of this code and the next example by running them in a browser console. Change the values of the `currentMoney` and `laptopPrice` variables to see how the `console.log()` output changes.
+
+## Switch Statement
+
+The `switch` statement is used to execute different actions based on different conditions. It allows you to select one of many code blocks to run.
+
+```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}`);
+```
+
+✅ Test your understanding of this code and the next example by running them in a browser console. Change the value of the variable `a` to see how the `console.log()` output changes.
+
+## Logical Operators and Booleans
+
+Sometimes decisions require multiple comparisons, which can be combined using logical operators to produce a Boolean value.
+
+| Symbol | Description                                                                                     | Example                                                                 |
+| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **Logical AND**: Compares two Boolean expressions. Returns `true` **only** if both sides are true | `(5 > 6) && (5 < 6) // One side is false, the other is true. Returns false` |
+| `\|\|` | **Logical OR**: Compares two Boolean expressions. Returns `true` if at least one side is true     | `(5 > 6) \|\| (5 < 6) // One side is false, the other is true. Returns true` |
+| `!`    | **Logical NOT**: Returns the opposite value of a Boolean expression                             | `!(5 > 6) // 5 is not greater than 6, but "!" will return true`         |
+
+## Conditions and Decisions with Logical Operators
+
+Logical operators can be used to create conditions in `if..else` statements.
+
+```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!");
+}
+```
+
+### Negation Operator
+
+You've seen how `if...else` statements can be used to create conditional logic. Anything inside an `if` must evaluate to `true` or `false`. Using the `!` operator, you can _negate_ an expression. Here's an example:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Ternary Expressions
+
+`if...else` isn't the only way to write decision logic. You can also use a ternary operator, which has the following syntax:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Here's a more practical example:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Take a moment to read this code carefully. Do you understand how these operators work?
+
+The example above states:
+
+- If `firstNumber` is greater than `secondNumber`, assign `firstNumber` to `biggestNumber`.
+- Otherwise, assign `secondNumber`.
+
+The ternary expression is simply a compact way of writing the following code:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Challenge
+
+Write a program using logical operators, then rewrite it using a ternary expression. Which syntax do you prefer?
+
+---
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Review & Self Study
+
+Learn more about the various operators available [on MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Check out Josh Comeau's excellent [operator lookup](https://joshwcomeau.com/operator-lookup/)!
+
+## Assignment
+
+[Operators](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/2-js-basics/3-making-decisions/assignment.md b/translations/en/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..e23e23fd
--- /dev/null
+++ b/translations/en/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-28T11:41:39+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "en"
+}
+-->
+# Operators
+
+## Instructions
+
+Experiment with operators. Here's an idea for a program you can create:
+
+You have a group of students from two different grading systems.
+
+### First grading system
+
+One grading system uses grades ranging from 1 to 5, where a grade of 3 or higher means the student passes the course.
+
+### Second grading system
+
+The other grading system uses the grades `A, A-, B, B-, C, C-`, where `A` is the highest grade and `C` is the lowest passing grade.
+
+### The task
+
+Using the array `allStudents`, which represents all students and their grades, create a new array `studentsWhoPass` that includes only the students who pass.
+
+> TIP: Use a for-loop, if...else statements, and comparison operators:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Rubric
+
+| Criteria | Outstanding                   | Satisfactory                  | Needs Improvement               |
+| -------- | ----------------------------- | ----------------------------- | ------------------------------- |
+|          | A complete solution is provided | A partial solution is provided | A solution with errors is provided |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/2-js-basics/4-arrays-loops/README.md b/translations/en/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..69d40fc1
--- /dev/null
+++ b/translations/en/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-28T11:46:35+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "en"
+}
+-->
+# JavaScript Basics: Arrays and Loops
+
+![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.en.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+This lesson introduces the fundamentals of JavaScript, the programming language that adds interactivity to websites. You'll learn about arrays and loops, which are essential for working with and manipulating 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")
+
+> 🎥 Click the images above to watch videos about arrays and loops.
+
+> You can explore this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Arrays
+
+Handling data is a common task in programming, and it becomes much easier when the data is organized in a structured format like arrays. Arrays store data in a list-like structure, and one of their key advantages is the ability to hold different types of data within a single array.
+
+✅ Arrays are everywhere! Can you think of a real-world example of an array, like a solar panel array?
+
+The syntax for creating an array involves square brackets.
+
+```javascript
+let myArray = [];
+```
+
+This is an empty array, but arrays can also be initialized with data already inside them. Multiple values in an array are separated by commas.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Each value in an array is assigned a unique identifier called the **index**, which is a whole number based on its position in the array. For example, in the array above, the string "Chocolate" has an index of 0, while "Rocky Road" has an index of 4. You can use the index with square brackets to retrieve, modify, or add values to the array.
+
+✅ Did you know that arrays start at index 0? In some programming languages, indexes begin at 1. There's an interesting history behind this, which you can [read about on Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+You can use the index to update a value like this:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+And you can add a new value at a specific index like this:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ A more common way to add values to an array is by using array methods like `array.push()`.
+
+To find out how many items are in an array, use the `length` property.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Try it out! Open your browser's console and create an array of your own. Experiment with adding, modifying, and retrieving values.
+
+## Loops
+
+Loops allow us to perform repetitive tasks, saving time and reducing the amount of code we need to write. Each iteration of a loop can involve different variables, values, or conditions. JavaScript offers several types of loops, each with slight differences, but all designed to repeat actions over data.
+
+### For Loop
+
+A `for` loop requires three components to work:
+- `counter`: A variable, usually initialized with a number, that tracks the number of iterations.
+- `condition`: An expression that uses comparison operators to stop the loop when it evaluates to `false`.
+- `iteration-expression`: Executes at the end of each iteration, often used to update the counter.
+
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Run this code in your browser's console. What happens if you tweak the counter, condition, or iteration expression? Can you make the loop count backward, like a countdown?
+
+### While Loop
+
+Unlike the `for` loop, a `while` loop only requires a condition to stop the loop when it evaluates to `false`. Conditions in loops often depend on other values, like counters, which need to be managed during the loop. Counters must be initialized outside the loop, and any updates to meet the condition must happen inside the loop.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Why would you choose a `for` loop over a `while` loop? This question has intrigued 17K viewers on StackOverflow, and you might find their [opinions interesting](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Loops and Arrays
+
+Loops are frequently used with arrays because the loop's condition often depends on the array's length, and the index can serve as the 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
+```
+
+✅ Try looping over an array of your own creation in your browser's console.
+
+---
+
+## 🚀 Challenge
+
+There are other ways to loop over arrays besides `for` and `while` loops. Explore [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), and [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these methods.
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Review & Self Study
+
+JavaScript arrays come with many built-in methods that are incredibly useful for manipulating data. [Learn more about these methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) and try experimenting with some of them, like `push`, `pop`, `slice`, and `splice`, on an array you create.
+
+## Assignment
+
+[Loop an Array](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/2-js-basics/4-arrays-loops/assignment.md b/translations/en/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..aea3c84b
--- /dev/null
+++ b/translations/en/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-28T11:47:15+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "en"
+}
+-->
+# Loop an Array
+
+## Instructions
+
+Create a program that lists every 3rd number between 1 and 20 and displays it in the console.
+
+> TIP: Use a for-loop and adjust the iteration expression.
+
+## Rubric
+
+| Criteria | Outstanding                             | Satisfactory             | Needs Improvement              |
+| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
+|          | Program works correctly and includes comments | Program lacks comments   | Program is incomplete or contains errors |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/2-js-basics/README.md b/translations/en/2-js-basics/README.md
new file mode 100644
index 00000000..54bc1dbf
--- /dev/null
+++ b/translations/en/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-28T11:39:19+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "en"
+}
+-->
+# Introduction to JavaScript
+
+JavaScript is the language of the web. In these four lessons, you'll learn the basics.
+
+### Topics
+
+1. [Variables and Data Types](1-data-types/README.md)
+2. [Functions and Methods](2-functions-methods/README.md)
+3. [Making Decisions with JavaScript](3-making-decisions/README.md)
+4. [Arrays and Loops](4-arrays-loops/README.md)
+
+### Credits
+
+These lessons were created with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer), and [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/3-terrarium/1-intro-to-html/README.md b/translations/en/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..733079b7
--- /dev/null
+++ b/translations/en/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-28T11:48:45+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "en"
+}
+-->
+# Terrarium Project Part 1: Introduction to HTML
+
+![Introduction to HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.en.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+
+> Watch the video
+
+> 
+> [![Git and GitHub basics video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Introduction
+
+HTML, or HyperText Markup Language, is the foundation of the web. If CSS is what styles your HTML and JavaScript adds interactivity, HTML is the structure of your web application. Its syntax even reflects this idea, with tags like "head," "body," and "footer."
+
+In this lesson, you'll use HTML to create the structure of the interface for your virtual terrarium. The interface will include a title and three columns: a left and right column for draggable plants, and a center area that will represent the terrarium itself. By the end of this lesson, you'll see the plants in the columns, but the interface might look a bit odd. Don't worry—CSS styling will be added in the next section to improve its appearance.
+
+### Task
+
+On your computer, create a folder named 'terrarium' and inside it, create a file called 'index.html'. You can do this in Visual Studio Code by opening a new VS Code window, clicking 'open folder,' and navigating to your new folder. Then, click the small 'file' button in the Explorer pane to create the new file:
+
+![explorer in VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.en.png)
+
+Alternatively, you can use these commands in Git Bash:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` or `nano index.html`
+
+> The `index.html` file is recognized by browsers as the default file in a folder. For example, URLs like `https://anysite.com/test` might correspond to a folder named `test` containing an `index.html` file. The `index.html` file doesn't need to appear in the URL.
+
+---
+
+## The DocType and html tags
+
+The first line of an HTML file is the doctype declaration. While it might seem odd to include this line at the very top, it tells older browsers to render the page in standard mode, adhering to the current HTML specification.
+
+> Tip: In VS Code, you can hover over a tag to see information about its usage from the MDN Reference guides.
+
+The second line should be the opening `<html>` tag, followed by its closing tag `</html>`. These tags serve as the root elements of your interface.
+
+### Task
+
+Add these lines at the top of your `index.html` file:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ There are different modes that can be set using the DocType declaration, such as [Quirks Mode and Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). These modes were designed to support very old browsers (like Netscape Navigator 4 and Internet Explorer 5), which are rarely used today. Stick to the standard doctype declaration.
+
+---
+
+## The document's 'head'
+
+The 'head' section of an HTML document contains important information about your web page, known as [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta). In this case, it provides the web server with the following details:
+
+-   The page's title
+-   Metadata, including:
+    -   The character set, specifying the character encoding used in the page
+    -   Browser compatibility information, such as `x-ua-compatible` to indicate support for IE=edge
+    -   Instructions for how the viewport should behave when the page loads. Setting the viewport's initial scale to 1 controls the zoom level upon loading.
+
+### Task
+
+Add a 'head' section to your document between the opening and closing `<html>` tags.
+
+```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>
+```
+
+✅ What happens if you set a viewport meta tag like this: `<meta name="viewport" content="width=600">`? Learn more about the [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## The document's `body`
+
+### HTML Tags
+
+In HTML, you use tags in your `.html` file to create elements for a web page. Most tags have an opening and closing tag, like `<p>hello</p>` for a paragraph. Create the body of your interface by adding `<body>` tags inside the `<html>` tag pair. Your markup will now look like this:
+
+### Task
+
+```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>
+```
+
+Now, you can start building your page. Typically, `<div>` tags are used to create separate elements on a page. You'll create a series of `<div>` elements to hold images.
+
+### Images
+
+The `<img>` tag is one HTML tag that doesn't require a closing tag because its `src` attribute provides all the necessary information to render the image.
+
+Create a folder named `images` in your app and add all the images from the [source code folder](../../../../3-terrarium/solution/images) into it. (There are 14 plant images.)
+
+### Task
+
+Add these plant images into two columns between the `<body></body>` tags:
+
+```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>
+```
+
+> Note: Divs vs. Spans. Divs are 'block' elements, while Spans are 'inline' elements. What would happen if you changed these divs to spans?
+
+With this markup, the plants will now appear on the screen. However, the layout will look unpolished because it hasn't been styled with CSS yet. We'll address this in the next lesson.
+
+Each image includes alt text, which appears if the image cannot be displayed. This is an important attribute for accessibility. You'll learn more about accessibility in future lessons, but for now, remember that the alt attribute provides alternative information for an image if a user cannot view it (due to a slow connection, an error in the `src` attribute, or the use of a screen reader).
+
+✅ Did you notice that each image has the same alt tag? Is this good practice? Why or why not? How could you improve this code?
+
+---
+
+## Semantic markup
+
+Using meaningful 'semantics' in HTML means employing tags that represent the type of data or interaction they were designed for. For example, the main title of a page should use an `<h1>` tag.
+
+Add the following line right below your opening `<body>` tag:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Using semantic markup, such as headers with `<h1>` and unordered lists with `<ul>`, helps screen readers navigate a page. Buttons should be written as `<button>`, and lists as `<li>`. While you can use styled `<span>` elements with click handlers to mimic buttons, it's better for accessibility to use actual button elements. This allows assistive technologies to identify and interact with buttons more effectively. Always aim to use semantic markup whenever possible.
+
+✅ Watch a screen reader in action and [see how it interacts with a web page](https://www.youtube.com/watch?v=OUDV1gqs9GA). Can you understand why non-semantic markup might frustrate users?
+
+## The terrarium
+
+The final part of this interface involves adding markup that will later be styled to create a terrarium.
+
+### Task:
+
+Add this markup above the last `</div>` tag:
+
+```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>
+```
+
+✅ Even though you've added this markup, nothing appears on the screen yet. Why?
+
+---
+
+## 🚀Challenge
+
+HTML includes some quirky 'older' tags that are fun to experiment with, even though you shouldn't use deprecated tags like [these tags](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) in your code. Can you use the old `<marquee>` tag to make the `<h1>` title scroll horizontally? (Remember to remove it afterward!)
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Review & Self Study
+
+HTML is a reliable building block system that has shaped the web into what it is today. Explore its history by studying old and new tags. Can you figure out why some tags were deprecated and others introduced? What tags might be added in the future?
+
+Learn more about building websites for the web and mobile devices at [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+
+## Assignment
+
+[Practice your HTML: Build a blog mockup](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/3-terrarium/1-intro-to-html/assignment.md b/translations/en/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..4e0ce066
--- /dev/null
+++ b/translations/en/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-28T11:50:03+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "en"
+}
+-->
+# Practice your HTML: Build a blog mockup
+
+## Instructions
+
+Imagine you are designing or redesigning your personal website. Create a visual mockup of your site, and then write the HTML markup you would use to construct the various elements of the site. You can do this on paper and scan it, or use software of your choice—just make sure to hand-code the HTML markup.
+
+## Rubric
+
+| Criteria | Outstanding                                                                        | Satisfactory                                                                     | Needs Improvement                                                                 |
+| -------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|          | A blog layout is visually represented with at least 10 elements of markup shown   | A blog layout is visually represented with around 5 elements of markup shown    | A blog layout is visually represented with no more than 3 elements of markup shown|
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/3-terrarium/2-intro-to-css/README.md b/translations/en/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..0fd79b3a
--- /dev/null
+++ b/translations/en/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,282 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-28T11:50:38+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "en"
+}
+-->
+# Terrarium Project Part 2: Introduction to CSS
+
+![Introduction to CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.en.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Introduction
+
+CSS, or Cascading Style Sheets, addresses a key challenge in web development: making your website visually appealing. Styling your applications improves usability and aesthetics, and CSS also enables Responsive Web Design (RWD), ensuring your apps look great on any screen size. Beyond aesthetics, CSS includes features like animations and transforms, allowing for advanced interactions in your apps. The CSS Working Group oversees the current CSS specifications, and you can follow their updates on the [World Wide Web Consortium's site](https://www.w3.org/Style/CSS/members).
+
+> Note: CSS is an evolving language, like everything on the web, and not all browsers support the latest specifications. Always verify your implementations using [CanIUse.com](https://caniuse.com).
+
+In this lesson, we'll add styles to our online terrarium and explore key CSS concepts such as the cascade, inheritance, selectors, positioning, and layout creation. By the end, we'll have styled and structured the terrarium itself.
+
+### Prerequisite
+
+Ensure you have the HTML for your terrarium ready to be styled.
+
+> Watch the video
+
+> 
+> [![Git and GitHub basics video](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Task
+
+In your terrarium folder, create a new file named `style.css`. Import this file in the `<head>` section:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## The Cascade
+
+Cascading Style Sheets follow the principle of "cascading," where the application of styles is determined by their priority. Styles defined by the website author take precedence over browser defaults, and inline styles override those in external stylesheets.
+
+### Task
+
+Add the inline style "color: red" to your `<h1>` tag:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Next, add the following code to your `style.css` file:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Which color appears in your web app? Why? Can you find a way to override styles? When would you want to do this, or why not?
+
+---
+
+## Inheritance
+
+Styles can be inherited from parent elements to child elements, meaning nested elements often inherit the styles of their ancestors.
+
+### Task
+
+Set the font for the body and check if a nested element inherits the font:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Open your browser's console and navigate to the 'Elements' tab to observe the font of the `<h1>` tag. You'll see that it inherits the font from the body, as indicated by the browser:
+
+![inherited font](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.en.png)
+
+✅ Can you make a nested style inherit a different property?
+
+---
+
+## CSS Selectors
+
+### Tags
+
+Currently, your `style.css` file has only a few tags styled, and the app looks a bit odd:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Styling tags this way allows you to control individual elements, but to style multiple plants in your terrarium, you'll need to use CSS selectors.
+
+### Ids
+
+Add styles to position the left and right containers. Since there is only one left container and one right container, they are assigned ids in the markup. Use `#` to style them:
+
+```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;
+}
+```
+
+Here, the containers are positioned absolutely to the far left and right of the screen, with their widths defined in percentages to ensure they scale properly on smaller screens.
+
+✅ This code is somewhat repetitive and not "DRY" (Don't Repeat Yourself). Can you find a better way to style these ids, perhaps by combining an id and a class? You would need to update the markup and refactor the CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Classes
+
+In the example above, you styled two unique elements. To apply styles to multiple elements, use CSS classes. Style the plants in the left and right containers this way.
+
+Notice that each plant in the HTML markup has both ids and classes. The ids are used by JavaScript later to manipulate plant placement, while the classes provide consistent styling for all plants.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Add the following to your `style.css` file:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Key points in this snippet include the combination of relative and absolute positioning, which we'll discuss in the next section. Pay attention to how heights are managed using percentages:
+
+- The plant holder's height is set to 13%, ensuring all plants fit within each vertical container without scrolling.
+- The plant holder is shifted to the left to center the plants within their container. The images have transparent backgrounds to make them draggable, so they need to be adjusted for better alignment.
+- The plant's max-width is set to 150%, allowing it to scale down as the browser window shrinks. Resize your browser to see how the plants remain in their containers while scaling down.
+
+Also noteworthy is the use of z-index, which controls the stacking order of elements (ensuring plants appear above the container and look like they're inside the terrarium).
+
+✅ Why do you need both a plant holder and a plant CSS selector?
+
+## CSS Positioning
+
+Combining position properties (static, relative, fixed, absolute, and sticky) can be tricky, but when done correctly, it provides precise control over page elements.
+
+Absolutely positioned elements are placed relative to their nearest positioned ancestor, or the document body if no ancestor exists.
+
+Relatively positioned elements are adjusted based on CSS instructions, moving away from their original position.
+
+In this example, the `plant-holder` is relatively positioned within an absolutely positioned container. This setup ensures the side bar containers are pinned to the left and right, while the `plant-holder` adjusts itself within the side bars, creating space for plants to be arranged vertically.
+
+> The `plant` itself is also absolutely positioned, which is necessary for making it draggable, as you'll learn in the next lesson.
+
+✅ Experiment with changing the positioning types of the side containers and the plant-holder. What happens?
+
+## CSS Layouts
+
+Now, use what you've learned to build the terrarium entirely with CSS!
+
+First, style the `.terrarium` div children as a rounded rectangle:
+
+```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;
+}
+```
+
+Notice the use of percentages here. When you resize your browser, the jar scales accordingly. Pay attention to the width and height percentages for the jar elements and how each element is absolutely centered and pinned to the bottom of the viewport.
+
+The `rem` unit is used for the border-radius, which is a font-relative measurement. Learn more about this type of relative measurement in the [CSS spec](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Try changing the jar colors and opacity compared to the dirt. What happens? Why?
+
+---
+
+## 🚀Challenge
+
+Add a 'bubble' shine to the bottom-left area of the jar to make it appear more glass-like. Style the `.jar-glossy-long` and `.jar-glossy-short` to create a reflective shine. Here's the desired result:
+
+![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.en.png)
+
+To complete the post-lecture quiz, explore this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Review & Self Study
+
+CSS may seem simple, but styling an app perfectly for all browsers and screen sizes can be challenging. Tools like CSS-Grid and Flexbox make this process more structured and reliable. Learn about these tools by playing [Flexbox Froggy](https://flexboxfroggy.com/) and [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Assignment
+
+[CSS Refactoring](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/3-terrarium/2-intro-to-css/assignment.md b/translations/en/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..55be3e7a
--- /dev/null
+++ b/translations/en/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-28T11:51:52+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "en"
+}
+-->
+# CSS Refactoring
+
+## Instructions
+
+Restyle the terrarium using either Flexbox or CSS Grid, and take screenshots to demonstrate that you have tested it on multiple browsers. You may need to modify the markup, so create a new version of the app with the artwork in place for your refactor. Don't worry about making the elements draggable; for now, focus only on refactoring the HTML and CSS.
+
+## Rubric
+
+| Criteria | Exemplary                                                         | Adequate                      | Needs Improvement                    |
+| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
+|          | Present a completely restyled terrarium using Flexbox or CSS Grid | Restyle a few of the elements | Fail to restyle the terrarium at all |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/en/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..360add8f
--- /dev/null
+++ b/translations/en/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -0,0 +1,235 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "30f8903a1f290e3d438dc2c70fe60259",
+  "translation_date": "2025-08-28T11:52:32+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "en"
+}
+-->
+# Terrarium Project Part 3: DOM Manipulation and a Closure
+
+![DOM and a closure](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.en.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Introduction
+
+Manipulating the DOM, or the "Document Object Model," is a fundamental part of web development. According to [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web." The challenges of DOM manipulation have often led developers to use JavaScript frameworks instead of plain JavaScript to manage the DOM, but here, we'll tackle it ourselves!
+
+Additionally, this lesson introduces the concept of a [JavaScript closure](https://developer.mozilla.org/docs/Web/JavaScript/Closures), which can be thought of as a function enclosed within another function, allowing the inner function to access the outer function's scope.
+
+> JavaScript closures are a broad and complex topic. This lesson covers the basic idea that in the terrarium's code, you'll encounter a closure: an inner function and an outer function structured in a way that lets the inner function access the outer function's scope. For more detailed information, check out the [comprehensive documentation](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+We'll use a closure to manipulate the DOM.
+
+Think of the DOM as a tree that represents all the ways a web page document can be manipulated. Various APIs (Application Program Interfaces) have been created to allow programmers, using their preferred programming language, to access the DOM and edit, rearrange, or otherwise manage it.
+
+![DOM tree representation](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.en.png)
+
+> A representation of the DOM and the HTML markup that references it. From [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+In this lesson, we'll complete our interactive terrarium project by writing JavaScript that lets users move plants on the page.
+
+### Prerequisite
+
+You should already have the HTML and CSS for your terrarium set up. By the end of this lesson, you'll be able to drag plants into and out of the terrarium.
+
+### Task
+
+In your terrarium folder, create a new file called `script.js`. Import this file in the `<head>` section:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Note: Use `defer` when importing an external JavaScript file into the HTML file to ensure the JavaScript runs only after the HTML file has fully loaded. Alternatively, you could use the `async` attribute, which allows the script to execute while the HTML file is still parsing. However, in this case, it's important for the HTML elements to be fully available for dragging before the drag script executes.
+
+---
+
+## The DOM elements
+
+The first step is to create references to the elements you want to manipulate in the DOM. In this case, these are the 14 plants currently located in the sidebars.
+
+### Task
+
+```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'));
+```
+
+What's happening here? You're referencing the document and searching its DOM for an element with a specific Id. Recall from the first HTML lesson that you assigned unique Ids to each plant image (`id="plant1"`). Now, you'll use those Ids. After identifying each element, you pass it to a function called `dragElement`, which you'll create shortly. This makes the element draggable—or it will soon.
+
+✅ Why do we reference elements by Id instead of their CSS class? Refer back to the CSS lesson for the answer.
+
+---
+
+## The Closure
+
+Now you're ready to create the `dragElement` closure, which is an outer function that encloses one or more inner functions (in this case, three).
+
+Closures are useful when multiple functions need access to the scope of an outer function. Here's an example:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+In this example, the `displayCandy` function surrounds a function that adds a new candy type to an array already defined within the function. If you run this code, the `candy` array will be undefined because it's a local variable (local to the closure).
+
+✅ How can you make the `candy` array accessible? Try moving it outside the closure. This way, the array becomes global instead of being limited to the closure's local scope.
+
+### Task
+
+Under the element declarations in `script.js`, create a function:
+
+```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` receives its `terrariumElement` object from the declarations at the top of the script. Then, you set some local positions to `0` for the object passed into the function. These local variables will be manipulated for each element as you add drag-and-drop functionality within the closure. The terrarium will be populated by these dragged elements, so the application needs to track their placement.
+
+Additionally, the `terrariumElement` passed to this function is assigned a `pointerdown` event, which is part of the [web APIs](https://developer.mozilla.org/docs/Web/API) designed to assist with DOM management. `onpointerdown` triggers when a button is pressed or, in this case, when a draggable element is touched. This event handler works on both [web and mobile browsers](https://caniuse.com/?search=onpointerdown), with a few exceptions.
+
+✅ The [event handler `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) has broader cross-browser support. Why wouldn't you use it here? Consider the specific type of screen interaction you're aiming for.
+
+---
+
+## The Pointerdrag function
+
+The `terrariumElement` is now ready to be dragged. When the `onpointerdown` event is triggered, the `pointerDrag` function is called. Add this function right below the line `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Task 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Several things happen here. First, you prevent the default events that typically occur on pointerdown by using `e.preventDefault();`. This gives you more control over the interface's behavior.
+
+> After completing the script file, revisit this line and try removing `e.preventDefault()`. What changes?
+
+Next, open `index.html` in a browser and inspect the interface. When you click a plant, you'll see how the 'e' event is captured. Explore the event to see the wealth of information gathered from a single pointerdown event!
+
+Then, note how the local variables `pos3` and `pos4` are set to `e.clientX`. You can find the `e` values in the inspection pane. These values capture the x and y coordinates of the plant at the moment you click or touch it. You'll need precise control over the plants' behavior as you drag them, so you track their coordinates.
+
+✅ Is it becoming clearer why this app is built with one large closure? Without it, how would you maintain scope for each of the 14 draggable plants?
+
+Complete the initial function by adding two more pointer event manipulations under `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+
+Here, you're specifying that the plant should move with the pointer as you drag it and stop moving when you release it. `onpointermove` and `onpointerup` are part of the same API as `onpointerdown`. The interface will throw errors now because you haven't defined the `elementDrag` and `stopElementDrag` functions yet, so let's build those next.
+
+---
+
+## The elementDrag and stopElementDrag functions
+
+Complete the closure by adding two more internal functions to handle what happens when you drag a plant and when you stop dragging it. The goal is to allow users to drag any plant at any time and place it anywhere on the screen. This interface is intentionally flexible (there's no drop zone, for example) to let users design their terrarium freely by adding, removing, and repositioning plants.
+
+### Task
+
+Add the `elementDrag` function right after the closing curly bracket of `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';
+}
+```
+
+In this function, you perform several updates to the initial positions (`pos1` through `pos4`) that were set as local variables in the outer function. Here's what's happening:
+
+As you drag, you update `pos1` by setting it equal to `pos3` (which was previously set to `e.clientX`) minus the current `e.clientX` value. You perform a similar operation for `pos2`. Then, you update `pos3` and `pos4` to the new x and y coordinates of the element. You can observe these changes in the console as you drag. Finally, you adjust the plant's CSS style to set its new position based on the updated values of `pos1` and `pos2`, calculating the plant's top and left x and y coordinates by comparing its offset with these new positions.
+
+> `offsetTop` and `offsetLeft` are CSS properties that set an element's position relative to its parent, as long as the parent isn't positioned as `static`.
+
+These position recalculations allow you to fine-tune the terrarium's behavior.
+
+### Task 
+
+The final step is to add the `stopElementDrag` function after the closing curly bracket of `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+This small function resets the `onpointerup` and `onpointermove` events, enabling you to either restart the plant's movement by dragging it again or start dragging a different plant.
+
+✅ What happens if you don't set these events to null?
+
+Now your project is complete!
+
+🥇Congratulations! You've finished your beautiful terrarium. ![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.en.png)
+
+---
+
+## 🚀Challenge
+
+Add a new event handler to your closure to add more functionality to the plants. For example, double-click a plant to bring it to the front. Get creative!
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Review & Self Study
+
+While dragging elements around the screen may seem simple, there are many ways to achieve this and various challenges depending on the desired effect. In fact, there's a dedicated [drag and drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) you can explore. We didn't use it in this module because the effect we wanted was slightly different, but try it out in your own project to see what you can create.
+
+Learn more about pointer events in the [W3C docs](https://www.w3.org/TR/pointerevents1/) and on [MDN web docs](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Always check browser compatibility using [CanIUse.com](https://caniuse.com/).
+
+## Assignment
+
+[Work a bit more with the DOM](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/en/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..0db47b8a
--- /dev/null
+++ b/translations/en/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-28T11:53:46+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "en"
+}
+-->
+# Work a bit more with the DOM
+
+## Instructions
+
+Explore the DOM further by 'adopting' a DOM element. Visit the MDN's [list of DOM interfaces](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) and choose one. Find an example of it being used on a website, and write an explanation of how it is utilized.
+
+## Rubric
+
+| Criteria | Outstanding                                   | Satisfactory                                     | Needs Improvement       |
+| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|          | Paragraph explanation is provided, with example | Paragraph explanation is provided, without example | No explanation is provided |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the definitive source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/3-terrarium/README.md b/translations/en/3-terrarium/README.md
new file mode 100644
index 00000000..6c61aaa4
--- /dev/null
+++ b/translations/en/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-28T11:48:27+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "en"
+}
+-->
+# My Terrarium: A project to learn about HTML, CSS, and DOM manipulation using JavaScript 🌵🌱
+
+A small drag-and-drop coding exercise. With a bit of HTML, JS, and CSS, you’ll be able to create a web interface, style it, and even add various interactions of your choice.
+
+![my terrarium](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.en.png)
+
+# Lessons
+
+1. [Introduction to HTML](./1-intro-to-html/README.md)
+2. [Introduction to CSS](./2-intro-to-css/README.md)
+3. [Introduction to DOM and JS Closures](./3-intro-to-DOM-and-closures/README.md)
+
+## Credits
+
+Written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
+
+The CSS-based terrarium design was inspired by Jakub Mandra's glass jar [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+The artwork was hand-drawn by [Jen Looper](http://jenlooper.com) using Procreate.
+
+## Deploy your Terrarium
+
+You can deploy or publish your terrarium on the web using Azure Static Web Apps.
+
+1. Fork this repository.
+
+2. Click this button:
+
+[![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. Follow the wizard to create your app. Make sure to set the app root to either `/solution` or the root of your codebase. This app doesn’t include an API, so you don’t need to add one. A GitHub folder will be created in your forked repository, which will help Azure Static Web Apps' build services to build and publish your app to a new URL.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/3-terrarium/solution/README.md b/translations/en/3-terrarium/solution/README.md
new file mode 100644
index 00000000..afa39069
--- /dev/null
+++ b/translations/en/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-28T11:50:16+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "en"
+}
+-->
+# My Terrarium: A project to learn about HTML, CSS, and DOM manipulation using JavaScript 🌵🌱
+
+A small drag-and-drop coding exercise. With a bit of HTML, JS, and CSS, you can create a web interface, style it, and add interactivity.
+
+![my terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.en.png)
+
+## Credits
+
+Written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
+
+The CSS-based terrarium design was inspired by Jakub Mandra's glass jar [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+The artwork was hand-drawn by [Jen Looper](http://jenlooper.com) using Procreate.
+
+## Deploy your Terrarium
+
+You can deploy or publish your terrarium to the web using Azure Static Web Apps.
+
+1. Fork this repository.
+
+2. Click this button:
+
+[![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. Follow the steps in the wizard to create your app. Make sure to set the app root to either `/solution` or the root of your codebase. This app doesn't include an API, so you don't need to add one. A `.github` folder will be created in your forked repository, which will help Azure Static Web Apps' build service compile and publish your app to a new URL.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/4-typing-game/README.md b/translations/en/4-typing-game/README.md
new file mode 100644
index 00000000..9d877d08
--- /dev/null
+++ b/translations/en/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-28T11:56:37+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "en"
+}
+-->
+# Event-Driven Programming - Build a Typing Game
+
+## Introduction
+
+Typing is one of the most overlooked skills for developers. Being able to quickly translate your thoughts into code allows your creativity to flow seamlessly. And what better way to practice than by playing a game?
+
+> Let's build a typing game!
+
+You'll use the JavaScript, HTML, and CSS skills you've learned so far to create a typing game. The game will display a random quote (we're using [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) quotes) and measure how long it takes the player to type it accurately. You'll use the JavaScript, HTML, and CSS skills you've learned so far to create this game.
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## Prerequisites
+
+This lesson assumes you're familiar with the following concepts:
+
+- Creating text input and button elements
+- Using CSS and applying styles with classes
+- JavaScript basics
+  - Working with arrays
+  - Generating random numbers
+  - Retrieving the current time
+
+## Lesson
+
+[Creating a typing game by using event-driven programming](./typing-game/README.md)
+
+## Credits
+
+Written with ♥️ by [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/4-typing-game/solution/README.md b/translations/en/4-typing-game/solution/README.md
new file mode 100644
index 00000000..6c0b26c8
--- /dev/null
+++ b/translations/en/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T11:58:40+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "en"
+}
+-->
+This is a placeholder, left blank purposefully
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/4-typing-game/typing-game/README.md b/translations/en/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..5488f435
--- /dev/null
+++ b/translations/en/4-typing-game/typing-game/README.md
@@ -0,0 +1,351 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-28T11:56:55+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "en"
+}
+-->
+# Creating a game using events
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Event driven programming
+
+When building a browser-based application, we provide a graphical user interface (GUI) for users to interact with. The most common ways users interact with the browser are by clicking and typing in various elements. The challenge for us as developers is that we don’t know when they’ll perform these actions!
+
+[Event-driven programming](https://en.wikipedia.org/wiki/Event-driven_programming) is the type of programming we use to create our GUI. If we break this term down, the key word here is **event**. According to [Merriam-Webster](https://www.merriam-webster.com/dictionary/event), an event is "something which happens." This perfectly describes our situation. We know something will happen that we want to respond to with code, but we don’t know when it will occur.
+
+To specify the code we want to execute, we create a function. In [procedural programming](https://en.wikipedia.org/wiki/Procedural_programming), functions are called in a specific order. This is also true in event-driven programming, but the difference lies in **how** the functions are called.
+
+To handle events (like button clicks or typing), we register **event listeners**. An event listener is a function that waits for an event to occur and executes in response. Event listeners can update the UI, make server calls, or perform any other necessary actions based on the user’s input. We add an event listener using [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) and provide a function to execute.
+
+> **NOTE:** There are many ways to create event listeners. You can use anonymous functions or create named ones. You can also use shortcuts, like setting the `click` property, or use `addEventListener`. In this exercise, we’ll focus on `addEventListener` and anonymous functions, as this is one of the most common techniques used by web developers. It’s also the most flexible, as `addEventListener` works for all events, and the event name can be passed as a parameter.
+
+### Common events
+
+There are [dozens of events](https://developer.mozilla.org/docs/Web/Events) you can listen to when building an application. Essentially, anything a user does on a page triggers an event, giving you a lot of power to create the desired user experience. Fortunately, you’ll typically only need a small subset of these events. Here are a few common ones (including the two we’ll use for our game):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Triggered when the user clicks on something, usually a button or hyperlink.
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Triggered when the user right-clicks.
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Triggered when the user highlights text.
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Triggered when the user types text.
+
+## Creating the game
+
+We’re going to create a game to explore how events work in JavaScript. Our game will test a player’s typing skills, which is one of the most underrated skills every developer should practice. The general flow of the game will be:
+
+- The player clicks a start button and is presented with a quote to type.
+- The player types the quote as quickly as possible in a textbox.
+  - As each word is completed, the next one is highlighted.
+  - If the player makes a typo, the textbox turns red.
+  - When the player completes the quote, a success message is displayed along with the elapsed time.
+
+Let’s build the game and learn about events!
+
+### File structure
+
+We’ll need three files: **index.html**, **script.js**, and **style.css**. Let’s set them up to make things easier.
+
+- Create a new folder for your work by opening a console or terminal and running the following command:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Open Visual Studio Code:
+
+```bash
+code .
+```
+
+- Add three files to the folder in Visual Studio Code with the following names:
+  - index.html
+  - script.js
+  - style.css
+
+## Create the user interface
+
+Based on the requirements, we know we’ll need a few elements on our HTML page. Think of this as a recipe where we need specific ingredients:
+
+- A place to display the quote for the user to type.
+- A place to display messages, like a success message.
+- A textbox for typing.
+- A start button.
+
+Each of these elements will need IDs so we can interact with them in JavaScript. We’ll also add references to the CSS and JavaScript files we’re creating.
+
+Create a new file named **index.html** and add the following 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>
+```
+
+### Launch the application
+
+It’s always a good idea to develop iteratively and check how things look. Let’s launch our application. There’s a great Visual Studio Code extension called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) that hosts your application locally and refreshes the browser whenever you save.
+
+- Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) by clicking **Install** on the linked page.
+  - Your browser will prompt you to open Visual Studio Code, and Visual Studio Code will prompt you to install the extension.
+  - Restart Visual Studio Code if prompted.
+- Once installed, press Ctrl-Shift-P (or Cmd-Shift-P) in Visual Studio Code to open the command palette.
+- Type **Live Server: Open with Live Server**.
+  - Live Server will start hosting your application.
+- Open a browser and navigate to **https://localhost:5500**.
+- You should now see the page you created!
+
+Let’s add some functionality.
+
+## Add the CSS
+
+With the HTML in place, let’s add CSS for basic styling. We’ll highlight the word the player should type and change the textbox color if the player types incorrectly. We’ll do this using two classes.
+
+Create a new file named **style.css** and add the following syntax:
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ Feel free to customize the CSS to make the page more visually appealing:
+
+- Choose a different font.
+- Add colors to the headers.
+- Adjust the sizes of elements.
+
+## JavaScript
+
+With the UI ready, let’s focus on the JavaScript logic. We’ll break this into a few steps:
+
+- [Create the constants](../../../../4-typing-game/typing-game)
+- [Add an event listener to start the game](../../../../4-typing-game/typing-game)
+- [Add an event listener for typing](../../../../4-typing-game/typing-game)
+
+First, create a new file named **script.js**.
+
+### Add the constants
+
+We’ll need a few constants to simplify our programming. Think of these as the ingredients for our recipe:
+
+- An array containing all the quotes.
+- An empty array to store the words of the current quote.
+- A variable to track the index of the word the player is typing.
+- A variable to store the time when the player clicked start.
+
+We’ll also need references to the UI elements:
+
+- The textbox (**typed-value**).
+- The quote display (**quote**).
+- The message display (**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');
+```
+
+✅ Add more quotes to make your game more interesting.
+
+> **NOTE:** While we can retrieve elements in code using `document.getElementById`, we’ll use constants to avoid typos when referencing these elements repeatedly. Frameworks like [Vue.js](https://vuejs.org/) or [React](https://reactjs.org/) can help centralize your code for better management.
+
+Take a moment to watch a video about using `const`, `let`, and `var`:
+
+[![Types of variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
+
+> 🎥 Click the image above to watch the video.
+
+### Add start logic
+
+The game begins when the player clicks the start button. Since we don’t know when they’ll click it, we’ll use an [event listener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). This listener will execute code when the user clicks start.
+
+When the user clicks **start**, we’ll select a quote, set up the UI, and initialize tracking for the current word and timing. Add the following JavaScript, and we’ll explain it afterward:
+
+```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();
+});
+```
+
+Here’s what the code does:
+
+- **Word tracking setup:**
+  - Use [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) and [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) to randomly select a quote from the `quotes` array.
+  - Convert the `quote` into an array of `words` to track the player’s progress.
+  - Set `wordIndex` to 0, as the player starts with the first word.
+- **UI setup:**
+  - Create an array of `spanWords`, where each word is wrapped in a `span` element for highlighting.
+  - Use `join` to create a string and update the `innerHTML` of `quoteElement` to display the quote.
+  - Highlight the first word by setting its `className` to `highlight`.
+  - Clear the `messageElement` by setting its `innerText` to an empty string.
+- **Textbox setup:**
+  - Clear the `value` of `typedValueElement`.
+  - Set focus to `typedValueElement`.
+- **Start the timer:** Call `getTime`.
+
+### Add typing logic
+
+As the player types, an `input` event is triggered. This event listener will check if the player is typing correctly and handle the game’s current state. Add the following code to the end of **script.js**, and we’ll explain it afterward:
+
+```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';
+  }
+});
+```
+
+Here’s what the code does:
+
+- **Quote completion:** If `typedValue` matches `currentWord` and `wordIndex` is the last word in `words`:
+  - Calculate `elapsedTime` by subtracting `startTime` from the current time.
+  - Convert `elapsedTime` from milliseconds to seconds.
+  - Display a success message.
+- **Word completion:** If `typedValue` ends with a space and matches `currentWord`:
+  - Clear the `value` of `typedElement` for the next word.
+  - Increment `wordIndex` to move to the next word.
+  - Reset the `className` of all `childNodes` in `quoteElement` to default.
+  - Highlight the next word by setting its `className` to `highlight`.
+- **Correct typing:** If `currentWord` starts with `typedValue`:
+  - Clear the `className` of `typedValueElement` to display it normally.
+- **Error:** If none of the above conditions are met:
+  - Set the `className` of `typedValueElement` to `error`.
+
+## Test your application
+
+You’ve reached the end! The final step is to test your application. Try it out! Don’t worry if there are errors—**all developers** encounter them. Read the error messages and debug as needed.
+
+Click **start** and begin typing! It should look similar to the animation shown earlier.
+
+![Animation of the game in action](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Challenge
+
+Add more features:
+
+- Disable the `input` event listener when the game is complete, and re-enable it when the button is clicked.
+- Disable the textbox after the player completes the quote.
+- Display a modal dialog box with the success message.
+- Save high scores using [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Review & Self Study
+
+Learn about [all the events available](https://developer.mozilla.org/docs/Web/Events) to developers through the web browser, and think about situations where each one would be useful.
+
+## Assignment
+
+[Develop a new keyboard game](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/4-typing-game/typing-game/assignment.md b/translations/en/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..13fa7659
--- /dev/null
+++ b/translations/en/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-28T11:58:29+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "en"
+}
+-->
+# Create a new keyboard game
+
+## Instructions
+
+Develop a small game that utilizes keyboard events to perform actions. It could be a unique typing game or an artistic game that paints pixels on the screen with keystrokes. Be imaginative!
+
+## Rubric
+
+| Criteria | Outstanding              | Satisfactory             | Needs Work        |
+| -------- | ------------------------ | ------------------------ | ----------------- |
+|          | A complete game is provided | The game is very basic   | The game contains errors |
+|          |                          |                          |                   |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/1-about-browsers/README.md b/translations/en/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..20f9ba23
--- /dev/null
+++ b/translations/en/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-28T11:23:17+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "en"
+}
+-->
+# Browser Extension Project Part 1: All about Browsers
+
+![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.en.jpg)
+> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Introduction
+
+Browser extensions enhance a browser's functionality. Before creating one, it's important to understand how browsers operate.
+
+### About the browser
+
+In this lesson series, you'll learn how to create a browser extension compatible with Chrome, Firefox, and Edge. In this part, you'll explore how browsers work and set up the foundation for your browser extension.
+
+But what exactly is a browser? It's a software application that enables users to access content from a server and display it on web pages.
+
+✅ A bit of history: The first browser, called 'WorldWideWeb,' was created by Sir Timothy Berners-Lee in 1990.
+
+![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.en.jpg)
+> Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+When a user connects to the internet using a URL (Uniform Resource Locator), typically through an `http` or `https` address, the browser communicates with a web server to retrieve a web page.
+
+The browser's rendering engine then displays the page on the user's device, whether it's a mobile phone, desktop, or laptop.
+
+Browsers can also cache content to avoid fetching it from the server repeatedly. They can record browsing history, store 'cookies' (small data files containing user activity information), and more.
+
+It's important to note that not all browsers are the same! Each has its own strengths and weaknesses. A professional web developer must ensure web pages perform well across different browsers, including handling small screens like mobile phones and offline users.
+
+A very useful website to bookmark in your preferred browser is [caniuse.com](https://www.caniuse.com). It provides lists of supported technologies, helping you build web pages that cater to your users effectively.
+
+✅ How can you determine which browsers are most popular among your website's users? Check your analytics. You can integrate various analytics tools into your web development process to identify the most-used browsers.
+
+## Browser extensions
+
+Why create a browser extension? Extensions are convenient tools for quick access to repetitive tasks. For instance, you might use a color-picker extension to check colors on web pages or a password manager extension to store and retrieve passwords.
+
+Developing browser extensions is also enjoyable. They focus on a limited set of tasks and perform them efficiently.
+
+✅ What are your favorite browser extensions? What tasks do they help you with?
+
+### Installing extensions
+
+Before building your own extension, familiarize yourself with the process of creating and deploying one. While the steps vary slightly between browsers, the process is similar for Chrome and Firefox, as shown in this Edge example:
+
+![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.en.png)
+
+> Note: Make sure to toggle on developer mode and allow extensions from other stores.
+
+The general process is as follows:
+
+- Build your extension using `npm run build`.
+- Open the browser's extensions pane via the "Settings and more" button (the `...` icon) in the top-right corner.
+- For a new installation, select `load unpacked` to upload the extension from its build folder (in this case, `/dist`).
+- If you're updating an existing extension, click `reload`.
+
+✅ These instructions apply to extensions you create yourself. To install extensions from a browser's extension store, visit the respective [stores](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) and install your desired extension.
+
+### Get Started
+
+You'll create a browser extension that displays your region's carbon footprint, including energy usage and energy sources. The extension will feature a form to collect an API key for accessing CO2 Signal's API.
+
+**What you'll need:**
+
+- [An API key](https://www.co2signal.com/): Enter your email on this page to receive one.
+- The [code for your region](http://api.electricitymap.org/v3/zones) from the [Electricity Map](https://www.electricitymap.org/map) (e.g., 'US-NEISO' for Boston).
+- The [starter code](../../../../5-browser-extension/start): Download the `start` folder to complete the code.
+- [NPM](https://www.npmjs.com): Install NPM locally to manage the packages listed in your `package.json` file.
+
+✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon).
+
+Take a moment to review the codebase:
+
+dist
+    -|manifest.json (default settings)
+    -|index.html (front-end HTML markup)
+    -|background.js (background JavaScript)
+    -|main.js (compiled JavaScript)
+src
+    -|index.js (your JavaScript code)
+
+✅ Once you have your API key and region code, save them in a note for future reference.
+
+### Build the HTML for the extension
+
+This extension will have two views: one for collecting the API key and region code:
+
+![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.en.png)
+
+And another for displaying the region's carbon usage:
+
+![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.en.png)
+
+Start by creating the HTML for the form and styling it with CSS.
+
+In the `/dist` folder, build a form and a results area. In the `index.html` file, populate the designated form area:
+
+```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>	
+```
+This form will save the input information to local storage.
+
+Next, create the results area. Add some divs below the closing form tag:
+
+```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>
+```
+Now, try building the extension. Install the package dependencies:
+
+```
+npm install
+```
+
+This command uses npm (Node Package Manager) to install webpack for the build process. Webpack bundles the code, and you can see the output in `/dist/main.js`.
+
+At this stage, the extension should build successfully. If you deploy it in Edge, you'll see a neatly displayed form.
+
+Congratulations! You've taken the first steps toward building a browser extension. In the next lessons, you'll add more functionality and features.
+
+---
+
+## 🚀 Challenge
+
+Visit a browser extension store and install an extension. Explore its files to uncover interesting details. What do you find?
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Review & Self Study
+
+In this lesson, you learned about the history of web browsers. Take some time to explore how the inventors of the World Wide Web envisioned its use. Here are some useful resources:
+
+[The History of Web Browsers](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[History of the Web](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[An interview with 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)
+
+## Assignment 
+
+[Restyle your extension](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/1-about-browsers/assignment.md b/translations/en/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..fca9ed92
--- /dev/null
+++ b/translations/en/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-28T11:24:16+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "en"
+}
+-->
+# Restyle your Extension
+
+## Instructions
+
+The codebase for this extension includes pre-existing styles, but you’re not obligated to use them. Personalize your extension by modifying its CSS file to create your own unique design.
+
+## Rubric
+
+| Criteria | Outstanding                                  | Satisfactory          | Needs Improvement |
+| -------- | -------------------------------------------- | --------------------- | ----------------- |
+|          | Code is submitted with fully functional new styles | Styling is incomplete | Styles contain errors |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the definitive source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/en/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..4b55f4cc
--- /dev/null
+++ b/translations/en/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-28T11:29:49+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "en"
+}
+-->
+# Browser Extension Project Part 2: Call an API, use Local Storage
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Introduction
+
+In this lesson, you'll learn how to call an API by submitting the form in your browser extension and displaying the results within the extension. Additionally, you'll explore how to store data in your browser's local storage for future use and reference.
+
+✅ Follow the numbered segments in the relevant files to know where to place your code.
+
+### Set up the elements to manipulate in the extension:
+
+By now, you should have created the HTML for the form and the results `<div>` in your browser extension. From this point forward, you'll work in the `/src/index.js` file to build your extension step by step. Refer to the [previous lesson](../1-about-browsers/README.md) for instructions on setting up your project and the build process.
+
+In your `index.js` file, start by creating some `const` variables to hold the values associated with different fields:
+
+```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');
+```
+
+All of these fields are referenced by their CSS class, as you set them up in the HTML during the previous lesson.
+
+### Add listeners
+
+Next, add event listeners to the form and the clear button that resets the form. This ensures that when a user submits the form or clicks the reset button, an action is triggered. Also, add the call to initialize the app at the bottom of the file:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Notice the shorthand used to listen for a submit or click event, and how the event is passed to the handleSubmit or reset functions. Can you write the equivalent of this shorthand in a longer format? Which approach do you prefer?
+
+### Build out the init() function and the reset() function:
+
+Now, you'll create the function that initializes the extension, called `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();
+}
+
+```
+
+This function contains some interesting logic. As you read through it, can you understand what happens?
+
+- Two `const` variables are set up to check if the user has stored an APIKey and region code in local storage.
+- If either of these is null, the form is displayed by changing its style to 'block.'
+- The results, loading indicator, and clear button are hidden, and any error text is cleared.
+- If both the key and region exist, a routine is started to:
+  - Call the API to retrieve carbon usage data.
+  - Hide the results area.
+  - Hide the form.
+  - Display the reset button.
+
+Before proceeding, it's helpful to learn about an important browser feature: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage is a convenient way to store strings in the browser as `key-value` pairs. This type of web storage can be managed using JavaScript to handle data within the browser. LocalStorage does not expire, whereas SessionStorage, another type of web storage, is cleared when the browser is closed. Each type of storage has its own advantages and disadvantages.
+
+> Note: Your browser extension has its own local storage, separate from the main browser window, which behaves independently.
+
+You can set your APIKey to have a string value, for example, and view it in Edge by "inspecting" a web page (right-click to inspect) and navigating to the Applications tab to see the storage.
+
+![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.en.png)
+
+✅ Consider situations where you would NOT want to store certain data in LocalStorage. Generally, storing API Keys in LocalStorage is a bad idea! Can you understand why? In this case, since the app is purely for learning purposes and won't be deployed to an app store, this method is acceptable.
+
+Notice that you use the Web API to manipulate LocalStorage, either with `getItem()`, `setItem()`, or `removeItem()`. It's widely supported across browsers.
+
+Before building the `displayCarbonUsage()` function called in `init()`, let's implement the functionality to handle the initial form submission.
+
+### Handle the form submission
+
+Create a function called `handleSubmit` that accepts an event argument `(e)`. Prevent the event from propagating (in this case, stop the browser from refreshing) and call a new function, `setUpUser`, passing in the arguments `apiKey.value` and `region.value`. This way, you use the two values provided via the initial form when the relevant fields are populated.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Refresh your memory: The HTML you created in the previous lesson includes two input fields whose `values` are captured via the `const` variables set up at the top of the file. Both fields are marked as `required`, so the browser prevents users from submitting null values.
+
+### Set up the user
+
+Next, create the `setUpUser` function, where you'll set local storage values for `apiKey` and `regionName`. Add the following function:
+
+```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);
+}
+```
+
+This function displays a loading message while the API is being called. At this point, you've reached the stage of creating the most important function for this browser extension!
+
+### Display Carbon Usage
+
+Now it's time to query the API!
+
+Before proceeding, let's discuss APIs. APIs, or [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), are essential tools for web developers. They provide standardized ways for programs to interact and communicate with each other. For example, if you're building a website that needs to query a database, someone might have created an API for you to use. While there are many types of APIs, one of the most popular is a [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ The term 'REST' stands for 'Representational State Transfer' and involves using variously-configured URLs to fetch data. Research the different types of APIs available to developers. Which format appeals to you?
+
+There are some key points to note about this function. First, observe the [`async` keyword](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Writing functions to run asynchronously ensures they wait for certain actions, such as data being returned, to complete before continuing.
+
+Here's a quick video about `async`:
+
+[![Async and Await for managing promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
+
+> 🎥 Click the image above for a video about async/await.
+
+Create a new function to query the CO2Signal API:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+This is a large function. Here's what's happening:
+
+- Following best practices, the `async` keyword is used to make the function behave asynchronously. The function includes a `try/catch` block because it will return a promise when the API provides data. Since you can't control the speed of the API's response (or whether it responds at all), you need to handle this uncertainty by calling it asynchronously.
+- The function queries the CO2Signal API to retrieve data for your region using your API Key. To use the key, authentication is required in the header parameters.
+- Once the API responds, various elements of its response data are assigned to the parts of your screen set up to display this information.
+- If there's an error or no result, an error message is displayed.
+
+✅ Asynchronous programming patterns are another valuable tool in your developer toolkit. Read [about the different ways](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) you can configure this type of code.
+
+Congratulations! If you build your extension (`npm run build`) and refresh it in your extensions pane, you now have a working extension! The only thing left to fix is the icon, which you'll address in the next lesson.
+
+---
+
+## 🚀 Challenge
+
+We've discussed several types of APIs in these lessons. Choose a web API and research in depth what it offers. For example, explore APIs available within browsers, such as the [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). In your opinion, what makes an API great?
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Review & Self Study
+
+In this lesson, you learned about LocalStorage and APIs, both of which are highly useful for professional web developers. Can you think about how these two concepts work together? Consider how you would design a website that stores items to be used by an API.
+
+## Assignment
+
+[Adopt an API](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/en/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..b0f62608
--- /dev/null
+++ b/translations/en/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-28T11:31:33+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "en"
+}
+-->
+# Adopt an API
+
+## Instructions
+
+APIs can be a lot of fun to experiment with. Here is a [list of many free ones](https://github.com/public-apis/public-apis). Choose an API and create a browser extension that addresses a problem. It could be something as small as not having enough pictures of pets (in which case, try the [dog CEO API](https://dog.ceo/dog-api/)) or something more significant—just have fun with it!
+
+## Rubric
+
+| Criteria | Outstanding                                                              | Satisfactory                             | Needs Improvement       |
+| -------- | ------------------------------------------------------------------------ | ---------------------------------------- | ----------------------- |
+|          | A fully functional browser extension is submitted using an API from the list above | A partially functional browser extension is submitted | The submission contains errors |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/en/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..440d0be6
--- /dev/null
+++ b/translations/en/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-28T11:24:57+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "en"
+}
+-->
+# Browser Extension Project Part 3: Learn about Background Tasks and Performance
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Introduction
+
+In the previous two lessons of this module, you learned how to create a form and a display area for data retrieved from an API. This is a very common way to establish a web presence. You also learned how to handle asynchronous data fetching. Your browser extension is almost complete.
+
+The remaining tasks involve managing background processes, such as updating the color of the extension's icon. This is a great opportunity to explore how browsers handle these types of tasks. Let's consider these browser tasks in the context of optimizing the performance of your web assets as you develop them.
+
+## Web Performance Basics
+
+> "Website performance is about two things: how fast the page loads, and how fast the code on it runs." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+The topic of optimizing websites to be fast across all devices, for all users, and in all situations is understandably broad. Here are some key points to keep in mind when developing either a standard web project or a browser extension.
+
+The first step in ensuring your site runs efficiently is to gather data about its performance. The best place to start is the developer tools in your web browser. In Edge, click the "Settings and more" button (the three dots icon in the top-right corner of the browser), then navigate to More Tools > Developer Tools and open the Performance tab. You can also use the keyboard shortcuts `Ctrl` + `Shift` + `I` on Windows or `Option` + `Command` + `I` on Mac to open developer tools.
+
+The Performance tab includes a Profiling tool. Open a website (for example, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you'll see routines generated for 'script', 'render', and 'paint' processes:
+
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.en.png)
+
+✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) on the Performance panel in Edge.
+
+> Tip: To get an accurate reading of your website's startup time, clear your browser's cache.
+
+Select parts of the profile timeline to zoom in on events that occur during page loading.
+
+Get a snapshot of your page's performance by selecting a section of the profile timeline and reviewing the summary pane:
+
+![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.en.png)
+
+Check the Event Log pane to identify any events that took longer than 15 ms:
+
+![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.en.png)
+
+✅ Familiarize yourself with the profiler! Open the developer tools on this site and check for bottlenecks. What asset loads the slowest? The fastest?
+
+## Profiling Checks
+
+Generally, there are some "problem areas" every web developer should monitor when building a site to avoid unpleasant surprises during production deployment.
+
+**Asset sizes**: Over the years, the web has become 'heavier' and slower, partly due to the increased use of images.
+
+✅ Explore the [Internet Archive](https://httparchive.org/reports/page-weight) for a historical perspective on page weight and more.
+
+A good practice is to ensure your images are optimized and delivered at the appropriate size and resolution for your users.
+
+**DOM traversals**: The browser builds its Document Object Model (DOM) based on your code, so for better page performance, keep your tags minimal and only use and style what's necessary. For example, excess CSS associated with a page can be optimized; styles needed for a single page don't need to be included in the main stylesheet.
+
+**JavaScript**: JavaScript developers should watch out for 'render-blocking' scripts that must load before the rest of the DOM can be traversed and painted in the browser. Consider using `defer` with your inline scripts (as demonstrated in the Terrarium module).
+
+✅ Test some websites on a [Site Speed Test website](https://www.webpagetest.org/) to learn more about common checks for site performance.
+
+Now that you understand how the browser renders the assets you provide, let's move on to the final steps for completing your extension:
+
+### Create a Function to Calculate Color
+
+In `/src/index.js`, add a function called `calculateColor()` after the series of `const` variables you set to access the 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 } });
+}
+```
+
+What does this function do? It takes a value (the carbon intensity) from the API call you completed in the last lesson and calculates how close its value is to the index in the colors array. Then, it sends the closest color value to the chrome runtime.
+
+The chrome.runtime has [an API](https://developer.chrome.com/extensions/runtime) that handles various background tasks, which your extension utilizes:
+
+> "Use the chrome.runtime API to retrieve the background page, return details about the manifest, and listen for and respond to events in the app or extension lifecycle. You can also use this API to convert the relative path of URLs to fully-qualified URLs."
+
+✅ If you're developing this browser extension for Edge, you might be surprised to use a chrome API. The newer Edge browser versions run on the Chromium browser engine, allowing you to leverage these tools.
+
+> Note: To profile a browser extension, launch the dev tools from within the extension itself, as it operates as a separate browser instance.
+
+### Set a Default Icon Color
+
+In the `init()` function, set the icon to a generic green color initially by calling chrome's `updateIcon` action:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Call the Function and Execute the Call
+
+Next, call the function you just created by adding it to the promise returned by the CO2Signal API:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+Finally, in `/dist/background.js`, add a listener for these background action calls:
+
+```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);
+}
+```
+
+This code adds a listener for any messages sent to the backend task manager. If the message is called 'updateIcon', the subsequent code runs to draw an icon of the appropriate color using the Canvas API.
+
+✅ You'll learn more about the Canvas API in the [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Now, rebuild your extension (`npm run build`), refresh, and launch your extension. Watch the color change. Is it time to run an errand or do the dishes? Now you know!
+
+Congratulations! You've built a functional browser extension and gained insights into how browsers work and how to profile their performance.
+
+---
+
+## 🚀 Challenge
+
+Explore some open-source websites that have been around for a long time. Using their GitHub history, investigate how they were optimized for performance over the years, if at all. What is the most common issue?
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Review & Self Study
+
+Consider subscribing to a [performance newsletter](https://perf.email/).
+
+Explore how browsers measure web performance by examining the performance tabs in their developer tools. Do you notice any significant differences?
+
+## Assignment
+
+[Analyze a site for performance](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/en/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..395340cf
--- /dev/null
+++ b/translations/en/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-28T11:26:28+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "en"
+}
+-->
+# Analyze a site for performance
+
+Provide a detailed report of a website, highlighting areas where performance issues exist. Examine why the site is slow and suggest ways to improve its speed. Don't rely solely on browser tools; research additional tools that can enhance your report.
+
+## Rubric
+
+| Criteria | Exemplary                                                                                                  | Adequate                    | Needs Improvement             |
+| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|          | A report is presented with details drawn not only from browser tools but from 3rd party tools if available | A basic report is presented | A minimal report is presented |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the definitive source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/README.md b/translations/en/5-browser-extension/README.md
new file mode 100644
index 00000000..ba9314c1
--- /dev/null
+++ b/translations/en/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-28T11:22:58+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "en"
+}
+-->
+# Building a browser extension
+
+Creating browser extensions is an enjoyable and engaging way to explore app performance while developing a unique type of web asset. This module includes lessons on how browsers function, how to deploy a browser extension, how to create a form, interact with an API, utilize local storage, and assess and enhance your website's performance.
+
+You'll develop a browser extension compatible with Edge, Chrome, and Firefox. This extension, essentially a mini website designed for a specific task, checks the [C02 Signal API](https://www.co2signal.com) to analyze electricity usage and carbon intensity for a given region, providing insights into the region's carbon footprint.
+
+Users can manually activate this extension by entering an API key and region code into a form to assess local electricity usage. This data can help users make informed decisions about their electricity consumption. For instance, it might be better to postpone using a clothes dryer (a high-carbon activity) during times of peak electricity usage in your area.
+
+### Topics
+
+1. [About the browser](1-about-browsers/README.md)
+2. [Forms and local storage](2-forms-browsers-local-storage/README.md)
+3. [Background tasks and performance](3-background-tasks-and-performance/README.md)
+
+### Credits
+
+![a green browser extension](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png)
+
+## Credits
+
+The idea for this web carbon trigger was inspired by Asim Hussain, leader of Microsoft's Green Cloud Advocacy team and author of the [Green Principles](https://principles.green/). It was initially a [web site project](https://github.com/jlooper/green).
+
+The structure of the browser extension was influenced by [Adebola Adeniran's COVID extension](https://github.com/onedebos/covtension).
+
+The concept for the 'dot' icon system was inspired by the icon design of the [Energy Lollipop](https://energylollipop.com/) browser extension for California emissions.
+
+These lessons were created with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/solution/README.md b/translations/en/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..0fe0dc24
--- /dev/null
+++ b/translations/en/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-28T11:27:00+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "en"
+}
+-->
+# Carbon Trigger Browser Extension: Completed Code
+
+Using tmrow's CO2 Signal API to monitor electricity consumption, create a browser extension that provides a reminder directly in your browser about the intensity of electricity usage in your region. Using this extension on the fly can help you make informed decisions about your activities based on this data.
+
+![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png)
+
+## Getting Started
+
+You will need to have [npm](https://npmjs.com) installed. Download a copy of this code to a folder on your computer.
+
+Install all the required packages:
+
+```
+npm install
+```
+
+Build the extension using webpack:
+
+```
+npm run build
+```
+
+To install on Edge, open the 'three dot' menu in the top right corner of the browser to access the Extensions panel. From there, select 'Load Unpacked' to add a new extension. When prompted, open the 'dist' folder, and the extension will load. To use it, you will need an API key for CO2 Signal's API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, I use 'US-NEISO').
+
+![installing](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png)
+
+Once you input the API key and region into the extension interface, the colored dot in the browser extension bar will update to reflect your region's energy usage. It will also provide guidance on which energy-intensive activities might be suitable for you to undertake. The idea for this 'dot' system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/solution/translation/README.es.md b/translations/en/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..45cdc6cb
--- /dev/null
+++ b/translations/en/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-28T11:28:22+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "en"
+}
+-->
+# Carbon Trigger Browser Extension: Complete Code
+
+Using tmrow's CO2 signal API to track electricity usage, create a browser extension so you can have a direct reminder in your browser about your region's electricity consumption. Using this ad hoc extension will help you make decisions about your activities based on this information.
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.en.png)
+
+## Getting Started
+
+You will need [npm](https://npmjs.com) installed. Download a copy of this code into a folder on your computer.
+
+Install all the required packages:
+
+```
+npm install
+```
+
+Build the extension using webpack:
+
+```
+npm run build
+```
+
+To install on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load unpacked' to load a new extension. Open the 'dist' folder when prompted, and the extension will be loaded. To use it, you will need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO').
+
+![installing](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.en.png)
+
+Once the API key and region are entered in the extension interface, the colored dot in the browser's extension bar should change to reflect your region's energy usage and give you an indicator about high-energy consumption activities that would be appropriate for you. The concept behind this "dot" system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/solution/translation/README.fr.md b/translations/en/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..2a725127
--- /dev/null
+++ b/translations/en/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-28T11:29:07+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "en"
+}
+-->
+# Carbon Trigger Browser Extension: Completed Code
+
+Using the CO2 Signal API from tmrow to monitor electricity consumption, create a browser extension so you can get a direct reminder in your browser about the electricity usage in your region. Using this ad hoc extension will help you make informed decisions about your activities based on this information.
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png)
+
+## Getting Started
+
+You will need to have [npm](https://npmjs.com) installed. Download a copy of this code into a folder on your computer.
+
+Install all required packages:
+
+```
+npm install
+```
+
+Build the extension using webpack:
+
+```
+npm run build
+```
+
+To install on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load unpacked extension' to load a new extension. Open the 'dist' folder when prompted, and the extension will load. To use it, you will need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for Boston, for example, I use 'US-NEISO').
+
+![installation](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png)
+
+Once the API key and region are entered in the extension interface, the colored dot in the browser's extension bar should change to reflect your region's energy consumption and give you an indicator of energy-intensive activities that might be appropriate to perform. The concept behind this 'dot' system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/solution/translation/README.hi.md b/translations/en/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..d14940ec
--- /dev/null
+++ b/translations/en/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-28T11:27:20+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "en"
+}
+-->
+# Carbon Trigger Browser Extension: Completed Code
+
+Using tmrow's CO2 Signal API to track electricity usage, this browser extension provides a reminder about how carbon-intensive the electricity in your area is while you're browsing. By using this extension, you can make informed decisions about your activities based on this information.
+
+![Extension Screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png)
+
+## Getting Started
+
+You will need to have [npm](https://npmjs.com) installed. Download a copy of this code into a folder on your computer.
+
+Install all the required packages:
+
+```
+npm install
+```
+
+Build the extension using Webpack:
+
+```
+npm run build
+```
+
+To install on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load unpacked' to load a new extension. When prompted, open the 'dist' folder, and the extension will load. To use it, you will need an API key for CO2 Signal ([get it here via email](https://www.co2signal.com/) by entering your email in the box on that page) and [the code for your region](http://api.electricitymap.org/v3/zones) from [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, I use 'US-NEISO').
+
+![Installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png)
+
+Once the API key and region are entered into the extension interface, the colored dot in the browser extension bar should change to reflect the energy usage in your area and provide an indicator of whether energy-intensive activities are appropriate for your performance. The concept behind this 'dot' system was inspired by the [Energy Lollipop Extension](https://energylollipop.com/) for California emissions.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/solution/translation/README.it.md b/translations/en/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..11174d7f
--- /dev/null
+++ b/translations/en/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-28T11:27:41+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "en"
+}
+-->
+# Carbon Trigger Browser Extension: Code to Get Started
+
+We will use tmrow's CO2 Signal API to monitor electricity usage and create a browser extension that provides a direct reminder in your browser about the electricity intensity in your region. Using this custom extension will help you evaluate your activities based on this information.
+
+![screenshot of the extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png)
+
+## Getting Started
+
+You need to have [npm](https://npmjs.com) installed. Download a copy of this code to a folder on your computer.
+
+Install all required packages:
+
+```
+npm install
+```
+
+Build the extension using webpack:
+
+```
+npm run build
+```
+
+To install on Edge, use the "three dots" menu in the top-right corner of the browser to find the Extensions panel. If not already enabled, turn on Developer Mode (bottom left). Select "Load unpacked" to load a new extension. Open the "dist" folder when prompted, and the extension will be loaded. To use it, you will need an API key for the CO2 Signal API (you can [get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [electricity map](https://www.electricitymap.org/map) (for example, in Boston, "US-NEISO").
+
+![installation](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png)
+
+Once the API key and region are entered in the extension interface, the colored dot in the browser's extension bar should change to reflect your region's energy usage and provide a pointer on which high-energy activities would be appropriate to perform. The concept behind this "dot" system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/solution/translation/README.ja.md b/translations/en/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..8b0226d7
--- /dev/null
+++ b/translations/en/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-28T11:28:01+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "en"
+}
+-->
+# Carbon Trigger Browser Extension: Completed Code
+
+Using tmrow's CO2 Signal API, this browser extension tracks electricity usage in your area and displays it as a reminder directly in your browser. By using this extension on an ad hoc basis, you can make decisions about your activities based on this information.
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png)
+
+## Getting Started
+
+You need to have [npm](https://npmjs.com) installed. Download a copy of this code into a folder on your computer.
+
+Install all the required packages.
+
+```
+npm install
+```
+
+Build the extension using webpack.
+
+```
+npm run build
+```
+
+To install it on Edge, find the "Extensions" panel from the "three dots" menu in the top-right corner of the browser. From there, select "Load Unpacked" to load the new extension. When prompted, open the "dist" folder, and the extension will be loaded. To use it, you'll need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, you would use 'US-NEISO').
+
+![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png)
+
+Once you input the API key and region into the extension interface, the colored dot displayed in your browser's extension bar will change to reflect your area's energy usage. This helps indicate whether it's a good time to engage in activities that require energy. The concept for this "dot" system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/solution/translation/README.ms.md b/translations/en/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..a7c00d90
--- /dev/null
+++ b/translations/en/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-28T11:28:46+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "en"
+}
+-->
+# Carbon Trigger Browser Extension: Complete Code
+
+Using the CO2 Signal API from tmrow to monitor electricity usage, build a browser extension that alerts you in your browser about the intensity of electricity consumption in your region. This extension can help you make informed decisions about your activities based on this information.
+
+![browser extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png)
+
+## Getting Started
+
+You need to install [npm](https://npmjs.com). Download a copy of this code to a folder on your computer.
+
+Install all required packages:
+
+```
+npm install
+```
+
+Build the extension using webpack:
+
+```
+npm run build
+```
+
+To install it on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load Unpacked' to load a new extension. Open the 'dist' folder when prompted, and the extension will be loaded. To use it, you’ll need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and [the code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO').
+
+![downloading](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png)
+
+Once the API key and region are entered into the extension interface, the colored dot in the browser extension bar will change to reflect your region's energy usage and provide guidance on heavy activities that are appropriate for you to undertake. The concept behind this 'dot' system was inspired by [the Energy Lollipop browser extension](https://energylollipop.com/) for California emissions.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/5-browser-extension/start/README.md b/translations/en/5-browser-extension/start/README.md
new file mode 100644
index 00000000..345d7c30
--- /dev/null
+++ b/translations/en/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-28T11:26:41+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "en"
+}
+-->
+# Carbon Trigger Browser Extension: Starter Code
+
+Using tmrow's CO2 Signal API to monitor electricity usage, create a browser extension that provides a reminder directly in your browser about the intensity of electricity usage in your region. Using this extension on the fly can help you make informed decisions about your activities based on this data.
+
+![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png)
+
+## Getting Started
+
+You need to have [npm](https://npmjs.com) installed. Download a copy of this code to a folder on your computer.
+
+Install all the necessary packages:
+
+```
+npm install
+```
+
+Build the extension using webpack:
+
+```
+npm run build
+```
+
+To install on Edge, open the 'three dot' menu in the top right corner of the browser to access the Extensions panel. From there, select 'Load Unpacked' to add a new extension. When prompted, open the 'dist' folder, and the extension will load. To use it, you’ll need an API key for CO2 Signal's API ([request one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [region code](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, I use 'US-NEISO').
+
+![installing](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png)
+
+Once you input the API key and region into the extension interface, the colored dot in the browser extension bar will update to reflect your region's energy usage. It will also provide guidance on which energy-intensive activities might be suitable for you to undertake. The idea for this 'dot' system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/1-introduction/README.md b/translations/en/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..bed902fd
--- /dev/null
+++ b/translations/en/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-28T11:38:23+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "en"
+}
+-->
+# Build a Space Game Part 1: Introduction
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Inheritance and Composition in game development
+
+In earlier lessons, the design architecture of the apps you built wasn't a major concern because the projects were relatively small. However, as your applications grow in size and complexity, architectural decisions become increasingly important. There are two main approaches to building larger applications in JavaScript: *composition* and *inheritance*. Both have their advantages and disadvantages, but let's explore them in the context of game development.
+
+✅ One of the most famous programming books ever written focuses on [design patterns](https://en.wikipedia.org/wiki/Design_Patterns).
+
+In a game, you have `game objects`, which are entities that exist on the screen. These objects have a location within a cartesian coordinate system, defined by an `x` and `y` coordinate. As you develop a game, you'll notice that all your game objects share certain common properties, which are typical for any game you create. These include:
+
+- **location-based** Most, if not all, game elements are tied to a specific location. This means they have an `x` and `y` coordinate.
+- **movable** These objects can move to a new location. Examples include heroes, monsters, or NPCs (non-player characters), but not static objects like trees.
+- **self-destructing** These objects exist for a limited time before they are marked for deletion. This is often represented by a `dead` or `destroyed` boolean that signals to the game engine that the object should no longer be rendered.
+- **cool-down** 'Cool-down' is a common property for short-lived objects. For example, a piece of text or a graphical effect like an explosion that should only appear for a few milliseconds.
+
+✅ Think about a game like Pac-Man. Can you identify the four object types listed above in this game?
+
+### Expressing behavior
+
+The properties described above represent behaviors that game objects can have. So how do we encode these behaviors? We can express them as methods associated with either classes or objects.
+
+**Classes**
+
+One approach is to use `classes` along with `inheritance` to add specific behaviors to a class.
+
+✅ Inheritance is an important concept to understand. Learn more from [MDN's article about inheritance](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+In code, a game object might look like this:
+
+```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();
+```
+
+✅ Take a few minutes to imagine how a Pac-Man character (like Inky, Pinky, or Blinky) could be implemented in JavaScript.
+
+**Composition**
+
+An alternative way to handle object inheritance is through *Composition*. In this approach, objects express their behaviors like this:
+
+```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'); 
+```
+
+**Which pattern should I use?**
+
+The choice between these patterns is up to you. JavaScript supports both paradigms.
+
+--
+
+Another common pattern in game development addresses the challenge of managing the game's user experience and performance.
+
+## Pub/sub pattern
+
+✅ Pub/Sub stands for 'publish-subscribe'
+
+This pattern is based on the idea that different parts of your application shouldn't directly depend on one another. Why is this beneficial? It makes it easier to understand the overall structure of your application when its components are decoupled. It also simplifies making changes to behavior when needed. Here's how this is achieved:
+
+- **message**: A message is typically a text string, sometimes accompanied by an optional payload (data that provides additional context about the message). For example, a typical message in a game might be `KEY_PRESSED_ENTER`.
+- **publisher**: This component *publishes* a message and sends it to all subscribers.
+- **subscriber**: This component *listens* for specific messages and performs an action in response, such as firing a laser.
+
+Although the implementation is relatively small, this pattern is incredibly powerful. Here's an example of how it can be implemented:
+
+```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))
+    }
+  }
+}
+
+```
+
+To use the code above, we can create a simple implementation:
+
+```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)
+  }
+});
+```
+
+In this example, we connect a keyboard event, `ArrowLeft`, to send the `HERO_MOVE_LEFT` message. We then listen for that message and move the `hero` accordingly. The advantage of this pattern is that the event listener and the hero are completely independent of each other. You could remap the `ArrowLeft` key to the `A` key, or even make the `ArrowLeft` key trigger a completely different action by modifying the eventEmitter's `on` function:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+As your game becomes more complex, this pattern remains consistent in its simplicity, helping to keep your code clean. It's highly recommended to adopt this approach.
+
+---
+
+## 🚀 Challenge
+
+Consider how the pub-sub pattern could improve a game. Which components should emit events, and how should the game respond to them? Use this opportunity to get creative and brainstorm a new game concept, thinking about how its parts might interact.
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Review & Self Study
+
+Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Assignment
+
+[Mock up a game](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/1-introduction/assignment.md b/translations/en/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..e298b186
--- /dev/null
+++ b/translations/en/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-28T11:39:06+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "en"
+}
+-->
+# Mock up a game
+
+## Instructions
+
+Using the code examples from the lesson, create a representation of a game you enjoy. It should be a simple game, but the goal is to use either the class or composition pattern along with the pub/sub pattern to demonstrate how a game might start. Be creative!
+
+## Rubric
+
+| Criteria | Outstanding                                             | Satisfactory                                          | Needs Improvement                                   |
+| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
+|          | Three elements are displayed on the screen and interact | Two elements are displayed on the screen and interact | One element is displayed on the screen and interacts |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/2-drawing-to-canvas/README.md b/translations/en/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..f063a57c
--- /dev/null
+++ b/translations/en/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-28T11:36:04+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "en"
+}
+-->
+# Build a Space Game Part 2: Draw Hero and Monsters to Canvas
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## The Canvas
+
+The canvas is an HTML element that starts off empty; it's essentially a blank space. You can add content to it by drawing on it.
+
+✅ Read [more about the Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) on MDN.
+
+Here's how it's typically defined as part of the page's body:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+In the code above, we are setting the `id`, `width`, and `height`.
+
+- `id`: This allows you to reference the canvas when you need to interact with it.
+- `width`: Specifies the width of the canvas element.
+- `height`: Specifies the height of the canvas element.
+
+## Drawing simple geometry
+
+The canvas uses a Cartesian coordinate system for drawing. This means it uses an x-axis and y-axis to determine the position of elements. The point `0,0` is located at the top-left corner, while the bottom-right corner corresponds to the WIDTH and HEIGHT you set for the canvas.
+
+![the canvas's grid](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.en.png)
+> Image from [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+To draw on the canvas, follow these steps:
+
+1. **Get a reference** to the canvas element.
+2. **Get a reference** to the context object associated with the canvas.
+3. **Perform drawing operations** using the context object.
+
+The code for these steps typically looks like this:
+
+```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
+```
+
+✅ The Canvas API is primarily designed for 2D shapes, but you can also create 3D elements on a webpage using the [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+With the Canvas API, you can draw various elements, such as:
+
+- **Geometric shapes**: We've already shown how to draw a rectangle, but there are many other shapes you can create.
+- **Text**: You can draw text in any font and color you choose.
+- **Images**: You can display images from assets like .jpg or .png files.
+
+✅ Try it! Now that you know how to draw a rectangle, can you draw a circle on the page? Check out some creative Canvas drawings on CodePen. Here's a [particularly impressive example](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Load and draw an image asset
+
+To load an image asset, create an `Image` object and set its `src` property. Then, listen for the `load` event to know when the image is ready to use. Here's the code:
+
+### Load asset
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Load asset pattern
+
+It's a good idea to wrap the above code in a structure like this, making it easier to use and ensuring you only manipulate the image once it's fully loaded:
+
+```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')
+}
+
+```
+
+To draw game assets on the screen, your code might look like this:
+
+```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);
+}
+```
+
+## Now it's time to start building your game
+
+### What to build
+
+You will create a webpage with a canvas element that displays a black screen with dimensions `1024*768`. We've provided two images for you:
+
+- Hero ship
+
+   ![Hero ship](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.en.png)
+
+- 5x5 monster grid
+
+   ![Monster ship](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.en.png)
+
+### Recommended steps to start development
+
+Locate the files provided for you in the `your-work` subfolder. It should contain the following:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Open this folder in Visual Studio Code. Make sure you have a local development environment set up, preferably with Visual Studio Code, NPM, and Node installed. If you don't have `npm` installed, [here's how to set it up](https://www.npmjs.com/get-npm).
+
+Start your project by navigating to the `your_work` folder:
+
+```bash
+cd your-work
+npm start
+```
+
+This will start an HTTP server at `http://localhost:5000`. Open a browser and enter that address. You'll see a blank page for now, but that will change.
+
+> Note: Refresh your browser to see updates on the screen.
+
+### Add code
+
+Add the necessary code to `your-work/app.js` to complete the following tasks:
+
+1. **Draw** a canvas with a black background.
+   > Tip: Add two lines under the appropriate TODO in `/app.js`, setting the `ctx` element to black and positioning the top-left corner at `0,0` with the height and width matching the canvas dimensions.
+2. **Load** textures.
+   > Tip: Use `await loadTexture` to load the player and enemy images by passing their file paths. You won't see them on the screen yet!
+3. **Draw** the hero in the center of the screen's bottom half.
+   > Tip: Use the `drawImage` API to display `heroImg` on the screen, positioning it at `canvas.width / 2 - 45` and `canvas.height - canvas.height / 4`.
+4. **Draw** a 5x5 grid of monsters.
+   > Tip: Uncomment the code to draw enemies on the screen. Then, complete the `createEnemies` function.
+
+   Start by defining some 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;
+    ```
+
+    Next, create a loop to draw the array of monsters on the screen:
+
+    ```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);
+        }
+      }
+    ```
+
+## Result
+
+The final result should look like this:
+
+![Black screen with a hero and 5x5 monsters](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.en.png)
+
+## Solution
+
+Try solving it yourself first, but if you get stuck, check out the [solution](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Challenge
+
+Now that you've learned about drawing with the 2D-focused Canvas API, explore the [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) and try creating a 3D object.
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Review & Self Study
+
+Learn more about the Canvas API by [reading about it](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Assignment
+
+[Play with the Canvas API](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/2-drawing-to-canvas/assignment.md b/translations/en/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..93da6b51
--- /dev/null
+++ b/translations/en/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-28T11:36:56+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "en"
+}
+-->
+# Experiment with the Canvas API
+
+## Instructions
+
+Choose one feature of the Canvas API and build something creative with it. Can you design a small galaxy of repeated stars? Or perhaps an intriguing texture made of colorful lines? Feel free to browse CodePen for ideas (but avoid copying).
+
+## Rubric
+
+| Criteria | Outstanding                                               | Satisfactory                       | Needs Improvement     |
+| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
+|          | Code is submitted showcasing an engaging texture or shape | Code is submitted, but it doesn't work | Code is not submitted |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/3-moving-elements-around/README.md b/translations/en/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..47757122
--- /dev/null
+++ b/translations/en/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,402 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-28T11:32:05+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "en"
+}
+-->
+# Build a Space Game Part 3: Adding Motion
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Games become more engaging when objects like aliens start moving on the screen! In this lesson, we’ll explore two types of movement:
+
+- **Keyboard/Mouse movement**: when the user interacts with the keyboard or mouse to move an object on the screen.
+- **Game-induced movement**: when the game itself moves an object at regular intervals.
+
+How do we make objects move on the screen? It’s all about cartesian coordinates: we update the position (x, y) of the object and then redraw the screen.
+
+To achieve *movement* on the screen, you typically follow these steps:
+
+1. **Set a new position** for the object. This makes it appear as though the object has moved.
+2. **Clear the screen**. The screen needs to be cleared between redraws. This can be done by drawing a rectangle filled with a background color.
+3. **Redraw the object** at its new position. This completes the process of moving the object from one location to another.
+
+Here’s an example of what this looks like in code:
+
+```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);
+```
+
+✅ Can you think of why redrawing your hero multiple times per second might lead to performance issues? Check out [alternatives to this pattern](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Handle keyboard events
+
+Events are handled by attaching specific actions to code. Keyboard events are triggered on the entire window, while mouse events like `click` can be tied to specific elements. In this project, we’ll focus on keyboard events.
+
+To handle an event, you use the window’s `addEventListener()` method, which takes two parameters. The first is the name of the event, such as `keyup`. The second is the function to be executed when the event occurs.
+
+Here’s an example:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+For keyboard events, there are two properties on the event object that can help identify which key was pressed:
+
+- `key`: A string representation of the pressed key, such as `ArrowUp`.
+- `keyCode`: A numeric representation, such as `37`, which corresponds to `ArrowLeft`.
+
+✅ Key event manipulation is useful beyond game development. Can you think of other applications for this technique?
+
+### Special keys: a caveat
+
+Some *special* keys affect the browser window. For example, if you’re listening for a `keyup` event and use these keys to move your hero, it might also trigger horizontal scrolling. To prevent this, you can disable the browser’s default behavior using code like this:
+
+```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);
+```
+
+The code above ensures that the arrow keys and the spacebar have their default behavior disabled. This is achieved by calling `e.preventDefault()`.
+
+## Game-induced movement
+
+Objects can move automatically using timers like `setTimeout()` or `setInterval()`, which update the object’s position at regular intervals. Here’s an example:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## The game loop
+
+The game loop is a function that runs at regular intervals, drawing everything that should be visible to the player. It includes all game objects, unless they’re no longer part of the game (e.g., an enemy destroyed by a laser). You’ll learn more about this in later lessons.
+
+Here’s an example of a typical game loop in code:
+
+```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);
+```
+
+This loop redraws the canvas every `200` milliseconds. You can adjust the interval to suit your game’s needs.
+
+## Continuing the Space Game
+
+You’ll build on the existing code. Start with the code you completed in Part I or use the starter code from [Part II](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Moving the hero**: Add code to move the hero using the arrow keys.
+- **Moving enemies**: Add code to make enemies move from top to bottom at a fixed rate.
+
+## Recommended steps
+
+Locate the files in the `your-work` folder. It should contain the following:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Start your project in the `your_work` folder by running:
+
+```bash
+cd your-work
+npm start
+```
+
+This will start an HTTP server at `http://localhost:5000`. Open this address in a browser. At this point, you should see the hero and enemies rendered, but nothing is moving yet!
+
+### Add code
+
+1. **Create dedicated objects** for `hero`, `enemy`, and `game object`. These should have `x` and `y` properties. (Refer to the section on [Inheritance or composition](../README.md)).
+
+   *HINT*: The `game object` should include `x` and `y` properties and the ability to draw itself on the canvas.
+
+   >Tip: Start by creating a GameObject class with the following constructor, and then draw it on the 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);
+      }
+    }
+    ```
+
+   Next, extend the GameObject class to create the Hero and Enemy classes:
+
+   ```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. **Add key-event handlers** to handle navigation (move the hero up, down, left, or right).
+
+   *REMEMBER*: The coordinate system starts at `0,0` in the top-left corner. Also, don’t forget to disable default browser behavior.
+
+   >Tip: Create an `onKeyDown` function and attach it to the window:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+
+   Check your browser console to see the keystrokes being logged.
+
+3. **Implement** the [Pub-Sub pattern](../README.md) to keep your code organized as you progress.
+
+   To do this:
+
+   1. **Add an event listener** to the window:
+
+       ```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);
+          }
+        });
+        ```
+
+   2. **Create an EventEmitter class** to handle publishing and subscribing to messages:
+
+       ```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));
+            }
+          }
+        }
+        ```
+
+   3. **Add constants** and set up the 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();
+        ```
+
+   4. **Initialize the game**:
+
+       ```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;
+      });
+    }
+    ```
+
+4. **Set up the game loop**
+
+   Refactor the `window.onload` function to initialize the game and set up a game loop with a suitable interval. Add a laser beam:
+
+   ```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. **Add code** to move enemies at regular intervals.
+
+   Refactor the `createEnemies()` function to generate enemies and add them to the new gameObjects class:
+
+   ```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);
+        }
+      }
+    }
+    ```
+
+   Create a `createHero()` function to do the same for the hero:
+
+   ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+   Finally, add a `drawGameObjects()` function to start rendering:
+
+   ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+   Your enemies should now start advancing toward your hero spaceship!
+
+---
+
+## 🚀 Challenge
+
+As you’ve seen, adding functions, variables, and classes can lead to ‘spaghetti code.’ How can you better organize your code to make it more readable? Sketch out a system for organizing your code, even if it remains in a single file.
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Review & Self Study
+
+While we’re building this game without frameworks, there are many JavaScript-based canvas frameworks for game development. Take some time to [read about them](https://github.com/collections/javascript-game-engines).
+
+## Assignment
+
+[Comment your code](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/3-moving-elements-around/assignment.md b/translations/en/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..3070d599
--- /dev/null
+++ b/translations/en/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-28T11:33:10+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "en"
+}
+-->
+# Comment Your Code
+
+## Instructions
+
+Review your current /app.js file in your game folder and look for ways to add comments and organize it better. Code can easily become messy, so this is a great opportunity to add comments to make it more readable and easier to work with in the future.
+
+## Rubric
+
+| Criteria | Outstanding                                                       | Satisfactory                         | Needs Improvement                                              |
+| -------- | ----------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------- |
+|          | `app.js` code is thoroughly commented and structured into clear sections | `app.js` code has sufficient comments | `app.js` code is somewhat unorganized and lacks meaningful comments |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/4-collision-detection/README.md b/translations/en/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..d9b2dee9
--- /dev/null
+++ b/translations/en/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-28T11:34:48+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "en"
+}
+-->
+# Build a Space Game Part 4: Adding A Laser and Detect Collisions
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+In this lesson, you'll learn how to shoot lasers using JavaScript! We'll add two new features to our game:
+
+- **A laser**: This laser will be fired from your hero's ship and move vertically upwards.
+- **Collision detection**: As part of implementing the ability to *shoot*, we'll also introduce some exciting game rules:
+   - **Laser hits enemy**: The enemy is destroyed if hit by a laser.
+   - **Laser hits top of the screen**: The laser is removed if it reaches the top of the screen.
+   - **Enemy and hero collision**: Both the enemy and the hero are destroyed if they collide.
+   - **Enemy hits bottom of the screen**: Both the enemy and the hero are destroyed if the enemy reaches the bottom of the screen.
+
+In short, your mission as the hero is to destroy all enemies with your laser before they reach the bottom of the screen.
+
+✅ Do some research on the very first computer game ever created. What was its functionality?
+
+Let's be heroic together!
+
+## Collision detection
+
+How do we detect collisions? We need to think of our game objects as rectangles moving around. Why rectangles, you ask? Because the image used to represent a game object is essentially a rectangle—it has an `x`, `y`, `width`, and `height`.
+
+If two rectangles, such as the hero and an enemy, *intersect*, a collision occurs. What happens next depends on the rules of the game. To implement collision detection, you'll need the following:
+
+1. A way to represent a game object as a rectangle, like this:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. A function to compare rectangles, which might look like this:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## How do we destroy things
+
+To destroy objects in a game, you need to tell the game not to render them during the game loop that runs at regular intervals. One way to do this is to mark a game object as *dead* when something happens, like this:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Then, you can filter out *dead* objects before repainting the screen, like this:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## How do we fire a laser
+
+Firing a laser involves responding to a key event and creating an object that moves in a specific direction. Here are the steps:
+
+1. **Create a laser object**: The laser originates from the top of the hero's ship and starts moving upwards toward the top of the screen.
+2. **Attach code to a key event**: Choose a key on the keyboard (e.g., the space bar) to represent firing the laser.
+3. **Create a game object that looks like a laser** when the key is pressed.
+
+## Cooldown on our laser
+
+The laser should fire every time you press a key, such as the space bar. To prevent the game from generating too many lasers in a short period, we need to implement a *cooldown*. A cooldown is a timer that ensures the laser can only be fired at specific intervals. You can implement it like this:
+
+```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.
+    }
+  }
+}
+```
+
+✅ Refer to lesson 1 in the space game series to refresh your memory about *cooldowns*.
+
+## What to build
+
+You'll extend the existing code (which you should have cleaned up and refactored) from the previous lesson. You can either start with the code from Part II or use the code provided at [Part III - starter](../../../../../../../../../your-work).
+
+> tip: The laser you'll work with is already in your assets folder and referenced in your code.
+
+- **Add collision detection**: When a laser collides with something, the following rules should apply:
+   1. **Laser hits enemy**: The enemy is destroyed if hit by a laser.
+   2. **Laser hits top of the screen**: The laser is removed if it reaches the top of the screen.
+   3. **Enemy and hero collision**: Both the enemy and the hero are destroyed if they collide.
+   4. **Enemy hits bottom of the screen**: Both the enemy and the hero are destroyed if the enemy reaches the bottom of the screen.
+
+## Recommended steps
+
+Locate the files created for you in the `your-work` subfolder. It should contain the following:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Start your project in the `your_work` folder by typing:
+
+```bash
+cd your-work
+npm start
+```
+
+This will start an HTTP server at `http://localhost:5000`. Open a browser and navigate to that address. At this point, you should see the hero and all the enemies, but nothing is moving—yet. :)
+
+### Add code
+
+1. **Set up a rectangle representation for your game objects to handle collisions**: The following code allows you to represent a `GameObject` as a rectangle. Edit your GameObject class to include this:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Add code to check for collisions**: Create a new function to test whether two rectangles intersect:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Add laser firing capability**:
+   1. **Add a key-event message**: The space bar should create a laser just above the hero's ship. Add three constants to the Messages object:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   2. **Handle the space bar key**: Edit the `window.addEventListener` keyup function to handle the space bar:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+   3. **Add listeners**: Edit the `initGame()` function to ensure the hero can fire when the space bar is pressed:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       Add a new `eventEmitter.on()` function to define behavior when an enemy collides with a laser:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   4. **Move the laser object**: Ensure the laser moves gradually toward the top of the screen. Create a new Laser class that extends `GameObject`, as you've done before:
+
+      ```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)
+        }
+      }
+      ```
+
+   5. **Handle collisions**: Implement collision rules for the laser. Add an `updateGameObjects()` function to test for collisions between objects:
+
+      ```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);
+      }  
+      ```
+
+      Make sure to include `updateGameObjects()` in your game loop within `window.onload`.
+
+   6. **Implement cooldown** for the laser so it can only be fired at specific intervals.
+
+      Finally, edit the Hero class to include a cooldown mechanism:
+
+       ```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;
+        }
+      }
+      ```
+
+At this point, your game has some functionality! You can navigate using the arrow keys, fire a laser with the space bar, and destroy enemies when you hit them. Great job!
+
+---
+
+## 🚀 Challenge
+
+Add an explosion! Check out the game assets in [the Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) and try to add an explosion effect when the laser hits an alien.
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Review & Self Study
+
+Experiment with the intervals in your game so far. What happens when you change them? Read more about [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Assignment
+
+[Explore collisions](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/4-collision-detection/assignment.md b/translations/en/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..e4e9a153
--- /dev/null
+++ b/translations/en/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-28T11:35:34+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "en"
+}
+-->
+# Explore Collisions
+
+## Instructions
+
+To gain a better understanding of how collisions work, create a small game with a few objects that collide. Make them move using key presses or mouse clicks, and ensure that something happens to one of the objects when it gets hit. For example, it could be a meteor crashing into the earth or bumper cars colliding. Be creative!
+
+## Rubric
+
+| Criteria | Outstanding                                                                                                              | Satisfactory                   | Needs Improvement |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
+|          | A complete, functional code sample is provided, with objects drawn on the canvas, basic collisions occurring, and reactions implemented | Code is incomplete in some way | Code does not work |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/4-collision-detection/solution/README.md b/translations/en/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..85bbb7eb
--- /dev/null
+++ b/translations/en/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T11:35:46+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "en"
+}
+-->
+This is a placeholder, left blank purposefully
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/4-collision-detection/your-work/README.md b/translations/en/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..a33d8c39
--- /dev/null
+++ b/translations/en/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-28T11:35:55+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "en"
+}
+-->
+This is a placeholder, left blank purposefully
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/5-keeping-score/README.md b/translations/en/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..1ad46072
--- /dev/null
+++ b/translations/en/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-28T11:33:26+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "en"
+}
+-->
+# Build a Space Game Part 5: Scoring and Lives
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+In this lesson, you'll learn how to add scoring to a game and manage lives.
+
+## Draw text on the screen
+
+To display a game score on the screen, you need to know how to render text. This can be done using the `fillText()` method on the canvas object. You can also customize aspects like the font, text color, and alignment (left, right, center). Below is an example of code that draws text on the screen.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Learn more about [how to add text to a canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), and feel free to make your text look more stylish!
+
+## Life, as a game concept
+
+In games, the concept of "lives" is simply a number. In a space game, it's common to assign a set number of lives that decrease one by one when your ship takes damage. It's even better if you can represent this visually, like using small ships or hearts instead of just a number.
+
+## What to build
+
+Let's add the following features to your game:
+
+- **Game score**: Award points for every enemy ship destroyed. We suggest 100 points per ship. The score should be displayed in the bottom left corner.
+- **Lives**: Your ship starts with three lives. You lose a life whenever an enemy ship collides with you. Lives should be displayed in the bottom right corner using the following graphic: ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.en.png).
+
+## Recommended steps
+
+Locate the files provided in the `your-work` subfolder. It should contain the following:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Start your project in the `your_work` folder by typing:
+
+```bash
+cd your-work
+npm start
+```
+
+This will start an HTTP server at `http://localhost:5000`. Open a browser and navigate to that address. At this point, you should see the hero and all the enemies. You can move the hero using the left and right arrow keys and shoot down enemies.
+
+### Add code
+
+1. **Copy the required assets** from the `solution/assets/` folder into the `your-work` folder. This includes the `life.png` asset. Add the `lifeImg` to the `window.onload` function:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Add the `lifeImg` to the list of assets:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Add variables**. Create variables to represent the total score (starting at 0) and remaining lives (starting at 3). Display these values on the screen.
+
+3. **Extend the `updateGameObjects()` function**. Modify the `updateGameObjects()` function to handle collisions with enemies:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Add lives and points**. 
+   1. **Initialize variables**. Inside the `Hero` class, under `this.cooldown = 0`, initialize the lives and points:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Display variables on the screen**. Render these values on the screen:
+
+        ```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. **Add methods to the game loop**. Ensure these functions are added to the `window.onload` function under `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Implement game rules**. Add the following rules:
+
+   1. **Deduct a life for every collision between the hero and an enemy**.
+   
+      Extend the `Hero` class to handle this deduction:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Increase the score by 100 points for every laser that hits an enemy**.
+
+      Extend the `Hero` class to handle this increment:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Add these functions to your 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();
+        });
+        ```
+
+✅ Explore other games created using JavaScript/Canvas. What common features do they share?
+
+By the end of this task, you should see small 'life' ships displayed in the bottom right corner, points displayed in the bottom left corner, and observe your life count decreasing when you collide with enemies and your score increasing when you shoot enemies. Great job! Your game is almost complete.
+
+---
+
+## 🚀 Challenge
+
+Your code is nearly finished. What do you think your next steps should be?
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Review & Self Study
+
+Research different ways to increment and decrement game scores and lives. There are some interesting game engines like [PlayFab](https://playfab.com). How could using one of these enhance your game?
+
+## Assignment
+
+[Build a Scoring Game](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/5-keeping-score/assignment.md b/translations/en/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..33eb3534
--- /dev/null
+++ b/translations/en/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-28T11:34:09+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "en"
+}
+-->
+# Build a Scoring Game
+
+## Instructions
+
+Create a game where life and points are displayed in a creative way. One suggestion is to represent life as hearts and points as a large number positioned at the bottom center of the screen. Check out [Free game resources](https://www.kenney.nl/) for inspiration.
+
+# Rubric
+
+| Criteria | Exemplary              | Adequate                    | Needs Improvement          |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | complete game is presented | partial game is presented   | partial game contains bugs |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/5-keeping-score/solution/README.md b/translations/en/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..ef65711e
--- /dev/null
+++ b/translations/en/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T11:34:21+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "en"
+}
+-->
+This is a placeholder, left blank purposefully
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/5-keeping-score/your-work/README.md b/translations/en/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..11b54d1e
--- /dev/null
+++ b/translations/en/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-28T11:34:30+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "en"
+}
+-->
+This is a placeholder, left blank purposefully
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/6-end-condition/README.md b/translations/en/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..ddc0ef4e
--- /dev/null
+++ b/translations/en/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-28T11:37:09+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "en"
+}
+-->
+# Build a Space Game Part 6: End and Restart
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+There are various ways to define an *end condition* in a game. As the creator, it's up to you to decide why the game ends. Here are some possible reasons, assuming we're talking about the space game you've been building:
+
+- **`N` Enemy ships destroyed**: It's common in games with levels to require the destruction of `N` enemy ships to complete a level.
+- **Your ship is destroyed**: Many games end when your ship is destroyed. Alternatively, some games use a "lives" system, where losing a ship deducts a life. If all lives are lost, the game ends.
+- **Collect `N` points**: Another common end condition is reaching a certain number of points. Points can be earned in various ways, such as destroying enemy ships or collecting items dropped by them.
+- **Complete a level**: This might involve multiple conditions, such as destroying `X` enemy ships, collecting `Y` points, or obtaining a specific item.
+
+## Restarting
+
+If players enjoy your game, they'll likely want to replay it. When the game ends, for any reason, you should provide an option to restart.
+
+✅ Take a moment to think about the conditions under which games you’ve played end, and how they prompt you to restart.
+
+## What to build
+
+You’ll add the following rules to your game:
+
+1. **Winning the game**: When all enemy ships are destroyed, the player wins. Display a victory message.
+2. **Restart**: When all lives are lost or the game is won, provide a way to restart. Remember to reinitialize the game and clear the previous game state.
+
+## Recommended steps
+
+Locate the files created for you in the `your-work` subfolder. It should contain the following:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Start your project in the `your_work` folder by typing:
+
+```bash
+cd your-work
+npm start
+```
+
+This will start an HTTP server at `http://localhost:5000`. Open a browser and navigate to that address. Your game should be playable.
+
+> tip: To avoid warnings in Visual Studio Code, edit the `window.onload` function to call `gameLoopId` as is (without `let`), and declare `gameLoopId` at the top of the file separately: `let gameLoopId;`
+
+### Add code
+
+1. **Track end condition**: Add code to track the number of enemies or whether the hero ship has been destroyed by adding these two functions:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+2. **Add logic to message handlers**: Update the `eventEmitter` to handle these conditions:
+
+    ```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);
+    });
+    ```
+
+3. **Add new message types**: Add these messages to the constants object:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+4. **Add restart code**: Implement code to restart the game when a specific button is pressed.
+
+   1. **Listen for the `Enter` key press**: Update your window's eventListener to detect this key press:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   2. **Add restart message**: Add this message to your Messages constant:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+5. **Implement game rules**: Add the following game rules:
+
+   1. **Player win condition**: When all enemy ships are destroyed, display a victory message.
+
+      1. First, create a `displayMessage()` function:
+
+        ```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);
+        }
+        ```
+
+      2. Then, create an `endGame()` function:
+
+        ```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)  
+        }
+        ```
+
+   2. **Restart logic**: When all lives are lost or the player wins, display a message indicating the game can be restarted. Restart the game when the *restart* key is pressed (you can choose which key to use).
+
+      1. Create the `resetGame()` function:
+
+        ```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);
+          }
+        }
+        ```
+
+      2. Add a call to the `eventEmitter` to reset the game in `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+      3. Add a `clear()` function to the EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Congratulations, Captain! Your game is complete! Well done! 🚀 💥 👽
+
+---
+
+## 🚀 Challenge
+
+Add sound effects! Can you enhance your gameplay by adding sounds, such as when a laser hits, the hero dies, or the player wins? Check out this [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) to learn how to play sounds using JavaScript.
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Review & Self Study
+
+Your task is to create a new sample game. Explore some interesting games to get inspiration for the type of game you might want to build.
+
+## Assignment
+
+[Build a Sample Game](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/6-end-condition/assignment.md b/translations/en/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..a36073c7
--- /dev/null
+++ b/translations/en/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-28T11:37:52+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "en"
+}
+-->
+# Build a Sample Game
+
+## Instructions
+
+Try creating a small game to practice different end conditions. Experiment with scenarios like reaching a certain number of points, the hero losing all lives, or defeating all monsters. Build something simple, such as a console-based adventure game. Use the game flow below as inspiration:
+
+```
+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
+
+| Criteria | Outstanding            | Satisfactory                | Needs Improvement          |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | complete game provided | partial game provided       | partial game has bugs      |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/6-end-condition/solution/README.md b/translations/en/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..0679a799
--- /dev/null
+++ b/translations/en/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T11:38:05+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "en"
+}
+-->
+This is a placeholder, left blank purposefully
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/6-end-condition/your-work/README.md b/translations/en/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..3d6cee0c
--- /dev/null
+++ b/translations/en/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-28T11:38:14+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "en"
+}
+-->
+This is a placeholder, left blank purposefully
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/README.md b/translations/en/6-space-game/README.md
new file mode 100644
index 00000000..9765c7f1
--- /dev/null
+++ b/translations/en/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-28T11:31:47+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "en"
+}
+-->
+# Build a Space Game
+
+A space game to teach advanced JavaScript fundamentals
+
+In this lesson, you'll learn how to create your own space game. If you've ever played "Space Invaders," this game follows a similar concept: control a spaceship and shoot at monsters descending from above. Here's what the completed game will look like:
+
+![Finished game](../../../6-space-game/images/pewpew.gif)
+
+In these six lessons, you'll learn the following:
+
+- **Interact** with the Canvas element to draw objects on the screen
+- **Understand** the Cartesian coordinate system
+- **Learn** the Pub-Sub pattern to design a game architecture that's easier to maintain and expand
+- **Leverage** Async/Await to load game resources
+- **Handle** keyboard events
+
+## Overview
+
+- Theory
+   - [Introduction to building games with JavaScript](1-introduction/README.md)
+- Practice
+   - [Drawing to canvas](2-drawing-to-canvas/README.md)
+   - [Moving elements around the screen](3-moving-elements-around/README.md)
+   - [Collision detection](4-collision-detection/README.md)
+   - [Keeping score](5-keeping-score/README.md)
+   - [Ending and restarting the game](6-end-condition/README.md)
+
+## Credits
+
+The assets used for this project are from https://www.kenney.nl/.  
+If you're interested in game development, they offer excellent assets—many are free, and some are paid.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/6-space-game/solution/README.md b/translations/en/6-space-game/solution/README.md
new file mode 100644
index 00000000..50212582
--- /dev/null
+++ b/translations/en/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T11:34:38+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "en"
+}
+-->
+This is a placeholder, left blank purposefully
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/7-bank-project/1-template-route/README.md b/translations/en/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..cbffb13e
--- /dev/null
+++ b/translations/en/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-28T11:21:18+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "en"
+}
+-->
+# Build a Banking App Part 1: HTML Templates and Routes in a Web App
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Introduction
+
+Since JavaScript was introduced in browsers, websites have become more interactive and complex than ever before. Web technologies are now commonly used to create fully functional applications that run directly in a browser, known as [web applications](https://en.wikipedia.org/wiki/Web_application). Because web apps are highly interactive, users don't want to wait for a full page reload every time they perform an action. This is why JavaScript is used to update the HTML directly via the DOM, providing a smoother user experience.
+
+In this lesson, we'll lay the groundwork for creating a banking web app. We'll use HTML templates to create multiple screens that can be displayed and updated without reloading the entire HTML page.
+
+### Prerequisite
+
+You need a local web server to test the web app we'll build in this lesson. If you don't already have one, you can install [Node.js](https://nodejs.org) and use the command `npx lite-server` from your project folder. This will create a local web server and open your app in a browser.
+
+### Preparation
+
+On your computer, create a folder named `bank` with a file named `index.html` inside it. We'll start with this 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 templates
+
+If you want to create multiple screens for a web page, one option is to create a separate HTML file for each screen you want to display. However, this approach has some drawbacks:
+
+- The entire HTML page has to reload when switching screens, which can be slow.
+- Sharing data between different screens becomes more difficult.
+
+An alternative approach is to use a single HTML file and define multiple [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable block of HTML that isn't displayed by the browser until it's instantiated at runtime using JavaScript.
+
+### Task
+
+We'll create a banking app with two screens: a login page and a dashboard. First, let's add a placeholder element in the HTML body that we'll use to instantiate the different screens of our app:
+
+```html
+<div id="app">Loading...</div>
+```
+
+We're assigning it an `id` to make it easier to locate with JavaScript later.
+
+> Tip: Since the content of this element will be replaced, you can add a loading message or indicator that will be displayed while the app is loading.
+
+Next, let's add an HTML template for the login page below the placeholder. For now, we'll include only a title and a section containing a link for navigation.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Then, we'll add another HTML template for the dashboard page. This page will include several sections:
+
+- A header with a title and a logout link
+- The current balance of the bank account
+- A list of transactions displayed in a table
+
+```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: When creating HTML templates, if you want to preview how they will look, you can comment out the `<template>` and `</template>` lines by enclosing them with `<!-- -->`.
+
+✅ Why do you think we use `id` attributes on the templates? Could we use something else, like classes?
+
+## Displaying templates with JavaScript
+
+If you try opening your current HTML file in a browser, you'll see that it gets stuck displaying `Loading...`. This happens because we need to add JavaScript code to instantiate and display the HTML templates.
+
+Instantiating a template typically involves three steps:
+
+1. Retrieve the template element from the DOM, for example using [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Clone the template element using [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Attach it to the DOM under a visible element, for example using [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Why do we need to clone the template before attaching it to the DOM? What do you think would happen if we skipped this step?
+
+### Task
+
+Create a new file named `app.js` in your project folder and import it in the `<head>` section of your HTML:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Now, in `app.js`, we'll create a new function called `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);
+}
+```
+
+Here, we follow the three steps described above. We instantiate the template with the `id` `templateId` and place its cloned content within our app placeholder. Note that we use `cloneNode(true)` to copy the entire subtree of the template.
+
+Now call this function with one of the templates and observe the result.
+
+```js
+updateRoute('login');
+```
+
+✅ What's the purpose of this code `app.innerHTML = '';`? What happens if we omit it?
+
+## Creating routes
+
+In the context of a web app, *Routing* refers to mapping **URLs** to specific screens that should be displayed. On a website with multiple HTML files, this happens automatically because the file paths are reflected in the URL. For example, with these files in your project folder:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+If you create a web server with `mywebsite` as the root, the URL mapping will be:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+However, since our web app uses a single HTML file containing all the screens, this default behavior won't help us. We'll need to create this mapping manually and update the displayed template using JavaScript.
+
+### Task
+
+We'll use a simple object to implement a [map](https://en.wikipedia.org/wiki/Associative_array) between URL paths and our templates. Add this object at the top of your `app.js` file:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Next, let's modify the `updateRoute` function slightly. Instead of passing the `templateId` directly as an argument, we'll retrieve it by first checking the current URL and then using our map to get the corresponding template ID. We can use [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) to extract the path section from the 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);
+}
+```
+
+Here, we map the routes we defined to their corresponding templates. You can test this by manually changing the URL in your browser.
+
+✅ What happens if you enter an unknown path in the URL? How could we address this?
+
+## Adding navigation
+
+The next step for our app is to enable navigation between pages without manually changing the URL. This involves two things:
+
+1. Updating the current URL
+2. Updating the displayed template based on the new URL
+
+We've already handled the second part with the `updateRoute` function, so now we need to figure out how to update the current URL.
+
+We'll use JavaScript, specifically the [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) method, which allows us to update the URL and create a new entry in the browsing history without reloading the HTML.
+
+> Note: While the HTML anchor element [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) can create hyperlinks to different URLs, it will cause the browser to reload the HTML by default. To prevent this behavior when handling routing with custom JavaScript, use the `preventDefault()` function on the click event.
+
+### Task
+
+Let's create a new function for navigating within our app:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+This method first updates the current URL based on the given path, then updates the template. The property `window.location.origin` returns the URL root, allowing us to construct a complete URL from a given path.
+
+Now that we have this function, we can address the issue of undefined paths. We'll modify the `updateRoute` function to add a fallback to one of the existing routes if no match is found.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+If a route cannot be found, we'll now redirect to the `login` page.
+
+Next, let's create a function to handle URL retrieval when a link is clicked and prevent the browser's default link behavior:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Finally, let's complete the navigation system by adding bindings to our *Login* and *Logout* links in the HTML.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+The `event` object captures the `click` event and passes it to our `onLinkClick` function.
+
+Using the [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) attribute, bind the `click` event to JavaScript code, specifically the `navigate()` function.
+
+Try clicking on these links—you should now be able to navigate between the different screens of your app.
+
+✅ The `history.pushState` method is part of the HTML5 standard and supported by [all modern browsers](https://caniuse.com/?search=pushState). If you're building a web app for older browsers, you can use a [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) before the path to implement routing that works with regular anchor navigation and doesn't reload the page. This was originally intended for creating internal links within a page.
+
+## Handling the browser's back and forward buttons
+
+Using `history.pushState` creates new entries in the browser's navigation history. You can check this by holding the *back button* of your browser—it should display something like this:
+
+![Screenshot of navigation history](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.en.png)
+
+If you try clicking the back button a few times, you'll notice that the current URL changes and the history is updated, but the same template remains displayed.
+
+This happens because the app doesn't know it needs to call `updateRoute()` whenever the history changes. According to the [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState), the [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) event is triggered when the state changes (i.e., when we navigate to a different URL). We'll use this event to fix the issue.
+
+### Task
+
+To ensure the displayed template updates when the browser history changes, we'll attach a new function that calls `updateRoute()`. Add this at the bottom of your `app.js` file:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Note: We used an [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) to declare our `popstate` event handler for brevity, but a regular function would work just as well.
+
+Here's a refresher video on arrow functions:
+
+[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
+
+> 🎥 Click the image above for a video about arrow functions.
+
+Now try using your browser's back and forward buttons. The displayed route should update correctly this time.
+
+---
+
+## 🚀 Challenge
+
+Add a new template and route for a third page that displays the credits for this app.
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Review & Self Study
+
+Routing is one of the surprisingly tricky parts of web development, especially as the web transitions from page refresh behaviors to Single Page Application page refreshes. Read about [how the Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) handles routing. Can you explain why some of the decisions described in that document are necessary?
+
+## Assignment
+
+[Improve the routing](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/7-bank-project/1-template-route/assignment.md b/translations/en/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..4331cf0b
--- /dev/null
+++ b/translations/en/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-28T11:22:44+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "en"
+}
+-->
+# Improve the routing
+
+## Instructions
+
+The route declarations currently only specify the template ID to use. However, when displaying a new page, additional functionality is sometimes required. Let's enhance our routing implementation with two new features:
+
+- Assign titles to each template and update the browser's window title with the new title whenever the template changes.
+- Include an option to execute some code after the template changes. For example, we want to log `'Dashboard is shown'` in the developer console every time the dashboard page is displayed.
+
+## Rubric
+
+| Criteria | Outstanding                                                                                                                       | Satisfactory                                                                                                                                                                             | Needs Improvement                                       |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+|          | Both features are implemented and functional. Titles and code execution also work for any new route added to the `routes` declaration. | Both features work, but the behavior is hardcoded and cannot be configured through the `routes` declaration. Adding a third route with title and code execution either doesn't work or works partially. | One of the features is missing or not functioning correctly. |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the definitive source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/7-bank-project/2-forms/README.md b/translations/en/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..7601cb13
--- /dev/null
+++ b/translations/en/7-bank-project/2-forms/README.md
@@ -0,0 +1,312 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-28T11:16:47+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "en"
+}
+-->
+# Build a Banking App Part 2: Build a Login and Registration Form
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Introduction
+
+Most modern web apps allow users to create accounts to access their own private space. Since multiple users can interact with a web app simultaneously, there needs to be a way to store each user's personal data separately and determine what information to display. While we won't dive into the complexities of [secure user authentication](https://en.wikipedia.org/wiki/Authentication), we will ensure that users can create one (or more) bank accounts in our app.
+
+In this section, we'll use HTML forms to add login and registration functionality to our web app. We'll learn how to send data to a server API programmatically and define basic validation rules for user inputs.
+
+### Prerequisite
+
+Before starting this lesson, you should have completed the [HTML templates and routing](../1-template-route/README.md) section of the web app. Additionally, you need to install [Node.js](https://nodejs.org) and [run the server API](../api/README.md) locally to send data for account creation.
+
+**Important Note**  
+You will need two terminals running simultaneously:  
+1. One for the main banking app created in the [HTML templates and routing](../1-template-route/README.md) lesson.  
+2. Another for the [Bank App server API](../api/README.md) set up earlier.  
+
+Both servers need to be running to proceed with the lesson. They will operate on different ports (`3000` and `5000`), so there shouldn't be any conflicts.
+
+To confirm the server is running correctly, execute the following command in a terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Form and Controls
+
+The `<form>` element defines a section of an HTML document where users can input and submit data using interactive controls. Forms can include various user interface (UI) controls, with `<input>` and `<button>` being the most common.
+
+For example, to create a field where users can enter their username, you can use:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+The `name` attribute specifies the property name when the form data is sent. The `id` attribute links the `<label>` to the form control.
+
+> Explore the full list of [`<input>` types](https://developer.mozilla.org/docs/Web/HTML/Element/input) and [other form controls](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) to understand the native UI elements available for building your interface.
+
+✅ Note that `<input>` is an [empty element](https://developer.mozilla.org/docs/Glossary/Empty_element), meaning it doesn't require a closing tag. You can use the self-closing `<input/>` notation, but it's optional.
+
+The `<button>` element within a form has a unique behavior. If you don't specify its `type` attribute, it will automatically submit the form data to the server when clicked. Here are the possible `type` values:
+
+- `submit`: The default type within a `<form>`, it triggers the form submission.
+- `reset`: Resets all form controls to their initial values.
+- `button`: Does not assign any default behavior. You can define custom actions using JavaScript.
+
+### Task
+
+Start by adding a form to the `login` template. We'll need a *username* field and a *Login* button.
+
+```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>
+```
+
+Notice the inclusion of a `<label>` element. `<label>` elements provide names for UI controls, such as the username field. Labels improve form readability and offer additional benefits:
+
+- Associating a label with a form control helps users with assistive technologies (e.g., screen readers) understand the expected input.
+- Clicking on the label focuses on the associated input, making it easier to interact with on touch-screen devices.
+
+> [Accessibility](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) is a crucial aspect of web development that is often overlooked. Using [semantic HTML elements](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) correctly makes it easier to create accessible content. Learn more about [web accessibility](https://developer.mozilla.org/docs/Web/Accessibility) to avoid common mistakes and become a responsible developer.
+
+Next, add a second form for registration below the login form:
+
+```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>
+```
+
+The `value` attribute sets a default value for an input field. Notice that the `balance` input uses the `number` type. Does it look different from the other inputs? Try interacting with it.
+
+✅ Can you navigate and interact with the forms using only a keyboard? How would you do that?
+
+## Submitting Data to the Server
+
+Now that we have a functional UI, the next step is to send the data to the server. Test the current code by clicking the *Login* or *Register* button. What happens?
+
+Did you notice the change in your browser's URL?
+
+![Screenshot of the browser's URL change after clicking the Register button](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.en.png)
+
+By default, a `<form>` submits data to the current server URL using the [GET method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), appending the form data to the URL. However, this method has limitations:
+
+- Limited data size (around 2000 characters).
+- Data is visible in the URL (not ideal for sensitive information like passwords).
+- Doesn't support file uploads.
+
+To overcome these issues, you can use the [POST method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5), which sends data in the HTTP request body without these limitations.
+
+> While POST is commonly used for sending data, [in certain cases](https://www.w3.org/2001/tag/doc/whenToUseGet.html), the GET method is preferred, such as for search fields.
+
+### Task
+
+Add `action` and `method` attributes to the registration form:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Now try registering a new account with your name. After clicking the *Register* button, you should see something like this:
+
+![A browser window at the address localhost:5000/api/accounts, showing a JSON string with user data](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.en.png)
+
+If successful, the server will respond with a [JSON](https://www.json.org/json-en.html) object containing the created account data.
+
+✅ Try registering again with the same name. What happens?
+
+## Submitting Data Without Reloading the Page
+
+You may have noticed an issue: submitting the form redirects the browser to the server URL, leaving the app. Since we're building a [Single-page application (SPA)](https://en.wikipedia.org/wiki/Single-page_application), we want to avoid page reloads.
+
+To send form data without reloading the page, we can use JavaScript. Instead of specifying a URL in the `action` attribute, you can use JavaScript code prefixed with `javascript:` to define custom actions. This approach requires implementing tasks that the browser would normally handle:
+
+- Extracting form data.
+- Encoding the data into a suitable format.
+- Creating and sending the HTTP request.
+
+### Task
+
+Replace the registration form's `action` attribute with:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Open `app.js` and add a new function called `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+This function retrieves the form element using `getElementById()` and uses [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) to extract key/value pairs from the form controls. The data is converted to a regular object using [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) and serialized to [JSON](https://www.json.org/json-en.html), a common format for web data exchange.
+
+Next, create a function named `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' };
+  }
+}
+```
+
+This function uses the `async` keyword, indicating it contains [asynchronous code](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). The `await` keyword pauses execution until the asynchronous code completes, such as waiting for the server response.
+
+Here's a quick video explaining `async/await`:
+
+[![Async and Await for managing promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
+
+> 🎥 Click the image above for a video about async/await.
+
+The `fetch()` API sends JSON data to the server. It requires two parameters:
+
+- The server URL (`//localhost:5000/api/accounts`).
+- Request settings, including the `POST` method and the `body`. Since we're sending JSON, we set the `Content-Type` header to `application/json`.
+
+The server responds with JSON, which we parse using `await response.json()`. This method is asynchronous, so we use `await` to handle potential errors during parsing.
+
+Update the `register` function to call `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Since `await` is used, add the `async` keyword to the `register` function:
+
+```js
+async function register() {
+```
+
+Finally, add logs to check the result. The final function should look like this:
+
+```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);
+}
+```
+
+Now, if you open your [browser developer tools](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) and register a new account, the page won't reload, but you'll see a confirmation message in the console.
+
+![Screenshot showing log message in the browser console](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.en.png)
+
+✅ Is the data sent to the server securely? What happens if someone intercepts the request? Learn more about [HTTPS](https://en.wikipedia.org/wiki/HTTPS) for secure data communication.
+
+## Data Validation
+
+If you try registering without entering a username, the server will return a [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).) error.
+
+Before sending data to the server, it's good practice to [validate form data](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) to ensure valid requests. HTML5 form controls offer built-in validation using attributes like:
+
+- `required`: Ensures the field is filled before submission.
+- `minlength` and `maxlength`: Sets minimum and maximum character limits for text fields.
+- `min` and `max`: Defines numerical field limits.
+- `type`: Specifies the expected data type (e.g., `number`, `email`, `file`) and may alter the field's appearance.
+- `pattern`: Allows validation using a [regular expression](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions).
+Tip: You can adjust the appearance of your form controls based on whether they are valid or invalid by using the `:valid` and `:invalid` CSS pseudo-classes.
+### Task
+
+There are 2 required fields to create a valid new account: the username and currency. The other fields are optional. Update the form's HTML by using both the `required` attribute and text in the field's label to indicate this:
+
+```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>
+```
+
+Although this particular server implementation does not enforce specific limits on the maximum length of the fields, it's always a good practice to define reasonable limits for any user text entry.
+
+Add a `maxlength` attribute to the text fields:
+
+```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">
+```
+
+Now, if you press the *Register* button and a field does not comply with a validation rule we defined, you should see something like this:
+
+![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.en.png)
+
+Validation performed *before* sending any data to the server is called **client-side** validation. However, keep in mind that not all checks can be performed without sending the data. For instance, we cannot verify here if an account already exists with the same username without making a request to the server. Additional validation performed on the server is called **server-side** validation.
+
+Typically, both types of validation need to be implemented. While client-side validation enhances the user experience by providing instant feedback, server-side validation is essential to ensure the user data you process is reliable and secure.
+
+---
+
+## 🚀 Challenge
+
+Display an error message in the HTML if the user already exists.
+
+Here's an example of what the final login page might look like after applying some styling:
+
+![Screenshot of the login page after adding CSS styles](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.en.png)
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Review & Self Study
+
+Developers have come up with very creative approaches to building forms, especially when it comes to validation strategies. Explore different form designs by browsing [CodePen](https://codepen.com); can you find any interesting and inspiring examples?
+
+## Assignment
+
+[Style your bank app](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/7-bank-project/2-forms/assignment.md b/translations/en/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..cf9014b8
--- /dev/null
+++ b/translations/en/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-28T11:18:58+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "en"
+}
+-->
+# Style your bank app
+
+## Instructions
+
+Create a new `styles.css` file and link it to your current `index.html` file. In the CSS file you just created, add some styling to make the *Login* and *Dashboard* pages look neat and organized. Try to create a color theme to give your app its own unique branding.
+
+> Tip: You can modify the HTML and add new elements and classes if necessary.
+
+## Rubric
+
+| Criteria | Exemplary                                                                                                               | Adequate                                                                       | Needs Improvement                                                                             |
+| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+|          | All pages look clean and easy to read, with a consistent color theme and clearly defined sections.                      | Pages are styled but lack a theme or have sections that are not clearly defined. | Pages lack styling, sections appear disorganized, and the information is hard to read.        |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/7-bank-project/3-data/README.md b/translations/en/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..adb04ebf
--- /dev/null
+++ b/translations/en/7-bank-project/3-data/README.md
@@ -0,0 +1,347 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-28T11:14:08+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "en"
+}
+-->
+# Build a Banking App Part 3: Methods of Fetching and Using Data
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Introduction
+
+At the heart of every web application lies *data*. Data can take various forms, but its primary purpose is to present information to the user. As web apps become more interactive and complex, how users access and interact with this information has become a critical aspect of web development.
+
+In this lesson, we’ll explore how to fetch data from a server asynchronously and use it to display information on a web page without reloading the HTML.
+
+### Prerequisite
+
+Before starting this lesson, you should have completed the [Login and Registration Form](../2-forms/README.md) section of the web app. Additionally, you need to install [Node.js](https://nodejs.org) and [run the server API](../api/README.md) locally to access account data.
+
+To verify that the server is running correctly, execute the following command in a terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX and Data Fetching
+
+Traditional websites update the displayed content when a user clicks a link or submits a form by reloading the entire HTML page. Each time new data is needed, the web server sends back a completely new HTML page, which the browser processes. This interrupts the user’s current action and limits interactions during the reload. This workflow is known as a *Multi-Page Application* or *MPA*.
+
+![Update workflow in a multi-page application](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.en.png)
+
+As web applications became more complex and interactive, a new technique called [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) was introduced. AJAX allows web apps to send and retrieve data from a server asynchronously using JavaScript, without reloading the HTML page. This results in faster updates and smoother user interactions. Once new data is received from the server, the current HTML page can be updated using JavaScript and the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API. Over time, this approach evolved into what we now call a [*Single-Page Application* or *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Update workflow in a single-page application](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.en.png)
+
+When AJAX was first introduced, the only available API for fetching data asynchronously was [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Modern browsers, however, now support the more convenient and powerful [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), which uses promises and is better suited for handling JSON data.
+
+> While all modern browsers support the `Fetch API`, if you want your web app to work on older browsers, it’s a good idea to check the [compatibility table on caniuse.com](https://caniuse.com/fetch) first.
+
+### Task
+
+In [the previous lesson](../2-forms/README.md), we implemented the registration form to create an account. Now, we’ll add code to log in using an existing account and fetch its data. Open the `app.js` file and add a new `login` function:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Here, we start by retrieving the form element using `getElementById()`, and then we get the username from the input field using `loginForm.user.value`. Each form control can be accessed by its name (set in the HTML using the `name` attribute) as a property of the form.
+
+Similar to what we did for registration, we’ll create another function to perform a server request, but this time to retrieve account data:
+
+```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' };
+  }
+}
+```
+
+We use the `fetch` API to request data asynchronously from the server. This time, we don’t need any additional parameters other than the URL, as we’re only querying data. By default, `fetch` creates a [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP request, which is exactly what we need here.
+
+✅ `encodeURIComponent()` is a function that escapes special characters for URLs. What problems might arise if we don’t use this function and directly include the `user` value in the URL?
+
+Next, let’s update our `login` function to use `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');
+}
+```
+
+Since `getAccount` is an asynchronous function, we use the `await` keyword to wait for the server’s response. As with any server request, we also need to handle errors. For now, we’ll simply log the error message and revisit this later.
+
+We then need to store the data somewhere so we can use it to display information on the dashboard. Since the `account` variable doesn’t exist yet, we’ll create a global variable for it at the top of our file:
+
+```js
+let account = null;
+```
+
+Once the user data is saved in a variable, we can navigate from the *login* page to the *dashboard* using the `navigate()` function we already have.
+
+Finally, we need to call our `login` function when the login form is submitted. Modify the HTML as follows:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Test everything by registering a new account and logging in with the same account.
+
+Before moving on, let’s complete the `register` function by adding this at the bottom:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ By default, browsers only allow server APIs to be called from the *same domain and port* as the web page being viewed. This is a security mechanism enforced by browsers. But wait—our web app runs on `localhost:3000`, while the server API runs on `localhost:5000`. Why does it work? By using a technique called [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), it’s possible to perform cross-origin HTTP requests if the server includes special headers in its response, allowing exceptions for specific domains.
+
+> Learn more about APIs by taking this [lesson](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)
+
+## Update HTML to Display Data
+
+Now that we have the user data, we need to update the existing HTML to display it. We already know how to retrieve an element from the DOM using methods like `document.getElementById()`. Once you have a base element, here are some APIs you can use to modify it or add child elements:
+
+- Use the [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) property to change the text of an element. Note that changing this value removes all the element’s children (if any) and replaces them with the provided text. This makes it an efficient way to remove all children of an element by assigning an empty string `''` to it.
+
+- Use [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) along with the [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) method to create and attach one or more new child elements.
+
+✅ The [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) property can also be used to change an element’s HTML content, but it should be avoided as it’s vulnerable to [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) attacks.
+
+### Task
+
+Before moving to the dashboard screen, let’s address an issue on the *login* page. Currently, if you try to log in with a non-existent username, an error message is shown in the console, but nothing changes visually for the user.
+
+Let’s add a placeholder element in the login form to display an error message if needed. A good spot would be just before the login `<button>`:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+This `<div>` element is empty, so nothing will appear on the screen until we add content to it. We also assign it an `id` to make it easy to retrieve with JavaScript.
+
+Go back to the `app.js` file and create a helper function called `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+This function is straightforward: given an element *id* and *text*, it updates the text content of the DOM element with the matching `id`. Let’s use this function to replace the previous error message in the `login` function:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Now, if you try to log in with an invalid account, you should see something like this:
+
+![Screenshot showing the error message displayed during login](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.en.png)
+
+While the error message is now visible, screen readers won’t announce it. To make dynamically added text accessible to screen readers, we need to use a [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Here, we’ll use a specific type of live region called an alert:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Apply the same behavior to the `register` function errors (and don’t forget to update the HTML).
+
+## Display Information on the Dashboard
+
+Using the techniques we’ve just learned, we’ll now display the account information on the dashboard page.
+
+Here’s an example of what an account object received from the server looks like:
+
+```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 }
+  ],
+}
+```
+
+> Note: To make testing easier, you can use the pre-existing `test` account, which already contains data.
+
+### Task
+
+Let’s start by modifying the "Balance" section in the HTML to include placeholder elements:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+We’ll also add a new section below to display the account description:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Since the account description serves as a title for the content below it, it’s marked up semantically as a heading. Learn more about the importance of [heading structure](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) for accessibility, and review the page to identify other potential headings.
+
+Next, we’ll create a new function in `app.js` to populate the placeholders:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+First, we ensure that the account data is available before proceeding. Then, we use the `updateElement()` function we created earlier to update the HTML.
+
+> To make the balance display more user-friendly, we use the [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) method to ensure the value is displayed with two decimal places.
+
+Now, we need to call the `updateDashboard()` function whenever the dashboard is loaded. If you’ve already completed the [lesson 1 assignment](../1-template-route/assignment.md), this should be straightforward. Otherwise, you can use the following implementation.
+
+Add this code to the end of the `updateRoute()` function:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+And update the route definitions with:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+With this change, the `updateDashboard()` function will be called every time the dashboard page is displayed. After logging in, you should see the account balance, currency, and description.
+
+## Create Table Rows Dynamically with HTML Templates
+
+In [lesson 1](../1-template-route/README.md), we used HTML templates along with the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) method to implement navigation in our app. Templates can also be used for smaller, repetitive parts of a page.
+
+We’ll use a similar approach to display the list of transactions in the HTML table.
+
+### Task
+
+Add a new template to the HTML `<body>`:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+This template represents a single table row with three columns: *date*, *object*, and *amount* of a transaction.
+
+Next, add an `id` property to the `<tbody>` element of the table in the dashboard template to make it easier to find with JavaScript:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+Now that the HTML is ready, let’s switch to JavaScript and create a new function called `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;
+}
+```
+
+This function does exactly what its name suggests: it uses the template we created earlier to generate a new table row and fills in its contents with transaction data. We’ll use this function in `updateDashboard()` to populate the table:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Here, we use the [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) method to create a new DOM fragment. This allows us to work on the fragment before attaching it to the HTML table.
+
+Finally, we need to update the `updateElement()` function to support more than just text content. Modify its code as follows:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+```
+
+We use the [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) method, which allows us to attach either text or [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) to a parent element. This makes it versatile for all our use cases.
+If you try using the `test` account to log in, you should now see a transaction list on the dashboard 🎉.
+
+---
+
+## 🚀 Challenge
+
+Work together to make the dashboard page look like a real banking app. If you've already styled your app, try using [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) to create a [responsive design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) that works well on both desktop and mobile devices.
+
+Here's an example of a styled dashboard page:
+
+![Screenshot of an example result of the dashboard after styling](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.en.png)
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Assignment
+
+[Refactor and comment your code](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/7-bank-project/3-data/assignment.md b/translations/en/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..c46a647d
--- /dev/null
+++ b/translations/en/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-28T11:15:56+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "en"
+}
+-->
+# Refactor and comment your code
+
+## Instructions
+
+As your codebase grows, it's essential to refactor your code regularly to ensure it remains readable and maintainable over time. Add comments and refactor your `app.js` to enhance the quality of the code:
+
+- Extract constants, such as the server API base URL.
+- Consolidate similar code: for instance, you can create a `sendRequest()` function to centralize the code used in both `createAccount()` and `getAccount()`.
+- Reorganize the code to improve readability, and include comments.
+
+## Rubric
+
+| Criteria | Outstanding                                                                                                                                                   | Satisfactory                                                                                     | Needs Improvement                                                                     |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+|          | Code is well-commented, organized into clear sections, and easy to follow. Constants are extracted, and a consolidated `sendRequest()` function has been created. | Code is clean but could benefit from additional comments, constant extraction, or consolidation. | Code is disorganized, lacks comments, constants are not extracted, and code is not consolidated. |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/7-bank-project/4-state-management/README.md b/translations/en/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..f6bc0a85
--- /dev/null
+++ b/translations/en/7-bank-project/4-state-management/README.md
@@ -0,0 +1,294 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-28T11:19:15+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "en"
+}
+-->
+# Build a Banking App Part 4: Concepts of State Management
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Introduction
+
+As a web application grows, managing data flows becomes increasingly challenging. Which code retrieves the data, which page uses it, where and when it needs to be updated...it’s easy to end up with messy code that’s hard to maintain. This is especially true when you need to share data across different pages of your app, such as user information. The concept of *state management* has always been present in all types of programs, but as web apps grow in complexity, it has become a critical aspect to consider during development.
+
+In this final part, we’ll revisit the app we built to improve how the state is managed, enabling browser refresh support at any point and ensuring data persists across user sessions.
+
+### Prerequisite
+
+You need to have completed the [data fetching](../3-data/README.md) section of the web app for this lesson. Additionally, you need to install [Node.js](https://nodejs.org) and [run the server API](../api/README.md) locally to manage account data.
+
+You can verify that the server is running correctly by executing this command in a terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Rethink state management
+
+In the [previous lesson](../3-data/README.md), we introduced a basic concept of state in our app using the global `account` variable, which holds the bank data for the currently logged-in user. However, our current implementation has some shortcomings. Try refreshing the page while on the dashboard. What happens?
+
+There are three issues with the current code:
+
+- The state is not persistent, so refreshing the browser takes you back to the login page.
+- Multiple functions modify the state, which can make tracking changes difficult as the app grows. It’s easy to forget to update one.
+- The state is not cleared properly, meaning that when you click *Logout*, the account data remains even though you’re on the login page.
+
+We could address these issues one by one, but that would lead to more code duplication and make the app harder to maintain. Alternatively, we could pause for a moment and rethink our approach.
+
+> What problems are we really trying to solve here?
+
+[State management](https://en.wikipedia.org/wiki/State_management) is about finding a good strategy to address these two key challenges:
+
+- How to keep the data flows in an app easy to understand?
+- How to ensure the state data is always synchronized with the user interface (and vice versa)?
+
+Once these challenges are addressed, other issues may either be resolved or become easier to tackle. There are many ways to approach these problems, but we’ll use a common solution that involves **centralizing the data and the methods to modify it**. The data flows would look like this:
+
+![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.en.png)
+
+> We won’t cover the part where data automatically triggers view updates here, as it involves more advanced concepts of [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming). It’s a great topic for a deeper dive if you’re interested.
+
+✅ There are many libraries with different approaches to state management, [Redux](https://redux.js.org) being a popular choice. Exploring its concepts and patterns can help you understand potential issues in large web apps and how to solve them.
+
+### Task
+
+Let’s start with some refactoring. Replace the `account` declaration:
+
+```js
+let account = null;
+```
+
+With:
+
+```js
+let state = {
+  account: null
+};
+```
+
+The idea is to *centralize* all app data into a single state object. For now, we only have `account` in the state, so this change doesn’t make a big difference, but it sets the stage for future enhancements.
+
+We also need to update the functions that use it. In the `register()` and `login()` functions, replace `account = ...` with `state.account = ...`;
+
+At the top of the `updateDashboard()` function, add this line:
+
+```js
+const account = state.account;
+```
+
+This refactoring doesn’t bring significant improvements on its own, but it lays the groundwork for the next changes.
+
+## Track data changes
+
+Now that we’ve introduced the `state` object to store our data, the next step is to centralize updates. This makes it easier to track changes and when they occur.
+
+To prevent direct modifications to the `state` object, it’s a good practice to treat it as [*immutable*](https://en.wikipedia.org/wiki/Immutable_object), meaning it cannot be altered directly. Instead, you create a new state object whenever you want to make changes. This approach helps avoid unwanted [side effects](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) and opens up possibilities for features like undo/redo functionality, while also simplifying debugging. For instance, you could log every state change and maintain a history to trace the source of a bug.
+
+In JavaScript, you can use [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) to make an object immutable. Attempting to modify an immutable object will raise an exception.
+
+✅ Do you know the difference between a *shallow* and a *deep* immutable object? You can learn more [here](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Task
+
+Let’s create a new `updateState()` function:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+In this function, we create a new state object and copy data from the previous state using the [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Then, we override a specific property of the state object with new data using the [bracket notation](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]`. Finally, we lock the object to prevent modifications using `Object.freeze()`. Currently, the state only contains the `account` property, but this approach allows you to add more properties as needed.
+
+We’ll also update the `state` initialization to ensure the initial state is frozen:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Next, update the `register` function by replacing `state.account = result;` with:
+
+```js
+updateState('account', result);
+```
+
+Do the same for the `login` function, replacing `state.account = data;` with:
+
+```js
+updateState('account', data);
+```
+
+Now, let’s address the issue of account data not being cleared when the user clicks *Logout*.
+
+Create a new function `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+In `updateDashboard()`, replace the redirection `return navigate('/login');` with `return logout();`
+
+Try registering a new account, logging out, and logging back in to ensure everything works correctly.
+
+> Tip: You can monitor all state changes by adding `console.log(state)` at the bottom of `updateState()` and opening the browser’s developer tools console.
+
+## Persist the state
+
+Most web apps need to persist data to function properly. Critical data is typically stored in a database and accessed via a server API, like the user account data in our case. However, sometimes it’s useful to persist some data on the client side for a better user experience or improved loading performance.
+
+When deciding to persist data in the browser, consider these questions:
+
+- *Is the data sensitive?* Avoid storing sensitive data on the client, such as user passwords.
+- *How long do you need to keep this data?* Will the data be used only for the current session, or should it be stored indefinitely?
+
+There are various ways to store information in a web app, depending on your goals. For example, you can use URLs to store a search query and make it shareable. You can also use [HTTP cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies) for data that needs to be shared with the server, such as [authentication](https://en.wikipedia.org/wiki/Authentication) information.
+
+Another option is to use browser APIs for storing data. Two particularly useful ones are:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): A [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) that persists data specific to the current website across sessions. The data never expires.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): Similar to `localStorage`, but the data is cleared when the browser session ends.
+
+Both APIs only allow storing [strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). To store complex objects, you’ll need to serialize them using [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ If you want to create a web app without a server, you can use the [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) to create a client-side database. This is suitable for advanced use cases or when storing large amounts of data, though it’s more complex to use.
+
+### Task
+
+We want users to stay logged in until they explicitly click the *Logout* button, so we’ll use `localStorage` to store the account data. First, define a key for storing the data:
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Then, add this line at the end of the `updateState()` function:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+This ensures the user account data is persisted and always up-to-date, thanks to the centralized state updates we implemented earlier. This is where the benefits of our refactoring start to show 🙂.
+
+Since the data is saved, we also need to restore it when the app loads. To organize the initialization code, create a new `init` function that includes the previous code at the bottom of `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();
+```
+
+Here, we retrieve the saved data and update the state if any is found. It’s important to do this *before* updating the route, as some code may rely on the state during page updates.
+
+We can also make the *Dashboard* page the default page of the app, as account data is now persisted. If no data is found, the dashboard will redirect to the *Login* page. In `updateRoute()`, replace the fallback `return navigate('/login');` with `return navigate('/dashboard');`.
+
+Now log in to the app and try refreshing the page. You should remain on the dashboard. With this update, we’ve resolved all the initial issues...
+
+## Refresh the data
+
+...But we may have introduced a new one. Oops!
+
+Go to the dashboard using the `test` account, then run this command in a terminal to create a new transaction:
+
+```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
+```
+
+Now refresh the dashboard page in the browser. What happens? Do you see the new transaction?
+
+The state is persisted indefinitely thanks to `localStorage`, but it’s never updated until you log out and log back in!
+
+One way to fix this is to reload the account data every time the dashboard is loaded, ensuring the data stays fresh.
+
+### Task
+
+Create a new function `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);
+}
+```
+
+This function checks if the user is logged in and reloads the account data from the server.
+
+Create another function named `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+This function updates the account data and refreshes the HTML of the dashboard page. It should be called whenever the dashboard route is loaded. Update the route definition with:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+Now refresh the dashboard, and it should display the updated account data.
+
+---
+
+## 🚀 Challenge
+
+Now that we reload the account data whenever the dashboard is loaded, do you think it’s still necessary to persist *all* the account data?
+
+Work together to modify what is saved and loaded from `localStorage` to include only the data absolutely required for the app to function.
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Assignment
+
+[Implement "Add transaction" dialog](assignment.md)
+
+Here's an example result after completing the assignment:
+
+![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.en.png)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/7-bank-project/4-state-management/assignment.md b/translations/en/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..ffbd1d1e
--- /dev/null
+++ b/translations/en/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-28T11:20:45+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "en"
+}
+-->
+# Implement "Add transaction" dialog
+
+## Instructions
+
+Our banking app is still missing a key feature: the ability to add new transactions.  
+Using everything you've learned in the previous four lessons, implement an "Add transaction" dialog:
+
+- Add an "Add transaction" button to the dashboard page.
+- Either create a new page with an HTML template or use JavaScript to show/hide the dialog HTML without leaving the dashboard page (you can use the [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) attribute for this, or CSS classes).
+- Ensure you address [keyboard and screen reader accessibility](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) for the dialog.
+- Implement an HTML form to collect input data.
+- Convert the form data into JSON and send it to the API.
+- Update the dashboard page with the new data.
+
+Refer to the [server API specifications](../api/README.md) to identify the API you need to call and the expected JSON format.
+
+Here's an example of the result after completing the task:
+
+![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.en.png)
+
+## Rubric
+
+| Criteria | Outstanding                                                                                     | Satisfactory                                                                                                           | Needs Improvement                           |
+| -------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
+|          | Adding a transaction is fully implemented, adhering to all best practices covered in the lessons. | Adding a transaction is implemented but does not fully follow the best practices covered in the lessons or works only partially. | Adding a transaction does not work at all. |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/7-bank-project/README.md b/translations/en/7-bank-project/README.md
new file mode 100644
index 00000000..64116a23
--- /dev/null
+++ b/translations/en/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-28T11:13:52+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "en"
+}
+-->
+# :dollar: Build a Bank
+
+In this project, you'll learn how to create a fictional bank. These lessons include instructions on designing a web app layout, setting up routes, building forms, managing state, and retrieving data from an API to access the bank's information.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.en.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.en.png) |
+|--------------------------------|--------------------------------|
+
+## Lessons
+
+1. [HTML Templates and Routes in a Web App](1-template-route/README.md)
+2. [Create a Login and Registration Form](2-forms/README.md)
+3. [Techniques for Fetching and Using Data](3-data/README.md)
+4. [State Management Concepts](4-state-management/README.md)
+
+### Credits
+
+These lessons were created with :hearts: by [Yohan Lasorsa](https://twitter.com/sinedied).
+
+If you'd like to learn how to build the [server API](/7-bank-project/api/README.md) used in these lessons, you can check out [this video series](https://aka.ms/NodeBeginner) (specifically videos 17 through 21).
+
+You can also explore [this interactive Learn tutorial](https://aka.ms/learn/express-api).
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/7-bank-project/api/README.md b/translations/en/7-bank-project/api/README.md
new file mode 100644
index 00000000..c4b130f4
--- /dev/null
+++ b/translations/en/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-28T11:16:11+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "en"
+}
+-->
+# Bank API
+
+> Bank API built with [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+The API is already built and is not part of the exercise.
+
+However, if you're interested in learning how to build an API like this, you can follow this video series: https://aka.ms/NodeBeginner (videos 17 through 21 cover this exact API).
+
+You can also check out this interactive tutorial: https://aka.ms/learn/express-api
+
+## Running the server
+
+Ensure you have [Node.js](https://nodejs.org) installed.
+
+1. Clone this repository [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Open your terminal and navigate to the `Web-Dev-For-Beginners/7-bank-project/api` folder.
+3. Run `npm install` and wait for the packages to be installed (this may take some time depending on your internet connection).
+4. Once the installation is complete, run `npm start` and you're all set.
+
+The server should start listening on port `5000`.
+*This server will run alongside the main bank app server terminal (listening on port `3000`), so do not close it.*
+
+> Note: All entries are stored in memory and are not saved permanently, so all data will be lost when the server is stopped.
+
+## API details
+
+Route                                        | Description
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Retrieve server information
+POST   /api/accounts/                        | Create an account, e.g., `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Retrieve all data for the specified account
+DELETE /api/accounts/:user                   | Delete the specified account
+POST   /api/accounts/:user/transactions      | Add a transaction, e.g., `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Delete the specified transaction
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/7-bank-project/solution/README.md b/translations/en/7-bank-project/solution/README.md
new file mode 100644
index 00000000..0df8b927
--- /dev/null
+++ b/translations/en/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-28T11:16:34+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "en"
+}
+-->
+# Bank app
+
+> Example solution for the bank app project, created using plain HTML5, CSS, and JavaScript (no frameworks or libraries involved).
+
+## Running the app
+
+First, ensure the [API server](../api/README.md) is up and running.
+
+You can use any web server to run the app, but since you should already have [Node.js](https://nodejs.org) installed to run the API, you can:
+
+1. Clone this repository using Git.
+2. Open a terminal, navigate to this directory, and run `npx lite-server .`. This will start a development web server on port `3000`.
+3. Open `http://localhost:3000` in your browser to access the app.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/8-code-editor/1-using-a-code-editor/README.md b/translations/en/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..59651698
--- /dev/null
+++ b/translations/en/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,156 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-28T11:54:26+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "en"
+}
+-->
+# Using a code editor
+
+This lesson introduces the basics of using [VSCode.dev](https://vscode.dev), a web-based code editor, so you can modify your code and contribute to a project without needing to install anything on your computer.
+
+## Learning objectives
+
+In this lesson, you will learn how to:
+
+- Use a code editor in a coding project
+- Track changes with version control
+- Customize the editor for development
+
+### Prerequisites
+
+Before starting, you need to create an account on [GitHub](https://github.com). If you don’t already have one, go to [GitHub](https://github.com/) and sign up.
+
+### Introduction
+
+A code editor is a vital tool for writing programs and collaborating on coding projects. Once you understand the basics of an editor and how to use its features, you can apply them to your coding tasks.
+
+## Getting started with VSCode.dev
+
+[VSCode.dev](https://vscode.dev) is a web-based code editor. You don’t need to install anything to use it—just open it like any other website. To get started, visit [https://vscode.dev](https://vscode.dev). If you’re not signed in to [GitHub](https://github.com/), follow the prompts to log in or create an account.
+
+Once it loads, the interface should look something like this:
+
+![Default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.en.png)
+
+There are three main sections, from left to right:
+
+1. The _activity bar_, which includes icons like the magnifying glass 🔎, the gear ⚙️, and others.
+2. The expanded activity bar, which defaults to the _Explorer_, also called the _side bar_.
+3. The code area on the right.
+
+Click on each icon to explore different menus. When finished, return to the _Explorer_ to start where you began.
+
+When you create or modify code, it will happen in the large area on the right. This is also where you’ll view existing code, as you’ll see next.
+
+## Open a GitHub repository
+
+The first step is to open a GitHub repository. There are several ways to do this. Below are two methods to open a repository and start making changes.
+
+### 1. Using the editor
+
+You can open a remote repository directly from the editor. When you visit [VSCode.dev](https://vscode.dev), you’ll see an _"Open Remote Repository"_ button:
+
+![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.en.png)
+
+Alternatively, you can use the command palette. The command palette is a search box where you can type commands or actions to find and execute them. To open it, go to the top-left menu, select _View_, and then choose _Command Palette_. You can also use the keyboard shortcut Ctrl-Shift-P (or Command-Shift-P on MacOS).
+
+![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.en.png)
+
+Once the menu opens, type _open remote repository_ and select the first option. You’ll see a list of repositories you’re part of or have recently opened. You can also paste a full GitHub URL into the box. Use the following URL:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ If successful, the repository’s files will load in the text editor.
+
+### 2. Using the URL
+
+You can also load a repository directly using its URL. For example, the full URL for the current repository is [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners). By replacing the GitHub domain with `VSCode.dev/github`, you can open the repository directly. The resulting URL would be [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Edit files
+
+Once the repository is open in your browser or vscode.dev, the next step is to make updates or changes to the project.
+
+### 1. Create a new file
+
+You can create a file in an existing folder or in the root directory. To create a new file, navigate to the desired location, click the _'New file ...'_ icon in the activity bar (on the left), name the file, and press Enter.
+
+![Create a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.en.png)
+
+### 2. Edit and save a file in the repository
+
+Using vscode.dev is convenient for making quick updates to your project without installing software locally. To update your code, click the _Explorer_ icon in the activity bar to view the repository’s files and folders. Select a file to open it in the code area, make your changes, and save.
+
+![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.en.png)
+
+After updating your project, click the _`source control`_ icon to view all the changes you’ve made to the repository.
+
+To review your changes, select the file(s) in the `Changes` folder in the expanded activity bar. This will open a 'Working Tree' where you can visually inspect the changes. Red indicates deletions, while green shows additions.
+
+![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.en.png)
+
+If you’re satisfied with your changes, hover over the `Changes` folder and click the `+` button to stage them. Staging prepares your changes for committing to GitHub.
+
+If you want to discard certain changes, hover over the `Changes` folder and click the `undo` icon.
+
+Next, type a `commit message` (a description of your changes), and click the `check icon` to commit and push your changes.
+
+When you’re done, click the `hamburger menu icon` at the top left to return to the repository on github.com.
+
+![Stage & commit changes](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Using extensions
+
+Extensions in VSCode add new features and customization options to improve your development workflow. They also provide support for multiple programming languages and can be either general-purpose or language-specific.
+
+To browse available extensions, click the _`Extensions icon`_ in the activity bar and type the extension’s name in the _'Search Extensions in Marketplace'_ field. You’ll see a list of extensions, each showing the **name, publisher, description, download count**, and **star rating**.
+
+![Extension details](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.en.png)
+
+You can also view:
+- Previously installed extensions in the _`Installed folder`_
+- Popular extensions in the _`Popular folder`_
+- Recommended extensions based on your workspace or recently opened files in the _`Recommended folder`_
+
+![View extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.en.png)
+
+### 1. Install Extensions
+
+To install an extension, type its name in the search field. Once it appears, click it to view more details in the code area. Then, click the _blue install button_ in either the activity bar or the code area.
+
+![Install extensions](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Customize Extensions
+
+After installing an extension, you may want to adjust its settings. To do this, click the _Extensions icon_, find the extension in the _Installed folder_, click the _**Gear icon**_, and select _Extensions Setting_.
+
+![Modify extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.en.png)
+
+### 3. Manage Extensions
+
+You can manage extensions based on your needs. For example:
+
+- **Disable:** Temporarily turn off an extension without uninstalling it.  
+  To disable, select the extension in the activity bar, click the Gear icon, and choose 'Disable' or 'Disable (Workspace)'. Alternatively, open the extension in the code area and click the blue Disable button.
+
+- **Uninstall:** Remove an extension completely.  
+  To uninstall, select the extension in the activity bar, click the Gear icon, and choose 'Uninstall'. Alternatively, open the extension in the code area and click the blue Uninstall button.
+
+---
+
+## Assignment
+
+[Create a resume website using vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Review & Self Study
+
+Learn more about [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) and its features.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the definitive source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/8-code-editor/1-using-a-code-editor/assignment.md b/translations/en/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..bae50500
--- /dev/null
+++ b/translations/en/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-28T11:55:25+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "en"
+}
+-->
+# Create a Resume Website Using vscode.dev
+
+_How cool would it be if a recruiter asked for your resume and you sent them a URL?_ 😎
+
+## Objectives
+
+After completing this assignment, you will learn how to:
+
+- Create a website to showcase your resume.
+
+### Prerequisites
+
+1. A GitHub account. Go to [GitHub](https://github.com/) and create an account if you don’t already have one.
+
+## Steps
+
+**Step 1:** Create a new GitHub repository and name it `my-resume`.
+
+**Step 2:** Create an `index.html` file in your repository. We’ll add at least one file directly on github.com because you can’t open an empty repository in vscode.dev.
+
+Click the `creating a new file` link, type the name `index.html`, and select the `Commit new file` button.
+
+![Create a new file on github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.en.png)
+
+**Step 3:** Open [VSCode.dev](https://vscode.dev) and select the `Open Remote Repository` button.
+
+Copy the URL of the repository you just created for your resume site and paste it into the input box:
+
+_Replace `your-username` with your GitHub username._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ If successful, you’ll see your project and the `index.html` file open in the text editor in your browser.
+
+![Create a new file](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.en.png)
+
+**Step 4:** Open the `index.html` file, paste the code below into the code area, and save.
+
+<details>
+    <summary><b>HTML code for the content of your resume website.</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>Your Name Goes Here!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- Resume header with your name and title -->
+                    <h1>Your Name Goes Here!</h1>
+                    <hr>
+                    Your Role!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>CONTACT</h2>
+                            <!-- Contact info including social media -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Write your email here</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Write your username here!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Write your username here!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>SKILLS</h2>
+                            <!-- Your skills -->
+                            <ul>
+                                <li>Skill 1!</li>
+                                <li>Skill 2!</li>
+                                <li>Skill 3!</li>
+                                <li>Skill 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>EDUCATION</h2>
+                            <!-- Your education -->
+                            <h3>Write your course here!</h3>
+                            <p>
+                                Write your institution here!
+                            </p>
+                            <p>
+                                Start - End Date
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>ABOUT</h2>
+                            <!-- About you -->
+                            <p>Write a blurb about yourself!</p>
+                        </section>
+                        <section>
+                            <h2>WORK EXPERIENCE</h2>
+                            <!-- Your work experience -->
+                            <h3>Job Title</h3>
+                            <p>
+                                Organization Name Goes Here | Start Month – End Month
+                            </p>
+                            <ul>
+                                    <li>Task 1 - Write what you did!</li>
+                                    <li>Task 2 - Write what you did!</li>
+                                    <li>Write the outcomes/impact of your contribution</li>
+                                    
+                            </ul>
+                            <h3>Job Title 2</h3>
+                            <p>
+                                Organization Name Goes Here | Start Month – End Month
+                            </p>
+                            <ul>
+                                    <li>Task 1 - Write what you did!</li>
+                                    <li>Task 2 - Write what you did!</li>
+                                    <li>Write the outcomes/impact of your contribution</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Replace the _placeholder text_ in the HTML code with your resume details.
+
+**Step 5:** Hover over the `my-resume` folder, click the `New File ...` icon, and create two new files in your project: `style.css` and `codeswing.json`.
+
+**Step 6:** Open the `style.css` file, paste the code below, and save.
+
+<details>
+        <summary><b>CSS code to format the layout of the site.</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>
+
+**Step 6:** Open the `codeswing.json` file, paste the code below, and save.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Step 7:** Install the `Codeswing extension` to preview the resume website in the code area.
+
+Click the _`Extensions`_ icon in the activity bar and type in Codeswing. Either click the _blue install button_ in the expanded activity bar to install it or use the install button that appears in the code area when you select the extension to load more information. Once the extension is installed, you’ll see changes in your project in the code area 😃.
+
+![Install extensions](../../../../8-code-editor/images/install-extension.gif)
+
+This is what your screen will look like after installing the extension.
+
+![Codeswing extension in action](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.en.png)
+
+If you’re happy with the changes you made, hover over the `Changes` folder and click the `+` button to stage the changes.
+
+Type a commit message _(a description of the changes you made to the project)_ and commit your changes by clicking the `check`. Once you’re done working on your project, select the hamburger menu icon at the top left to return to the repository on GitHub.
+
+Congratulations 🎉 You’ve just created your resume website using vscode.dev in a few steps.
+
+## 🚀 Challenge
+
+Open a remote repository where you have permission to make changes and update some files. Then, try creating a new branch with your changes and make a Pull Request.
+
+## Review & Self Study
+
+Read more about [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) and its other features.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/CODE_OF_CONDUCT.md b/translations/en/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..05454417
--- /dev/null
+++ b/translations/en/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-28T11:13:41+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "en"
+}
+-->
+# Microsoft Open Source Code of Conduct
+
+This project follows the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Resources:
+
+- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- For questions or concerns, contact [opencode@microsoft.com](mailto:opencode@microsoft.com)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/CONTRIBUTING.md b/translations/en/CONTRIBUTING.md
new file mode 100644
index 00000000..f67cd9a2
--- /dev/null
+++ b/translations/en/CONTRIBUTING.md
@@ -0,0 +1,22 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-28T11:12:28+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "en"
+}
+-->
+# Contributing
+
+This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA), which confirms that you have the rights to your contribution and that you grant us permission to use it. For more details, visit [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+When you submit a pull request, a CLA-bot will automatically check if you need to provide a CLA and will update the PR accordingly (e.g., with a label or comment). Just follow the instructions provided by the bot. You only need to complete this process once for all repositories that use our CLA. Additionally, please try to explain the reason behind your changes so we can better understand your request.
+
+This project follows the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).  
+For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/README.md b/translations/en/README.md
new file mode 100644
index 00000000..b20680e5
--- /dev/null
+++ b/translations/en/README.md
@@ -0,0 +1,208 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T11:09:44+00:00",
+  "source_file": "README.md",
+  "language_code": "en"
+}
+-->
+[![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)  
+
+Follow these steps to start using these resources:  
+1. **Fork the Repository**: Click [![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 the Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Join The Azure AI Foundry Discord and connect with experts and fellow developers**](https://discord.com/invite/ByRwuEEgH4)  
+
+# Web Development for Beginners - A Curriculum  
+
+Learn the basics of web development with this 12-week course created by Microsoft Cloud Advocates. The 24 lessons cover JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage with quizzes, discussions, and practical assignments to deepen your understanding. This project-based approach ensures effective learning and skill-building. Start your coding journey today!  
+
+#### 🧑‍🎓 _Are you a student?_  
+
+Check out the [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) for beginner resources, student packs, and even opportunities to earn free certificate vouchers. Bookmark this page and revisit it regularly as new content is added monthly.  
+
+### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript  
+
+Don't miss our new Generative AI curriculum!  
+
+Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to get started!  
+
+![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.en.png)  
+
+- Lessons covering everything from the basics to Retrieval-Augmented Generation (RAG).  
+- Interact with historical characters using GenAI and our companion app.  
+- A fun and engaging narrative that takes you on a time-traveling adventure!  
+
+![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.en.png)  
+
+Each lesson includes an assignment, a knowledge check, and a challenge to help you learn topics like:  
+- Prompting and prompt engineering  
+- Generating text and images  
+- Building search applications  
+
+Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to get started!  
+
+## 🌱 Getting Started  
+
+> **Teachers**, we’ve [included some suggestions](for-teachers.md) on how to use this curriculum. Share your feedback [in our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for each lesson, start with a pre-lecture quiz, read the lecture material, complete the activities, and test your understanding with the post-lecture quiz.  
+
+Collaborate with peers on projects to enhance your learning experience! Join discussions in our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), where moderators are available to answer your questions.  
+
+For additional study materials, explore [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon).  
+
+### 📋 Setting up your environment  
+
+This curriculum comes with a ready-to-use development environment! You can choose to run it in a [Codespace](https://github.com/features/codespaces/) (_a browser-based environment with no installations required_) or locally on your computer using a text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Create your repository  
+To save your work, create your own copy of this repository. Click the **Use this template** button at the top of the page to create a new repository in your GitHub account with a copy of the curriculum.  
+
+Follow these steps:  
+1. **Fork the Repository**: Click the "Fork" button at the top-right corner of this page.  
+2. **Clone the Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Running the curriculum in a Codespace  
+
+In your copy of this repository, click the **Code** button and select **Open with Codespaces**. This will create a new Codespace for you to work in.  
+
+[!Codespace](./images/createcodespace.png)  
+
+#### Running the curriculum locally on your computer  
+
+To run this curriculum locally, you’ll need a text editor, a browser, and a command-line tool. The first lesson, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), will guide you through selecting the tools that work best for you.  
+
+We recommend using [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, which includes a built-in [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). You can download Visual Studio Code [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Clone your repository to your computer. Click the **Code** button and copy the URL:  
+
+    [!CodeSpace](./images/createcodespace.png)  
+
+    Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) within [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) and run the following command, replacing `<your-repository-url>` with the URL you copied:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Open the folder in Visual Studio Code. Click **File** > **Open Folder** and select the folder you just cloned.  
+
+> Recommended Visual Studio Code extensions:  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Preview HTML pages within Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - Write code faster  
+
+## 📂 Each lesson includes:  
+
+- Optional sketchnote  
+- Optional supplemental video  
+- Pre-lesson warmup quiz  
+- Written lesson  
+- Step-by-step guides for project-based lessons  
+- Knowledge checks  
+- A challenge  
+- Supplemental reading  
+- Assignment  
+- [Post-lesson quiz](https://ff-quizzes.netlify.app/)  
+
+> **A note about quizzes**: All quizzes are located in the Quiz-app folder, with 48 quizzes of three questions each. They are available [here](https://ff-quizzes.netlify.app/). The quiz app can be run locally or deployed to Azure; follow the instructions in the `quiz-app` folder.  
+
+## 🗃️ Lessons  
+
+|     |                       Project Name                       |                            Concepts Taught                             | Learning Objectives                                                                                                                 |                                                         Linked Lesson                                                          |         Author          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Getting Started                      |           Introduction to Programming and Tools of the Trade           | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Getting Started                      |             Basics of GitHub, includes working with a team             | How to use GitHub in your project, how to collaborate with others on a code base                                                    |                            [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Getting Started                      |                             Accessibility                              | Learn the basics of web accessibility                                                                                               |                       [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        JS Basics                         |                         JavaScript Data Types                          | The basics of JavaScript data types                                                                                                 |                                       [Data Types](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        JS Basics                         |                         Functions and Methods                          | Learn about functions and methods to manage an application's logic flow                                                             |                              [Functions and Methods](./2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |  
+| 06  |                        JS Basics                         |                        Making Decisions with JS                        | Learn how to create conditions in your code using decision-making methods                                                           |                                 [Making Decisions](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        JS Basics                         |                            Arrays and Loops                            | Work with data using arrays and loops in JavaScript                                                                                 |                                   [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML in Practice                            | Build the HTML to create an online terrarium, focusing on building a layout                                                         |                                 [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS in Practice                             | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive                     |                                  [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript Closures, DOM manipulation                  | Build the JavaScript to make the terrarium work as a drag-and-drop interface, focusing on closures and DOM manipulation             |                  [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          Build a Typing Game                           | Learn how to use keyboard events to drive the logic of your JavaScript app                                                          |                                [Event-Driven Programming](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         Working with Browsers                          | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension                               |                               [About Browsers](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage                      |                [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) |          Background processes in the browser, web performance          | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make   |             [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             More Advanced Game Development with JavaScript             | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game              |                      [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           Drawing to canvas                            | Learn about the Canvas API, used to draw elements to a screen                                                                       |                                [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   Moving elements around the screen                    | Discover how elements can gain motion using the cartesian coordinates and the Canvas API                                            |                           [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          Collision detection                           | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game    |                              [Collision Detection](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             Keeping score                              | Perform math calculations based on the game's status and performance                                                                |                                    [Keeping Score](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     Ending and restarting the game                     | Learn about ending and restarting the game, including cleaning up assets and resetting variable values                              |                                [The Ending Condition](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 HTML Templates and Routes in a Web App                 | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates                             |                            [HTML Templates and Routes](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  Build a Login and Registration Form                   | Learn about building forms and handling validation routines                                                                          |                                           [Forms](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   Methods of Fetching and Using Data                   | How data flows in and out of your app, how to fetch it, store it, and dispose of it                                                 |                                            [Data](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      Concepts of State Management                      | Learn how your app retains state and how to manage it programmatically                                                              |                                [State Management](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
+
+
+## 🏫 Pedagogy
+
+Our curriculum is designed with two key teaching principles in mind:
+* project-based learning
+* frequent quizzes
+
+The program covers the fundamentals of JavaScript, HTML, and CSS, along with the latest tools and techniques used by modern web developers. Students will gain hands-on experience by building a typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and a banking app for businesses. By the end of the series, students will have a solid understanding of web development.
+
+> 🎓 You can take the first few lessons in this curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) on Microsoft Learn!
+
+By aligning the content with projects, the learning process becomes more engaging for students, and concept retention is enhanced. We also created several introductory lessons on JavaScript basics, paired with videos from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection, some of which were authored by contributors to this curriculum.
+
+Additionally, a low-stakes quiz before class helps set the student's focus on the topic, while a second quiz after class reinforces retention. This curriculum is designed to be flexible and enjoyable, and it can be taken in full or in part. The projects start small and gradually increase in complexity over the 12-week cycle.
+
+While we intentionally avoided introducing JavaScript frameworks to focus on the foundational skills needed as a web developer before adopting a framework, a great next step after completing this curriculum would be learning about Node.js through another video series: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Visit our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback!
+
+
+## 🧭 Offline access
+
+You can view this documentation offline using [Docsify](https://docsify.js.org/#/). Fork this repository, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repository, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`.
+
+## 📘 PDF
+
+A PDF of all the lessons is available [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Other Courses
+
+Our team has created other courses! Check out:
+
+- [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)
+
+## License
+
+This repository is licensed under the MIT license. See the [LICENSE](../../LICENSE) file for more information.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/SECURITY.md b/translations/en/SECURITY.md
new file mode 100644
index 00000000..4b731cd0
--- /dev/null
+++ b/translations/en/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-28T11:12:43+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "en"
+}
+-->
+## Security
+
+Microsoft prioritizes the security of its software products and services, including all source code repositories managed through our GitHub organizations, such as [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), and [our GitHub organizations](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+If you believe you have identified a security vulnerability in any Microsoft-owned repository that aligns with [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), please report it to us as outlined below.
+
+## Reporting Security Issues
+
+**Do not report security vulnerabilities through public GitHub issues.**
+
+Instead, report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+If you prefer not to log in, you can send an email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message using our PGP key, which can be downloaded from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+You should receive a response within 24 hours. If you do not, please follow up via email to ensure we received your initial message. Additional information is available at [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Please include the following information (as much as you can provide) to help us better understand the nature and scope of the potential issue:
+
+  * Type of issue (e.g., buffer overflow, SQL injection, cross-site scripting, etc.)
+  * Full paths of the source file(s) related to the issue
+  * The location of the affected source code (tag/branch/commit or direct URL)
+  * Any special configuration needed to reproduce the issue
+  * Step-by-step instructions to reproduce the issue
+  * Proof-of-concept or exploit code (if available)
+  * Impact of the issue, including how an attacker might exploit it
+
+Providing this information will help us address your report more efficiently.
+
+If you are submitting a report for a bug bounty, more detailed reports may result in a higher bounty award. For more information about our active programs, please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) page.
+
+## Preferred Languages
+
+We prefer all communications to be in English.
+
+## Policy
+
+Microsoft adheres to the principles of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/SUPPORT.md b/translations/en/SUPPORT.md
new file mode 100644
index 00000000..bc3802a5
--- /dev/null
+++ b/translations/en/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-28T11:12:03+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "en"
+}
+-->
+# Support
+
+## How to file issues and get help  
+
+This project uses GitHub Issues to track bugs and feature requests. Before submitting a new issue, please check the existing ones to avoid duplicates. If you need to report a bug or request a feature, create a new Issue.
+
+For assistance and questions about using this project, please consult [our contributing guidelines](CONTRIBUTING.md).
+
+## Microsoft Support Policy  
+
+Support for this project is limited to the resources mentioned above.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/_404.md b/translations/en/_404.md
new file mode 100644
index 00000000..7c1979e4
--- /dev/null
+++ b/translations/en/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-28T11:12:17+00:00",
+  "source_file": "_404.md",
+  "language_code": "en"
+}
+-->
+# Under construction
+
+We are currently working on this page. Please visit again later.
+
+If you have any questions, feel free to [open an issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose).
+
+**[Return to homepage](../../../../../../..)**
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the definitive source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/docs/_navbar.md b/translations/en/docs/_navbar.md
new file mode 100644
index 00000000..2da082b8
--- /dev/null
+++ b/translations/en/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-28T11:47:45+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "en"
+}
+-->
+- Translations
+  - [English (United States)](../../../docs/README)
+  - [Bengali](../../../docs/README.bn)
+  - [Chinese (Simplified)](../../../docs/README.zh-cn)
+  - [Chinese (Traditional)](../../../docs/README.zh-tw)
+  - [Spanish](../../../docs/README.es)
+  - [French](../../../docs/README.fr)
+  - [Greek](../../../docs/README.el)
+  - [Hindi](../../../docs/README.hi)
+  - [Malay](../../../docs/README.ms)
+  - [Malayalam](../../../docs/README.ml)
+  - [Tamil](../../../docs/README.ta)
+  - [Telugu](../../../docs/README.te)
+  - [Indonesian](../../../docs/README.id)
+  - [Italian](../../../docs/README.it)
+  - [Japanese](../../../docs/README.ja)
+  - [Dutch](../../../docs/README.nl)
+  - [Nepali](../../../docs/README.np)
+  - [Portuguese](../../../docs/README.pt)
+  - [Russian](../../../docs/README.ru)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/docs/_sidebar.md b/translations/en/docs/_sidebar.md
new file mode 100644
index 00000000..0ab0451d
--- /dev/null
+++ b/translations/en/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-28T11:47:26+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "en"
+}
+-->
+- Introduction
+  - [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 Basics
+  - [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)
+
+- Typing game
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Browser Extension
+  - [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)
+
+- Space Game
+  - [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 Project
+  - [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)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/for-teachers.md b/translations/en/for-teachers.md
new file mode 100644
index 00000000..93ce0d18
--- /dev/null
+++ b/translations/en/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-28T11:13:15+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "en"
+}
+-->
+## For Educators
+
+Would you like to use this curriculum in your classroom? Feel free to do so!
+
+In fact, you can use it directly on GitHub by leveraging GitHub Classroom.
+
+To get started, fork this repository. You'll need to create a separate repository for each lesson, so you'll need to extract each folder into its own repository. This way, [GitHub Classroom](https://classroom.github.com/classrooms) can handle each lesson individually.
+
+These [detailed instructions](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) will guide you on how to set up your classroom.
+
+## Using it in Moodle, Canvas, or Blackboard
+
+This curriculum is compatible with these Learning Management Systems! You can use the [Moodle upload file](../../../../../../../teaching-files/webdev-moodle.mbz) for the complete content or try the [Common Cartridge file](../../../../../../../teaching-files/webdev-common-cartridge.imscc), which includes part of the content. Note that Moodle Cloud does not support full Common Cartridge exports, so it's better to use the Moodle download file, which can also be uploaded into Canvas. Let us know how we can enhance this experience for you.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.en.png)
+> The curriculum displayed in a Moodle classroom
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.en.png)
+> The curriculum displayed in Canvas
+
+## Using the repository as is
+
+If you'd prefer to use this repository as it currently stands, without GitHub Classroom, that's also an option. You'll need to coordinate with your students on which lesson to work through together.
+
+In an online format (Zoom, Teams, or similar), you could create breakout rooms for quizzes and mentor students to prepare them for learning. Then, invite students to complete the quizzes and submit their answers as 'issues' at a designated time. You could follow the same approach for assignments if you want students to collaborate openly.
+
+If you'd rather use a more private format, ask your students to fork the curriculum, lesson by lesson, into their own private GitHub repositories and grant you access. This way, they can complete quizzes and assignments privately and submit them to you via issues on your classroom repository.
+
+There are many ways to adapt this for an online classroom setting. Let us know what works best for you!
+
+## Please share your feedback!
+
+We want this curriculum to be as effective as possible for you and your students. Connect with us in the [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) and open a [**new issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) to share your requests, report bugs, or provide feedback.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/lesson-template/README.md b/translations/en/lesson-template/README.md
new file mode 100644
index 00000000..67f2084f
--- /dev/null
+++ b/translations/en/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-28T11:48:01+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "en"
+}
+-->
+# [Lesson Topic]
+
+![Embed a video here](../../../lesson-template/video-url)
+
+## [Pre-lecture quiz](../../../lesson-template/quiz-url)
+
+[Overview of what will be learned]
+
+### Introduction
+
+Outline of the topics that will be covered.
+
+> Notes
+
+### Prerequisite
+
+What steps or knowledge should have been completed before starting this lesson?
+
+### Preparation
+
+Steps to prepare before beginning this lesson.
+
+---
+
+[Go through the content step by step]
+
+## [Topic 1]
+
+### Task:
+
+Collaborate to gradually improve your codebase and develop the project using shared code:
+
+```html
+code blocks
+```
+
+✅ Knowledge Check - take this opportunity to challenge students with open-ended questions to deepen their understanding.
+
+## [Topic 2]
+
+## [Topic 3]
+
+🚀 Challenge: Present a collaborative challenge for students to work on during class to further develop the project.
+
+Optional: Include a screenshot of the final UI from the lesson if relevant.
+
+## [Post-lecture quiz](../../../lesson-template/quiz-url)
+
+## Review & Self Study
+
+**Assignment Due [MM/YY]**: [Assignment Name](assignment.md)
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/lesson-template/assignment.md b/translations/en/lesson-template/assignment.md
new file mode 100644
index 00000000..2f93df36
--- /dev/null
+++ b/translations/en/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-28T11:48:16+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "en"
+}
+-->
+# [Assignment Name]
+
+## Instructions
+
+## Rubric
+
+| Criteria | Outstanding | Satisfactory | Requires Improvement |
+| -------- | ----------- | ------------ | --------------------- |
+|          |             |              |                       |
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/en/quiz-app/README.md b/translations/en/quiz-app/README.md
new file mode 100644
index 00000000..f3b7743b
--- /dev/null
+++ b/translations/en/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-28T11:53:58+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "en"
+}
+-->
+# Quiz app
+
+These quizzes are the pre- and post-lecture quizzes for the data science curriculum at https://aka.ms/webdev-beginners
+
+## Adding a translated quiz set
+
+Add a quiz translation by creating matching quiz structures in the `assets/translations` folders. The original quizzes are located in `assets/translations/en`. The quizzes are divided into several sections. Ensure the numbering matches the correct quiz section. There are 40 quizzes in total in this curriculum, starting from 0.
+
+  
+<details>
+<summary>Here's the structure of a translation file:</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>
+
+After editing the translations, update the `index.js` file in the translation folder to import all the files according to the conventions in `en`.
+
+Edit the `index.js` file in `assets/translations` to import the newly translated files. 
+
+For example, if your translation JSON file is named `ex.json`, use 'ex' as the localization key, and include it as shown below to import it:
+
+<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>
+
+## Run the Quiz App locally
+
+### Prerequisites
+
+- A GitHub account
+- [Node.js and Git](https://nodejs.org/)
+
+### Install & Setup
+
+1. Create a repository using this [template](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Clone your new repository and navigate to the quiz-app directory:
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Install the npm packages and dependencies:
+
+   ```bash
+   npm install
+   ```
+
+### Build the app
+
+1. To build the solution, run:
+
+   ```bash
+   npm run build
+   ```
+
+### Start the App
+
+1. To run the solution, execute:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Optional] Linting
+
+1. To ensure the code is properly linted, run:
+
+    ```bash
+    npm run lint
+    ```
+
+## Deploy the Quiz-app to Azure 
+
+### Prerequisites
+- An Azure Subscription. You can sign up for a free one [here](https://aka.ms/azure-free).
+
+    _Estimated cost to deploy this quiz-app: FREE_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Once signed in to Azure via the link above, select a subscription and resource group, then:
+
+- Static Web App details: Provide a name and choose a hosting plan.
+- GitHub Login: Set your deployment source to GitHub, then log in and complete the required fields in the form:
+    - *Organization* – Select your organization.
+    - *Repository* – Choose the Web Dev for Beginners curriculum repository. 
+    - *Branch* - Select a branch (main). 
+- Build Presets: Azure Static Web Apps uses a detection algorithm to identify the framework used in your application. 
+    - *App location* - ./quiz-app
+    - *Api location* -
+    - *Output location* - dist
+- Deployment: Click 'Review + Create', then 'Create'.
+
+    After deployment, a workflow file will be created in the *.github* directory of your repository. This workflow file contains instructions for events that will trigger a re-deployment of the app to Azure, such as _a **push** to branch **main**, etc._
+
+    <details>
+    <summary>Example Workflow File</summary>
+    Here’s an example of what the GitHub Actions workflow file might look like:
+    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>
+
+- Post-Deployment: Once deployment is complete, click 'Go to Deployment' and then 'View app in browser'.
+
+After your GitHub Action (workflow) runs successfully, refresh the live page to see your application.
+
+---
+
+**Disclaimer**:  
+This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
\ No newline at end of file
diff --git a/translations/es/README.md b/translations/es/README.md
index cb0b1ebc..69d3a6cb 100644
--- a/translations/es/README.md
+++ b/translations/es/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b672130244189715ac084c3259f6ab58",
-  "translation_date": "2025-08-24T11:48:05+00:00",
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T10:57:56+00:00",
   "source_file": "README.md",
   "language_code": "es"
 }
@@ -14,139 +14,142 @@ CO_OP_TRANSLATOR_METADATA:
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
 
 [![Observadores de GitHub](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/)  
-[![Bifurcaciones de GitHub](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/)  
+[![Forks de GitHub](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/)  
 [![Estrellas de GitHub](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)  
 
 [![Abrir en 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)  
 
-# Desarrollo Web para Principiantes - Un Currículo
+[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)  
 
-Aprende los fundamentos del desarrollo web con nuestro curso integral de 12 semanas creado por los Microsoft Cloud Advocates. Cada una de las 24 lecciones profundiza en JavaScript, CSS y HTML a través de proyectos prácticos como terrarios, extensiones de navegador y juegos espaciales. Participa en cuestionarios, discusiones y tareas prácticas. Mejora tus habilidades y optimiza tu retención de conocimientos con nuestra efectiva pedagogía basada en proyectos. ¡Comienza tu viaje de programación hoy mismo!
+Sigue estos pasos para comenzar a usar estos recursos:  
+1. **Haz un Fork del repositorio**: Haz clic en [![Forks de GitHub](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. **Clona el repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Únete al Discord de Azure AI Foundry y conecta con expertos y otros desarrolladores**](https://discord.com/invite/ByRwuEEgH4)  
 
-#### 🧑‍🎓 _¿Eres estudiante?_
+# Desarrollo Web para Principiantes - Un Currículo  
 
-Visita la [**página del Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) donde encontrarás recursos para principiantes, paquetes para estudiantes e incluso formas de obtener un cupón para un certificado gratuito. Esta es la página que querrás marcar como favorita y revisar de vez en cuando, ya que cambiamos el contenido mensualmente.
+Aprende los fundamentos del desarrollo web con nuestro curso integral de 12 semanas creado por Microsoft Cloud Advocates. Cada una de las 24 lecciones explora JavaScript, CSS y HTML a través de proyectos prácticos como terrarios, extensiones de navegador y juegos espaciales. Participa en cuestionarios, discusiones y tareas prácticas. Mejora tus habilidades y optimiza tu retención de conocimientos con nuestra efectiva pedagogía basada en proyectos. ¡Comienza tu viaje de programación hoy!  
 
-### 📣 Anuncio - _Nuevo Currículo_ sobre Generative AI para JavaScript
+#### 🧑‍🎓 _¿Eres estudiante?_  
 
-¡No te pierdas nuestro nuevo currículo sobre Generative AI!
+Visita la [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) donde encontrarás recursos para principiantes, paquetes para estudiantes e incluso formas de obtener un voucher para un certificado gratuito. Es una página que querrás marcar como favorita y revisar regularmente, ya que actualizamos el contenido mensualmente.  
 
-Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para comenzar.
+### 📣 Anuncio - _Nuevo Currículo_ sobre Generative AI para JavaScript recién lanzado  
 
-<div>
-  <img src="./images/background.png" width="600px" />
-</div>
+¡No te pierdas nuestro nuevo currículo sobre Generative AI!  
+
+Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para comenzar.  
+
+![Fondo](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.es.png)  
 
 - Lecciones que cubren desde lo básico hasta RAG.  
 - Interactúa con personajes históricos usando GenAI y nuestra aplicación complementaria.  
-- Una narrativa divertida y atractiva, ¡viajarás en el tiempo!  
+- Narrativa divertida y atractiva, ¡viajarás en el tiempo!  
 
-<div>
-  <img src="./images/character.png" width="600px" />
-</div>
+![Personaje](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.es.png)  
 
-Cada lección incluye una tarea para completar, una verificación de conocimientos y un desafío para aprender temas como:  
-- Creación de prompts y diseño de prompts  
-- Generación de aplicaciones de texto e imágenes  
+Cada lección incluye una tarea para completar, una verificación de conocimientos y un desafío para guiarte en temas como:  
+- Creación de prompts y ingeniería de prompts  
+- Generación de aplicaciones de texto e imagen  
 - Aplicaciones de búsqueda  
 
-Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para comenzar.
+Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para comenzar.  
 
-## 🌱 Comenzando
+## 🌱 Comenzando  
 
-> **Profesores**, hemos [incluido algunas sugerencias](for-teachers.md) sobre cómo usar este currículo. Nos encantaría recibir sus comentarios [en nuestro foro de discusión](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner).
+> **Profesores**, hemos [incluido algunas sugerencias](for-teachers.md) sobre cómo usar este currículo. Nos encantaría recibir sus comentarios [en nuestro foro de discusión](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner).  
 
-**[Estudiantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lección, comienza con un cuestionario previo a la clase y continúa leyendo el material de la lección, completando las diversas actividades y verificando tu comprensión con el cuestionario posterior a la clase.
+**[Estudiantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lección, comienza con un cuestionario previo a la clase y continúa leyendo el material de la lección, completando las diversas actividades y verificando tu comprensión con el cuestionario posterior a la clase.  
 
-Para mejorar tu experiencia de aprendizaje, conéctate con tus compañeros para trabajar juntos en los proyectos. Las discusiones son bienvenidas en nuestro [foro de discusión](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), donde nuestro equipo de moderadores estará disponible para responder tus preguntas.
+Para mejorar tu experiencia de aprendizaje, conecta con tus compañeros para trabajar juntos en los proyectos. Las discusiones son bienvenidas en nuestro [foro de discusión](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), donde nuestro equipo de moderadores estará disponible para responder tus preguntas.  
 
-Para continuar tu educación, te recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiales de estudio adicionales.
+Para continuar tu educación, recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiales de estudio adicionales.  
 
-### 📋 Configurando tu entorno
+### 📋 Configurando tu entorno  
 
-¡Este currículo tiene un entorno de desarrollo listo para usar! Al comenzar, puedes elegir ejecutar el currículo en un [Codespace](https://github.com/features/codespaces/) (_un entorno basado en navegador, sin necesidad de instalaciones_), o localmente en tu computadora usando un editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
+Este currículo tiene un entorno de desarrollo listo para usar. Al comenzar, puedes elegir ejecutar el currículo en un [Codespace](https://github.com/features/codespaces/) (_un entorno basado en navegador, sin necesidad de instalaciones_), o localmente en tu computadora usando un editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
 
-#### Crea tu repositorio
-Para que puedas guardar tu trabajo fácilmente, se recomienda que crees tu propia copia de este repositorio. Puedes hacerlo haciendo clic en el botón **Use this template** en la parte superior de la página. Esto creará un nuevo repositorio en tu cuenta de GitHub con una copia del currículo.
+#### Crea tu repositorio  
+Para guardar tu trabajo fácilmente, se recomienda que crees tu propia copia de este repositorio. Puedes hacerlo haciendo clic en el botón **Use this template** en la parte superior de la página. Esto creará un nuevo repositorio en tu cuenta de GitHub con una copia del currículo.  
 
 Sigue estos pasos:  
-1. **Haz un fork del repositorio**: Haz clic en el botón "Fork" en la esquina superior derecha de esta página.  
-2. **Clona el repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+1. **Haz un Fork del repositorio**: Haz clic en el botón "Fork" en la esquina superior derecha de esta página.  
+2. **Clona el repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
 
-#### Ejecutando el currículo en un Codespace
+#### Ejecutando el currículo en un Codespace  
 
-En tu copia de este repositorio que creaste, haz clic en el botón **Code** y selecciona **Open with Codespaces**. Esto creará un nuevo Codespace para que trabajes en él.
+En tu copia del repositorio que creaste, haz clic en el botón **Code** y selecciona **Open with Codespaces**. Esto creará un nuevo Codespace para que trabajes en él.  
 
-<img src="./images/createcodespace.png" alt="Crear Codespace" style="width:270px;"/>
+[!Codespace](../..)./images/createcodespace.png)  
 
-#### Ejecutando el currículo localmente en tu computadora
+#### Ejecutando el currículo localmente en tu computadora  
 
-Para ejecutar este currículo localmente en tu computadora, necesitarás un editor de texto, un navegador y una herramienta de línea de comandos. Nuestra primera lección, [Introducción a los Lenguajes de Programación y Herramientas del Oficio](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), te guiará a través de varias opciones para cada una de estas herramientas para que selecciones la que mejor funcione para ti.
+Para ejecutar este currículo localmente en tu computadora, necesitarás un editor de texto, un navegador y una herramienta de línea de comandos. Nuestra primera lección, [Introducción a los Lenguajes de Programación y Herramientas de Trabajo](../../1-getting-started-lessons/1-intro-to-programming-languages), te guiará a través de varias opciones para cada una de estas herramientas para que selecciones lo que mejor funcione para ti.  
 
-Nuestra recomendación es usar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como tu editor, que también tiene un [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Puedes descargar Visual Studio Code [aquí](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
+Nuestra recomendación es usar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como tu editor, que también tiene un [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Puedes descargar Visual Studio Code [aquí](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
 
-1. Clona tu repositorio en tu computadora. Puedes hacerlo haciendo clic en el botón **Code** y copiando la URL:
+1. Clona tu repositorio en tu computadora. Puedes hacerlo haciendo clic en el botón **Code** y copiando la URL:  
 
-    <img src="./images/createcodespace.png" alt="Copia la URL de tu repositorio" style="width:270px;"/>
+    [!CodeSpace](./images/createcodespace.png)  
 
-    Luego, abre el [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro de [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) y ejecuta el siguiente comando, reemplazando `<your-repository-url>` con la URL que acabas de copiar:
+    Luego, abre el [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro de [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) y ejecuta el siguiente comando, reemplazando `<your-repository-url>` con la URL que acabas de copiar:  
 
     ```bash 
     git clone <your-repository-url>
-    ```
+    ```  
 
-2. Abre la carpeta en Visual Studio Code. Puedes hacerlo haciendo clic en **File** > **Open Folder** y seleccionando la carpeta que acabas de clonar.
+2. Abre la carpeta en Visual Studio Code. Puedes hacerlo haciendo clic en **File** > **Open Folder** y seleccionando la carpeta que acabas de clonar.  
 
-> Extensiones recomendadas para Visual Studio Code:
->
+> Extensiones recomendadas para Visual Studio Code:  
+>  
 > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para previsualizar páginas HTML dentro de Visual Studio Code  
 > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ayudarte a escribir código más rápido  
 
-## 📂 Cada lección incluye:
+## 📂 Cada lección incluye:  
 
-- Sketchnote opcional  
-- Video complementario opcional  
-- Cuestionario de calentamiento previo a la lección  
-- Lección escrita  
-- Para lecciones basadas en proyectos, guías paso a paso sobre cómo construir el proyecto  
-- Verificaciones de conocimiento  
-- Un desafío  
-- Lectura complementaria  
-- Tarea  
-- Cuestionario posterior a la lección  
+- sketchnote opcional  
+- video complementario opcional  
+- cuestionario de calentamiento previo a la lección  
+- lección escrita  
+- para lecciones basadas en proyectos, guías paso a paso sobre cómo construir el proyecto  
+- verificaciones de conocimiento  
+- un desafío  
+- lectura complementaria  
+- tarea  
+- [cuestionario posterior a la lección](https://ff-quizzes.netlify.app/)  
 
-> **Nota sobre los cuestionarios**: Todos los cuestionarios están contenidos en la carpeta Quiz-app, 48 cuestionarios en total con tres preguntas cada uno. Están vinculados desde las lecciones y la aplicación de cuestionarios puede ejecutarse localmente o desplegarse en Azure; sigue las instrucciones en la carpeta `quiz-app`. Se están localizando gradualmente.
+> **Una nota sobre los cuestionarios**: Todos los cuestionarios están contenidos en la carpeta Quiz-app, 48 cuestionarios en total con tres preguntas cada uno. Están disponibles [aquí](https://ff-quizzes.netlify.app/) y la aplicación de cuestionarios puede ejecutarse localmente o desplegarse en Azure; sigue las instrucciones en la carpeta `quiz-app`.  
 
-## 🗃️ Lecciones
+## 🗃️ Lecciones  
 
-|     |                       Nombre del Proyecto                       |                            Conceptos Enseñados                             | Objetivos de Aprendizaje                                                                                                           |                                                         Lección Vinculada                                                          |         Autor          |
-| :-: | :-------------------------------------------------------------: | :------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------: | :--------------------: |
-| 01  |                     Comenzando                                  |           Introducción a la Programación y Herramientas del Oficio         | Aprende los fundamentos detrás de la mayoría de los lenguajes de programación y sobre el software que ayuda a los desarrolladores | [Introducción a los Lenguajes de Programación y Herramientas del Oficio](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
-| 02  |                     Comenzando                                  |             Conceptos básicos de GitHub, incluye trabajo en equipo         | Cómo usar GitHub en tu proyecto y colaborar con otros en una base de código                                                      |                            [Introducción a GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
-| 03  |                     Comenzando                                  |                             Accesibilidad                                  | Aprende los conceptos básicos de accesibilidad web                                                                               |                       [Fundamentos de Accesibilidad](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
-| 04  |                        Conceptos Básicos de JS                  |                         Tipos de Datos en JavaScript                       | Los conceptos básicos de los tipos de datos en JavaScript                                                                        |                                       [Tipos de Datos](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
-| 05  |                        Conceptos Básicos de JS                  |                         Funciones y Métodos                                | Aprende sobre funciones y métodos para gestionar el flujo lógico de una aplicación                                               |                              [Funciones y Métodos](/2-js-basics/2-functions-methods/README.md)                               | Jasmine y Christopher |
-| 06  |                        Conceptos Básicos de JS                  |                        Tomando Decisiones con JS                           | Aprende a crear condiciones en tu código usando métodos de toma de decisiones                                                   |                                 [Tomando Decisiones](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
-| 07  |                        Conceptos Básicos de JS                  |                            Arreglos y Bucles                               | Trabaja con datos usando arreglos y bucles en JavaScript                                                                         |                                   [Arreglos y Bucles](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
-| 08  |       [Terrario](/3-terrarium/solution/README.md)               |                            HTML en la Práctica                             | Construye el HTML para crear un terrario en línea, enfocándote en construir un diseño                                            |                                 [Introducción a HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
-| 09  |       [Terrario](/3-terrarium/solution/README.md)               |                            CSS en la Práctica                              | Construye el CSS para estilizar el terrario en línea, enfocándote en los conceptos básicos de CSS, incluyendo hacer la página responsiva |                                  [Introducción a CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
-| 10  |            [Terrario](/3-terrarium/solution/README.md)          |                 Closures en JavaScript, manipulación del DOM               | Construye el JavaScript para hacer que el terrario funcione como una interfaz de arrastrar/soltar, enfocándote en closures y manipulación del DOM |                  [Closures en JavaScript, manipulación del DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
-| 11  |          [Juego de Mecanografía](/4-typing-game/solution/README.md) |                          Construye un Juego de Mecanografía                | Aprende a usar eventos de teclado para dirigir la lógica de tu aplicación JavaScript                                             |                                [Programación Basada en Eventos](/4-typing-game/typing-game/README.md)                                |       Christopher       |
-| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Trabajando con navegadores                          | Aprende cómo funcionan los navegadores, su historia y cómo estructurar los primeros elementos de una extensión de navegador          |                               [Sobre los navegadores](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Crear un formulario, llamar a una API y almacenar variables en el almacenamiento local | Construye los elementos de JavaScript de tu extensión de navegador para llamar a una API utilizando variables almacenadas en el almacenamiento local |                [APIs, Formularios y Almacenamiento Local](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Procesos en segundo plano en el navegador, rendimiento web          | Utiliza los procesos en segundo plano del navegador para gestionar el ícono de la extensión; aprende sobre el rendimiento web y algunas optimizaciones |             [Tareas en Segundo Plano y Rendimiento](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Desarrollo de juegos más avanzado con JavaScript             | Aprende sobre la herencia utilizando tanto clases como composición y el patrón Pub/Sub, como preparación para construir un juego     |                      [Introducción al Desarrollo Avanzado de Juegos](/6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Dibujar en canvas                            | Aprende sobre la API de Canvas, utilizada para dibujar elementos en una pantalla                                                   |                                [Dibujar en Canvas](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Mover elementos en la pantalla                    | Descubre cómo los elementos pueden adquirir movimiento utilizando coordenadas cartesianas y la API de Canvas                        |                           [Mover Elementos](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Detección de colisiones                           | Haz que los elementos colisionen y reaccionen entre sí utilizando teclas y proporciona una función de enfriamiento para garantizar el rendimiento del juego |                              [Detección de Colisiones](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Llevar la puntuación                              | Realiza cálculos matemáticos basados en el estado y rendimiento del juego                                                           |                                    [Llevar la Puntuación](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Terminar y reiniciar el juego                     | Aprende sobre cómo terminar y reiniciar el juego, incluyendo la limpieza de recursos y el reinicio de valores de variables          |                                [Condición de Finalización](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 Plantillas HTML y rutas en una aplicación web                 | Aprende cómo crear la estructura de la arquitectura de un sitio web multipágina utilizando rutas y plantillas HTML                  |                            [Plantillas HTML y Rutas](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Crear un formulario de inicio de sesión y registro                   | Aprende sobre cómo construir formularios y manejar rutinas de validación                                                            |                                           [Formularios](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Métodos para obtener y usar datos                   | Cómo los datos fluyen dentro y fuera de tu aplicación, cómo obtenerlos, almacenarlos y eliminarlos                                  |                                            [Datos](/7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Conceptos de gestión de estado                      | Aprende cómo tu aplicación retiene el estado y cómo gestionarlo programáticamente                                                   |                                [Gestión de Estado](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+|     |                       Nombre del Proyecto                       |                            Conceptos Enseñados                            | Objetivos de Aprendizaje                                                                                                           |                                                         Lección Vinculada                                                          |         Autor          |  
+| :-: | :-------------------------------------------------------------: | :-----------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------: | :--------------------: |  
+| 01  |                     Comenzando                                  |           Introducción a la Programación y Herramientas de Trabajo         | Aprende los fundamentos detrás de la mayoría de los lenguajes de programación y sobre el software que ayuda a los desarrolladores profesionales | [Introducción a los Lenguajes de Programación y Herramientas de Trabajo](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Comenzando                                  |             Conceptos básicos de GitHub, incluye trabajo en equipo         | Cómo usar GitHub en tu proyecto, cómo colaborar con otros en una base de código                                                   |                            [Introducción a GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Comenzando                                  |                             Accesibilidad                                  | Aprende los conceptos básicos de accesibilidad web                                                                                 |                       [Fundamentos de Accesibilidad](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        Conceptos Básicos de JS                  |                         Tipos de Datos en JavaScript                       | Los conceptos básicos de los tipos de datos en JavaScript                                                                          |                                       [Tipos de Datos](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        Conceptos Básicos de JS                  |                         Funciones y Métodos                                | Aprende sobre funciones y métodos para gestionar el flujo lógico de una aplicación                                                 |                              [Funciones y Métodos](./2-js-basics/2-functions-methods/README.md)                               | Jasmine y Christopher |  
+| 06  |                        Conceptos Básicos de JS                  |                        Tomando Decisiones con JS                           | Aprende cómo crear condiciones en tu código usando métodos de toma de decisiones                                                   |                                 [Tomando Decisiones](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        Conceptos Básicos de JS                  |                            Arrays y Bucles                                 | Trabaja con datos usando arrays y bucles en JavaScript                                                                             |                                   [Arrays y Bucles](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terrario](./3-terrarium/solution/README.md)              |                            HTML en Práctica                                | Construye el HTML para crear un terrario en línea, enfocándote en construir un diseño                                              |                                 [Introducción a HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terrario](./3-terrarium/solution/README.md)              |                            CSS en Práctica                                 | Construye el CSS para estilizar el terrario en línea, enfocándote en los conceptos básicos de CSS, incluyendo hacer la página responsiva |                                  [Introducción a CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 Closures de JavaScript, manipulación del DOM           | Crea el JavaScript para que el terrario funcione como una interfaz de arrastrar/soltar, enfocándote en closures y manipulación del DOM |                  [Closures de JavaScript, manipulación del DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md)             |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          Crear un juego de escritura                   | Aprende a usar eventos de teclado para dirigir la lógica de tu aplicación JavaScript                                                |                                [Programación basada en eventos](./4-typing-game/typing-game/README.md)                           |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         Trabajando con navegadores                     | Aprende cómo funcionan los navegadores, su historia y cómo estructurar los primeros elementos de una extensión de navegador          |                               [Sobre los navegadores](./5-browser-extension/1-about-browsers/README.md)                          |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | Crear un formulario, llamar a una API y almacenar variables en local storage | Crea los elementos de JavaScript de tu extensión de navegador para llamar a una API utilizando variables almacenadas en local storage |                [APIs, Formularios y Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md)               |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          Procesos en segundo plano en el navegador, rendimiento web    | Usa los procesos en segundo plano del navegador para gestionar el ícono de la extensión; aprende sobre rendimiento web y algunas optimizaciones |             [Tareas en segundo plano y rendimiento](./5-browser-extension/3-background-tasks-and-performance/README.md)          |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             Desarrollo de juegos más avanzado con JavaScript           | Aprende sobre herencia utilizando tanto clases como composición y el patrón Pub/Sub, como preparación para crear un juego            |                      [Introducción al desarrollo avanzado de juegos](./6-space-game/1-introduction/README.md)                    |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           Dibujar en canvas                            | Aprende sobre la API de Canvas, utilizada para dibujar elementos en una pantalla                                                    |                                [Dibujar en Canvas](./6-space-game/2-drawing-to-canvas/README.md)                                 |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   Mover elementos en la pantalla                       | Descubre cómo los elementos pueden adquirir movimiento utilizando coordenadas cartesianas y la API de Canvas                        |                           [Mover elementos](./6-space-game/3-moving-elements-around/README.md)                                   |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          Detección de colisiones                       | Haz que los elementos colisionen y reaccionen entre sí utilizando teclas y proporciona una función de enfriamiento para garantizar el rendimiento del juego |                              [Detección de colisiones](./6-space-game/4-collision-detection/README.md)                           |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             Mantener puntuación                        | Realiza cálculos matemáticos basados en el estado y rendimiento del juego                                                            |                                    [Mantener puntuación](./6-space-game/5-keeping-score/README.md)                               |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     Terminar y reiniciar el juego                      | Aprende sobre cómo terminar y reiniciar el juego, incluyendo la limpieza de recursos y el reinicio de valores de variables           |                                [Condición de finalización](./6-space-game/6-end-condition/README.md)                             |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 Plantillas HTML y rutas en una aplicación web           | Aprende a crear la estructura de la arquitectura de un sitio web multipágina utilizando rutas y plantillas HTML                     |                            [Plantillas HTML y rutas](./7-bank-project/1-template-route/README.md)                                |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  Crear un formulario de inicio de sesión y registro     | Aprende a crear formularios y manejar rutinas de validación                                                                          |                                           [Formularios](./7-bank-project/2-forms/README.md)                                      |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   Métodos para obtener y usar datos                    | Cómo los datos fluyen dentro y fuera de tu aplicación, cómo obtenerlos, almacenarlos y eliminarlos                                  |                                            [Datos](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      Conceptos de gestión de estado                    | Aprende cómo tu aplicación retiene el estado y cómo gestionarlo programáticamente                                                   |                                [Gestión de estado](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
 
 
 ## 🏫 Pedagogía
@@ -155,12 +158,12 @@ Nuestro plan de estudios está diseñado con dos principios pedagógicos clave e
 * aprendizaje basado en proyectos
 * cuestionarios frecuentes
 
-El programa enseña los fundamentos de JavaScript, HTML y CSS, así como las herramientas y técnicas más recientes utilizadas por los desarrolladores web actuales. Los estudiantes tendrán la oportunidad de adquirir experiencia práctica construyendo un juego de mecanografía, un terrario virtual, una extensión de navegador ecológica, un juego estilo "Space Invaders" y una aplicación bancaria para empresas. Al final de la serie, los estudiantes habrán adquirido una comprensión sólida del desarrollo web.
+El programa enseña los fundamentos de JavaScript, HTML y CSS, así como las herramientas y técnicas más recientes utilizadas por los desarrolladores web actuales. Los estudiantes tendrán la oportunidad de adquirir experiencia práctica construyendo un juego de escritura, un terrario virtual, una extensión de navegador ecológica, un juego estilo invasores del espacio y una aplicación bancaria para empresas. Al final de la serie, los estudiantes habrán adquirido una comprensión sólida del desarrollo web.
 
 
 > 🎓 ¡Puedes tomar las primeras lecciones de este plan de estudios como un [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) en Microsoft Learn!
 
-Al garantizar que el contenido se alinee con los proyectos, el proceso se vuelve más atractivo para los estudiantes y se mejora la retención de conceptos. También escribimos varias lecciones introductorias sobre los conceptos básicos de JavaScript, acompañadas de un video de la colección "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", algunos de cuyos autores contribuyeron a este plan de estudios.
+Al garantizar que el contenido se alinee con los proyectos, el proceso se hace más atractivo para los estudiantes y se mejora la retención de conceptos. También escribimos varias lecciones iniciales sobre los conceptos básicos de JavaScript para introducir ideas, acompañadas de un video de la colección "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", cuyos autores contribuyeron a este plan de estudios.
 
 Además, un cuestionario de bajo riesgo antes de la clase establece la intención del estudiante hacia el aprendizaje de un tema, mientras que un segundo cuestionario después de la clase asegura una mayor retención. Este plan de estudios fue diseñado para ser flexible y divertido y puede tomarse en su totalidad o en parte. Los proyectos comienzan pequeños y se vuelven cada vez más complejos al final del ciclo de 12 semanas.
 
@@ -175,12 +178,12 @@ Puedes ejecutar esta documentación sin conexión utilizando [Docsify](https://d
 
 ## 📘 PDF
 
-Un PDF de todas las lecciones se puede encontrar [aquí](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+Un PDF con todas las lecciones se puede encontrar [aquí](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
 
 
 ## 🎒 Otros Cursos
 
-¡Nuestro equipo produce otros cursos! Echa un vistazo:
+¡Nuestro equipo produce otros cursos! Mira:
 
 - [Generative AI for Beginners](https://aka.ms/genai-beginners)
 - [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@@ -201,5 +204,7 @@ Un PDF de todas las lecciones se puede encontrar [aquí](https://microsoft.githu
 
 Este repositorio está licenciado bajo la licencia MIT. Consulta el archivo [LICENSE](../../LICENSE) para más información.
 
+---
+
 **Descargo de responsabilidad**:  
-Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.
\ No newline at end of file
+Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.
\ No newline at end of file
diff --git a/translations/fa/README.md b/translations/fa/README.md
index f8850a8b..883b758e 100644
--- a/translations/fa/README.md
+++ b/translations/fa/README.md
@@ -1,105 +1,108 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b672130244189715ac084c3259f6ab58",
-  "translation_date": "2025-08-24T11:50:06+00:00",
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T11:00:01+00:00",
   "source_file": "README.md",
   "language_code": "fa"
 }
 -->
-[![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/)  
+[![لایسنس GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
+[![مشارکت‌کنندگان GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
+[![مشکلات GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
+[![درخواست‌های ادغام GitHub](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/)  
+[![تماشاگران GitHub](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](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](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)  
+[![باز کردن در 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)  
 
-اصول توسعه وب را با دوره جامع ۱۲ هفته‌ای ما که توسط Microsoft Cloud Advocates طراحی شده است، بیاموزید. هر یک از ۲۴ درس شامل پروژه‌های عملی مانند تراریوم‌ها، افزونه‌های مرورگر و بازی‌های فضایی است که به شما کمک می‌کند جاوااسکریپت، CSS و HTML را یاد بگیرید. با آزمون‌ها، بحث‌ها و تکالیف عملی درگیر شوید. مهارت‌های خود را تقویت کنید و دانش خود را با روش آموزشی مبتنی بر پروژه بهینه کنید. امروز سفر کدنویسی خود را آغاز کنید!  
+برای شروع استفاده از این منابع، مراحل زیر را دنبال کنید:  
+1. **فورک کردن مخزن**: روی [![فورک‌های GitHub](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. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**به دیسکورد Azure AI Foundry بپیوندید و با کارشناسان و توسعه‌دهندگان دیگر آشنا شوید**](https://discord.com/invite/ByRwuEEgH4)  
+
+# توسعه وب برای مبتدیان - یک برنامه درسی  
+
+اصول توسعه وب را با دوره جامع ۱۲ هفته‌ای ما از Microsoft Cloud Advocates بیاموزید. هر یک از ۲۴ درس شامل جاوااسکریپت، CSS و HTML از طریق پروژه‌های عملی مانند تراریوم‌ها، افزونه‌های مرورگر و بازی‌های فضایی است. با آزمون‌ها، بحث‌ها و تکالیف عملی درگیر شوید. مهارت‌های خود را تقویت کنید و دانش خود را با روش آموزشی مبتنی بر پروژه ما بهینه کنید. امروز سفر کدنویسی خود را آغاز کنید!  
 
 #### 🧑‍🎓 _دانشجو هستید؟_  
 
-به [**صفحه مرکز دانشجویان**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) مراجعه کنید، جایی که منابع مبتدی، بسته‌های دانشجویی و حتی راه‌هایی برای دریافت گواهی رایگان را پیدا خواهید کرد. این صفحه‌ای است که باید نشانک‌گذاری کنید و هر از گاهی بررسی کنید، زیرا محتوای آن ماهانه تغییر می‌کند.  
+به [**صفحه مرکز دانشجویی**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) مراجعه کنید، جایی که منابع مبتدی، بسته‌های دانشجویی و حتی راه‌هایی برای دریافت یک کوپن گواهینامه رایگان را خواهید یافت. این صفحه‌ای است که می‌خواهید نشانک‌گذاری کنید و هر از گاهی بررسی کنید، زیرا محتوای آن ماهانه تغییر می‌کند.  
 
-### 📣 اطلاعیه - _برنامه آموزشی جدید_ در مورد هوش مصنوعی مولد برای جاوااسکریپت منتشر شد  
+### 📣 اطلاعیه - _برنامه درسی جدید_ در مورد هوش مصنوعی مولد برای جاوااسکریپت به تازگی منتشر شده است  
 
-برنامه آموزشی جدید هوش مصنوعی مولد ما را از دست ندهید!  
+برنامه درسی جدید هوش مصنوعی مولد ما را از دست ندهید!  
 
 به [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) مراجعه کنید تا شروع کنید!  
 
-<div>  
-  <img src="./images/background.png" width="600px" />  
-</div>  
+![پس‌زمینه](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.fa.png)  
 
 - درس‌هایی که همه چیز را از اصول اولیه تا RAG پوشش می‌دهند.  
 - تعامل با شخصیت‌های تاریخی با استفاده از GenAI و اپلیکیشن همراه ما.  
-- روایت جذاب و سرگرم‌کننده، شما در حال سفر در زمان خواهید بود!  
+- روایت سرگرم‌کننده و جذاب، شما در حال سفر در زمان خواهید بود!  
 
-<div>  
-  <img src="./images/character.png" width="600px" />  
-</div>  
+![شخصیت](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.fa.png)  
 
-هر درس شامل یک تکلیف برای انجام، یک بررسی دانش و یک چالش است که شما را در یادگیری موضوعاتی مانند:  
-- ایجاد درخواست‌ها و مهندسی درخواست  
-- تولید اپلیکیشن‌های متن و تصویر  
+هر درس شامل یک تکلیف برای تکمیل، یک بررسی دانش و یک چالش است تا شما را در یادگیری موضوعاتی مانند:  
+- طراحی و مهندسی درخواست‌ها  
+- تولید متن و تصویر  
 - اپلیکیشن‌های جستجو  
 
 به [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) مراجعه کنید تا شروع کنید!  
 
-## 🌱 شروع کار  
+## 🌱 شروع به کار  
 
-> **معلمان**، ما [برخی پیشنهادات](for-teachers.md) در مورد نحوه استفاده از این برنامه آموزشی را درج کرده‌ایم. مشتاقانه منتظر بازخورد شما [در انجمن بحث ما](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) هستیم!  
+> **معلمان**، ما [برخی پیشنهادات](for-teachers.md) در مورد نحوه استفاده از این برنامه درسی گنجانده‌ایم. ما مشتاقانه منتظر بازخورد شما [در انجمن بحث ما](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) هستیم!  
 
-**[یادگیرندگان](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، برای هر درس، با آزمون پیش از درس شروع کنید و سپس مطالب درس را بخوانید، فعالیت‌های مختلف را انجام دهید و با آزمون پس از درس دانش خود را بررسی کنید.  
+**[یادگیرندگان](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، برای هر درس، با یک آزمون پیش از سخنرانی شروع کنید و با خواندن مطالب سخنرانی، تکمیل فعالیت‌های مختلف و بررسی درک خود با آزمون پس از سخنرانی ادامه دهید.  
 
 برای بهبود تجربه یادگیری خود، با همتایان خود ارتباط برقرار کنید تا روی پروژه‌ها با هم کار کنید! بحث‌ها در [انجمن بحث ما](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) تشویق می‌شوند، جایی که تیم مدیران ما برای پاسخ به سوالات شما در دسترس خواهد بود.  
 
 برای ادامه تحصیل، ما به شدت توصیه می‌کنیم [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) را برای مواد آموزشی اضافی بررسی کنید.  
 
-### 📋 تنظیم محیط کاری شما  
+### 📋 تنظیم محیط شما  
 
-این برنامه آموزشی دارای محیط توسعه آماده است! هنگامی که شروع می‌کنید، می‌توانید برنامه آموزشی را در یک [Codespace](https://github.com/features/codespaces/) (_یک محیط مبتنی بر مرورگر، بدون نیاز به نصب_) یا به صورت محلی روی کامپیوتر خود با استفاده از یک ویرایشگر متن مانند [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) اجرا کنید.  
+این برنامه درسی دارای یک محیط توسعه آماده است! هنگامی که شروع می‌کنید، می‌توانید برنامه درسی را در یک [Codespace](https://github.com/features/codespaces/) (_یک محیط مبتنی بر مرورگر، بدون نیاز به نصب_) یا به صورت محلی روی رایانه خود با استفاده از یک ویرایشگر متن مانند [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) اجرا کنید.  
 
 #### ایجاد مخزن خود  
-برای اینکه بتوانید به راحتی کار خود را ذخیره کنید، توصیه می‌شود که یک نسخه از این مخزن ایجاد کنید. می‌توانید این کار را با کلیک بر روی دکمه **Use this template** در بالای صفحه انجام دهید. این کار یک مخزن جدید در حساب GitHub شما با نسخه‌ای از برنامه آموزشی ایجاد می‌کند.  
+برای اینکه بتوانید به راحتی کار خود را ذخیره کنید، توصیه می‌شود که یک نسخه از این مخزن ایجاد کنید. می‌توانید این کار را با کلیک روی دکمه **Use this template** در بالای صفحه انجام دهید. این کار یک مخزن جدید در حساب GitHub شما با یک نسخه از برنامه درسی ایجاد می‌کند.  
 
 مراحل زیر را دنبال کنید:  
 1. **فورک کردن مخزن**: روی دکمه "Fork" در گوشه بالا-راست این صفحه کلیک کنید.  
-2. **کلون کردن مخزن**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
 
-#### اجرای برنامه آموزشی در یک Codespace  
+#### اجرای برنامه درسی در یک Codespace  
 
-در نسخه‌ای از این مخزن که ایجاد کرده‌اید، روی دکمه **Code** کلیک کنید و گزینه **Open with Codespaces** را انتخاب کنید. این کار یک Codespace جدید برای شما ایجاد می‌کند تا در آن کار کنید.  
+در نسخه‌ای از این مخزن که ایجاد کرده‌اید، روی دکمه **Code** کلیک کنید و **Open with Codespaces** را انتخاب کنید. این کار یک Codespace جدید برای شما ایجاد می‌کند تا در آن کار کنید.  
 
-<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>  
+[!Codespace](../..)./images/createcodespace.png)  
 
-#### اجرای برنامه آموزشی به صورت محلی روی کامپیوتر شما  
+#### اجرای برنامه درسی به صورت محلی روی رایانه شما  
 
-برای اجرای این برنامه آموزشی به صورت محلی روی کامپیوتر خود، به یک ویرایشگر متن، یک مرورگر و یک ابزار خط فرمان نیاز دارید. درس اول ما، [معرفی زبان‌های برنامه‌نویسی و ابزارهای مورد استفاده](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages)، شما را با گزینه‌های مختلف برای هر یک از این ابزارها آشنا می‌کند تا بتوانید آنچه برای شما مناسب است را انتخاب کنید.  
+برای اجرای این برنامه درسی به صورت محلی روی رایانه خود، به یک ویرایشگر متن، یک مرورگر و یک ابزار خط فرمان نیاز دارید. اولین درس ما، [مقدمه‌ای بر زبان‌های برنامه‌نویسی و ابزارهای مورد استفاده](../../1-getting-started-lessons/1-intro-to-programming-languages)، شما را با گزینه‌های مختلف برای هر یک از این ابزارها آشنا می‌کند تا بتوانید آنچه برای شما بهترین است را انتخاب کنید.  
 
-توصیه ما این است که از [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) به عنوان ویرایشگر خود استفاده کنید، که همچنین دارای یک [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخلی است. می‌توانید [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) را از اینجا دانلود کنید.  
+توصیه ما این است که از [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) به عنوان ویرایشگر خود استفاده کنید، که همچنین دارای یک [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخلی است. می‌توانید Visual Studio Code را [اینجا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) دانلود کنید.  
 
-1. مخزن خود را روی کامپیوتر کلون کنید. می‌توانید این کار را با کلیک بر روی دکمه **Code** و کپی کردن URL انجام دهید:  
+1. مخزن خود را به رایانه خود کلون کنید. می‌توانید این کار را با کلیک روی دکمه **Code** و کپی کردن URL انجام دهید:  
 
-    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>  
+    [!CodeSpace](./images/createcodespace.png)  
 
-    سپس، [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) را در [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) باز کنید و دستور زیر را اجرا کنید، جایگزین `<your-repository-url>` با URL که کپی کرده‌اید:  
+    سپس، [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) را در [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) باز کنید و دستور زیر را اجرا کنید، جایگزین `<your-repository-url>` با URL که به تازگی کپی کرده‌اید:  
 
     ```bash 
     git clone <your-repository-url>
     ```  
 
-2. پوشه را در Visual Studio Code باز کنید. می‌توانید این کار را با کلیک بر روی **File** > **Open Folder** و انتخاب پوشه‌ای که کلون کرده‌اید انجام دهید.  
+2. پوشه را در Visual Studio Code باز کنید. می‌توانید این کار را با کلیک روی **File** > **Open Folder** و انتخاب پوشه‌ای که به تازگی کلون کرده‌اید انجام دهید.  
 
->  افزونه‌های توصیه‌شده برای Visual Studio Code:  
+>  افزونه‌های پیشنهادی Visual Studio Code:  
 >  
 > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - برای پیش‌نمایش صفحات HTML در Visual Studio Code  
 > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - برای کمک به نوشتن سریع‌تر کد  
@@ -108,69 +111,69 @@ CO_OP_TRANSLATOR_METADATA:
 
 - اسکچ‌نوت اختیاری  
 - ویدئوی تکمیلی اختیاری  
-- آزمون گرم کردن پیش از درس  
-- درس نوشته شده  
-- برای درس‌های مبتنی بر پروژه، راهنمای گام به گام برای ساخت پروژه  
+- آزمون گرم‌آپ پیش از درس  
+- درس نوشته‌شده  
+- برای درس‌های مبتنی بر پروژه، راهنمای گام‌به‌گام برای ساخت پروژه  
 - بررسی دانش  
 - یک چالش  
 - مطالعه تکمیلی  
 - تکلیف  
-- آزمون پس از درس  
+- [آزمون پس از درس](https://ff-quizzes.netlify.app/)  
 
-> **نکته‌ای درباره آزمون‌ها**: همه آزمون‌ها در پوشه Quiz-app قرار دارند، ۴۸ آزمون با سه سوال در هر آزمون. آن‌ها از داخل درس‌ها لینک شده‌اند و اپلیکیشن آزمون می‌تواند به صورت محلی اجرا شود یا در Azure مستقر شود؛ دستورالعمل‌ها را در پوشه `quiz-app` دنبال کنید. این آزمون‌ها به تدریج بومی‌سازی می‌شوند.  
+> **یادداشتی درباره آزمون‌ها**: تمام آزمون‌ها در پوشه Quiz-app قرار دارند، ۴۸ آزمون با سه سوال در هر آزمون. آن‌ها [اینجا](https://ff-quizzes.netlify.app/) در دسترس هستند. اپلیکیشن آزمون می‌تواند به صورت محلی اجرا شود یا در Azure مستقر شود؛ دستورالعمل‌ها را در پوشه `quiz-app` دنبال کنید.  
 
 ## 🗃️ درس‌ها  
 
-|     |                       نام پروژه                       |                            مفاهیم آموزش داده شده                             | اهداف یادگیری                                                                                                                 |                                                         درس مرتبط                                                          |         نویسنده          |  
+|     |                       نام پروژه                       |                            مفاهیم آموزش داده شده                             | اهداف یادگیری                                                                                                                 |                                                         لینک درس                                                          |         نویسنده          |  
 | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
-| 01  |                     شروع کار                      |           معرفی برنامه‌نویسی و ابزارهای مورد استفاده           | یادگیری اصول اولیه اکثر زبان‌های برنامه‌نویسی و نرم‌افزارهایی که به توسعه‌دهندگان حرفه‌ای کمک می‌کنند کار خود را انجام دهند | [معرفی زبان‌های برنامه‌نویسی و ابزارهای مورد استفاده](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
-| 02  |                     شروع کار                      |             اصول اولیه GitHub، شامل کار با تیم             | نحوه استفاده از GitHub در پروژه خود، نحوه همکاری با دیگران روی یک کد بیس                                                    |                            [معرفی GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
-| 03  |                     شروع کار                      |                             دسترسی‌پذیری                              | یادگیری اصول اولیه دسترسی‌پذیری وب                                                                                               |                       [اصول دسترسی‌پذیری](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
-| 04  |                        اصول جاوااسکریپت                         |                         انواع داده جاوااسکریپت                          | اصول اولیه انواع داده جاوااسکریپت                                                                                                 |                                       [انواع داده](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
-| 05  |                        اصول جاوااسکریپت                         |                         توابع و متدها                          | یادگیری درباره توابع و متدها برای مدیریت جریان منطقی یک اپلیکیشن                                                             |                              [توابع و متدها](/2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |  
-| 06  |                        اصول جاوااسکریپت                         |                        تصمیم‌گیری با جاوااسکریپت                        | یادگیری نحوه ایجاد شرایط در کد با استفاده از روش‌های تصمیم‌گیری                                                           |                                 [تصمیم‌گیری](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
-| 07  |                        اصول جاوااسکریپت                         |                            آرایه‌ها و حلقه‌ها                            | کار با داده‌ها با استفاده از آرایه‌ها و حلقه‌ها در جاوااسکریپت                                                                                 |                                   [آرایه‌ها و حلقه‌ها](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
-| 08  |       [تراریوم](/3-terrarium/solution/README.md)       |                            HTML در عمل                            | ساخت HTML برای ایجاد یک تراریوم آنلاین، با تمرکز بر ساخت یک طرح‌بندی                                                         |                                 [معرفی HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
-| 09  |       [تراریوم](/3-terrarium/solution/README.md)       |                            CSS در عمل                             | ساخت CSS برای استایل‌دهی به تراریوم آنلاین، با تمرکز بر اصول اولیه CSS از جمله پاسخگو کردن صفحه                     |                                  [معرفی CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
-| 10  |            [تراریوم](/3-terrarium/solution/README.md)            |                 بسته‌های جاوااسکریپت، دستکاری DOM                  | ساخت جاوااسکریپت برای عملکرد تراریوم به عنوان یک رابط کشیدن و رها کردن، با تمرکز بر بسته‌ها و دستکاری DOM             |                  [بسته‌های جاوااسکریپت، دستکاری DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
-| 11  |          [بازی تایپ](/4-typing-game/solution/README.md)          |                          ساخت یک بازی تایپ                           | یادگیری نحوه استفاده از رویدادهای صفحه کلید برای هدایت منطق اپلیکیشن جاوااسکریپت                                                          |                                [برنامه‌نویسی مبتنی بر رویداد](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
-| 12  | [افزونه مرورگر سبز](/5-browser-extension/solution/README.md) |                         کار با مرورگرها                          | یاد بگیرید مرورگرها چگونه کار می‌کنند، تاریخچه آن‌ها و چگونه اولین عناصر یک افزونه مرورگر را ایجاد کنید                               |                               [درباره مرورگرها](/5-browser-extension/1-about-browsers/README.md)                                |           جن           |
-| 13  | [افزونه مرورگر سبز](/5-browser-extension/solution/README.md) | ساخت فرم، فراخوانی API و ذخیره متغیرها در حافظه محلی | عناصر جاوااسکریپت افزونه مرورگر خود را برای فراخوانی یک API با استفاده از متغیرهای ذخیره‌شده در حافظه محلی بسازید                      |                [APIها، فرم‌ها و حافظه محلی](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           جن           |
-| 14  | [افزونه مرورگر سبز](/5-browser-extension/solution/README.md) |          فرآیندهای پس‌زمینه در مرورگر، عملکرد وب          | از فرآیندهای پس‌زمینه مرورگر برای مدیریت آیکون افزونه استفاده کنید؛ درباره عملکرد وب و برخی بهینه‌سازی‌ها برای بهبود یاد بگیرید   |             [وظایف پس‌زمینه و عملکرد](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           جن           |
-| 15  |           [بازی فضایی](/6-space-game/solution/README.md)           |             توسعه پیشرفته‌تر بازی با جاوااسکریپت             | درباره وراثت با استفاده از کلاس‌ها و ترکیب و الگوی Pub/Sub یاد بگیرید، به‌عنوان مقدمه‌ای برای ساخت یک بازی              |                      [مقدمه‌ای بر توسعه پیشرفته بازی](/6-space-game/1-introduction/README.md)                       |          کریس          |
-| 16  |           [بازی فضایی](/6-space-game/solution/README.md)           |                           رسم روی بوم                            | درباره API بوم یاد بگیرید که برای رسم عناصر روی صفحه استفاده می‌شود                                                                       |                                [رسم روی بوم](/6-space-game/2-drawing-to-canvas/README.md)                                |          کریس          |
-| 17  |           [بازی فضایی](/6-space-game/solution/README.md)           |                   حرکت دادن عناصر روی صفحه                    | کشف کنید که چگونه عناصر می‌توانند با استفاده از مختصات دکارتی و API بوم حرکت کنند                                            |                           [حرکت دادن عناصر](/6-space-game/3-moving-elements-around/README.md)                           |          کریس          |
-| 18  |           [بازی فضایی](/6-space-game/solution/README.md)           |                          تشخیص برخورد                           | عناصر را به هم برخورد دهید و با استفاده از کلیدهای فشرده‌شده واکنش نشان دهید و یک تابع خنک‌کننده برای اطمینان از عملکرد بازی ارائه دهید    |                              [تشخیص برخورد](/6-space-game/4-collision-detection/README.md)                              |          کریس          |
-| 19  |           [بازی فضایی](/6-space-game/solution/README.md)           |                             ثبت امتیاز                              | محاسبات ریاضی را بر اساس وضعیت و عملکرد بازی انجام دهید                                                                |                                    [ثبت امتیاز](/6-space-game/5-keeping-score/README.md)                                    |          کریس          |
-| 20  |           [بازی فضایی](/6-space-game/solution/README.md)           |                     پایان دادن و شروع مجدد بازی                     | درباره پایان دادن و شروع مجدد بازی، از جمله پاک‌سازی منابع و بازنشانی مقادیر متغیرها یاد بگیرید                              |                                [شرایط پایان](/6-space-game/6-end-condition/README.md)                                 |          کریس          |
-| 21  |         [اپلیکیشن بانکی](/7-bank-project/solution/README.md)          |                 قالب‌های HTML و مسیرها در یک اپ وب                 | یاد بگیرید چگونه ساختار یک وب‌سایت چندصفحه‌ای را با استفاده از مسیریابی و قالب‌های HTML ایجاد کنید                             |                            [قالب‌های HTML و مسیرها](/7-bank-project/1-template-route/README.md)                             |          یوهان          |
-| 22  |         [اپلیکیشن بانکی](/7-bank-project/solution/README.md)          |                  ساخت فرم ورود و ثبت‌نام                   | درباره ساخت فرم‌ها و مدیریت روال‌های اعتبارسنجی یاد بگیرید                                                                          |                                           [فرم‌ها](/7-bank-project/2-forms/README.md)                                           |          یوهان          |
-| 23  |         [اپلیکیشن بانکی](/7-bank-project/solution/README.md)          |                   روش‌های دریافت و استفاده از داده‌ها                   | جریان داده‌ها درون و بیرون اپلیکیشن شما، نحوه دریافت، ذخیره و حذف آن‌ها را یاد بگیرید                                                 |                                            [داده‌ها](/7-bank-project/3-data/README.md)                                            |          یوهان          |
-| 24  |         [اپلیکیشن بانکی](/7-bank-project/solution/README.md)          |                      مفاهیم مدیریت وضعیت                      | یاد بگیرید اپلیکیشن شما چگونه وضعیت را حفظ می‌کند و چگونه آن را به‌صورت برنامه‌نویسی مدیریت کنید                                                              |                                [مدیریت وضعیت](/7-bank-project/4-state-management/README.md)                                |          یوهان          |
+| 01  |                     شروع به کار                      |           مقدمه‌ای بر برنامه‌نویسی و ابزارهای مورد استفاده           | یادگیری اصول اولیه پشت اکثر زبان‌های برنامه‌نویسی و نرم‌افزاری که به توسعه‌دهندگان حرفه‌ای کمک می‌کند کار خود را انجام دهند | [مقدمه‌ای بر زبان‌های برنامه‌نویسی و ابزارهای مورد استفاده](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     شروع به کار                      |             اصول اولیه GitHub، شامل کار با یک تیم             | نحوه استفاده از GitHub در پروژه خود، نحوه همکاری با دیگران روی یک کد بیس                                                    |                            [مقدمه‌ای بر GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     شروع به کار                      |                             دسترس‌پذیری                              | یادگیری اصول اولیه دسترس‌پذیری وب                                                                                               |                       [اصول دسترس‌پذیری](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        اصول JS                         |                         انواع داده جاوااسکریپت                          | اصول اولیه انواع داده جاوااسکریپت                                                                                                 |                                       [انواع داده](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        اصول JS                         |                         توابع و متدها                          | یادگیری درباره توابع و متدها برای مدیریت جریان منطقی یک اپلیکیشن                                                             |                              [توابع و متدها](./2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |  
+| 06  |                        اصول JS                         |                        تصمیم‌گیری با JS                        | یادگیری نحوه ایجاد شرایط در کد خود با استفاده از روش‌های تصمیم‌گیری                                                           |                                 [تصمیم‌گیری](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        اصول JS                         |                            آرایه‌ها و حلقه‌ها                            | کار با داده‌ها با استفاده از آرایه‌ها و حلقه‌ها در جاوااسکریپت                                                                                 |                                   [آرایه‌ها و حلقه‌ها](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [تراریوم](./3-terrarium/solution/README.md)       |                            HTML در عمل                            | ساخت HTML برای ایجاد یک تراریوم آنلاین، با تمرکز بر ساخت یک چیدمان                                                         |                                 [مقدمه‌ای بر HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [تراریوم](./3-terrarium/solution/README.md)       |                            CSS در عمل                             | ساخت CSS برای استایل‌دهی به تراریوم آنلاین، با تمرکز بر اصول اولیه CSS از جمله واکنش‌گرا کردن صفحه                     |                                  [مقدمه‌ای بر CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 Closureهای جاوااسکریپت، دستکاری DOM                  | جاوااسکریپت را برای عملکرد تراریوم به‌عنوان یک رابط کشیدن و رها کردن بسازید، با تمرکز بر Closureها و دستکاری DOM             |                  [Closureهای جاوااسکریپت، دستکاری DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          ساخت یک بازی تایپ                           | یاد بگیرید چگونه از رویدادهای صفحه‌کلید برای هدایت منطق برنامه جاوااسکریپت خود استفاده کنید                                                          |                                [برنامه‌نویسی مبتنی بر رویداد](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         کار با مرورگرها                          | یاد بگیرید مرورگرها چگونه کار می‌کنند، تاریخچه آن‌ها و نحوه ایجاد اولین عناصر یک افزونه مرورگر                               |                               [درباره مرورگرها](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | ساخت فرم، فراخوانی API و ذخیره متغیرها در حافظه محلی | عناصر جاوااسکریپت افزونه مرورگر خود را بسازید تا یک API را با استفاده از متغیرهای ذخیره‌شده در حافظه محلی فراخوانی کنید                      |                [APIها، فرم‌ها و حافظه محلی](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          فرآیندهای پس‌زمینه در مرورگر، عملکرد وب          | از فرآیندهای پس‌زمینه مرورگر برای مدیریت آیکون افزونه استفاده کنید؛ درباره عملکرد وب و برخی بهینه‌سازی‌ها یاد بگیرید   |             [وظایف پس‌زمینه و عملکرد](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             توسعه بازی پیشرفته‌تر با جاوااسکریپت             | درباره وراثت با استفاده از کلاس‌ها و ترکیب و الگوی Pub/Sub یاد بگیرید، به‌عنوان آماده‌سازی برای ساخت یک بازی              |                      [مقدمه‌ای بر توسعه بازی پیشرفته](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           رسم روی Canvas                            | درباره API Canvas یاد بگیرید، که برای رسم عناصر روی صفحه استفاده می‌شود                                                                       |                                [رسم روی Canvas](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   حرکت دادن عناصر روی صفحه                    | کشف کنید چگونه عناصر می‌توانند با استفاده از مختصات کارتزین و API Canvas حرکت کنند                                            |                           [حرکت دادن عناصر](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          تشخیص برخورد                           | عناصر را به‌گونه‌ای بسازید که با یکدیگر برخورد کنند و واکنش نشان دهند، با استفاده از کلیدهای فشرده‌شده و ارائه یک تابع خنک‌کننده برای اطمینان از عملکرد بازی    |                              [تشخیص برخورد](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             ثبت امتیاز                              | محاسبات ریاضی را بر اساس وضعیت و عملکرد بازی انجام دهید                                                                |                                    [ثبت امتیاز](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     پایان دادن و شروع مجدد بازی                     | درباره پایان دادن و شروع مجدد بازی، از جمله پاکسازی دارایی‌ها و تنظیم مجدد مقادیر متغیرها یاد بگیرید                              |                                [شرایط پایان](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 قالب‌های HTML و مسیرها در یک برنامه وب                 | یاد بگیرید چگونه ساختار یک وب‌سایت چندصفحه‌ای را با استفاده از مسیرها و قالب‌های HTML ایجاد کنید                             |                            [قالب‌های HTML و مسیرها](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  ساخت فرم ورود و ثبت‌نام                   | درباره ساخت فرم‌ها و مدیریت روال‌های اعتبارسنجی یاد بگیرید                                                                          |                                           [فرم‌ها](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   روش‌های دریافت و استفاده از داده‌ها                   | جریان داده‌ها در داخل و خارج از برنامه شما، نحوه دریافت، ذخیره و حذف آن‌ها را یاد بگیرید                                                 |                                            [داده‌ها](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      مفاهیم مدیریت وضعیت                      | یاد بگیرید برنامه شما چگونه وضعیت را حفظ می‌کند و چگونه آن را به‌صورت برنامه‌نویسی مدیریت کنید                                                              |                                [مدیریت وضعیت](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
 
 
-## 🏫 آموزش
+## 🏫 اصول آموزشی
 
 برنامه درسی ما با دو اصل کلیدی آموزشی طراحی شده است:
 * یادگیری مبتنی بر پروژه
 * آزمون‌های مکرر
 
-این برنامه اصول اولیه جاوااسکریپت، HTML و CSS را آموزش می‌دهد، همچنین ابزارها و تکنیک‌های جدیدی که توسعه‌دهندگان وب امروزی استفاده می‌کنند. دانش‌آموزان فرصت خواهند داشت تا تجربه عملی کسب کنند با ساخت یک بازی تایپ، تراریوم مجازی، افزونه مرورگر سازگار با محیط زیست، بازی به سبک مهاجمان فضایی و یک اپلیکیشن بانکی برای کسب‌وکارها. تا پایان این دوره، دانش‌آموزان درک جامعی از توسعه وب به دست خواهند آورد.
+این برنامه اصول اولیه جاوااسکریپت، HTML و CSS را آموزش می‌دهد، همچنین جدیدترین ابزارها و تکنیک‌هایی که توسط توسعه‌دهندگان وب امروزی استفاده می‌شود. دانش‌آموزان فرصت خواهند داشت تجربه عملی کسب کنند با ساخت یک بازی تایپ، تراریوم مجازی، افزونه مرورگر سازگار با محیط زیست، بازی سبک مهاجم فضایی، و یک اپلیکیشن بانکی برای کسب‌وکارها. تا پایان این دوره، دانش‌آموزان درک جامعی از توسعه وب به دست خواهند آورد.
 
-> 🎓 می‌توانید چند درس اول این برنامه درسی را به‌عنوان [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) در Microsoft Learn بگذرانید!
+> 🎓 شما می‌توانید چند درس اول این برنامه درسی را به‌عنوان یک [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) در Microsoft Learn بگذرانید!
 
-با اطمینان از اینکه محتوا با پروژه‌ها هماهنگ است، فرآیند برای دانش‌آموزان جذاب‌تر می‌شود و حفظ مفاهیم تقویت خواهد شد. ما همچنین چند درس مقدماتی در اصول جاوااسکریپت نوشتیم تا مفاهیم را معرفی کنیم، همراه با ویدئویی از مجموعه "[سری مبتدیان: جاوااسکریپت](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" که برخی از نویسندگان آن در این برنامه درسی مشارکت داشتند.
+با اطمینان از اینکه محتوا با پروژه‌ها هماهنگ است، فرآیند برای دانش‌آموزان جذاب‌تر می‌شود و حفظ مفاهیم تقویت خواهد شد. همچنین چند درس مقدماتی در اصول جاوااسکریپت همراه با یک ویدیو از مجموعه "[سری مبتدیان: جاوااسکریپت](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" نوشته‌ایم که برخی از نویسندگان آن در تهیه این برنامه درسی مشارکت داشته‌اند.
 
-علاوه بر این، یک آزمون کم‌فشار قبل از کلاس، نیت دانش‌آموز را به سمت یادگیری یک موضوع هدایت می‌کند، در حالی که یک آزمون دوم بعد از کلاس، حفظ بیشتر را تضمین می‌کند. این برنامه درسی به‌گونه‌ای طراحی شده است که انعطاف‌پذیر و سرگرم‌کننده باشد و می‌توان آن را به‌طور کامل یا جزئی گذراند. پروژه‌ها کوچک شروع می‌شوند و تا پایان چرخه ۱۲ هفته‌ای به‌طور فزاینده‌ای پیچیده می‌شوند.
+علاوه بر این، یک آزمون کم‌فشار قبل از کلاس، توجه دانش‌آموز را به یادگیری یک موضوع جلب می‌کند، در حالی که یک آزمون دوم بعد از کلاس، حفظ بیشتر را تضمین می‌کند. این برنامه درسی به‌گونه‌ای طراحی شده است که انعطاف‌پذیر و سرگرم‌کننده باشد و می‌توان آن را به‌طور کامل یا جزئی گذراند. پروژه‌ها کوچک شروع می‌شوند و تا پایان چرخه ۱۲ هفته‌ای به‌طور فزاینده‌ای پیچیده می‌شوند.
 
-در حالی که ما عمداً از معرفی فریم‌ورک‌های جاوااسکریپت اجتناب کردیم تا بر مهارت‌های اساسی مورد نیاز به‌عنوان یک توسعه‌دهنده وب قبل از استفاده از یک فریم‌ورک تمرکز کنیم، یک گام بعدی خوب پس از تکمیل این برنامه درسی، یادگیری درباره Node.js از طریق مجموعه دیگری از ویدئوها است: "[سری مبتدیان: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+در حالی که ما عمداً از معرفی فریم‌ورک‌های جاوااسکریپت اجتناب کرده‌ایم تا بر مهارت‌های پایه‌ای مورد نیاز به‌عنوان یک توسعه‌دهنده وب قبل از پذیرش یک فریم‌ورک تمرکز کنیم، یک گام خوب بعد از تکمیل این برنامه درسی یادگیری درباره Node.js از طریق مجموعه دیگری از ویدیوها خواهد بود: "[سری مبتدیان: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
 
 > به [قوانین رفتاری](CODE_OF_CONDUCT.md) و دستورالعمل‌های [مشارکت](CONTRIBUTING.md) ما مراجعه کنید. ما از بازخورد سازنده شما استقبال می‌کنیم!
 
 
 ## 🧭 دسترسی آفلاین
 
-می‌توانید این مستندات را به‌صورت آفلاین با استفاده از [Docsify](https://docsify.js.org/#/) اجرا کنید. این مخزن را فورک کنید، [Docsify را نصب کنید](https://docsify.js.org/#/quickstart) روی دستگاه محلی خود، و سپس در پوشه اصلی این مخزن، دستور `docsify serve` را تایپ کنید. وب‌سایت روی پورت ۳۰۰۰ در localhost شما ارائه خواهد شد: `localhost:3000`.
+شما می‌توانید این مستندات را به‌صورت آفلاین با استفاده از [Docsify](https://docsify.js.org/#/) اجرا کنید. این مخزن را Fork کنید، [Docsify را نصب کنید](https://docsify.js.org/#/quickstart) روی دستگاه محلی خود، و سپس در پوشه اصلی این مخزن، دستور `docsify serve` را تایپ کنید. وب‌سایت روی پورت 3000 در localhost شما اجرا خواهد شد: `localhost:3000`.
 
 ## 📘 PDF
 
@@ -179,7 +182,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## 🎒 دوره‌های دیگر
 
-تیم ما دوره‌های دیگری نیز تولید می‌کند! بررسی کنید:
+تیم ما دوره‌های دیگری تولید می‌کند! بررسی کنید:
 
 - [هوش مصنوعی مولد برای مبتدیان](https://aka.ms/genai-beginners)
 - [هوش مصنوعی مولد برای مبتدیان .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@@ -192,7 +195,7 @@ CO_OP_TRANSLATOR_METADATA:
 - [توسعه وب برای مبتدیان](https://aka.ms/webdev-beginners)
 - [اینترنت اشیا برای مبتدیان](https://aka.ms/iot-beginners)
 - [توسعه XR برای مبتدیان](https://github.com/microsoft/xr-development-for-beginners)
-- [تسلط بر GitHub Copilot برای استفاده عامل‌محور](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [تسلط بر GitHub Copilot برای استفاده عاملانه](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
 - [تسلط بر GitHub Copilot برای توسعه‌دهندگان C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
 - [ماجراجویی خود را با Copilot انتخاب کنید](https://github.com/microsoft/CopilotAdventures)
 
@@ -200,5 +203,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 این مخزن تحت مجوز MIT منتشر شده است. برای اطلاعات بیشتر به فایل [LICENSE](../../LICENSE) مراجعه کنید.
 
+---
+
 **سلب مسئولیت**:  
-این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است حاوی خطاها یا نادرستی‌هایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما هیچ مسئولیتی در قبال سوءتفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
\ No newline at end of file
+این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه حرفه‌ای انسانی استفاده کنید. ما مسئولیتی در قبال سوء تفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
\ No newline at end of file
diff --git a/translations/fr/README.md b/translations/fr/README.md
index 5a4100b6..15f9c961 100644
--- a/translations/fr/README.md
+++ b/translations/fr/README.md
@@ -1,151 +1,155 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b672130244189715ac084c3259f6ab58",
-  "translation_date": "2025-08-23T22:15:25+00:00",
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T10:56:27+00:00",
   "source_file": "README.md",
   "language_code": "fr"
 }
 -->
-[![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)  
+[![Licence GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
+[![Contributeurs GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
+[![Problèmes GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
+[![Pull-requests GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
+[![PRs Bienvenus](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/)  
+[![Observateurs GitHub](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/)  
+[![Forks GitHub](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/)  
+[![Étoiles GitHub](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)  
+[![Ouvrir dans Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Ouvrir%20dans%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)  
 
-# Développement Web pour Débutants - Un Programme
+[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)  
 
-Apprenez les bases du développement web avec notre cours complet de 12 semaines proposé par les Microsoft Cloud Advocates. Chacune des 24 leçons explore JavaScript, CSS et HTML à travers des projets pratiques comme des terrariums, des extensions de navigateur et des jeux spatiaux. Participez à des quiz, des discussions et des exercices pratiques. Améliorez vos compétences et optimisez votre apprentissage grâce à notre pédagogie basée sur les projets. Commencez votre aventure de codage dès aujourd'hui !
+Suivez ces étapes pour commencer à utiliser ces ressources :  
+1. **Forkez le dépôt** : Cliquez sur [![Forks GitHub](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. **Clonez le dépôt** :   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Rejoignez le Discord Azure AI Foundry pour rencontrer des experts et d'autres développeurs**](https://discord.com/invite/ByRwuEEgH4)  
 
-#### 🧑‍🎓 _Vous êtes étudiant ?_
+# Développement Web pour Débutants - Un Programme  
 
-Visitez la [**page Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) où vous trouverez des ressources pour débutants, des packs étudiants et même des moyens d'obtenir un bon de certification gratuit. C'est une page à mettre en favori et à consulter régulièrement, car nous changeons le contenu chaque mois.
+Apprenez les bases du développement web avec notre cours complet de 12 semaines proposé par les Microsoft Cloud Advocates. Chacune des 24 leçons explore JavaScript, CSS et HTML à travers des projets pratiques comme des terrariums, des extensions de navigateur et des jeux spatiaux. Participez à des quiz, des discussions et des devoirs pratiques. Améliorez vos compétences et optimisez votre apprentissage grâce à notre pédagogie basée sur les projets. Commencez votre aventure de codage dès aujourd'hui !  
 
-### 📣 Annonce - _Nouveau programme_ sur l'IA générative pour JavaScript vient d'être publié
+#### 🧑‍🎓 _Vous êtes étudiant ?_  
 
-Ne manquez pas notre nouveau programme sur l'IA générative !
+Visitez la [**page Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) où vous trouverez des ressources pour débutants, des packs étudiants et même des moyens d'obtenir un bon pour une certification gratuite. C'est une page à mettre en favori et à consulter régulièrement, car nous mettons à jour le contenu chaque mois.  
 
-Visitez [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pour commencer !
+### 📣 Annonce - _Nouveau programme_ sur l'IA générative pour JavaScript vient d'être publié  
 
-<div>
-  <img src="./images/background.png" width="600px" />
-</div>
+Ne manquez pas notre nouveau programme sur l'IA générative !  
 
-- Leçons couvrant tout, des bases à RAG.  
+Visitez [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pour commencer !  
+
+![Fond](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.fr.png)  
+
+- Des leçons couvrant tout, des bases à RAG.  
 - Interagissez avec des personnages historiques grâce à GenAI et notre application compagnon.  
 - Une narration amusante et engageante, vous voyagerez dans le temps !  
 
-<div>
-  <img src="./images/character.png" width="600px" />
-</div>
+![Personnage](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.fr.png)  
 
-Chaque leçon inclut un exercice à réaliser, une vérification des connaissances et un défi pour vous guider dans l'apprentissage de sujets tels que :  
-- Les prompts et l'ingénierie des prompts  
+Chaque leçon comprend un devoir à réaliser, une vérification des connaissances et un défi pour vous guider dans l'apprentissage de sujets comme :  
+- Le prompting et l'ingénierie des prompts  
 - La génération d'applications texte et image  
 - Les applications de recherche  
 
-Visitez [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pour commencer !
+Visitez [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pour commencer !  
 
-## 🌱 Premiers pas
+## 🌱 Pour Commencer  
 
-> **Enseignants**, nous avons [inclus quelques suggestions](for-teachers.md) sur la façon d'utiliser ce programme. Nous aimerions avoir vos retours [dans notre forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) !
+> **Enseignants**, nous avons [inclus quelques suggestions](for-teachers.md) sur la façon d'utiliser ce programme. Nous serions ravis de recevoir vos retours [dans notre forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) !  
 
-**[Apprenants](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pour chaque leçon, commencez par un quiz pré-lecture, puis lisez le contenu de la leçon, réalisez les différentes activités et vérifiez votre compréhension avec le quiz post-lecture.
+**[Apprenants](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pour chaque leçon, commencez par un quiz pré-lecture, poursuivez avec la lecture du matériel de cours, réalisez les différentes activités et vérifiez votre compréhension avec le quiz post-lecture.  
 
-Pour enrichir votre expérience d'apprentissage, connectez-vous avec vos pairs pour travailler ensemble sur les projets ! Les discussions sont encouragées dans notre [forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) où notre équipe de modérateurs sera disponible pour répondre à vos questions.
+Pour enrichir votre expérience d'apprentissage, connectez-vous avec vos pairs pour travailler ensemble sur les projets ! Les discussions sont encouragées dans notre [forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) où notre équipe de modérateurs sera disponible pour répondre à vos questions.  
 
-Pour approfondir votre éducation, nous vous recommandons vivement d'explorer [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pour des ressources d'étude supplémentaires.
+Pour approfondir votre éducation, nous vous recommandons vivement d'explorer [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pour des ressources d'étude supplémentaires.  
 
-### 📋 Configuration de votre environnement
+### 📋 Configuration de votre environnement  
 
-Ce programme dispose d'un environnement de développement prêt à l'emploi ! Lorsque vous commencez, vous pouvez choisir de suivre le programme dans un [Codespace](https://github.com/features/codespaces/) (_un environnement basé sur le navigateur, sans installation nécessaire_), ou localement sur votre ordinateur en utilisant un éditeur de texte tel que [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
+Ce programme dispose d'un environnement de développement prêt à l'emploi ! Dès que vous commencez, vous pouvez choisir d'exécuter le programme dans un [Codespace](https://github.com/features/codespaces/) (_un environnement basé sur un navigateur, sans installation nécessaire_), ou localement sur votre ordinateur en utilisant un éditeur de texte tel que [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
 
-#### Créez votre dépôt
-Pour sauvegarder facilement votre travail, il est recommandé de créer votre propre copie de ce dépôt. Vous pouvez le faire en cliquant sur le bouton **Use this template** en haut de la page. Cela créera un nouveau dépôt dans votre compte GitHub avec une copie du programme.
+#### Créez votre dépôt  
+Pour sauvegarder facilement votre travail, il est recommandé de créer votre propre copie de ce dépôt. Vous pouvez le faire en cliquant sur le bouton **Use this template** en haut de la page. Cela créera un nouveau dépôt dans votre compte GitHub avec une copie du programme.  
 
 Suivez ces étapes :  
 1. **Forkez le dépôt** : Cliquez sur le bouton "Fork" en haut à droite de cette page.  
-2. **Clonez le dépôt** : `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+2. **Clonez le dépôt** :   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
 
-#### Exécuter le programme dans un Codespace
+#### Exécuter le programme dans un Codespace  
 
-Dans votre copie de ce dépôt que vous avez créée, cliquez sur le bouton **Code** et sélectionnez **Open with Codespaces**. Cela créera un nouveau Codespace pour travailler.
+Dans votre copie de ce dépôt que vous avez créée, cliquez sur le bouton **Code** et sélectionnez **Open with Codespaces**. Cela créera un nouveau Codespace pour que vous puissiez y travailler.  
 
-<img src="./images/createcodespace.png" alt="Créer un Codespace" style="width:270px;"/>
+[!Codespace](../..)./images/createcodespace.png)  
 
-#### Exécuter le programme localement sur votre ordinateur
+#### Exécuter le programme localement sur votre ordinateur  
 
-Pour exécuter ce programme localement sur votre ordinateur, vous aurez besoin d'un éditeur de texte, d'un navigateur et d'un outil en ligne de commande. Notre première leçon, [Introduction aux langages de programmation et outils de travail](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), vous guidera à travers les différentes options pour chacun de ces outils afin que vous puissiez choisir ce qui vous convient le mieux.
+Pour exécuter ce programme localement sur votre ordinateur, vous aurez besoin d'un éditeur de texte, d'un navigateur et d'un outil en ligne de commande. Notre première leçon, [Introduction aux langages de programmation et outils de travail](../../1-getting-started-lessons/1-intro-to-programming-languages), vous guidera à travers les différentes options pour chacun de ces outils afin que vous puissiez choisir ce qui vous convient le mieux.  
 
-Nous recommandons d'utiliser [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) comme éditeur, qui dispose également d'un [Terminal intégré](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Vous pouvez télécharger Visual Studio Code [ici](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
+Notre recommandation est d'utiliser [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) comme éditeur, qui dispose également d'un [Terminal intégré](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Vous pouvez télécharger Visual Studio Code [ici](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
 
-1. Clonez votre dépôt sur votre ordinateur. Vous pouvez le faire en cliquant sur le bouton **Code** et en copiant l'URL :
+1. Clonez votre dépôt sur votre ordinateur. Vous pouvez le faire en cliquant sur le bouton **Code** et en copiant l'URL :  
 
-    <img src="./images/createcodespace.png" alt="Copier l'URL de votre dépôt" style="width:270px;"/>
+    [!CodeSpace](./images/createcodespace.png)  
 
-    Ensuite, ouvrez [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dans [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) et exécutez la commande suivante, en remplaçant `<your-repository-url>` par l'URL que vous venez de copier :
+    Ensuite, ouvrez [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dans [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) et exécutez la commande suivante, en remplaçant `<your-repository-url>` par l'URL que vous venez de copier :  
 
     ```bash 
     git clone <your-repository-url>
-    ```
+    ```  
 
-2. Ouvrez le dossier dans Visual Studio Code. Vous pouvez le faire en cliquant sur **File** > **Open Folder** et en sélectionnant le dossier que vous venez de cloner.
+2. Ouvrez le dossier dans Visual Studio Code. Vous pouvez le faire en cliquant sur **File** > **Open Folder** et en sélectionnant le dossier que vous venez de cloner.  
 
-> Extensions recommandées pour Visual Studio Code :  
-> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pour prévisualiser les pages HTML directement dans Visual Studio Code  
+>  Extensions recommandées pour Visual Studio Code :  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pour prévisualiser les pages HTML dans Visual Studio Code  
 > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pour vous aider à écrire du code plus rapidement  
 
-## 📂 Chaque leçon inclut :
+## 📂 Chaque leçon comprend :  
 
 - un sketchnote optionnel  
 - une vidéo complémentaire optionnelle  
 - un quiz d'échauffement avant la leçon  
 - une leçon écrite  
-- pour les leçons basées sur des projets, des guides étape par étape pour construire le projet  
+- pour les leçons basées sur des projets, des guides pas à pas pour construire le projet  
 - des vérifications des connaissances  
 - un défi  
 - des lectures complémentaires  
-- un exercice  
-- un quiz après la leçon  
+- un devoir  
+- [un quiz post-leçon](https://ff-quizzes.netlify.app/)  
 
-> **À propos des quiz** : Tous les quiz sont contenus dans le dossier Quiz-app, 48 quiz au total avec trois questions chacun. Ils sont liés dans les leçons et l'application de quiz peut être exécutée localement ou déployée sur Azure ; suivez les instructions dans le dossier `quiz-app`. Ils sont progressivement traduits.
+> **Une note sur les quiz** : Tous les quiz sont contenus dans le dossier Quiz-app, 48 quiz au total avec trois questions chacun. Ils sont disponibles [ici](https://ff-quizzes.netlify.app/) et l'application de quiz peut être exécutée localement ou déployée sur Azure ; suivez les instructions dans le dossier `quiz-app`.  
 
-## 🗃️ Leçons
+## 🗃️ Leçons  
 
-|     |                       Nom du projet                       |                            Concepts enseignés                            | Objectifs d'apprentissage                                                                                                           |                                                         Leçon liée                                                          |         Auteur          |
-| :-: | :-------------------------------------------------------: | :---------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
-| 01  |                     Premiers pas                         |           Introduction à la programmation et outils de travail           | Apprenez les bases communes à la plupart des langages de programmation et les outils utilisés par les développeurs professionnels | [Introduction aux langages de programmation et outils de travail](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
-| 02  |                     Premiers pas                         |             Bases de GitHub, y compris le travail en équipe              | Comment utiliser GitHub dans votre projet et collaborer avec d'autres sur une base de code                                         |                            [Introduction à GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
-| 03  |                     Premiers pas                         |                             Accessibilité                               | Apprenez les bases de l'accessibilité web                                                                                          |                       [Fondamentaux de l'accessibilité](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
-| 04  |                        Bases JS                          |                         Types de données en JavaScript                  | Les bases des types de données en JavaScript                                                                                       |                                       [Types de données](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
-| 05  |                        Bases JS                          |                         Fonctions et méthodes                           | Apprenez à utiliser les fonctions et méthodes pour gérer le flux logique d'une application                                         |                              [Fonctions et méthodes](/2-js-basics/2-functions-methods/README.md)                               | Jasmine et Christopher |
-| 06  |                        Bases JS                          |                        Prendre des décisions avec JS                    | Apprenez à créer des conditions dans votre code en utilisant des méthodes de prise de décision                                     |                                 [Prendre des décisions](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
-| 07  |                        Bases JS                          |                            Tableaux et boucles                          | Travaillez avec des données en utilisant des tableaux et des boucles en JavaScript                                                 |                                   [Tableaux et boucles](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
-| 08  |       [Terrarium](/3-terrarium/solution/README.md)       |                            HTML en pratique                             | Construisez le HTML pour créer un terrarium en ligne, en vous concentrant sur la création d'une mise en page                       |                                 [Introduction au HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
-| 09  |       [Terrarium](/3-terrarium/solution/README.md)       |                            CSS en pratique                              | Construisez le CSS pour styliser le terrarium en ligne, en vous concentrant sur les bases du CSS, y compris rendre la page responsive |                                  [Introduction au CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
-| 10  |            [Terrarium](/3-terrarium/solution/README.md)            |                 Fermetures JavaScript, manipulation du DOM               | Construisez le JavaScript pour faire fonctionner le terrarium comme une interface glisser-déposer, en vous concentrant sur les fermetures et la manipulation du DOM |                  [Fermetures JavaScript, manipulation du DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
-| 11  |          [Jeu de frappe](/4-typing-game/solution/README.md)          |                          Construire un jeu de frappe                    | Apprenez à utiliser les événements clavier pour piloter la logique de votre application JavaScript                                 |                                [Programmation pilotée par événements](/4-typing-game/typing-game/README.md)                                |       Christopher       |
-| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Travailler avec les navigateurs                          | Apprenez comment fonctionnent les navigateurs, leur histoire, et comment structurer les premiers éléments d'une extension de navigateur                               |                               [À propos des navigateurs](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Construire un formulaire, appeler une API et stocker des variables en local storage | Créez les éléments JavaScript de votre extension de navigateur pour appeler une API en utilisant des variables stockées en local storage                      |                [APIs, Formulaires et Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Processus en arrière-plan dans le navigateur, performance web          | Utilisez les processus en arrière-plan du navigateur pour gérer l'icône de l'extension ; découvrez la performance web et quelques optimisations à apporter   |             [Tâches en arrière-plan et performance](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Développement de jeu plus avancé avec JavaScript             | Découvrez l'héritage en utilisant à la fois les classes et la composition, ainsi que le modèle Pub/Sub, en préparation à la création d'un jeu              |                      [Introduction au développement de jeu avancé](/6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Dessiner sur canvas                            | Découvrez l'API Canvas, utilisée pour dessiner des éléments à l'écran                                                                       |                                [Dessiner sur Canvas](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Déplacer des éléments sur l'écran                    | Découvrez comment les éléments peuvent se déplacer en utilisant les coordonnées cartésiennes et l'API Canvas                                            |                           [Déplacer des éléments](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Détection de collision                           | Faites en sorte que les éléments entrent en collision et réagissent entre eux en utilisant les touches du clavier, et ajoutez une fonction de cooldown pour garantir la performance du jeu    |                              [Détection de collision](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Comptabiliser les points                              | Effectuez des calculs mathématiques basés sur l'état et la performance du jeu                                                                |                                    [Comptabiliser les points](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Terminer et redémarrer le jeu                     | Apprenez à terminer et redémarrer le jeu, y compris nettoyer les ressources et réinitialiser les valeurs des variables                              |                                [Condition de fin](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 Modèles HTML et routes dans une application web                 | Apprenez à créer la structure d'architecture d'un site web multipage en utilisant le routage et les modèles HTML                             |                            [Modèles HTML et routes](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Construire un formulaire de connexion et d'inscription                   | Découvrez comment créer des formulaires et gérer les routines de validation                                                                          |                                           [Formulaires](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Méthodes pour récupérer et utiliser des données                   | Découvrez comment les données circulent dans et hors de votre application, comment les récupérer, les stocker et les supprimer                                                 |                                            [Données](/7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Concepts de gestion d'état                      | Apprenez comment votre application conserve son état et comment le gérer de manière programmatique                                                              |                                [Gestion d'état](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+|     |                       Nom du Projet                       |                            Concepts Enseignés                             | Objectifs d'Apprentissage                                                                                                           |                                                         Leçon Liée                                                          |         Auteur          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Premiers Pas                      |           Introduction à la Programmation et aux Outils de Travail           | Apprenez les bases communes à la plupart des langages de programmation et les logiciels qui aident les développeurs professionnels | [Introduction aux langages de programmation et outils de travail](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Premiers Pas                      |             Bases de GitHub, y compris le travail en équipe             | Comment utiliser GitHub dans votre projet, collaborer avec d'autres sur une base de code                                            |                            [Introduction à GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Premiers Pas                      |                             Accessibilité                              | Apprenez les bases de l'accessibilité web                                                                                           |                       [Fondamentaux de l'accessibilité](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        Bases JS                         |                         Types de Données en JavaScript                          | Les bases des types de données en JavaScript                                                                                         |                                       [Types de Données](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        Bases JS                         |                         Fonctions et Méthodes                          | Apprenez les fonctions et méthodes pour gérer le flux logique d'une application                                                     |                              [Fonctions et Méthodes](./2-js-basics/2-functions-methods/README.md)                               | Jasmine et Christopher |  
+| 06  |                        Bases JS                         |                        Prendre des Décisions avec JS                        | Apprenez à créer des conditions dans votre code en utilisant des méthodes de prise de décision                                       |                                 [Prendre des Décisions](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        Bases JS                         |                            Tableaux et Boucles                            | Travaillez avec des données en utilisant des tableaux et des boucles en JavaScript                                                  |                                   [Tableaux et Boucles](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML en Pratique                            | Construisez le HTML pour créer un terrarium en ligne, en vous concentrant sur la création d'une mise en page                         |                                 [Introduction au HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS en Pratique                             | Construisez le CSS pour styliser le terrarium en ligne, en vous concentrant sur les bases du CSS, y compris rendre la page responsive |                                  [Introduction au CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 Fermetures JavaScript, manipulation du DOM             | Créez le JavaScript pour que le terrarium fonctionne comme une interface de glisser-déposer, en mettant l'accent sur les fermetures et la manipulation du DOM |                  [Fermetures JavaScript, manipulation du DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Jeu de dactylographie](./4-typing-game/solution/README.md)          |                          Créer un jeu de dactylographie                           | Apprenez à utiliser les événements clavier pour piloter la logique de votre application JavaScript                                                          |                                [Programmation pilotée par événements](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Extension de navigateur écologique](./5-browser-extension/solution/README.md) |                         Travailler avec les navigateurs                          | Découvrez comment fonctionnent les navigateurs, leur histoire, et comment créer les premiers éléments d'une extension de navigateur                               |                               [À propos des navigateurs](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Extension de navigateur écologique](./5-browser-extension/solution/README.md) | Créer un formulaire, appeler une API et stocker des variables en local | Créez les éléments JavaScript de votre extension de navigateur pour appeler une API en utilisant des variables stockées localement                      |                [APIs, Formulaires, et Stockage Local](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Extension de navigateur écologique](./5-browser-extension/solution/README.md) |          Processus en arrière-plan dans le navigateur, performance web          | Utilisez les processus en arrière-plan du navigateur pour gérer l'icône de l'extension ; découvrez la performance web et quelques optimisations à appliquer   |             [Tâches en arrière-plan et performance](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Jeu spatial](./6-space-game/solution/README.md)           |             Développement de jeu avancé avec JavaScript             | Découvrez l'héritage en utilisant les classes et la composition, ainsi que le modèle Pub/Sub, en préparation à la création d'un jeu              |                      [Introduction au développement de jeu avancé](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Jeu spatial](./6-space-game/solution/README.md)           |                           Dessiner sur le canvas                            | Apprenez à utiliser l'API Canvas pour dessiner des éléments à l'écran                                                                       |                                [Dessiner sur le canvas](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Jeu spatial](./6-space-game/solution/README.md)           |                   Déplacer des éléments sur l'écran                    | Découvrez comment les éléments peuvent se déplacer en utilisant les coordonnées cartésiennes et l'API Canvas                                            |                           [Déplacer des éléments](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Jeu spatial](./6-space-game/solution/README.md)           |                          Détection de collision                           | Faites en sorte que les éléments entrent en collision et réagissent entre eux en utilisant les touches du clavier, et ajoutez une fonction de cooldown pour garantir la performance du jeu    |                              [Détection de collision](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Jeu spatial](./6-space-game/solution/README.md)           |                             Comptabiliser les points                              | Effectuez des calculs mathématiques basés sur l'état et la performance du jeu                                                                |                                    [Comptabiliser les points](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Jeu spatial](./6-space-game/solution/README.md)           |                     Terminer et redémarrer le jeu                     | Apprenez à terminer et redémarrer le jeu, y compris le nettoyage des ressources et la réinitialisation des valeurs de variables                              |                                [Condition de fin](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Application bancaire](./7-bank-project/solution/README.md)          |                 Modèles HTML et routes dans une application web                 | Apprenez à créer la structure d'une architecture de site web multipage en utilisant le routage et les modèles HTML                             |                            [Modèles HTML et routes](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Application bancaire](./7-bank-project/solution/README.md)          |                  Créer un formulaire de connexion et d'inscription                   | Apprenez à créer des formulaires et à gérer les routines de validation                                                                          |                                           [Formulaires](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Application bancaire](./7-bank-project/solution/README.md)          |                   Méthodes de récupération et d'utilisation des données                   | Découvrez comment les données circulent dans et hors de votre application, comment les récupérer, les stocker et les supprimer                                                 |                                            [Données](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Application bancaire](./7-bank-project/solution/README.md)          |                      Concepts de gestion d'état                      | Apprenez comment votre application conserve son état et comment le gérer de manière programmatique                                                              |                                [Gestion d'état](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
 
 
 ## 🏫 Pédagogie
@@ -154,13 +158,13 @@ Notre programme est conçu autour de deux principes pédagogiques clés :
 * apprentissage basé sur les projets
 * quiz fréquents
 
-Le programme enseigne les bases de JavaScript, HTML et CSS, ainsi que les outils et techniques les plus récents utilisés par les développeurs web d'aujourd'hui. Les étudiants auront l'opportunité d'acquérir une expérience pratique en créant un jeu de dactylographie, un terrarium virtuel, une extension de navigateur écologique, un jeu de type Space Invader et une application bancaire pour entreprises. À la fin de la série, les étudiants auront acquis une solide compréhension du développement web.
+Le programme enseigne les bases de JavaScript, HTML et CSS, ainsi que les outils et techniques les plus récents utilisés par les développeurs web d'aujourd'hui. Les étudiants auront l'opportunité de développer une expérience pratique en créant un jeu de dactylographie, un terrarium virtuel, une extension de navigateur écologique, un jeu de type "space invader" et une application bancaire pour entreprises. À la fin de la série, les étudiants auront acquis une solide compréhension du développement web.
 
-> 🎓 Vous pouvez suivre les premières leçons de ce programme sous forme de [parcours d'apprentissage](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sur Microsoft Learn !
+> 🎓 Vous pouvez suivre les premières leçons de ce programme sous forme de [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sur Microsoft Learn !
 
-En veillant à ce que le contenu soit aligné avec les projets, le processus devient plus engageant pour les étudiants et la rétention des concepts est augmentée. Nous avons également écrit plusieurs leçons d'introduction aux bases de JavaScript, accompagnées d'une vidéo de la collection "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", dont certains auteurs ont contribué à ce programme.
+En veillant à ce que le contenu soit aligné avec les projets, le processus devient plus engageant pour les étudiants et la rétention des concepts est augmentée. Nous avons également écrit plusieurs leçons d'introduction aux bases de JavaScript pour présenter les concepts, accompagnées d'une vidéo de la collection "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", dont certains auteurs ont contribué à ce programme.
 
-De plus, un quiz à faible enjeu avant un cours oriente l'intention de l'étudiant vers l'apprentissage d'un sujet, tandis qu'un second quiz après le cours assure une meilleure rétention. Ce programme a été conçu pour être flexible et amusant, et peut être suivi en totalité ou en partie. Les projets commencent petits et deviennent de plus en plus complexes à la fin du cycle de 12 semaines.
+De plus, un quiz à faible enjeu avant un cours fixe l'intention de l'étudiant sur l'apprentissage d'un sujet, tandis qu'un deuxième quiz après le cours assure une meilleure rétention. Ce programme a été conçu pour être flexible et amusant, et peut être suivi en totalité ou en partie. Les projets commencent petits et deviennent de plus en plus complexes à la fin du cycle de 12 semaines.
 
 Bien que nous ayons délibérément évité d'introduire des frameworks JavaScript pour nous concentrer sur les compétences de base nécessaires en tant que développeur web avant d'adopter un framework, une bonne étape suivante après avoir terminé ce programme serait d'apprendre Node.js via une autre collection de vidéos : "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
 
@@ -169,7 +173,7 @@ Bien que nous ayons délibérément évité d'introduire des frameworks JavaScri
 
 ## 🧭 Accès hors ligne
 
-Vous pouvez exécuter cette documentation hors ligne en utilisant [Docsify](https://docsify.js.org/#/). Forkez ce dépôt, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre machine locale, puis dans le dossier racine de ce dépôt, tapez `docsify serve`. Le site web sera servi sur le port 3000 de votre localhost : `localhost:3000`.
+Vous pouvez exécuter cette documentation hors ligne en utilisant [Docsify](https://docsify.js.org/#/). Clonez ce dépôt, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre machine locale, puis dans le dossier racine de ce dépôt, tapez `docsify serve`. Le site web sera servi sur le port 3000 de votre localhost : `localhost:3000`.
 
 ## 📘 PDF
 
@@ -180,17 +184,17 @@ Un PDF de toutes les leçons est disponible [ici](https://microsoft.github.io/We
 
 Notre équipe produit d'autres cours ! Découvrez :
 
-- [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)
+- [IA générative pour débutants](https://aka.ms/genai-beginners)
+- [IA générative pour débutants .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [IA générative avec JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
+- [IA générative avec Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [IA pour débutants](https://aka.ms/ai-beginners)
+- [Science des données pour débutants](https://aka.ms/datascience-beginners)
+- [ML pour débutants](https://aka.ms/ml-beginners)
 - [Cybersécurité pour débutants](https://github.com/microsoft/Security-101)
-- [Développement Web pour Débutants](https://aka.ms/webdev-beginners)
-- [IoT pour Débutants](https://aka.ms/iot-beginners)
-- [Développement XR pour Débutants](https://github.com/microsoft/xr-development-for-beginners)
+- [Développement web pour débutants](https://aka.ms/webdev-beginners)
+- [IoT pour débutants](https://aka.ms/iot-beginners)
+- [Développement XR pour débutants](https://github.com/microsoft/xr-development-for-beginners)
 - [Maîtriser GitHub Copilot pour une utilisation agentique](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
 - [Maîtriser GitHub Copilot pour les développeurs C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
 - [Choisissez votre propre aventure Copilot](https://github.com/microsoft/CopilotAdventures)
@@ -199,5 +203,7 @@ Notre équipe produit d'autres cours ! Découvrez :
 
 Ce dépôt est sous licence MIT. Consultez le fichier [LICENSE](../../LICENSE) pour plus d'informations.
 
+---
+
 **Avertissement** :  
 Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
\ No newline at end of file
diff --git a/translations/hi/README.md b/translations/hi/README.md
index 78bafa58..b9c132ff 100644
--- a/translations/hi/README.md
+++ b/translations/hi/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b672130244189715ac084c3259f6ab58",
-  "translation_date": "2025-08-24T11:52:29+00:00",
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T11:05:50+00:00",
   "source_file": "README.md",
   "language_code": "hi"
 }
@@ -21,31 +21,34 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![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)  
+
+इन संसाधनों का उपयोग शुरू करने के लिए निम्नलिखित चरणों का पालन करें:  
+1. **रेपो को फोर्क करें**: क्लिक करें [![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. **रेपो को क्लोन करें**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Azure AI Foundry Discord से जुड़ें और विशेषज्ञों और अन्य डेवलपर्स से मिलें**](https://discord.com/invite/ByRwuEEgH4)  
+
 # शुरुआती लोगों के लिए वेब डेवलपमेंट - एक पाठ्यक्रम  
 
-Microsoft Cloud Advocates द्वारा तैयार किए गए 12-सप्ताह के व्यापक पाठ्यक्रम के साथ वेब डेवलपमेंट की मूल बातें सीखें। प्रत्येक 24 पाठ JavaScript, CSS, और HTML को प्रोजेक्ट्स जैसे टेरारियम, ब्राउज़र एक्सटेंशन, और स्पेस गेम्स के माध्यम से समझाते हैं। क्विज़, चर्चाओं और व्यावहारिक असाइनमेंट के साथ जुड़ें। हमारी प्रभावी प्रोजेक्ट-आधारित शिक्षण पद्धति के साथ अपने कौशल को बढ़ाएं और ज्ञान को बेहतर तरीके से समझें। आज ही अपनी कोडिंग यात्रा शुरू करें!  
+Microsoft Cloud Advocates द्वारा तैयार किए गए 12-सप्ताह के व्यापक कोर्स के साथ वेब डेवलपमेंट की मूल बातें सीखें। 24 पाठों में JavaScript, CSS, और HTML को प्रोजेक्ट्स जैसे टेरारियम, ब्राउज़र एक्सटेंशन, और स्पेस गेम्स के माध्यम से समझाया गया है। क्विज़, चर्चाओं और व्यावहारिक असाइनमेंट्स के साथ जुड़ें। अपनी स्किल्स को बेहतर बनाएं और प्रोजेक्ट-आधारित शिक्षण पद्धति के साथ अपने ज्ञान को अधिकतम करें। आज ही अपनी कोडिंग यात्रा शुरू करें!  
 
 #### 🧑‍🎓 _क्या आप एक छात्र हैं?_  
 
-[**स्टूडेंट हब पेज**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) पर जाएं, जहां आपको शुरुआती संसाधन, स्टूडेंट पैक्स और यहां तक कि मुफ्त प्रमाणपत्र वाउचर प्राप्त करने के तरीके मिलेंगे। यह वह पेज है जिसे आप बुकमार्क करना चाहेंगे और समय-समय पर जांचना चाहेंगे क्योंकि हम हर महीने सामग्री बदलते हैं।  
+[**स्टूडेंट हब पेज**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) पर जाएं, जहां आपको शुरुआती संसाधन, स्टूडेंट पैक्स और यहां तक कि मुफ्त प्रमाणपत्र वाउचर प्राप्त करने के तरीके मिलेंगे। यह वह पेज है जिसे आप बुकमार्क करना चाहेंगे और समय-समय पर चेक करना चाहेंगे क्योंकि हम हर महीने सामग्री बदलते हैं।  
 
 ### 📣 घोषणा - _नया पाठ्यक्रम_ JavaScript के लिए जनरेटिव AI पर जारी किया गया है  
 
 हमारे नए जनरेटिव AI पाठ्यक्रम को मिस न करें!  
 
-शुरू करने के लिए [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) पर जाएं!  
+[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) पर जाएं और शुरुआत करें!  
 
-<div>  
-  <img src="./images/background.png" width="600px" />  
-</div>  
+![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.hi.png)  
 
-- पाठ जो मूलभूत से लेकर RAG तक सब कुछ कवर करते हैं।  
+- पाठ जो मूल बातें से लेकर RAG तक सब कुछ कवर करते हैं।  
 - GenAI और हमारे साथी ऐप का उपयोग करके ऐतिहासिक पात्रों के साथ बातचीत करें।  
 - मजेदार और आकर्षक कहानी, आप समय यात्रा करेंगे!  
 
-<div>  
-  <img src="./images/character.png" width="600px" />  
-</div>  
+![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.hi.png)  
 
 प्रत्येक पाठ में शामिल हैं:  
 - असाइनमेंट पूरा करना  
@@ -56,46 +59,46 @@ Microsoft Cloud Advocates द्वारा तैयार किए गए 12
   - टेक्स्ट और इमेज ऐप जनरेशन  
   - सर्च ऐप्स  
 
-शुरू करने के लिए [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) पर जाएं!  
+[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) पर जाएं और शुरुआत करें!  
 
 ## 🌱 शुरुआत करना  
 
 > **शिक्षकों**, हमने इस पाठ्यक्रम का उपयोग करने के लिए [कुछ सुझाव शामिल किए हैं](for-teachers.md)। हमें आपके फीडबैक की आवश्यकता है [हमारे चर्चा मंच में](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
 
-**[सीखने वाले](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक पाठ के लिए, प्री-लेक्चर क्विज़ से शुरू करें और लेक्चर सामग्री पढ़ने, विभिन्न गतिविधियों को पूरा करने और पोस्ट-लेक्चर क्विज़ के साथ अपनी समझ की जांच करें।  
+**[सीखने वाले](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक पाठ के लिए, प्री-लेक्चर क्विज़ से शुरुआत करें और लेक्चर सामग्री पढ़ने, विभिन्न गतिविधियों को पूरा करने और पोस्ट-लेक्चर क्विज़ के साथ अपनी समझ की जांच करें।  
 
 अपने सीखने के अनुभव को बेहतर बनाने के लिए, अपने साथियों के साथ प्रोजेक्ट्स पर काम करें! चर्चाओं को हमारे [चर्चा मंच](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) में प्रोत्साहित किया जाता है, जहां हमारे मॉडरेटर आपकी मदद के लिए उपलब्ध होंगे।  
 
-अपनी शिक्षा को आगे बढ़ाने के लिए, हम [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) पर अतिरिक्त अध्ययन सामग्री का पता लगाने की अत्यधिक अनुशंसा करते हैं।  
+अपनी शिक्षा को आगे बढ़ाने के लिए, हम [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) का पता लगाने की अत्यधिक अनुशंसा करते हैं, जहां अतिरिक्त अध्ययन सामग्री उपलब्ध है।  
 
 ### 📋 अपना वातावरण सेट करना  
 
-इस पाठ्यक्रम में एक तैयार विकास वातावरण है! जब आप शुरू करते हैं, तो आप [Codespace](https://github.com/features/codespaces/) (_एक ब्राउज़र-आधारित, बिना इंस्टॉल की आवश्यकता वाला वातावरण_) या अपने कंप्यूटर पर स्थानीय रूप से [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) जैसे टेक्स्ट एडिटर का उपयोग करके इसे चला सकते हैं।  
+इस पाठ्यक्रम में एक तैयार विकास वातावरण है! शुरुआत करते समय, आप [Codespace](https://github.com/features/codespaces/) (_एक ब्राउज़र-आधारित, बिना इंस्टॉल की आवश्यकता वाला वातावरण_) या अपने कंप्यूटर पर स्थानीय रूप से [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) जैसे टेक्स्ट एडिटर का उपयोग करके इसे चला सकते हैं।  
 
-#### अपना रिपॉजिटरी बनाएं  
-अपने काम को आसानी से सहेजने के लिए, यह अनुशंसा की जाती है कि आप इस रिपॉजिटरी की अपनी कॉपी बनाएं। आप पेज के शीर्ष पर **Use this template** बटन पर क्लिक करके ऐसा कर सकते हैं। यह आपके GitHub खाते में पाठ्यक्रम की एक नई रिपॉजिटरी बनाएगा।  
+#### अपना रेपो बनाएं  
+अपने काम को आसानी से सहेजने के लिए, यह अनुशंसा की जाती है कि आप इस रेपो की अपनी कॉपी बनाएं। आप पेज के शीर्ष पर **Use this template** बटन पर क्लिक करके ऐसा कर सकते हैं। यह आपके GitHub खाते में पाठ्यक्रम की एक नई कॉपी बनाएगा।  
 
 इन चरणों का पालन करें:  
-1. **रिपॉजिटरी को फोर्क करें**: इस पेज के शीर्ष-दाएं कोने में "Fork" बटन पर क्लिक करें।  
-2. **रिपॉजिटरी को क्लोन करें**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+1. **रेपो को फोर्क करें**: इस पेज के शीर्ष-दाएं कोने में "Fork" बटन पर क्लिक करें।  
+2. **रेपो को क्लोन करें**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
 
 #### Codespace में पाठ्यक्रम चलाना  
 
-इस रिपॉजिटरी की अपनी कॉपी में, जिसे आपने बनाया है, **Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। यह आपके काम करने के लिए एक नया Codespace बनाएगा।  
+इस रेपो की अपनी कॉपी में, जिसे आपने बनाया है, **Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। यह आपके काम करने के लिए एक नया Codespace बनाएगा।  
 
-<img src="./images/createcodespace.png" alt="Codespace बनाएं" style="width:270px;"/>  
+[!Codespace](../..)./images/createcodespace.png)  
 
 #### अपने कंप्यूटर पर स्थानीय रूप से पाठ्यक्रम चलाना  
 
-अपने कंप्यूटर पर इस पाठ्यक्रम को चलाने के लिए, आपको एक टेक्स्ट एडिटर, एक ब्राउज़र और एक कमांड लाइन टूल की आवश्यकता होगी। हमारा पहला पाठ, [प्रोग्रामिंग भाषाओं और टूल्स का परिचय](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), आपको इन टूल्स के विभिन्न विकल्पों के माध्यम से मार्गदर्शन करेगा ताकि आप अपने लिए सबसे अच्छा विकल्प चुन सकें।  
+इस पाठ्यक्रम को अपने कंप्यूटर पर स्थानीय रूप से चलाने के लिए, आपको एक टेक्स्ट एडिटर, एक ब्राउज़र और एक कमांड लाइन टूल की आवश्यकता होगी। हमारा पहला पाठ, [प्रोग्रामिंग भाषाओं और टूल्स का परिचय](../../1-getting-started-lessons/1-intro-to-programming-languages), आपको इन टूल्स के विभिन्न विकल्पों के माध्यम से मार्गदर्शन करेगा ताकि आप अपने लिए सबसे अच्छा विकल्प चुन सकें।  
 
-हमारी सिफारिश है कि आप [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) का उपयोग करें, जिसमें एक अंतर्निहित [टर्मिनल](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) भी है। आप [यहां](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) से Visual Studio Code डाउनलोड कर सकते हैं।  
+हमारी अनुशंसा है कि आप [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) का उपयोग करें, जिसमें एक अंतर्निहित [टर्मिनल](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) भी है। आप [यहां](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) से Visual Studio Code डाउनलोड कर सकते हैं।  
 
-1. अपने कंप्यूटर पर अपनी रिपॉजिटरी को क्लोन करें। आप **Code** बटन पर क्लिक करके और URL को कॉपी करके ऐसा कर सकते हैं:  
+1. अपने रेपो को अपने कंप्यूटर पर क्लोन करें। आप **Code** बटन पर क्लिक करके और URL कॉपी करके ऐसा कर सकते हैं:  
 
-    <img src="./images/createcodespace.png" alt="अपनी रिपॉजिटरी URL कॉपी करें" style="width:270px;"/>  
+    [!CodeSpace](./images/createcodespace.png)  
 
-    फिर, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) के भीतर [टर्मिनल](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) खोलें और निम्नलिखित कमांड चलाएं, `<your-repository-url>` को आपके द्वारा कॉपी किए गए URL से बदलें:  
+    फिर, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) में [टर्मिनल](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) खोलें और निम्नलिखित कमांड चलाएं, `<your-repository-url>` को उस URL से बदलें जिसे आपने अभी कॉपी किया है:  
 
     ```bash 
     git clone <your-repository-url>
@@ -119,38 +122,38 @@ Microsoft Cloud Advocates द्वारा तैयार किए गए 12
 - एक चुनौती  
 - पूरक पढ़ाई  
 - असाइनमेंट  
-- पोस्ट-लेसन क्विज़  
+- [पोस्ट-लेसन क्विज़](https://ff-quizzes.netlify.app/)  
 
-> **क्विज़ के बारे में एक नोट**: सभी क्विज़ Quiz-app फ़ोल्डर में हैं, कुल 48 क्विज़, प्रत्येक में तीन प्रश्न। वे पाठों के भीतर लिंक किए गए हैं। Quiz-app को स्थानीय रूप से चलाया जा सकता है या Azure पर डिप्लॉय किया जा सकता है; `quiz-app` फ़ोल्डर में दिए गए निर्देशों का पालन करें। उन्हें धीरे-धीरे स्थानीयकृत किया जा रहा है।  
+> **क्विज़ के बारे में एक नोट**: सभी क्विज़ Quiz-app फ़ोल्डर में हैं, कुल 48 क्विज़, प्रत्येक में तीन प्रश्न। वे [यहां](https://ff-quizzes.netlify.app/) उपलब्ध हैं। Quiz-app को स्थानीय रूप से चलाया जा सकता है या Azure पर डिप्लॉय किया जा सकता है; `quiz-app` फ़ोल्डर में दिए गए निर्देशों का पालन करें।  
 
 ## 🗃️ पाठ  
 
 |     |                       प्रोजेक्ट का नाम                       |                            सिखाए गए अवधारणाएं                             | सीखने के उद्देश्य                                                                                                                 |                                                         लिंक किया गया पाठ                                                          |         लेखक          |  
 | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
-| 01  |                     शुरुआत करना                      |           प्रोग्रामिंग और टूल्स का परिचय           | अधिकांश प्रोग्रामिंग भाषाओं के पीछे की मूल बातें और सॉफ्टवेयर के बारे में जानें जो पेशेवर डेवलपर्स को उनके काम में मदद करता है | [प्रोग्रामिंग भाषाओं और टूल्स का परिचय](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
-| 02  |                     शुरुआत करना                      |             GitHub की मूल बातें, टीम के साथ काम करना             | अपने प्रोजेक्ट में GitHub का उपयोग कैसे करें, कोड बेस पर दूसरों के साथ सहयोग कैसे करें                                                    |                            [GitHub का परिचय](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
-| 03  |                     शुरुआत करना                      |                             एक्सेसिबिलिटी                              | वेब एक्सेसिबिलिटी की मूल बातें जानें                                                                                               |                       [एक्सेसिबिलिटी के मूल सिद्धांत](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
-| 04  |                        JS की मूल बातें                         |                         JavaScript डेटा प्रकार                          | JavaScript डेटा प्रकार की मूल बातें                                                                                                 |                                       [डेटा प्रकार](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
-| 05  |                        JS की मूल बातें                         |                         फंक्शन्स और मेथड्स                          | एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फंक्शन्स और मेथड्स के बारे में जानें                                                             |                              [फंक्शन्स और मेथड्स](/2-js-basics/2-functions-methods/README.md)                               | Jasmine और Christopher |  
-| 06  |                        JS की मूल बातें                         |                        JS के साथ निर्णय लेना                        | निर्णय लेने के तरीकों का उपयोग करके अपने कोड में कंडीशन बनाने का तरीका जानें                                                           |                                 [निर्णय लेना](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
-| 07  |                        JS की मूल बातें                         |                            Arrays और Loops                            | JavaScript में डेटा के साथ काम करने के लिए Arrays और Loops का उपयोग करें                                                                                 |                                   [Arrays और Loops](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
-| 08  |       [Terrarium](/3-terrarium/solution/README.md)       |                            HTML का अभ्यास                            | ऑनलाइन टेरारियम बनाने के लिए HTML बनाएं, लेआउट बनाने पर ध्यान केंद्रित करें                                                         |                                 [HTML का परिचय](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
-| 09  |       [Terrarium](/3-terrarium/solution/README.md)       |                            CSS का अभ्यास                             | ऑनलाइन टेरारियम को स्टाइल करने के लिए CSS बनाएं, CSS की मूल बातें सहित पेज को उत्तरदायी बनाने पर ध्यान केंद्रित करें                     |                                  [CSS का परिचय](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
-| 10  |            [Terrarium](/3-terrarium/solution/README.md)            |                 JavaScript क्लोजर, DOM मैनिपुलेशन                  | टेरारियम को ड्रैग/ड्रॉप इंटरफेस के रूप में कार्य करने के लिए JavaScript बनाएं, क्लोजर और DOM मैनिपुलेशन पर ध्यान केंद्रित करें             |                  [JavaScript क्लोजर, DOM मैनिपुलेशन](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
-| 11  |          [Typing Game](/4-typing-game/solution/README.md)          |                          टाइपिंग गेम बनाएं                           | अपने JavaScript ऐप के लॉजिक को चलाने के लिए कीबोर्ड इवेंट्स का उपयोग करना सीखें                                                          |                                [इवेंट-ड्रिवन प्रोग्रामिंग](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
-| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         ब्राउज़र के साथ काम करना                          | जानें कि ब्राउज़र कैसे काम करते हैं, उनका इतिहास, और ब्राउज़र एक्सटेंशन के पहले तत्वों को कैसे तैयार करें                              |                               [About Browsers](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | फॉर्म बनाना, API कॉल करना और वेरिएबल्स को लोकल स्टोरेज में स्टोर करना    | अपने ब्राउज़र एक्सटेंशन के जावास्क्रिप्ट तत्वों को बनाएं ताकि लोकल स्टोरेज में स्टोर वेरिएबल्स का उपयोग करके API कॉल कर सकें            |                [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) |          ब्राउज़र में बैकग्राउंड प्रोसेस, वेब परफॉर्मेंस                  | ब्राउज़र के बैकग्राउंड प्रोसेस का उपयोग करके एक्सटेंशन के आइकन को प्रबंधित करें; वेब परफॉर्मेंस और कुछ ऑप्टिमाइज़ेशन के बारे में जानें    |             [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [Space Game](/6-space-game/solution/README.md)           |             जावास्क्रिप्ट के साथ अधिक उन्नत गेम डेवलपमेंट               | गेम बनाने की तैयारी में क्लास और कंपोज़िशन दोनों का उपयोग करके इनहेरिटेंस और पब/सब पैटर्न के बारे में जानें                              |                      [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           कैनवास पर ड्रॉ करना                           | Canvas API के बारे में जानें, जिसका उपयोग स्क्रीन पर तत्वों को ड्रॉ करने के लिए किया जाता है                                            |                                [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   स्क्रीन पर तत्वों को मूव करना                         | जानें कि कैसे तत्वों को कार्टेशियन कोऑर्डिनेट्स और Canvas API का उपयोग करके गति दी जा सकती है                                         |                           [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          टकराव का पता लगाना                            | तत्वों को टकराने और एक-दूसरे पर प्रतिक्रिया देने के लिए बनाएं, कीप्रेस का उपयोग करें और गेम की परफॉर्मेंस सुनिश्चित करने के लिए कूलडाउन फंक्शन प्रदान करें |                              [Collision Detection](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             स्कोर रखना                                 | गेम की स्थिति और परफॉर्मेंस के आधार पर गणितीय गणना करें                                                     |                                    [Keeping Score](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     गेम को समाप्त करना और पुनः शुरू करना                | गेम को समाप्त करने और पुनः शुरू करने के बारे में जानें, जिसमें एसेट्स को साफ करना और वेरिएबल्स के मानों को रीसेट करना शामिल है          |                                [The Ending Condition](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 एक वेब ऐप में HTML टेम्पलेट्स और रूट्स                  | रूटिंग और HTML टेम्पलेट्स का उपयोग करके एक मल्टीपेज वेबसाइट की संरचना तैयार करना सीखें                                                |                            [HTML Templates and Routes](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  लॉगिन और रजिस्ट्रेशन फॉर्म बनाना                       | फॉर्म बनाने और वेलिडेशन रूटीन को संभालने के बारे में जानें                                                   |                                           [Forms](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   डेटा को प्राप्त करने और उपयोग करने के तरीके           | जानें कि आपका ऐप डेटा को कैसे प्राप्त करता है, स्टोर करता है, और उसे डिस्पोज़ करता है                                                |                                            [Data](/7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      स्टेट मैनेजमेंट की अवधारणाएं                       | जानें कि आपका ऐप स्टेट को कैसे बनाए रखता है और इसे प्रोग्रामेटिक रूप से कैसे प्रबंधित किया जा सकता है                                  |                                [State Management](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+| 01  |                     शुरुआत करना                      |           प्रोग्रामिंग और टूल्स का परिचय           | अधिकांश प्रोग्रामिंग भाषाओं के पीछे की मूल बातें और पेशेवर डेवलपर्स को उनके काम में मदद करने वाले सॉफ़्टवेयर के बारे में जानें | [प्रोग्रामिंग भाषाओं और टूल्स का परिचय](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     शुरुआत करना                      |             GitHub की मूल बातें, टीम के साथ काम करना             | अपने प्रोजेक्ट में GitHub का उपयोग कैसे करें, कोड बेस पर दूसरों के साथ सहयोग कैसे करें                                                    |                            [GitHub का परिचय](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     शुरुआत करना                      |                             एक्सेसिबिलिटी                              | वेब एक्सेसिबिलिटी की मूल बातें सीखें                                                                                               |                       [एक्सेसिबिलिटी के मूल सिद्धांत](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        JS की मूल बातें                         |                         JavaScript डेटा प्रकार                          | JavaScript डेटा प्रकारों की मूल बातें                                                                                                 |                                       [डेटा प्रकार](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        JS की मूल बातें                         |                         फंक्शन्स और मेथड्स                          | एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फंक्शन्स और मेथड्स के बारे में जानें                                                             |                              [फंक्शन्स और मेथड्स](./2-js-basics/2-functions-methods/README.md)                               | Jasmine और Christopher |  
+| 06  |                        JS की मूल बातें                         |                        JS के साथ निर्णय लेना                        | निर्णय लेने के तरीकों का उपयोग करके अपने कोड में शर्तें कैसे बनाएं                                                           |                                 [निर्णय लेना](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        JS की मूल बातें                         |                            Arrays और Loops                            | JavaScript में डेटा के साथ काम करने के लिए Arrays और Loops का उपयोग करें                                                                                 |                                   [Arrays और Loops](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML का अभ्यास                            | ऑनलाइन टेरारियम बनाने के लिए HTML बनाएं, लेआउट बनाने पर ध्यान केंद्रित करें                                                         |                                 [HTML का परिचय](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS का अभ्यास                             | ऑनलाइन टेरारियम को स्टाइल करने के लिए CSS बनाएं, CSS की मूल बातें सहित पेज को उत्तरदायी बनाने पर ध्यान केंद्रित करें                     |                                  [CSS का परिचय](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 जावास्क्रिप्ट क्लोज़र्स, DOM मैनिपुलेशन                  | जावास्क्रिप्ट को इस तरह से बनाएं कि टेरारियम ड्रैग/ड्रॉप इंटरफेस के रूप में काम करे, जिसमें क्लोज़र्स और DOM मैनिपुलेशन पर ध्यान केंद्रित हो |                  [जावास्क्रिप्ट क्लोज़र्स, DOM मैनिपुलेशन](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          टाइपिंग गेम बनाएं                           | जानें कि कीबोर्ड इवेंट्स का उपयोग करके अपने जावास्क्रिप्ट ऐप की लॉजिक को कैसे चलाएं                                                          |                                [इवेंट-ड्रिवन प्रोग्रामिंग](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         ब्राउज़र के साथ काम करना                          | जानें कि ब्राउज़र कैसे काम करते हैं, उनका इतिहास, और ब्राउज़र एक्सटेंशन के पहले तत्वों को कैसे तैयार करें                               |                               [ब्राउज़र के बारे में](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | फॉर्म बनाना, API कॉल करना और लोकल स्टोरेज में वेरिएबल्स स्टोर करना | अपने ब्राउज़र एक्सटेंशन के जावास्क्रिप्ट तत्वों को बनाएं ताकि लोकल स्टोरेज में स्टोर किए गए वेरिएबल्स का उपयोग करके API कॉल किया जा सके |                [APIs, फॉर्म्स, और लोकल स्टोरेज](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          ब्राउज़र में बैकग्राउंड प्रोसेस, वेब प्रदर्शन          | ब्राउज़र के बैकग्राउंड प्रोसेस का उपयोग करके एक्सटेंशन के आइकन को प्रबंधित करें; वेब प्रदर्शन और कुछ ऑप्टिमाइजेशन के बारे में जानें   |             [बैकग्राउंड टास्क्स और प्रदर्शन](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             जावास्क्रिप्ट के साथ अधिक उन्नत गेम डेवलपमेंट             | क्लासेस और कंपोज़िशन का उपयोग करके इनहेरिटेंस और पब/सब पैटर्न के बारे में जानें, गेम बनाने की तैयारी में              |                      [उन्नत गेम डेवलपमेंट का परिचय](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           कैनवास पर ड्रॉ करना                            | कैनवास API के बारे में जानें, जिसका उपयोग स्क्रीन पर तत्वों को ड्रॉ करने के लिए किया जाता है                                                                       |                                [कैनवास पर ड्रॉ करना](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   स्क्रीन पर तत्वों को घुमाना                    | जानें कि कैसे तत्वों को कार्टेशियन कोऑर्डिनेट्स और कैनवास API का उपयोग करके गति दी जा सकती है                                            |                           [तत्वों को स्क्रीन पर घुमाना](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          टकराव का पता लगाना                           | तत्वों को एक-दूसरे से टकराने और प्रतिक्रिया देने के लिए बनाएं, कीप्रेस का उपयोग करें और गेम के प्रदर्शन को सुनिश्चित करने के लिए कूलडाउन फंक्शन प्रदान करें    |                              [टकराव का पता लगाना](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             स्कोर रखना                              | गेम की स्थिति और प्रदर्शन के आधार पर गणितीय गणना करें                                                                |                                    [स्कोर रखना](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     गेम को समाप्त करना और पुनः शुरू करना                     | गेम को समाप्त करने और पुनः शुरू करने के बारे में जानें, जिसमें एसेट्स को साफ करना और वेरिएबल्स के मानों को रीसेट करना शामिल है                              |                                [समाप्ति की स्थिति](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 HTML टेम्पलेट्स और वेब ऐप में रूट्स                 | जानें कि मल्टीपेज वेबसाइट की आर्किटेक्चर को रूटिंग और HTML टेम्पलेट्स का उपयोग करके कैसे तैयार करें                             |                            [HTML टेम्पलेट्स और रूट्स](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  लॉगिन और रजिस्ट्रेशन फॉर्म बनाएं                   | फॉर्म्स बनाने और वैलिडेशन रूटीन को संभालने के बारे में जानें                                                                          |                                           [फॉर्म्स](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   डेटा को प्राप्त करने और उपयोग करने के तरीके                   | जानें कि आपका ऐप डेटा को कैसे प्रवाहित करता है, प्राप्त करता है, स्टोर करता है, और उसे डिस्पोज़ करता है                                                 |                                            [डेटा](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      स्टेट मैनेजमेंट की अवधारणाएं                      | जानें कि आपका ऐप स्टेट को कैसे बनाए रखता है और इसे प्रोग्रामेटिक रूप से कैसे प्रबंधित करें                                                              |                                [स्टेट मैनेजमेंट](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
 
 
 ## 🏫 शिक्षण पद्धति
@@ -159,26 +162,26 @@ Microsoft Cloud Advocates द्वारा तैयार किए गए 12
 * प्रोजेक्ट-आधारित शिक्षा
 * बार-बार क्विज़
 
-यह प्रोग्राम जावास्क्रिप्ट, HTML, और CSS की मूल बातें सिखाता है, साथ ही आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम टूल और तकनीकों को भी। छात्रों को टाइपिंग गेम, वर्चुअल टेरारियम, पर्यावरण-अनुकूल ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर-स्टाइल गेम, और व्यवसायों के लिए एक बैंकिंग ऐप बनाकर व्यावहारिक अनुभव प्राप्त करने का अवसर मिलेगा। इस श्रृंखला के अंत तक, छात्रों को वेब डेवलपमेंट की एक ठोस समझ हो जाएगी।
+यह कार्यक्रम जावास्क्रिप्ट, HTML, और CSS की मूलभूत बातें सिखाता है, साथ ही आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम टूल और तकनीकों को भी। छात्रों को टाइपिंग गेम, वर्चुअल टेरारियम, पर्यावरण-अनुकूल ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर-स्टाइल गेम, और व्यवसायों के लिए बैंकिंग ऐप बनाकर व्यावहारिक अनुभव प्राप्त करने का अवसर मिलेगा। श्रृंखला के अंत तक, छात्रों को वेब डेवलपमेंट की ठोस समझ प्राप्त हो जाएगी।
 
-> 🎓 आप इस पाठ्यक्रम की शुरुआती कुछ कक्षाओं को [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) पर Microsoft Learn पर ले सकते हैं!
+> 🎓 आप इस पाठ्यक्रम के पहले कुछ पाठ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) पर Microsoft Learn पर ले सकते हैं!
 
-सुनिश्चित करके कि सामग्री प्रोजेक्ट्स के साथ मेल खाती है, प्रक्रिया छात्रों के लिए अधिक आकर्षक बन जाती है और अवधारणाओं की समझ को बढ़ावा मिलता है। हमने जावास्क्रिप्ट की मूल बातों को समझाने के लिए कई शुरुआती पाठ भी लिखे हैं, जिन्हें "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" वीडियो ट्यूटोरियल संग्रह के वीडियो के साथ जोड़ा गया है, जिनमें से कुछ लेखकों ने इस पाठ्यक्रम में योगदान दिया है।
+सुनिश्चित करके कि सामग्री प्रोजेक्ट्स के साथ मेल खाती है, प्रक्रिया छात्रों के लिए अधिक आकर्षक बन जाती है और अवधारणाओं की समझ को बढ़ाया जाता है। हमने जावास्क्रिप्ट की मूल बातें सिखाने के लिए कई प्रारंभिक पाठ भी लिखे हैं, जिन्हें "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" वीडियो ट्यूटोरियल संग्रह के साथ जोड़ा गया है, जिनमें से कुछ लेखकों ने इस पाठ्यक्रम में योगदान दिया है।
 
-इसके अलावा, कक्षा से पहले एक कम दबाव वाला क्विज़ छात्र को किसी विषय को सीखने के लिए प्रेरित करता है, जबकि कक्षा के बाद एक दूसरा क्विज़ अवधारणाओं को और अधिक बनाए रखने में मदद करता है। यह पाठ्यक्रम लचीला और मज़ेदार होने के लिए डिज़ाइन किया गया है और इसे पूरे या आंशिक रूप से लिया जा सकता है। प्रोजेक्ट्स छोटे से शुरू होते हैं और 12-सप्ताह के चक्र के अंत तक धीरे-धीरे जटिल हो जाते हैं।
+इसके अलावा, कक्षा से पहले एक कम दबाव वाला क्विज़ छात्र को विषय सीखने की ओर प्रेरित करता है, जबकि कक्षा के बाद दूसरा क्विज़ अवधारणाओं को और अधिक बनाए रखने में मदद करता है। यह पाठ्यक्रम लचीला और मजेदार बनाया गया है और इसे पूरे या आंशिक रूप से लिया जा सकता है। प्रोजेक्ट्स छोटे से शुरू होते हैं और 12-सप्ताह के चक्र के अंत तक धीरे-धीरे जटिल हो जाते हैं।
 
-हालांकि हमने जानबूझकर जावास्क्रिप्ट फ्रेमवर्क को शामिल करने से बचा है ताकि फ्रेमवर्क अपनाने से पहले एक वेब डेवलपर के रूप में आवश्यक बुनियादी कौशल पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने के बाद एक अच्छा अगला कदम Node.js के बारे में सीखना होगा, जो एक अन्य वीडियो संग्रह में उपलब्ध है: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
+हालांकि हमने जानबूझकर जावास्क्रिप्ट फ्रेमवर्क को पेश करने से बचा है ताकि वेब डेवलपर के रूप में आवश्यक बुनियादी कौशल पर ध्यान केंद्रित किया जा सके, फ्रेमवर्क अपनाने से पहले, इस पाठ्यक्रम को पूरा करने के बाद एक अच्छा अगला कदम Node.js के बारे में सीखना होगा, जो एक अन्य वीडियो संग्रह में उपलब्ध है: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
 
-> हमारे [Code of Conduct](CODE_OF_CONDUCT.md) और [Contributing](CONTRIBUTING.md) दिशानिर्देश देखें। हम आपकी रचनात्मक प्रतिक्रिया का स्वागत करते हैं!
+> हमारे [Code of Conduct](CODE_OF_CONDUCT.md) और [Contributing](CONTRIBUTING.md) दिशानिर्देश देखें। हम आपके रचनात्मक फीडबैक का स्वागत करते हैं!
 
 
-## 🧭 ऑफ़लाइन एक्सेस
+## 🧭 ऑफलाइन एक्सेस
 
-आप इस डाक्यूमेंटेशन को ऑफ़लाइन [Docsify](https://docsify.js.org/#/) का उपयोग करके चला सकते हैं। इस रिपॉजिटरी को फोर्क करें, [Docsify इंस्टॉल करें](https://docsify.js.org/#/quickstart) अपने लोकल मशीन पर, और फिर इस रिपॉजिटरी के रूट फोल्डर में `docsify serve` टाइप करें। वेबसाइट आपके लोकलहोस्ट पर पोर्ट 3000 पर सर्व की जाएगी: `localhost:3000`।
+आप इस दस्तावेज़ को ऑफलाइन [Docsify](https://docsify.js.org/#/) का उपयोग करके चला सकते हैं। इस रिपॉजिटरी को फोर्क करें, [Docsify इंस्टॉल करें](https://docsify.js.org/#/quickstart) अपने लोकल मशीन पर, और फिर इस रिपॉजिटरी के रूट फोल्डर में `docsify serve` टाइप करें। वेबसाइट आपके लोकलहोस्ट पर पोर्ट 3000 पर सर्व की जाएगी: `localhost:3000`।
 
-## 📘 पीडीएफ
+## 📘 PDF
 
-सभी पाठों की एक पीडीएफ [यहां](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) पाई जा सकती है।
+सभी पाठों का PDF [यहां](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) पाया जा सकता है।
 
 
 ## 🎒 अन्य पाठ्यक्रम
@@ -204,5 +207,7 @@ Microsoft Cloud Advocates द्वारा तैयार किए गए 12
 
 यह रिपॉजिटरी MIT लाइसेंस के तहत लाइसेंस प्राप्त है। अधिक जानकारी के लिए [LICENSE](../../LICENSE) फ़ाइल देखें।
 
+---
+
 **अस्वीकरण**:  
-यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
\ No newline at end of file
+यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।
\ No newline at end of file
diff --git a/translations/hk/README.md b/translations/hk/README.md
index 4fb259dd..0c224ee8 100644
--- a/translations/hk/README.md
+++ b/translations/hk/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b672130244189715ac084c3259f6ab58",
-  "translation_date": "2025-08-23T22:14:28+00:00",
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T11:02:12+00:00",
   "source_file": "README.md",
   "language_code": "hk"
 }
@@ -21,75 +21,78 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![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)  
 
-透過 Microsoft Cloud Advocates 提供的 12 週全面課程，學習網頁開發的基礎知識。課程包含 24 節課，透過實作專案如植物箱、瀏覽器擴充功能及太空遊戲，深入學習 JavaScript、CSS 和 HTML。課程還包含測驗、討論及實際作業，幫助你提升技能並加強知識吸收。立即開始你的程式設計旅程吧！  
+按照以下步驟開始使用這些資源：  
+1. **Fork 儲存庫**：點擊 [![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 儲存庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**加入 Azure AI Foundry Discord，與專家及其他開發者交流**](https://discord.com/invite/ByRwuEEgH4)  
+
+# 初學者的網頁開發課程 - 教學大綱  
+
+透過 Microsoft Cloud Advocates 提供的 12 週全面課程，學習網頁開發的基礎知識。24 節課涵蓋 JavaScript、CSS 和 HTML，並通過實作項目如生態瓶、瀏覽器擴展和太空遊戲進行學習。課程包括測驗、討論和實際作業，幫助你提升技能並加強知識記憶。立即開始你的編程旅程吧！  
 
 #### 🧑‍🎓 _你是學生嗎？_  
 
-造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你可以找到初學者資源、學生套件，甚至有機會獲得免費證書兌換券。這是你需要收藏並定期查看的頁面，因為我們每月都會更新內容。  
+造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你可以找到初學者資源、學生套件，甚至獲得免費證書的方式。這是你需要收藏並定期查看的頁面，因為我們每月都會更新內容。  
 
-### 📣 公告 - _全新課程_ 關於 JavaScript 的生成式 AI 已正式推出  
+### 📣 公告 - _全新課程_ 關於 JavaScript 的生成式 AI 已經發布  
 
 不要錯過我們的全新生成式 AI 課程！  
 
 造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！  
 
-<div>  
-  <img src="./images/background.png" width="600px" />  
-</div>  
+![背景](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.hk.png)  
 
 - 課程涵蓋從基礎到 RAG 的所有內容。  
 - 使用生成式 AI 和我們的伴侶應用程式與歷史人物互動。  
-- 有趣且引人入勝的故事情節，你將進行時光旅行！  
+- 有趣且引人入勝的敘事，你將進行時光旅行！  
 
-<div>  
-  <img src="./images/character.png" width="600px" />  
-</div>  
+![角色](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.hk.png)  
 
-每節課都包含作業、知識檢測及挑戰，幫助你學習以下主題：  
-- 提示及提示工程  
-- 文本及圖像應用程式生成  
-- 搜尋應用程式  
+每節課都包括一個作業、一個知識檢查和一個挑戰，幫助你學習以下主題：  
+- 提示設計與提示工程  
+- 文本與圖像應用程式生成  
+- 搜索應用程式  
 
 造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！  
 
-## 🌱 開始學習  
+## 🌱 開始使用  
 
-> **教師們**，我們已[提供一些建議](for-teachers.md)供您使用此課程。我們非常期待您在[討論論壇](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)中提供回饋！  
+> **教師們**，我們已[提供一些建議](for-teachers.md)關於如何使用這份教學大綱。我們期待在[討論論壇](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)中收到你的反饋！  
 
-**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課開始前，先進行課前測驗，接著閱讀課程內容，完成各種活動，並透過課後測驗檢查你的理解程度。  
+**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課開始前，先完成課前測驗，然後閱讀課程材料，完成各種活動，並通過課後測驗檢查你的理解。  
 
-為了提升學習效果，與同儕合作完成專案吧！我們鼓勵你在[討論論壇](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)中進行討論，我們的版主團隊會回答你的問題。  
+為了提升學習體驗，與同伴一起完成項目吧！我們鼓勵在[討論論壇](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)中進行交流，我們的版主團隊會回答你的問題。  
 
-此外，我們強烈建議你探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)，以獲取更多學習資源。  
+為了進一步提升你的教育，我們強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 以獲取更多學習材料。  
 
 ### 📋 設置你的環境  
 
-此課程已準備好開發環境！開始學習時，你可以選擇在 [Codespace](https://github.com/features/codespaces/)（_基於瀏覽器，無需安裝的環境_）中運行課程，或在本地電腦上使用文字編輯器如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。  
+這份教學大綱已準備好開發環境！開始時，你可以選擇在 [Codespace](https://github.com/features/codespaces/)（基於瀏覽器，無需安裝的環境）中運行教學大綱，或者在本地電腦上使用文本編輯器如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。  
 
-#### 建立你的倉庫  
-為了方便保存你的學習成果，建議你建立此倉庫的副本。你可以點擊頁面頂部的 **Use this template** 按鈕，這將在你的 GitHub 帳戶中建立一個包含課程副本的新倉庫。  
+#### 創建你的儲存庫  
+為了方便保存你的工作，建議你創建這份教學大綱的副本。你可以點擊頁面頂部的 **Use this template** 按鈕，這將在你的 GitHub 帳戶中創建一個新的儲存庫，包含教學大綱的副本。  
 
-操作步驟：  
-1. **Fork 倉庫**：點擊頁面右上角的 "Fork" 按鈕。  
-2. **克隆倉庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+按照以下步驟：  
+1. **Fork 儲存庫**：點擊頁面右上角的 "Fork" 按鈕。  
+2. **Clone 儲存庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
 
-#### 在 Codespace 中運行課程  
+#### 在 Codespace 中運行教學大綱  
 
-在你建立的倉庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為你創建一個新的 Codespace 以供使用。  
+在你創建的儲存庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為你創建一個新的 Codespace 以進行工作。  
 
-<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>  
+[!Codespace](../..)./images/createcodespace.png)  
 
-#### 在本地電腦上運行課程  
+#### 在本地電腦上運行教學大綱  
 
-若要在本地電腦上運行課程，你需要一個文字編輯器、瀏覽器及命令行工具。我們的第一節課 [程式語言及工具介紹](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages) 將引導你選擇適合自己的工具。  
+要在本地電腦上運行教學大綱，你需要一個文本編輯器、一個瀏覽器和一個命令行工具。我們的第一節課 [編程語言與工具介紹](../../1-getting-started-lessons/1-intro-to-programming-languages) 將指導你選擇適合自己的工具。  
 
 我們推薦使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器，它還內建了 [終端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以在[這裡](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下載 Visual Studio Code。  
 
-1. 將倉庫克隆到你的電腦。點擊 **Code** 按鈕並複製 URL：  
+1. 將你的儲存庫克隆到電腦。點擊 **Code** 按鈕並複製 URL：  
 
-    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>  
+    [!CodeSpace](./images/createcodespace.png)  
 
     然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的 [終端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 中運行以下命令，將 `<your-repository-url>` 替換為你剛複製的 URL：  
 
@@ -97,85 +100,84 @@ CO_OP_TRANSLATOR_METADATA:
     git clone <your-repository-url>
     ```  
 
-2. 在 Visual Studio Code 中打開資料夾。點擊 **File** > **Open Folder**，選擇你剛克隆的資料夾。  
+2. 在 Visual Studio Code 中打開文件夾。點擊 **File** > **Open Folder**，選擇你剛克隆的文件夾。  
 
-> 推薦的 Visual Studio Code 擴充功能：  
+> 推薦的 Visual Studio Code 擴展：  
 >  
 > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面  
-> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快撰寫程式碼  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快地編寫代碼  
 
-## 📂 每節課包含：  
+## 📂 每節課包括：  
 
-- 選擇性手繪筆記  
-- 選擇性補充影片  
-- 課前暖身測驗  
+- 可選的手繪筆記  
+- 可選的補充視頻  
+- 課前熱身測驗  
 - 書面課程  
-- 專案型課程的逐步指南  
-- 知識檢測  
+- 對於基於項目的課程，提供逐步指南以完成項目  
+- 知識檢查  
 - 挑戰  
-- 補充閱讀  
+- 補充閱讀材料  
 - 作業  
-- 課後測驗  
+- [課後測驗](https://ff-quizzes.netlify.app/)  
 
-> **關於測驗的說明**：所有測驗都包含在 Quiz-app 資料夾中，共有 48 個測驗，每個測驗包含三個問題。測驗已在課程中連結，測驗應用程式可以在本地運行或部署到 Azure；請按照 `quiz-app` 資料夾中的指示操作。測驗正在逐步本地化。  
+> **關於測驗的說明**：所有測驗都包含在 Quiz-app 文件夾中，共有 48 個測驗，每個測驗包含三個問題。它們可以在 [這裡](https://ff-quizzes.netlify.app/) 找到，測驗應用程式可以在本地運行或部署到 Azure；請按照 `quiz-app` 文件夾中的指示操作。  
 
 ## 🗃️ 課程  
 
-|     |                       專案名稱                       |                            教授概念                             | 學習目標                                                                                                                 |                                                         課程連結                                                          |         作者          |  
+|     |                       項目名稱                       |                            教授概念                             | 學習目標                                                                                                                 |                                                         連結課程                                                          |         作者          |  
 | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
-| 01  |                     入門篇                      |           程式語言及工具介紹           | 學習大多數程式語言的基本原理及幫助專業開發者完成工作的軟體 | [程式語言及工具介紹](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
-| 02  |                     入門篇                      |             GitHub 基礎及團隊合作             | 學習如何在專案中使用 GitHub，如何與他人協作管理程式碼                                                    |                            [GitHub 基礎](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
-| 03  |                     入門篇                      |                             無障礙設計                              | 學習網頁無障礙設計的基礎                                                                                               |                       [無障礙設計基礎](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
-| 04  |                        JS 基礎                         |                         JavaScript 資料型別                          | JavaScript 資料型別的基礎                                                                                                 |                                       [資料型別](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
-| 05  |                        JS 基礎                         |                         函數及方法                          | 學習如何使用函數及方法管理應用程式的邏輯流程                                                             |                              [函數及方法](/2-js-basics/2-functions-methods/README.md)                               | Jasmine 和 Christopher |  
-| 06  |                        JS 基礎                         |                        使用 JS 做出決策                        | 學習如何使用決策方法在程式碼中建立條件                                                           |                                 [做出決策](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
-| 07  |                        JS 基礎                         |                            陣列及迴圈                            | 使用 JavaScript 中的陣列及迴圈處理資料                                                                                 |                                   [陣列及迴圈](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
-| 08  |       [植物箱](/3-terrarium/solution/README.md)       |                            HTML 實作                            | 建立 HTML 以創建線上植物箱，專注於建立網頁佈局                                                         |                                 [HTML 介紹](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
-| 09  |       [植物箱](/3-terrarium/solution/README.md)       |                            CSS 實作                             | 建立 CSS 以設計線上植物箱，專注於 CSS 基礎及使網頁響應式                     |                                  [CSS 介紹](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
-| 10  |            [植物箱](/3-terrarium/solution/README.md)            |                 JavaScript 閉包及 DOM 操作                  | 建立 JavaScript 使植物箱具備拖放功能，專注於閉包及 DOM 操作             |                  [JavaScript 閉包及 DOM 操作](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
-| 11  |          [打字遊戲](/4-typing-game/solution/README.md)          |                          建立打字遊戲                           | 學習如何使用鍵盤事件驅動 JavaScript 應用程式的邏輯                                                          |                                [事件驅動程式設計](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
-| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         與瀏覽器互動                          | 學習瀏覽器的運作原理、歷史，以及如何搭建瀏覽器擴展的基本元素                               |                               [關於瀏覽器](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | 建立表單、調用 API 並將變數存儲於本地存儲中                   | 建立瀏覽器擴展的 JavaScript 元素，使用存儲於本地存儲中的變數來調用 API                      |                [API、表單與本地存儲](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          瀏覽器中的背景進程與網頁效能          | 使用瀏覽器的背景進程來管理擴展的圖標；學習網頁效能以及一些優化方法   |             [背景任務與效能](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [Space Game](/6-space-game/solution/README.md)           |             更高級的 JavaScript 遊戲開發             | 學習如何使用類別與組合進行繼承，以及 Pub/Sub 模式，為開發遊戲做好準備              |                      [高級遊戲開發介紹](/6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           繪製到畫布                            | 學習如何使用 Canvas API，將元素繪製到螢幕上                                                                       |                                [繪製到畫布](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   在螢幕上移動元素                    | 探索如何使用笛卡爾座標系與 Canvas API 讓元素產生運動                                            |                           [移動元素](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          碰撞檢測                           | 讓元素通過按鍵碰撞並相互反應，並提供冷卻功能以確保遊戲效能    |                              [碰撞檢測](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             計分                              | 根據遊戲的狀態與表現進行數學計算                                                                |                                    [計分](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     結束與重啟遊戲                     | 學習如何結束與重啟遊戲，包括清理資產與重置變數值                              |                                [結束條件](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 網頁應用中的 HTML 模板與路由                 | 學習如何使用路由與 HTML 模板來搭建多頁網站的架構                             |                            [HTML 模板與路由](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  建立登入與註冊表單                   | 學習如何建立表單並處理驗證流程                                                                          |                                           [表單](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   獲取與使用數據的方法                   | 學習數據如何在應用中流動，如何獲取、存儲與處理數據                                                 |                                            [數據](/7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      狀態管理的概念                      | 學習應用如何保留狀態以及如何以程式化方式進行管理                                                              |                                [狀態管理](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+| 01  |                     入門                      |           編程與工具介紹           | 學習大多數編程語言的基本原理以及幫助專業開發者完成工作的軟件 | [編程語言與工具介紹](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     入門                      |             GitHub 基礎，包含團隊合作             | 學習如何在項目中使用 GitHub，如何與他人協作代碼庫                                                    |                            [GitHub 基礎介紹](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     入門                      |                             無障礙設計                              | 學習網頁無障礙設計的基礎知識                                                                                               |                       [無障礙設計基礎](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        JS 基礎                         |                         JavaScript 資料類型                          | JavaScript 資料類型的基礎知識                                                                                                 |                                       [資料類型](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        JS 基礎                         |                         函數與方法                          | 學習如何使用函數與方法管理應用程式的邏輯流程                                                             |                              [函數與方法](./2-js-basics/2-functions-methods/README.md)                               | Jasmine 和 Christopher |  
+| 06  |                        JS 基礎                         |                        使用 JS 做出決策                        | 學習如何使用決策方法在代碼中創建條件                                                           |                                 [做出決策](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        JS 基礎                         |                            陣列與迴圈                            | 使用 JavaScript 中的陣列與迴圈處理資料                                                                                 |                                   [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [生態瓶](./3-terrarium/solution/README.md)       |                            HTML 實作                            | 建立 HTML 以創建線上生態瓶，專注於建立佈局                                                         |                                 [HTML 介紹](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [生態瓶](./3-terrarium/solution/README.md)       |                            CSS 實作                             | 建立 CSS 以設計線上生態瓶，專注於 CSS 的基礎知識，包括使頁面響應式                     |                                  [CSS 介紹](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript 閉包與 DOM 操作                  | 建立 JavaScript 使生態瓶具備拖放功能，重點在於閉包與 DOM 操作             |                  [JavaScript 閉包與 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          建立打字遊戲                           | 學習如何使用鍵盤事件來驅動 JavaScript 應用程式的邏輯                                                          |                                [事件驅動程式設計](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         瀏覽器操作                          | 學習瀏覽器的運作方式、歷史，以及如何搭建瀏覽器擴展的基本元素                               |                               [關於瀏覽器](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | 建立表單、調用 API 並將變數存儲於本地存儲 | 建立瀏覽器擴展的 JavaScript 元素，使用本地存儲中的變數來調用 API                      |                [API、表單與本地存儲](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          瀏覽器中的背景進程與網頁效能          | 使用瀏覽器的背景進程來管理擴展的圖標；學習網頁效能以及一些優化方法   |             [背景任務與效能](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             更進階的 JavaScript 遊戲開發             | 學習使用類別與組合的繼承，以及 Pub/Sub 模式，為建立遊戲做準備              |                      [進階遊戲開發介紹](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           繪製到畫布                            | 學習如何使用 Canvas API，將元素繪製到螢幕上                                                                       |                                [繪製到畫布](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   在螢幕上移動元素                    | 探索如何使用笛卡爾座標與 Canvas API 讓元素產生移動                                            |                           [移動元素](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          碰撞檢測                           | 讓元素碰撞並對彼此產生反應，使用按鍵事件並提供冷卻功能以確保遊戲效能    |                              [碰撞檢測](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             計分                              | 根據遊戲的狀態與表現進行數學計算                                                                |                                    [計分](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     結束與重啟遊戲                     | 學習如何結束與重啟遊戲，包括清理資產與重置變數值                              |                                [結束條件](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 網頁應用中的 HTML 模板與路由                 | 學習如何使用路由與 HTML 模板來搭建多頁網站的架構                             |                            [HTML 模板與路由](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  建立登入與註冊表單                   | 學習如何建立表單並處理驗證流程                                                                          |                                           [表單](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   獲取與使用數據的方法                   | 學習數據如何在應用中流動，如何獲取、存儲與處理數據                                                 |                                            [數據](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      狀態管理的概念                      | 學習應用如何保留狀態以及如何以程式化方式管理狀態                                                              |                                [狀態管理](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
 
 
-## 🏫 教學法
+## 🏫 教學理念
 
-我們的課程設計基於兩個關鍵的教學原則：
-* 項目式學習
+我們的課程設計基於兩個關鍵的教學理念：
+* 專案導向學習
 * 頻繁的小測驗
 
-該課程教授 JavaScript、HTML 和 CSS 的基礎知識，以及當今網頁開發者使用的最新工具與技術。學生將有機會通過構建打字遊戲、虛擬生態瓶、環保瀏覽器擴展、太空侵略者風格的遊戲以及商業銀行應用來獲得實踐經驗。到課程結束時，學生將對網頁開發有扎實的理解。
-
+這個課程教授 JavaScript、HTML 和 CSS 的基礎知識，以及當今網頁開發者使用的最新工具與技術。學生將有機會透過建立打字遊戲、虛擬生態瓶、環保瀏覽器擴展、太空侵略者風格的遊戲，以及商業銀行應用程式來獲得實作經驗。到課程結束時，學生將對網頁開發有扎實的理解。
 
 > 🎓 你可以在 Microsoft Learn 上以 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 的形式學習本課程的前幾節課！
 
-通過確保內容與項目相符，學習過程對學生來說更具吸引力，並能增強概念的記憶。我們還撰寫了幾節 JavaScript 基礎課程來介紹概念，並搭配 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 視頻教程中的視頻，其中一些作者也參與了本課程的編寫。
+透過確保內容與專案相符，學習過程對學生來說更具吸引力，並能增強概念的記憶。我們還撰寫了幾個 JavaScript 基礎的入門課程，搭配 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 視頻教程中的影片，其中一些作者也參與了本課程的編寫。
 
-此外，課前的小測驗可以幫助學生集中注意力學習某個主題，而課後的第二次測驗則能進一步鞏固記憶。該課程設計靈活有趣，可以整體學習，也可以部分學習。項目從簡單開始，並在 12 週的學習周期內逐漸變得複雜。
+此外，課前的低壓力小測驗能幫助學生專注於學習主題，而課後的第二次測驗則能進一步鞏固記憶。本課程設計靈活有趣，可以完整學習或選擇部分內容。專案從簡單開始，並在 12 週的課程週期內逐漸變得複雜。
 
-我們有意避免引入 JavaScript 框架，以便專注於作為網頁開發者在採用框架之前所需的基本技能。完成本課程後，學習 Node.js 是一個不錯的下一步選擇，可以參考另一個視頻系列："[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。
+雖然我們有意避免引入 JavaScript 框架，以專注於成為網頁開發者所需的基本技能，但完成本課程後，學習 Node.js 會是下一個不錯的選擇，可以參考另一個視頻系列："[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。
 
 > 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎你的建設性反饋！
 
 
-## 🧭 離線訪問
+## 🧭 離線存取
 
-你可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文檔。Fork 此倉庫，在本地機器上[安裝 Docsify](https://docsify.js.org/#/quickstart)，然後在此倉庫的根目錄中輸入 `docsify serve`。網站將在本地的 3000 端口上運行：`localhost:3000`。
+你可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文檔。Fork 此 repo，並在本地機器上 [安裝 Docsify](https://docsify.js.org/#/quickstart)，然後在此 repo 的根目錄中輸入 `docsify serve`。網站將在本地端的 3000 埠上運行：`localhost:3000`。
 
 ## 📘 PDF
 
-所有課程的 PDF 可在 [此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 找到。
+所有課程的 PDF 可在 [這裡](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 找到。
 
 
 ## 🎒 其他課程
@@ -193,13 +195,15 @@ CO_OP_TRANSLATOR_METADATA:
 - [網頁開發初學者課程](https://aka.ms/webdev-beginners)
 - [物聯網初學者課程](https://aka.ms/iot-beginners)
 - [XR 開發初學者課程](https://github.com/microsoft/xr-development-for-beginners)
-- [掌握 GitHub Copilot 的智能使用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
-- [為 C#/.NET 開發者掌握 GitHub Copilot](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [精通 GitHub Copilot 的智能應用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [精通 GitHub Copilot 的 C#/.NET 開發者課程](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
 - [選擇你的 Copilot 冒險](https://github.com/microsoft/CopilotAdventures)
 
 ## 授權
 
-此倉庫基於 MIT 許可證授權。詳情請參閱 [LICENSE](../../LICENSE) 文件。
+此存儲庫採用 MIT 授權。詳情請參閱 [LICENSE](../../LICENSE) 文件。
+
+---
 
 **免責聲明**：  
-本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為具權威性的來源。對於重要資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
+本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於重要信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
diff --git a/translations/ko/README.md b/translations/ko/README.md
index 9bf5c366..d35a8620 100644
--- a/translations/ko/README.md
+++ b/translations/ko/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b672130244189715ac084c3259f6ab58",
-  "translation_date": "2025-08-23T22:17:23+00:00",
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T11:04:44+00:00",
   "source_file": "README.md",
   "language_code": "ko"
 }
@@ -21,55 +21,63 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![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)  
+
+이 리소스를 사용하기 위해 다음 단계를 따라 시작하세요:  
+1. **저장소 포크하기**: 클릭 [![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. **저장소 클론하기**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Azure AI Foundry Discord에 가입하여 전문가 및 다른 개발자들과 만나보세요**](https://discord.com/invite/ByRwuEEgH4)  
+
 # 초보자를 위한 웹 개발 - 커리큘럼  
 
-Microsoft Cloud Advocates가 제공하는 12주 과정의 종합 강좌를 통해 웹 개발의 기초를 배워보세요. 24개의 강의는 JavaScript, CSS, HTML을 다루며, 테라리움, 브라우저 확장 프로그램, 우주 게임과 같은 실습 프로젝트를 통해 학습합니다. 퀴즈, 토론, 실습 과제를 통해 학습을 심화하고, 프로젝트 기반 학습법으로 지식을 효과적으로 습득하세요. 지금 코딩 여정을 시작하세요!  
+Microsoft Cloud Advocates가 제공하는 12주간의 종합 코스를 통해 웹 개발의 기본을 배워보세요. 24개의 각 레슨은 JavaScript, CSS, HTML을 다루며 테라리움, 브라우저 확장 프로그램, 우주 게임과 같은 실습 프로젝트를 포함합니다. 퀴즈, 토론, 실습 과제를 통해 학습에 참여하세요. 프로젝트 기반 학습 방법을 통해 기술을 향상시키고 지식 습득을 최적화하세요. 지금 코딩 여정을 시작하세요!  
 
 #### 🧑‍🎓 _학생이신가요?_  
 
-[**학생 허브 페이지**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)를 방문해보세요. 초보자를 위한 자료, 학생 팩, 무료 인증서 바우처를 받을 수 있는 방법 등을 확인할 수 있습니다. 이 페이지를 즐겨찾기에 추가하고 매달 업데이트되는 콘텐츠를 확인하세요.  
+[**학생 허브 페이지**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)를 방문하여 초보자를 위한 리소스, 학생 팩, 무료 인증서 바우처를 얻는 방법을 확인하세요. 이 페이지를 즐겨찾기에 추가하고 매달 업데이트되는 콘텐츠를 확인하세요.  
 
-### 📣 공지 - _새로운 커리큘럼_ JavaScript를 위한 생성형 AI가 출시되었습니다  
+### 📣 공지 - _새로운 커리큘럼_ JavaScript를 위한 생성형 AI가 방금 출시되었습니다  
 
 새로운 생성형 AI 커리큘럼을 놓치지 마세요!  
 
-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)를 방문해 시작하세요!  
+[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)를 방문하여 시작하세요!  
 
-<div>  
-  <img src="./images/background.png" width="600px" />  
-</div>  
+![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ko.png)  
 
-- 기초부터 RAG까지 다루는 강의  
-- GenAI와 동반 앱을 사용해 역사적 인물과 상호작용  
-- 재미있고 몰입감 있는 스토리, 시간 여행을 떠나보세요!  
+- 기본부터 RAG까지 모든 것을 다루는 레슨  
+- GenAI와 동반 앱을 사용하여 역사적 인물과 상호작용  
+- 재미있고 몰입감 있는 스토리, 시간 여행을 경험하세요!  
 
-<div>  
-  <img src="./images/character.png" width="600px" />  
-</div>  
+![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ko.png)  
 
-각 강의에는 과제, 지식 점검, 도전 과제가 포함되어 있으며, 다음과 같은 주제를 학습합니다:  
-- 프롬프트 작성 및 프롬프트 엔지니어링  
+각 레슨에는 다음이 포함됩니다:  
+- 과제  
+- 지식 점검  
+- 학습 주제를 안내하는 챌린지  
+
+다음과 같은 주제를 배워보세요:  
+- 프롬프트 및 프롬프트 엔지니어링  
 - 텍스트 및 이미지 앱 생성  
 - 검색 앱  
 
-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)를 방문해 시작하세요!  
+[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)를 방문하여 시작하세요!  
 
 ## 🌱 시작하기  
 
-> **교사 여러분**, 이 커리큘럼을 활용하는 방법에 대한 [제안 사항](for-teachers.md)을 포함했습니다. [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)에서 피드백을 공유해주세요!  
+> **교사 여러분**, 이 커리큘럼을 사용하는 방법에 대한 [제안](for-teachers.md)을 포함했습니다. [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)에서 피드백을 공유해주세요!  
 
-**[학습자](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)** 여러분, 각 강의는 사전 강의 퀴즈로 시작하며, 강의 자료를 읽고 다양한 활동을 완료한 후 사후 강의 퀴즈로 이해도를 확인하세요.  
+**[학습자](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 각 레슨에서 사전 강의 퀴즈로 시작하고 강의 자료를 읽으며 다양한 활동을 완료한 후 사후 강의 퀴즈로 이해도를 확인하세요.  
 
-학습 경험을 향상시키기 위해 동료들과 함께 프로젝트를 진행하세요! [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)에서 토론을 장려하며, 모더레이터 팀이 질문에 답변해드립니다.  
+학습 경험을 향상시키기 위해 동료들과 함께 프로젝트를 진행하세요! [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)에서 질문을 하고 토론을 통해 학습을 장려하세요.  
 
-추가 학습을 위해 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)을 탐색해보는 것을 강력히 추천합니다.  
+추가 학습을 위해 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)을 탐색하여 추가 학습 자료를 확인하는 것을 추천합니다.  
 
 ### 📋 환경 설정  
 
-이 커리큘럼은 바로 사용할 수 있는 개발 환경을 제공합니다! 시작할 때 [Codespace](https://github.com/features/codespaces/) (_브라우저 기반, 설치 불필요한 환경_) 또는 로컬 컴퓨터에서 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)와 같은 텍스트 편집기를 사용해 실행할 수 있습니다.  
+이 커리큘럼은 바로 사용할 수 있는 개발 환경을 제공합니다! 시작할 때 [Codespace](https://github.com/features/codespaces/) (_브라우저 기반, 설치 필요 없음 환경_) 또는 로컬 컴퓨터에서 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)와 같은 텍스트 편집기를 사용하여 실행할 수 있습니다.  
 
 #### 저장소 생성하기  
-작업을 쉽게 저장하려면 이 저장소의 복사본을 생성하는 것이 좋습니다. 페이지 상단의 **Use this template** 버튼을 클릭하면 GitHub 계정에 커리큘럼 복사본이 생성됩니다.  
+작업을 쉽게 저장하려면 이 저장소의 복사본을 생성하는 것이 좋습니다. 페이지 상단의 **Use this template** 버튼을 클릭하여 GitHub 계정에 커리큘럼 복사본을 생성하세요.  
 
 다음 단계를 따르세요:  
 1. **저장소 포크하기**: 페이지 오른쪽 상단의 "Fork" 버튼을 클릭하세요.  
@@ -79,108 +87,112 @@ Microsoft Cloud Advocates가 제공하는 12주 과정의 종합 강좌를 통
 
 생성한 저장소 복사본에서 **Code** 버튼을 클릭하고 **Open with Codespaces**를 선택하세요. 새로운 Codespace가 생성되어 작업할 수 있습니다.  
 
-<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>  
+[!Codespace](../..)./images/createcodespace.png)  
 
 #### 로컬 컴퓨터에서 커리큘럼 실행하기  
 
-로컬 컴퓨터에서 커리큘럼을 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 번째 강의인 [프로그래밍 언어 및 도구 소개](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages)는 각 도구의 다양한 옵션을 안내하며, 자신에게 가장 적합한 것을 선택할 수 있도록 도와줍니다.  
+로컬 컴퓨터에서 커리큘럼을 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 번째 레슨인 [프로그래밍 언어 및 도구 소개](../../1-getting-started-lessons/1-intro-to-programming-languages)는 이러한 도구에 대한 다양한 옵션을 안내하며, 자신에게 적합한 것을 선택할 수 있도록 도와줍니다.  
 
-추천 편집기는 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)이며, 내장 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)도 포함되어 있습니다. [여기](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)에서 Visual Studio Code를 다운로드하세요.  
+추천하는 편집기는 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)이며, 내장 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)을 포함하고 있습니다. [여기](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)에서 Visual Studio Code를 다운로드할 수 있습니다.  
 
-1. 저장소를 컴퓨터에 클론하세요. **Code** 버튼을 클릭하고 URL을 복사한 후, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)의 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)에서 아래 명령어를 실행하세요. `<your-repository-url>`을 복사한 URL로 대체하세요:  
+1. 저장소를 컴퓨터에 클론하세요. **Code** 버튼을 클릭하고 URL을 복사하세요:  
+
+    [!CodeSpace](./images/createcodespace.png)  
+
+    그런 다음 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)의 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)을 열고 복사한 URL을 `<your-repository-url>`로 대체하여 다음 명령을 실행하세요:  
 
     ```bash 
     git clone <your-repository-url>
     ```  
 
-2. Visual Studio Code에서 폴더를 엽니다. **File** > **Open Folder**를 클릭하고 클론한 폴더를 선택하세요.  
+2. Visual Studio Code에서 폴더를 열어 클론한 폴더를 선택하세요. **File** > **Open Folder**를 클릭하세요.  
 
->  추천 Visual Studio Code 확장 프로그램:  
+> 추천 Visual Studio Code 확장 프로그램:  
 >  
-> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code 내에서 HTML 페이지를 미리보기  
-> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 코드를 더 빠르게 작성할 수 있도록 도와줌  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code에서 HTML 페이지를 미리보기  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 코드를 더 빠르게 작성할 수 있도록 도움  
 
-## 📂 각 강의에는 다음이 포함됩니다:  
+## 📂 각 레슨에는 다음이 포함됩니다:  
 
-- 선택적 스케치 노트  
+- 선택적 스케치노트  
 - 선택적 보충 영상  
-- 사전 강의 준비 퀴즈  
-- 강의 자료  
-- 프로젝트 기반 강의의 경우, 프로젝트를 구축하는 단계별 가이드  
+- 사전 레슨 준비 퀴즈  
+- 작성된 레슨  
+- 프로젝트 기반 레슨의 경우, 프로젝트를 구축하는 단계별 가이드  
 - 지식 점검  
-- 도전 과제  
-- 보충 자료  
+- 챌린지  
+- 보충 읽기 자료  
 - 과제  
-- 사후 강의 퀴즈  
+- [사후 레슨 퀴즈](https://ff-quizzes.netlify.app/)  
 
-> **퀴즈에 대한 참고 사항**: 모든 퀴즈는 Quiz-app 폴더에 포함되어 있으며, 총 48개의 퀴즈가 각 3문항으로 구성되어 있습니다. 퀴즈는 강의 내에서 링크되며, 로컬에서 실행하거나 Azure에 배포할 수 있습니다. `quiz-app` 폴더의 지침을 따르세요. 퀴즈는 점진적으로 현지화되고 있습니다.  
+> **퀴즈에 대한 참고 사항**: 모든 퀴즈는 Quiz-app 폴더에 포함되어 있으며, 총 48개의 퀴즈가 각 3문제로 구성되어 있습니다. [여기](https://ff-quizzes.netlify.app/)에서 이용 가능하며, 로컬에서 실행하거나 Azure에 배포할 수 있습니다. `quiz-app` 폴더의 지침을 따르세요.  
 
-## 🗃️ 강의  
+## 🗃️ 레슨  
 
-|     |                       프로젝트 이름                       |                            학습 개념                             | 학습 목표                                                                                                                 |                                                         링크된 강의                                                          |         저자          |  
+|     |                       프로젝트 이름                       |                            학습 개념                             | 학습 목표                                                                                                                 |                                                         연결된 레슨                                                          |         작성자          |  
 | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
-| 01  |                     시작하기                      |           프로그래밍 및 도구 소개           | 대부분의 프로그래밍 언어의 기본 개념과 전문 개발자가 사용하는 소프트웨어에 대해 학습 | [프로그래밍 언어 및 도구 소개](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
-| 02  |                     시작하기                      |             GitHub 기초, 팀 작업 포함             | 프로젝트에서 GitHub을 사용하는 방법과 코드베이스에서 다른 사람들과 협업하는 방법                                                    |                            [GitHub 소개](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
-| 03  |                     시작하기                      |                             접근성                              | 웹 접근성의 기본 개념을 학습                                                                                               |                       [접근성 기초](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
-| 04  |                        JS 기초                         |                         JavaScript 데이터 유형                          | JavaScript 데이터 유형의 기본 개념                                                                                                 |                                       [데이터 유형](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
-| 05  |                        JS 기초                         |                         함수와 메서드                          | 애플리케이션의 논리 흐름을 관리하기 위해 함수와 메서드에 대해 학습                                                             |                              [함수와 메서드](/2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |  
-| 06  |                        JS 기초                         |                        JavaScript로 의사결정                        | 의사결정 방법을 사용해 코드에서 조건을 생성하는 방법 학습                                                           |                                 [의사결정](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
-| 07  |                        JS 기초                         |                            배열과 반복문                            | JavaScript에서 배열과 반복문을 사용해 데이터를 다루는 방법 학습                                                                                 |                                   [배열과 반복문](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
-| 08  |       [테라리움](/3-terrarium/solution/README.md)       |                            HTML 실습                            | 온라인 테라리움을 만들기 위해 HTML을 작성하며 레이아웃 구축에 집중                                                         |                                 [HTML 소개](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
-| 09  |       [테라리움](/3-terrarium/solution/README.md)       |                            CSS 실습                             | 온라인 테라리움을 스타일링하기 위해 CSS를 작성하며, CSS의 기본 개념과 반응형 페이지 제작에 집중                     |                                  [CSS 소개](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
-| 10  |            [테라리움](/3-terrarium/solution/README.md)            |                 JavaScript 클로저, DOM 조작                  | 테라리움을 드래그/드롭 인터페이스로 작동하게 만들기 위해 JavaScript를 작성하며, 클로저와 DOM 조작에 집중             |                  [JavaScript 클로저, DOM 조작](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
-| 11  |          [타이핑 게임](/4-typing-game/solution/README.md)          |                          타이핑 게임 만들기                           | 키보드 이벤트를 사용해 JavaScript 앱의 로직을 구동하는 방법 학습                                                          |                                [이벤트 기반 프로그래밍](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
-| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         브라우저 작업하기                          | 브라우저의 작동 방식, 역사, 브라우저 확장의 첫 요소를 구성하는 방법을 배웁니다.                               |                               [브라우저에 대하여](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | 폼 생성, API 호출 및 로컬 스토리지에 변수 저장 | 로컬 스토리지에 저장된 변수를 사용하여 API를 호출하는 브라우저 확장의 JavaScript 요소를 만듭니다.                      |                [API, 폼, 로컬 스토리지](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          브라우저의 백그라운드 프로세스와 웹 성능          | 브라우저의 백그라운드 프로세스를 사용하여 확장의 아이콘을 관리하고, 웹 성능 및 최적화 방법에 대해 배웁니다.   |             [백그라운드 작업 및 성능](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [Space Game](/6-space-game/solution/README.md)           |             JavaScript를 활용한 고급 게임 개발             | 클래스와 컴포지션을 사용한 상속 및 Pub/Sub 패턴에 대해 배우며 게임 개발을 준비합니다.              |                      [고급 게임 개발 소개](/6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           캔버스에 그리기                            | 화면에 요소를 그리기 위해 사용되는 Canvas API에 대해 배웁니다.                                                                       |                                [캔버스에 그리기](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   화면에서 요소 이동시키기                    | 요소가 데카르트 좌표와 Canvas API를 사용하여 움직임을 얻는 방법을 알아봅니다.                                            |                           [요소 이동시키기](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          충돌 감지                           | 키 입력을 사용하여 요소가 서로 충돌하고 반응하도록 만들고, 게임 성능을 보장하기 위한 쿨다운 기능을 제공합니다.    |                              [충돌 감지](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             점수 기록                              | 게임 상태와 성능에 따라 수학적 계산을 수행합니다.                                                                |                                    [점수 기록](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     게임 종료 및 재시작                     | 자산 정리 및 변수 값 초기화를 포함하여 게임을 종료하고 재시작하는 방법을 배웁니다.                              |                                [종료 조건](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 웹 앱에서 HTML 템플릿과 라우트                 | 라우팅과 HTML 템플릿을 사용하여 다중 페이지 웹사이트의 구조를 구성하는 방법을 배웁니다.                             |                            [HTML 템플릿과 라우트](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  로그인 및 등록 폼 생성                   | 폼 생성 및 유효성 검사 루틴 처리에 대해 배웁니다.                                                                          |                                           [폼](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   데이터 가져오기 및 사용 방법                   | 앱에서 데이터가 어떻게 흐르고, 가져오고, 저장하고, 삭제하는지에 대해 배웁니다.                                                 |                                            [데이터](/7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      상태 관리 개념                      | 앱이 상태를 유지하는 방법과 이를 프로그래밍적으로 관리하는 방법을 배웁니다.                                                              |                                [상태 관리](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+| 01  |                     시작하기                      |           프로그래밍 및 도구 소개           | 대부분의 프로그래밍 언어의 기본 원리를 배우고 전문 개발자가 사용하는 소프트웨어에 대해 알아보기 | [프로그래밍 언어 및 도구 소개](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     시작하기                      |             GitHub 기본, 팀 작업 포함             | 프로젝트에서 GitHub을 사용하는 방법, 코드베이스에서 다른 사람들과 협업하는 방법                                                    |                            [GitHub 소개](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     시작하기                      |                             접근성                              | 웹 접근성의 기본을 배우기                                                                                               |                       [접근성 기본](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        JS 기본                         |                         JavaScript 데이터 유형                          | JavaScript 데이터 유형의 기본을 배우기                                                                                                 |                                       [데이터 유형](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        JS 기본                         |                         함수 및 메서드                          | 애플리케이션의 논리 흐름을 관리하기 위해 함수와 메서드에 대해 배우기                                                             |                              [함수 및 메서드](./2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |  
+| 06  |                        JS 기본                         |                        JS로 결정 내리기                        | 결정 방법을 사용하여 코드에서 조건을 생성하는 방법 배우기                                                           |                                 [결정 내리기](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        JS 기본                         |                            배열 및 반복문                            | JavaScript에서 배열과 반복문을 사용하여 데이터를 처리하는 방법 배우기                                                                                 |                                   [배열 및 반복문](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [테라리움](./3-terrarium/solution/README.md)       |                            HTML 실습                            | 온라인 테라리움을 만들기 위해 HTML을 작성하며 레이아웃을 구축하는 데 집중                                                         |                                 [HTML 소개](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [테라리움](./3-terrarium/solution/README.md)       |                            CSS 실습                             | 온라인 테라리움을 스타일링하기 위해 CSS를 작성하며, CSS의 기본 및 페이지를 반응형으로 만드는 방법에 집중                     |                                  [CSS 소개](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript 클로저, DOM 조작                  | JavaScript를 사용하여 테라리움을 드래그/드롭 인터페이스로 작동하도록 만들고, 클로저와 DOM 조작에 집중합니다             |                  [JavaScript 클로저, DOM 조작](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          타이핑 게임 만들기                           | 키보드 이벤트를 사용하여 JavaScript 앱의 로직을 구동하는 방법을 배웁니다                                                          |                                [이벤트 기반 프로그래밍](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         브라우저 작업                          | 브라우저의 작동 방식, 역사, 브라우저 확장의 첫 번째 요소를 구성하는 방법을 배웁니다                               |                               [브라우저에 대해](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | 폼 생성, API 호출 및 로컬 스토리지에 변수 저장 | 브라우저 확장의 JavaScript 요소를 만들어 로컬 스토리지에 저장된 변수를 사용하여 API를 호출합니다                      |                [API, 폼, 로컬 스토리지](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          브라우저의 백그라운드 프로세스, 웹 성능          | 브라우저의 백그라운드 프로세스를 사용하여 확장의 아이콘을 관리하고, 웹 성능 및 최적화 방법을 배웁니다   |             [백그라운드 작업 및 성능](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             JavaScript를 활용한 고급 게임 개발             | 클래스와 구성 요소를 사용한 상속 및 Pub/Sub 패턴을 배우며 게임 개발을 준비합니다              |                      [고급 게임 개발 소개](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           캔버스에 그리기                            | 화면에 요소를 그리기 위해 사용되는 Canvas API에 대해 배웁니다                                                                       |                                [캔버스에 그리기](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   화면에서 요소 이동시키기                    | 요소가 데카르트 좌표와 Canvas API를 사용하여 움직임을 얻는 방법을 배웁니다                                            |                           [요소 이동시키기](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          충돌 감지                           | 키 입력을 사용하여 요소가 서로 충돌하고 반응하도록 만들며, 게임 성능을 보장하기 위한 쿨다운 기능을 제공합니다    |                              [충돌 감지](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             점수 계산                              | 게임의 상태와 성능에 따라 수학 계산을 수행합니다                                                                |                                    [점수 계산](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     게임 종료 및 재시작                     | 게임 종료 및 재시작에 대해 배우며, 자산 정리 및 변수 값 초기화를 포함합니다                              |                                [종료 조건](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 웹 앱에서 HTML 템플릿과 라우트                 | 라우팅과 HTML 템플릿을 사용하여 다중 페이지 웹사이트의 구조를 만드는 방법을 배웁니다                             |                            [HTML 템플릿과 라우트](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  로그인 및 등록 폼 만들기                   | 폼을 만들고 유효성 검사 루틴을 처리하는 방법을 배웁니다                                                                          |                                           [폼](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   데이터 가져오기 및 사용 방법                   | 데이터가 앱 안팎으로 흐르는 방식, 데이터를 가져오고 저장하며 삭제하는 방법을 배웁니다                                                 |                                            [데이터](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      상태 관리 개념                      | 앱이 상태를 유지하는 방법과 이를 프로그래밍적으로 관리하는 방법을 배웁니다                                                              |                                [상태 관리](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
 
 
-## 🏫 교육 방법론
+## 🏫 교육 방법
 
 우리의 커리큘럼은 두 가지 주요 교육 원칙을 기반으로 설계되었습니다:
 * 프로젝트 기반 학습
 * 빈번한 퀴즈
 
-이 프로그램은 JavaScript, HTML, CSS의 기본 원리와 오늘날 웹 개발자가 사용하는 최신 도구 및 기술을 가르칩니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장, 스페이스 인베이더 스타일 게임, 비즈니스용 뱅킹 앱을 제작하며 실습 경험을 쌓을 기회를 갖게 됩니다. 시리즈가 끝날 때쯤 학생들은 웹 개발에 대한 탄탄한 이해를 얻게 될 것입니다.
+이 프로그램은 JavaScript, HTML, CSS의 기본을 가르치며, 오늘날 웹 개발자가 사용하는 최신 도구와 기술도 포함합니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장, 스페이스 인베이더 스타일 게임, 비즈니스용 뱅킹 앱을 제작하며 실습 경험을 쌓을 기회를 갖게 됩니다. 시리즈가 끝날 때쯤, 학생들은 웹 개발에 대한 탄탄한 이해를 얻게 될 것입니다.
 
-> 🎓 이 커리큘럼의 첫 몇 가지 수업은 Microsoft Learn에서 [학습 경로](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)로 수강할 수 있습니다!
+> 🎓 이 커리큘럼의 첫 몇 가지 수업을 Microsoft Learn에서 [학습 경로](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)로 수강할 수 있습니다!
 
-프로젝트와 콘텐츠를 일치시킴으로써 학습 과정을 학생들에게 더 흥미롭게 만들고 개념의 이해도를 높일 수 있습니다. 또한 JavaScript 기본 개념을 소개하는 여러 입문 수업을 작성했으며, "[JavaScript 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 비디오 튜토리얼 컬렉션과 함께 제공됩니다. 이 비디오의 일부 저자들은 이 커리큘럼 제작에 기여했습니다.
+프로젝트와 콘텐츠를 일치시킴으로써 학생들에게 더 흥미로운 학습 경험을 제공하고 개념의 기억력을 높일 수 있습니다. 또한 JavaScript 기본을 소개하는 여러 시작 레슨과 함께 "[JavaScript 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 비디오 튜토리얼 컬렉션에서 제공되는 비디오를 짝지었습니다. 일부 저자는 이 커리큘럼에 기여했습니다.
 
-또한, 수업 전 간단한 퀴즈는 학생들이 주제 학습에 집중하도록 의도를 설정하며, 수업 후 두 번째 퀴즈는 개념의 추가적인 이해를 보장합니다. 이 커리큘럼은 유연하고 재미있게 설계되었으며, 전체 또는 일부를 선택적으로 수강할 수 있습니다. 프로젝트는 작게 시작하여 12주 과정이 끝날 때쯤 점점 더 복잡해집니다.
+또한, 수업 전에 부담 없는 퀴즈를 통해 학생들이 주제 학습에 집중하도록 하고, 수업 후 두 번째 퀴즈를 통해 개념을 더 잘 기억할 수 있도록 합니다. 이 커리큘럼은 유연하고 재미있게 설계되었으며, 전체 또는 일부를 수강할 수 있습니다. 프로젝트는 작게 시작하여 12주 주기 끝에 점점 복잡해집니다.
 
-우리는 JavaScript 프레임워크를 도입하지 않고 웹 개발자로서 프레임워크를 채택하기 전에 필요한 기본 기술에 집중하도록 의도적으로 설계했습니다. 이 커리큘럼을 완료한 후 다음 단계로 Node.js를 배우는 것이 좋습니다. "[Node.js 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" 비디오 컬렉션을 참고하세요.
+우리는 JavaScript 프레임워크를 소개하지 않고 웹 개발자로서 기본 기술을 익힌 후 프레임워크를 채택하도록 집중하는 것을 의도적으로 피했습니다. 이 커리큘럼을 완료한 후 다음 단계로 Node.js를 배우는 것이 좋습니다. 이를 위해 "[Node.js 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" 비디오 컬렉션을 추천합니다.
 
-> 우리의 [행동 강령](CODE_OF_CONDUCT.md)과 [기여 가이드라인](CONTRIBUTING.md)을 확인하세요. 건설적인 피드백을 환영합니다!
+> 우리의 [행동 강령](CODE_OF_CONDUCT.md)과 [기여](CONTRIBUTING.md) 지침을 확인하세요. 건설적인 피드백을 환영합니다!
 
 
 ## 🧭 오프라인 접근
 
-[Docsify](https://docsify.js.org/#/)를 사용하여 이 문서를 오프라인에서 실행할 수 있습니다. 이 저장소를 포크하고, 로컬 머신에 [Docsify 설치](https://docsify.js.org/#/quickstart)를 완료한 후, 이 저장소의 루트 폴더에서 `docsify serve`를 입력하세요. 웹사이트는 로컬호스트 `localhost:3000`의 3000번 포트에서 제공됩니다.
+[Docsify](https://docsify.js.org/#/)를 사용하여 이 문서를 오프라인에서 실행할 수 있습니다. 이 저장소를 포크하고, 로컬 머신에 [Docsify 설치](https://docsify.js.org/#/quickstart)를 완료한 후, 이 저장소의 루트 폴더에서 `docsify serve`를 입력하세요. 웹사이트는 localhost의 포트 3000에서 제공됩니다: `localhost:3000`.
 
 ## 📘 PDF
 
-모든 수업의 PDF는 [여기](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)에서 확인할 수 있습니다.
+모든 레슨의 PDF는 [여기](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)에서 찾을 수 있습니다.
 
 
-## 🎒 다른 강좌
+## 🎒 다른 코스
 
-우리 팀은 다른 강좌도 제작합니다! 확인해보세요:
+우리 팀은 다른 코스도 제작합니다! 확인해보세요:
 
-- [초보자를 위한 생성형 AI](https://aka.ms/genai-beginners)
-- [초보자를 위한 생성형 AI .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
-- [JavaScript로 생성형 AI 배우기](https://github.com/microsoft/generative-ai-with-javascript)
-- [Java로 생성형 AI 배우기](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [초보자를 위한 생성 AI](https://aka.ms/genai-beginners)
+- [초보자를 위한 생성 AI .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [JavaScript를 활용한 생성 AI](https://github.com/microsoft/generative-ai-with-javascript)
+- [Java를 활용한 생성 AI](https://github.com/microsoft/Generative-AI-for-beginners-java)
 - [초보자를 위한 AI](https://aka.ms/ai-beginners)
 - [초보자를 위한 데이터 과학](https://aka.ms/datascience-beginners)
 - [초보자를 위한 머신러닝](https://aka.ms/ml-beginners)
@@ -188,13 +200,15 @@ Microsoft Cloud Advocates가 제공하는 12주 과정의 종합 강좌를 통
 - [초보자를 위한 웹 개발](https://aka.ms/webdev-beginners)
 - [초보자를 위한 IoT](https://aka.ms/iot-beginners)
 - [초보자를 위한 XR 개발](https://github.com/microsoft/xr-development-for-beginners)
-- [GitHub Copilot 마스터하기: 에이전트적 사용](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
-- [C#/.NET 개발자를 위한 GitHub Copilot 마스터하기](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [GitHub Copilot을 활용한 마스터링](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [C#/.NET 개발자를 위한 GitHub Copilot 마스터링](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
 - [GitHub Copilot 모험 선택하기](https://github.com/microsoft/CopilotAdventures)
 
 ## 라이선스
 
 이 저장소는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 [LICENSE](../../LICENSE) 파일을 참조하세요.
 
+---
+
 **면책 조항**:  
-이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 권위 있는 출처로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 책임을 지지 않습니다.
\ No newline at end of file
+이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전이 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 책임을 지지 않습니다.
\ No newline at end of file
diff --git a/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..ee7d8977
--- /dev/null
+++ b/translations/lt/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-28T11:59:54+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "lt"
+}
+-->
+# Įvadas į programavimo kalbas ir įrankius
+
+Ši pamoka apima programavimo kalbų pagrindus. Čia aptariamos temos taikomos daugumai šiuolaikinių programavimo kalbų. Skiltyje „Įrankiai“ sužinosite apie naudingą programinę įrangą, kuri padeda jums kaip kūrėjui.
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.lt.png)
+> Sketchnote sukūrė [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Prieš paskaitą: testas
+[Prieš paskaitą: testas](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Įvadas
+
+Šioje pamokoje aptarsime:
+
+- Kas yra programavimas?
+- Programavimo kalbų tipai
+- Pagrindiniai programos elementai
+- Naudinga programinė įranga ir įrankiai profesionaliam kūrėjui
+
+> Šią pamoką galite rasti [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Kas yra programavimas?
+
+Programavimas (dar vadinamas kodavimu) – tai procesas, kai rašomos instrukcijos įrenginiui, pavyzdžiui, kompiuteriui ar mobiliajam įrenginiui. Šios instrukcijos rašomos programavimo kalba, kurią vėliau interpretuoja įrenginys. Šios instrukcijų grupės gali būti vadinamos įvairiais pavadinimais, tačiau *programa*, *kompiuterio programa*, *aplikacija (app)* ir *vykdomasis failas* yra keli populiarūs pavadinimai.
+
+*Programa* gali būti bet kas, kas yra sukurta naudojant kodą: svetainės, žaidimai, telefonų aplikacijos. Nors programą galima sukurti ir nerašant kodo, pagrindinė logika yra interpretuojama įrenginio, o ta logika greičiausiai buvo parašyta kodu. Programa, kuri *vykdo* arba *atlieka* kodą, vykdo instrukcijas. Įrenginys, kuriuo skaitote šią pamoką, vykdo programą, kad atvaizduotų ją jūsų ekrane.
+
+✅ Atlikite nedidelį tyrimą: kas laikomas pirmuoju pasaulio kompiuterių programuotoju?
+
+## Programavimo kalbos
+
+Programavimo kalbos leidžia kūrėjams rašyti instrukcijas įrenginiui. Įrenginiai supranta tik dvejetainį kodą (1 ir 0), o *daugumai* kūrėjų tai nėra efektyvus būdas bendrauti. Programavimo kalbos yra priemonė, leidžianti žmonėms bendrauti su kompiuteriais.
+
+Programavimo kalbos yra įvairių formatų ir gali būti naudojamos skirtingiems tikslams. Pavyzdžiui, JavaScript dažniausiai naudojamas interneto aplikacijoms, o Bash – operacinėms sistemoms.
+
+*Žemo lygio kalbos* paprastai reikalauja mažiau žingsnių, kad įrenginys interpretuotų instrukcijas, nei *aukšto lygio kalbos*. Tačiau aukšto lygio kalbos yra populiarios dėl jų skaitomumo ir palaikymo. JavaScript laikomas aukšto lygio kalba.
+
+Šis kodas iliustruoja skirtumą tarp aukšto lygio kalbos (JavaScript) ir žemo lygio kalbos (ARM assembly kodas).
+
+```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
+```
+
+Patikėkite ar ne, *jie abu daro tą patį*: spausdina Fibonacci seką iki 10.
+
+✅ Fibonacci seka yra [apibrėžiama](https://en.wikipedia.org/wiki/Fibonacci_number) kaip skaičių rinkinys, kuriame kiekvienas skaičius yra dviejų ankstesnių skaičių suma, pradedant nuo 0 ir 1. Pirmieji 10 Fibonacci sekos skaičių yra 0, 1, 1, 2, 3, 5, 8, 13, 21 ir 34.
+
+## Programos elementai
+
+Vienas programos nurodymas vadinamas *teiginiu* ir paprastai turi simbolį arba eilutės tarpą, kuris žymi, kur nurodymas baigiasi, arba *terminuojasi*. Kaip programa terminuoja, priklauso nuo kalbos.
+
+Teiginiai programoje gali priklausyti nuo vartotojo pateiktų duomenų ar kitų šaltinių, kad atliktų nurodymus. Duomenys gali pakeisti programos elgesį, todėl programavimo kalbos turi būdą laikinai saugoti duomenis, kad jie galėtų būti naudojami vėliau. Tai vadinama *kintamaisiais*. Kintamieji yra teiginiai, kurie nurodo įrenginiui išsaugoti duomenis savo atmintyje. Kintamieji programose yra panašūs į kintamuosius algebroje, kur jie turi unikalų pavadinimą, o jų vertė gali keistis laikui bėgant.
+
+Kai kurie teiginiai gali būti neįvykdyti įrenginio. Tai dažniausiai būna dėl kūrėjo dizaino arba netyčia, kai įvyksta nenumatyta klaida. Tokia kontrolė programoje daro ją patvaresnę ir lengviau prižiūrimą. Paprastai šie kontrolės pokyčiai vyksta, kai tam tikros sąlygos yra įvykdytos. Vienas iš dažniausiai naudojamų teiginių šiuolaikiniame programavime, kuris kontroliuoja, kaip programa veikia, yra `if..else` teiginys.
+
+✅ Apie šį teiginį sužinosite daugiau kitose pamokose.
+
+## Įrankiai
+
+[![Įrankiai](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Įrankiai")
+
+> 🎥 Spustelėkite aukščiau esančią nuotrauką, kad peržiūrėtumėte vaizdo įrašą apie įrankius
+
+Šioje skiltyje sužinosite apie kai kurią programinę įrangą, kuri gali būti labai naudinga pradedant profesionalaus kūrėjo kelionę.
+
+**Kūrimo aplinka** – tai unikalus įrankių ir funkcijų rinkinys, kurį kūrėjas dažnai naudoja rašydamas programinę įrangą. Kai kurie iš šių įrankių yra pritaikyti kūrėjo specifiniams poreikiams ir gali keistis laikui bėgant, jei kūrėjas keičia darbo prioritetus, asmeninius projektus arba naudoja kitą programavimo kalbą. Kūrimo aplinkos yra tokios unikalios, kaip ir kūrėjai, kurie jas naudoja.
+
+### Redaktoriai
+
+Vienas iš svarbiausių programinės įrangos kūrimo įrankių yra redaktorius. Redaktoriai yra vieta, kur rašote kodą ir kartais jį vykdote.
+
+Kūrėjai pasikliauja redaktoriais dėl kelių papildomų priežasčių:
+
+- *Debugging* padeda aptikti klaidas ir problemas, peržiūrint kodą eilutė po eilutės. Kai kurie redaktoriai turi debugging funkcijas; jas galima pritaikyti ir pridėti specifinėms programavimo kalboms.
+- *Sintaksės paryškinimas* prideda spalvas ir teksto formatavimą kodui, kad būtų lengviau jį skaityti. Dauguma redaktorių leidžia pritaikyti sintaksės paryškinimą.
+- *Plėtiniai ir integracijos* yra specializuoti įrankiai kūrėjams, sukurti kūrėjų. Šie įrankiai nebuvo įtraukti į pagrindinį redaktorių. Pavyzdžiui, daugelis kūrėjų dokumentuoja savo kodą, kad paaiškintų, kaip jis veikia. Jie gali įdiegti rašybos tikrinimo plėtinį, kad padėtų rasti klaidas dokumentacijoje. Dauguma plėtinių yra skirti naudoti konkrečiame redaktoriuje, o dauguma redaktorių turi būdą ieškoti galimų plėtinių.
+- *Pritaikymas* leidžia kūrėjams sukurti unikalią kūrimo aplinką, atitinkančią jų poreikius. Dauguma redaktorių yra labai pritaikomi ir gali leisti kūrėjams kurti savo plėtinius.
+
+#### Populiarūs redaktoriai ir interneto kūrimo plėtiniai
+
+- [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/)
+
+### Naršyklės
+
+Kitas svarbus įrankis yra naršyklė. Interneto kūrėjai pasikliauja naršykle, kad pamatytų, kaip jų kodas veikia internete. Ji taip pat naudojama vizualiniams tinklalapio elementams, parašytiems redaktoriuje, kaip HTML, atvaizduoti.
+
+Daugelis naršyklių turi *kūrėjų įrankius* (DevTools), kurie apima naudingų funkcijų ir informacijos rinkinį, padedantį kūrėjams surinkti ir užfiksuoti svarbią informaciją apie jų aplikaciją. Pavyzdžiui: jei tinklalapyje yra klaidų, kartais naudinga žinoti, kada jos įvyko. Naršyklės DevTools gali būti sukonfigūruoti, kad užfiksuotų šią informaciją.
+
+#### Populiarios naršyklės ir 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)
+
+### Komandinės eilutės įrankiai
+
+Kai kurie kūrėjai teikia pirmenybę mažiau grafiniam vaizdui savo kasdieniams darbams ir pasikliauja komandinės eilutės įrankiais. Rašant kodą reikia daug spausdinimo, ir kai kurie kūrėjai teikia pirmenybę nenutraukti savo darbo srauto klaviatūroje. Jie naudoja klaviatūros sparčiuosius klavišus, kad perjungtų darbalaukio langus, dirbtų su skirtingais failais ir naudotų įrankius. Daugumą užduočių galima atlikti pele, tačiau vienas iš komandinės eilutės privalumų yra tas, kad daug ką galima atlikti naudojant komandinės eilutės įrankius, nereikia perjungti tarp pelės ir klaviatūros. Kitas komandinės eilutės privalumas yra tas, kad ji yra konfigūruojama, ir jūs galite išsaugoti pasirinktą konfigūraciją, vėliau ją pakeisti ir importuoti į kitus kūrimo kompiuterius. Kadangi kūrimo aplinkos yra tokios unikalios kiekvienam kūrėjui, kai kurie vengia naudoti komandines eilutes, kai kurie pasikliauja jomis visiškai, o kai kurie teikia pirmenybę mišriam naudojimui.
+
+### Populiarios komandinės eilutės parinktys
+
+Komandinės eilutės parinktys skiriasi priklausomai nuo naudojamos operacinės sistemos.
+
+*💻 = iš anksto įdiegta operacinėje sistemoje.*
+
+#### 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) (dar žinoma kaip 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)
+
+#### Populiarūs komandinės eilutės įrankiai
+
+- [Git](https://git-scm.com/) (💻 daugumoje operacinių sistemų)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Dokumentacija
+
+Kai kūrėjas nori išmokti kažką naujo, jis greičiausiai kreipsis į dokumentaciją, kad sužinotų, kaip tai naudoti. Kūrėjai dažnai pasikliauja dokumentacija, kad gautų instrukcijas, kaip tinkamai naudoti įrankius ir kalbas, taip pat kad įgytų gilesnių žinių apie jų veikimą.
+
+#### Populiari dokumentacija apie interneto kūrimą
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), iš Mozilla, [Firefox](https://www.mozilla.org/firefox/) naršyklės leidėjų
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), iš Google, [Chrome](https://www.google.com/chrome/) leidėjų
+- [Microsoft kūrėjų dokumentacija](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), skirta [Microsoft Edge](https://www.microsoft.com/edge)
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+
+✅ Atlikite tyrimą: Dabar, kai žinote interneto kūrėjo aplinkos pagrindus, palyginkite ją su interneto dizainerio aplinka.
+
+---
+
+## 🚀 Iššūkis
+
+Palyginkite kelias programavimo kalbas. Kokie yra unikalūs JavaScript ir Java bruožai? O kaip COBOL ir Go?
+
+## Po paskaitos: testas
+[Po paskaitos: testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Pasidomėkite įvairiomis programavimo kalbomis. Pabandykite parašyti eilutę viena kalba, o tada perrašykite ją dviem kitomis. Ką sužinojote?
+
+## Užduotis
+
+[Skaitymas dokumentacijoje](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..20dc2619
--- /dev/null
+++ b/translations/lt/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-28T12:00:59+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Skaitymas dokumentacijos
+
+## Instrukcijos
+
+Yra daugybė įrankių, kurių gali prireikti žiniatinklio kūrėjui, ir jie pateikiami [MDN dokumentacijoje apie kliento pusės įrankius](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Pasirinkite 3 įrankius, kurie nebuvo aptarti pamokoje, paaiškinkite, kodėl žiniatinklio kūrėjui jų reikėtų, ir suraskite įrankį, kuris priklauso šiai kategorijai, bei pasidalinkite jo dokumentacija. Nenaudokite tų pačių įrankių pavyzdžių, pateiktų MDN dokumentacijoje.
+
+## Vertinimo kriterijai
+
+Pavyzdingai | Pakankamai | Reikia patobulinimų
+--- | --- | -- |
+|Paaiškinta, kodėl žiniatinklio kūrėjui reikėtų įrankio| Paaiškinta, kaip, bet ne kodėl kūrėjui reikėtų įrankio| Nepaminėta, kaip ar kodėl kūrėjui reikėtų įrankio  |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/1-getting-started-lessons/2-github-basics/README.md b/translations/lt/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..b320def5
--- /dev/null
+++ b/translations/lt/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,335 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-28T12:04:42+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "lt"
+}
+-->
+# Įvadas į GitHub
+
+Šioje pamokoje aptarsime pagrindinius GitHub, platformos, skirtos talpinti ir valdyti kodo pakeitimus, aspektus.
+
+![Įvadas į GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.lt.png)
+> Iliustracija: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Klausimynas prieš paskaitą
+[Klausimynas prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Įvadas
+
+Šioje pamokoje aptarsime:
+
+- kaip sekti savo darbą kompiuteryje
+- kaip dirbti su kitais projektuose
+- kaip prisidėti prie atvirojo kodo programinės įrangos
+
+### Reikalavimai
+
+Prieš pradėdami, patikrinkite, ar jūsų kompiuteryje įdiegtas Git. Terminale įveskite:  
+`git --version`
+
+Jei Git nėra įdiegtas, [atsisiųskite Git](https://git-scm.com/downloads). Tada terminale sukonfigūruokite savo vietinį Git profilį:
+* `git config --global user.name "jūsų-vardas"`
+* `git config --global user.email "jūsų-el.paštas"`
+
+Norėdami patikrinti, ar Git jau sukonfigūruotas, galite įvesti:  
+`git config --list`
+
+Taip pat jums reikės GitHub paskyros, kodo redaktoriaus (pvz., Visual Studio Code) ir atidaryto terminalo (arba komandų eilutės).
+
+Eikite į [github.com](https://github.com/), susikurkite paskyrą, jei dar neturite, arba prisijunkite ir užpildykite savo profilį.
+
+✅ GitHub nėra vienintelė kodo saugykla pasaulyje; yra ir kitų, tačiau GitHub yra geriausiai žinoma.
+
+### Pasiruošimas
+
+Jums reikės aplanko su kodo projektu jūsų vietiniame kompiuteryje (nešiojamame ar stacionariame) ir viešos saugyklos GitHub, kuri bus naudojama kaip pavyzdys, kaip prisidėti prie kitų projektų.
+
+---
+
+## Kodo valdymas
+
+Tarkime, turite aplanką su kodo projektu savo kompiuteryje ir norite pradėti sekti savo progresą naudodami git – versijų valdymo sistemą. Kai kurie žmonės lygina git naudojimą su meilės laiško rašymu sau ateityje. Skaitydami savo commit žinutes po dienų, savaičių ar mėnesių, galėsite prisiminti, kodėl priėmėte tam tikrą sprendimą, arba „atsukti“ pakeitimą atgal – jei rašysite geras commit žinutes.
+
+### Užduotis: Sukurkite saugyklą ir commit'inkite kodą  
+
+> Peržiūrėkite vaizdo įrašą  
+> 
+> [![Git ir GitHub pagrindai](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Sukurkite saugyklą GitHub**. GitHub.com, skirtuke „Repositories“ arba viršutiniame dešiniajame navigacijos juostos kampe, raskite mygtuką **new repo**.
+
+   1. Suteikite savo saugyklai (aplankui) pavadinimą.
+   1. Pasirinkite **create repository**.
+
+1. **Eikite į savo darbo aplanką**. Terminale pereikite į aplanką (dar vadinamą direktorija), kurį norite pradėti sekti. Įveskite:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Inicializuokite git saugyklą**. Savo projekte įveskite:
+
+   ```bash
+   git init
+   ```
+
+1. **Patikrinkite būseną**. Norėdami patikrinti savo saugyklos būseną, įveskite:
+
+   ```bash
+   git status
+   ```
+
+   Rezultatas gali atrodyti maždaug taip:
+
+   ```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
+   ```
+
+   Paprastai `git status` komanda nurodo, kurie failai yra paruošti _išsaugojimui_ saugykloje arba kuriuose yra pakeitimų, kuriuos galbūt norėsite išsaugoti.
+
+1. **Pridėkite visus failus sekimui**  
+   Tai dar vadinama failų paruošimu (staging) arba pridėjimu į paruošimo zoną.
+
+   ```bash
+   git add .
+   ```
+
+   Komanda `git add` su `.` argumentu nurodo, kad visi jūsų failai ir pakeitimai bus sekami.
+
+1. **Pridėkite pasirinktus failus sekimui**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Tai leidžia pridėti tik pasirinktus failus į paruošimo zoną, kai nenorite commit'inti visų failų iš karto.
+
+1. **Atšaukite visų failų paruošimą**
+
+   ```bash
+   git reset
+   ```
+
+   Ši komanda leidžia atšaukti visų failų paruošimą iš karto.
+
+1. **Atšaukite konkretaus failo paruošimą**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Ši komanda leidžia atšaukti tik konkretaus failo paruošimą, jei nenorite jo įtraukti į kitą commit'ą.
+
+1. **Išsaugokite savo darbą**. Šiuo metu pridėjote failus į vadinamąją _paruošimo zoną_. Tai vieta, kur Git seka jūsų failus. Norėdami padaryti pakeitimus nuolatinius, turite juos _commit'inti_. Tai padaryti galite naudodami komandą `git commit`. Commit'as reiškia išsaugojimo tašką jūsų saugyklos istorijoje. Įveskite šią komandą, kad sukurtumėte commit'ą:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Ši komanda commit'ina visus jūsų failus, pridėdama žinutę „first commit“. Ateities commit žinutėse norėsite būti išsamesni, kad aprašytumėte, kokio tipo pakeitimus atlikote.
+
+1. **Sujunkite savo vietinę Git saugyklą su GitHub**. Git saugykla yra naudinga jūsų kompiuteryje, tačiau tam tikru momentu norėsite turėti failų atsarginę kopiją kažkur kitur ir taip pat pakviesti kitus žmones dirbti su jūsų saugykla. Viena iš puikių vietų tai padaryti yra GitHub. Prisiminkite, kad jau sukūrėme saugyklą GitHub, todėl vienintelis dalykas, kurį reikia padaryti, yra sujungti vietinę Git saugyklą su GitHub. Komanda `git remote add` tai padarys. Įveskite šią komandą:
+
+   > Pastaba: prieš įvesdami komandą, eikite į savo GitHub saugyklos puslapį ir raskite saugyklos URL. Jį naudosite žemiau esančioje komandoje. Pakeiskite ```https://github.com/username/repository_name.git``` savo GitHub URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Tai sukuria _nuotolinį ryšį_ (remote), pavadintą „origin“, kuris nurodo į anksčiau sukurtą GitHub saugyklą.
+
+1. **Išsiųskite vietinius failus į GitHub**. Iki šiol sukūrėte _ryšį_ tarp vietinės saugyklos ir GitHub saugyklos. Dabar išsiųskime šiuos failus į GitHub naudodami komandą `git push`, kaip parodyta:
+
+   > Pastaba: jūsų šakos pavadinimas pagal numatymą gali skirtis nuo ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Tai išsiunčia jūsų commit'us iš „main“ šakos į GitHub.
+
+2. **Pridėkite daugiau pakeitimų**. Jei norite tęsti pakeitimų darymą ir jų siuntimą į GitHub, jums tereikės naudoti šias tris komandas:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Patarimas: taip pat galite naudoti `.gitignore` failą, kad išvengtumėte failų, kurių nenorite sekti, rodymo GitHub – pavyzdžiui, užrašų failo, kurį laikote tame pačiame aplanke, bet kuris neturėtų būti viešoje saugykloje. `.gitignore` failų šablonus galite rasti čia: [.gitignore templates](https://github.com/github/gitignore).
+
+#### Commit žinutės
+
+Puiki Git commit žinutės antraštė užbaigia šį sakinį:  
+Jei pritaikyta, šis commit'as <jūsų antraštė čia>
+
+Antraštėje naudokite liepiamąją, esamąją laiką: „keisti“, o ne „pakeitė“ ar „keičia“.  
+Kaip ir antraštėje, kūne (neprivaloma) taip pat naudokite liepiamąją, esamąją laiką. Kūnas turėtų apimti motyvaciją pakeitimui ir palyginti tai su ankstesniu elgesiu. Jūs paaiškinate „kodėl“, o ne „kaip“.
+
+✅ Skirkite kelias minutes naršymui GitHub. Ar galite rasti tikrai puikią commit žinutę? O gal labai minimalią? Kokios informacijos, jūsų manymu, svarbiausia ir naudingiausia pateikti commit žinutėje?
+
+### Užduotis: Bendradarbiaukite
+
+Pagrindinė priežastis, kodėl talpiname dalykus GitHub, yra galimybė bendradarbiauti su kitais kūrėjais.
+
+## Darbas su kitais projektuose
+
+> Peržiūrėkite vaizdo įrašą  
+>
+> [![Git ir GitHub pagrindai](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+Savo saugykloje eikite į `Insights > Community`, kad pamatytumėte, kaip jūsų projektas atitinka rekomenduojamus bendruomenės standartus.
+
+   Štai keletas dalykų, kurie gali pagerinti jūsų GitHub saugyklą:
+   - **Aprašymas**. Ar pridėjote savo projekto aprašymą?
+   - **README**. Ar pridėjote README? GitHub pateikia gaires, kaip parašyti [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **Gairės prisidėjimui**. Ar jūsų projektas turi [prisidėjimo gaires](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
+   - **Elgesio kodeksas**. Ar pridėjote [elgesio kodeksą](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
+   - **Licencija**. Galbūt svarbiausia – [licencija](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+Visi šie ištekliai padės naujiems komandos nariams įsitraukti. Tai yra dalykai, kuriuos nauji prisidėtojai dažniausiai peržiūri prieš net žiūrėdami į jūsų kodą, kad sužinotų, ar jūsų projektas yra tinkama vieta jų laikui skirti.
+
+✅ README failai, nors jų paruošimas užtrunka, dažnai yra pamirštami užimtų prižiūrėtojų. Ar galite rasti ypač išsamų pavyzdį? Pastaba: yra keletas [įrankių, padedančių kurti gerus README](https://www.makeareadme.com/), kuriuos galbūt norėsite išbandyti.
+
+### Užduotis: Sujunkite kodą
+
+Prisidėjimo dokumentai padeda žmonėms prisidėti prie projekto. Jie paaiškina, kokio tipo prisidėjimų ieškote ir kaip veikia procesas. Prisidėtojai turės atlikti kelis veiksmus, kad galėtų prisidėti prie jūsų saugyklos GitHub:
+
+1. **Fork'inimas**. Tikriausiai norėsite, kad žmonės _fork'intų_ jūsų projektą. Fork'inimas reiškia jūsų saugyklos kopijos sukūrimą jų GitHub profilyje.
+1. **Klonavimas**. Iš ten jie klonuos projektą į savo vietinį kompiuterį.
+1. **Šakos sukūrimas**. Paprašykite jų sukurti _šaką_ savo darbui.
+1. **Dėmesys vienai sričiai**. Paprašykite prisidėtojų sutelkti dėmesį į vieną dalyką vienu metu – taip padidėja tikimybė, kad galėsite _sujungti_ jų darbą. Įsivaizduokite, kad jie pataiso klaidą, prideda naują funkciją ir atnaujina kelis testus – o kas, jei norite arba galite įgyvendinti tik 2 iš 3 ar 1 iš 3 pakeitimų?
+
+✅ Įsivaizduokite situaciją, kurioje šakos yra ypač svarbios rašant ir diegiant gerą kodą. Kokius naudojimo atvejus galite sugalvoti?
+
+> Pastaba: būkite pokytis, kurį norite matyti pasaulyje, ir kurkite šakas savo darbui taip pat. Visi commit'ai, kuriuos atliksite, bus padaryti šakoje, kurioje šiuo metu esate „prisijungę“. Naudokite `git status`, kad pamatytumėte, kurioje šakoje esate.
+
+Pereikime per prisidėtojo darbo eigą. Tarkime, prisidėtojas jau _fork'ino_ ir _klonavo_ saugyklą, todėl jie turi Git saugyklą, paruoštą darbui savo vietiniame kompiuteryje:
+
+1. **Sukurkite šaką**. Naudokite komandą `git branch`, kad sukurtumėte šaką, kurioje bus pakeitimai, kuriuos jie ketina prisidėti:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Pereikite į darbo šaką**. Pereikite į nurodytą šaką ir atnaujinkite darbo katalogą naudodami `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Atlikite darbą**. Šiuo metu norite pridėti savo pakeitimus. Nepamirškite apie juos pranešti Git naudodami šias komandas:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Įsitikinkite, kad suteikėte savo commit'ui gerą pavadinimą – tiek dėl savęs, tiek dėl saugyklos prižiūrėtojo, kuriam padedate.
+
+1. **Sujunkite savo darbą su „main“ šaka**. Tam tikru momentu baigsite darbą ir norėsite sujungti savo darbą su „main“ šaka. „Main“ šaka galėjo pasikeisti tuo metu, todėl įsitikinkite, kad pirmiausia ją atnaujinote naudodami šias komandas:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   Šiuo metu norite įsitikinti, kad visi _konfliktai_, situacijos, kai Git negali lengvai _sujungti_ pakeitimų, įvyksta jūsų darbo šakoje. Todėl paleiskite šias komandas:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Tai įtrauks visus pakeitimus iš „main“ į jūsų šaką, ir tikėkimės, kad galėsite tiesiog tęsti darbą. Jei ne, VS Code nurodys, kur Git yra _suklaidintas_, ir jūs tiesiog pakeisite paveiktus failus, kad nurodytumėte, kuris turinys yra tiksliausias.
+
+1. **Išsiųskite savo darbą į GitHub**. Savo darbo siuntimas į GitHub reiškia du dalykus: šakos išsiuntimą į jūsų fork'intą saugyklą ir PR (Pull Request) atidarymą.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Aukščiau pateikta komanda sukuria šaką jūsų fork'intoje saugykloje.
+
+1. **Atidarykite PR**. Tada norite atidaryti PR. Tai padarysite, eidami į fork'intą saugyklą GitHub. Pamatysite indikaciją GitHub, kurioje klausiama, ar norite sukurti naują PR. Spustelėkite tai ir būsite nukreipti į sąsają, kurioje galite pakeisti commit žinutės pavadinimą, suteikti tinkamesnį aprašymą. Dabar saugyklos, kurią fork'inote, prižiūrėtojas pamatys šį PR ir _tikėkimės_, įvertins ir _sujungs_ jūsų PR. Dabar esate prisidėtojas, valio :)
+
+1. **Išvalykite**. Laikoma gera praktika _išvalyti_ po sėkmingo PR sujungimo. Norite išvalyti tiek savo vietinę šaką, tiek šaką, kurią išsiuntėte į GitHub. Pirmiausia iš
+Įsitikinkite, kad einate į „GitHub“ puslapį, kuriame yra jūsų „forked“ saugykla, ir pašalinkite nuotolinę šaką, kurią ką tik įkėlėte.
+
+`Pull request` atrodo kaip keistas terminas, nes iš tikrųjų jūs norite įkelti savo pakeitimus į projektą. Tačiau projekto prižiūrėtojas (projekto savininkas) arba pagrindinė komanda turi apsvarstyti jūsų pakeitimus prieš juos sujungiant su projekto „main“ šaka, todėl iš esmės jūs prašote prižiūrėtojo priimti sprendimą dėl pakeitimo.
+
+Pull request yra vieta, kur galima palyginti ir aptarti skirtumus, atsiradusius šakoje, kartu su apžvalgomis, komentarais, integruotais testais ir dar daugiau. Geras pull request laikosi maždaug tų pačių taisyklių kaip ir commit žinutė. Galite pridėti nuorodą į problemą (issue) problemų sekimo sistemoje, jei jūsų darbas, pavyzdžiui, išsprendžia problemą. Tai daroma naudojant `#`, po kurio eina jūsų problemos numeris. Pavyzdžiui, `#97`.
+
+🤞Tikėkimės, kad visi patikrinimai praeis sėkmingai ir projekto savininkas (-ai) sujungs jūsų pakeitimus su projektu🤞
+
+Atnaujinkite savo dabartinę vietinę darbo šaką su visais naujais commit'ais iš atitinkamos nuotolinės šakos „GitHub“:
+
+`git pull`
+
+## Kaip prisidėti prie atvirojo kodo
+
+Pirmiausia, raskime jus dominančią „GitHub“ saugyklą (arba **repo**), prie kurios norėtumėte prisidėti pakeitimu. Jums reikės nukopijuoti jos turinį į savo kompiuterį.
+
+✅ Geras būdas rasti „pradedantiesiems draugiškas“ saugyklas yra [ieškoti pagal žymą „good-first-issue“](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Nukopijuokite saugyklą lokaliai](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.lt.png)
+
+Yra keli būdai nukopijuoti kodą. Vienas iš jų yra „klonuoti“ saugyklos turinį naudojant HTTPS, SSH arba „GitHub CLI“ (komandinės eilutės sąsają).
+
+Atidarykite terminalą ir klonuokite saugyklą taip:
+`git clone https://github.com/ProjectURL`
+
+Norėdami dirbti su projektu, pereikite į tinkamą aplanką:
+`cd ProjectURL`
+
+Taip pat galite atidaryti visą projektą naudodami [Codespaces](https://github.com/features/codespaces), „GitHub“ integruotą kodo redaktorių / debesų kūrimo aplinką, arba [GitHub Desktop](https://desktop.github.com/).
+
+Galiausiai, galite atsisiųsti kodą kaip suspaustą aplanką.
+
+### Keletas įdomesnių dalykų apie „GitHub“
+
+Galite pažymėti žvaigždute, stebėti ir/arba „forkinti“ bet kurią viešą saugyklą „GitHub“. Savo pažymėtas saugyklas galite rasti viršutiniame dešiniajame išskleidžiamajame meniu. Tai tarsi žymėjimas, bet skirtas kodui.
+
+Projektai turi problemų sekimo sistemą, dažniausiai „GitHub“ skiltyje „Issues“, nebent nurodyta kitaip, kur žmonės aptaria su projektu susijusias problemas. O skiltyje „Pull Requests“ žmonės aptaria ir peržiūri vykdomus pakeitimus.
+
+Projektai taip pat gali turėti diskusijas forumuose, el. pašto sąrašuose arba pokalbių kanaluose, tokiuose kaip „Slack“, „Discord“ ar IRC.
+
+✅ Apžiūrėkite savo naują „GitHub“ saugyklą ir išbandykite keletą dalykų, pvz., nustatymų redagavimą, informacijos pridėjimą prie savo saugyklos ir projekto kūrimą (pvz., Kanban lentą). Galite nuveikti daug!
+
+---
+
+## 🚀 Iššūkis
+
+Dirbkite poroje su draugu prie vienas kito kodo. Sukurkite projektą kartu, forkinkite kodą, kurkite šakas ir sujunkite pakeitimus.
+
+## Po paskaitos testas
+[Po paskaitos testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Peržiūra ir savarankiškas mokymasis
+
+Skaitykite daugiau apie [prisidėjimą prie atvirojo kodo programinės įrangos](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git atmintinė](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Praktikuokitės, praktikuokitės, praktikuokitės. „GitHub“ turi puikių mokymosi kelių, pasiekiamų per [skills.github.com](https://skills.github.com):
+
+- [Pirma savaitė „GitHub“](https://skills.github.com/#first-week-on-github)
+
+Taip pat rasite pažangesnių kursų.
+
+## Užduotis
+
+Užbaikite [Pirmos savaitės „GitHub“ kursą](https://skills.github.com/#first-week-on-github).
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/1-getting-started-lessons/3-accessibility/README.md b/translations/lt/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..eab73b18
--- /dev/null
+++ b/translations/lt/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,176 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-28T12:02:40+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "lt"
+}
+-->
+# Kuriame prieinamus tinklalapius
+
+![Viskas apie prieinamumą](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.lt.png)
+> Sketchnote sukūrė [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Klausimynas prieš paskaitą
+[Klausimynas prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Interneto galia slypi jo universalume. Prieinamumas visiems, nepaisant negalios, yra esminis aspektas.
+>
+> \- Seras Timothy Berners-Lee, W3C direktorius ir Pasaulinio tinklo išradėjas
+
+Ši citata puikiai pabrėžia, kodėl svarbu kurti prieinamus tinklalapius. Programėlė, kuri nėra prieinama visiems, iš esmės yra išskirianti. Kaip tinklalapių kūrėjai, mes visada turėtume galvoti apie prieinamumą. Jei nuo pat pradžių sutelksite dėmesį į šį aspektą, būsite gerame kelyje užtikrinti, kad visi galėtų pasiekti jūsų sukurtus puslapius. Šioje pamokoje sužinosite apie įrankius, kurie padės užtikrinti, kad jūsų interneto ištekliai būtų prieinami, ir kaip kurti galvojant apie prieinamumą.
+
+> Šią pamoką galite rasti [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Naudojami įrankiai
+
+### Ekrano skaitytuvai
+
+Vienas iš geriausiai žinomų prieinamumo įrankių yra ekrano skaitytuvai.
+
+[Ekrano skaitytuvai](https://en.wikipedia.org/wiki/Screen_reader) dažniausiai naudojami žmonių, turinčių regos sutrikimų. Kaip mes stengiamės užtikrinti, kad naršyklė tinkamai perteiktų informaciją, kurią norime pasidalinti, taip pat turime užtikrinti, kad ekrano skaitytuvas tai padarytų.
+
+Pagrindinis ekrano skaitytuvo veikimo principas yra garsiai perskaityti puslapį nuo viršaus iki apačios. Jei jūsų puslapis yra tik tekstas, skaitytuvas perteiks informaciją panašiai kaip naršyklė. Žinoma, tinklalapiai retai būna vien tekstiniai; jie dažnai turi nuorodų, grafikų, spalvų ir kitų vizualinių komponentų. Reikia pasirūpinti, kad ši informacija būtų tinkamai perskaityta ekrano skaitytuvu.
+
+Kiekvienas tinklalapių kūrėjas turėtų susipažinti su ekrano skaitytuvu. Kaip minėta aukščiau, tai yra klientas, kurį naudos jūsų vartotojai. Kaip esate susipažinę su naršyklės veikimu, taip turėtumėte išmokti, kaip veikia ekrano skaitytuvas. Laimei, ekrano skaitytuvai yra įdiegti daugumoje operacinių sistemų.
+
+Kai kurios naršyklės taip pat turi įmontuotus įrankius ir plėtinius, kurie gali garsiai skaityti tekstą arba netgi suteikti pagrindines navigacijos funkcijas, pavyzdžiui, [šiuos Edge naršyklės įrankius, orientuotus į prieinamumą](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Šie įrankiai taip pat yra svarbūs prieinamumo įrankiai, tačiau jie veikia kitaip nei ekrano skaitytuvai ir neturėtų būti laikomi ekrano skaitytuvų testavimo įrankiais.
+
+✅ Išbandykite ekrano skaitytuvą ir naršyklės teksto skaitytuvą. Windows operacinėje sistemoje [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) yra įdiegtas pagal nutylėjimą, o [JAWS](https://webaim.org/articles/jaws/) ir [NVDA](https://www.nvaccess.org/about-nvda/) taip pat gali būti įdiegti. macOS ir iOS operacinėse sistemose [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) yra įdiegtas pagal nutylėjimą.
+
+### Priartinimas
+
+Kitas įrankis, dažnai naudojamas žmonių su regos sutrikimais, yra priartinimas. Paprasčiausias priartinimo tipas yra statinis priartinimas, valdomas naudojant `Control + pliuso ženklą (+)` arba sumažinant ekrano rezoliuciją. Šis priartinimo tipas keičia viso puslapio dydį, todėl naudojant [responsyvaus dizaino](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) principus svarbu užtikrinti gerą vartotojo patirtį padidinto priartinimo lygiuose.
+
+Kitas priartinimo tipas naudoja specializuotą programinę įrangą, kuri padidina vieną ekrano sritį ir leidžia ją peržiūrėti, panašiai kaip naudojant tikrą didinamąjį stiklą. Windows operacinėje sistemoje [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) yra įdiegtas, o [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) yra trečiosios šalies didinimo programinė įranga su daugiau funkcijų ir didesne vartotojų baze. macOS ir iOS operacinėse sistemose yra įmontuota didinimo programinė įranga, vadinama [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Kontrasto tikrinimo įrankiai
+
+Spalvos tinklalapiuose turi būti kruopščiai parinktos, kad atitiktų spalvų aklumo turinčių vartotojų ar žmonių, kuriems sunku matyti mažo kontrasto spalvas, poreikius.
+
+✅ Išbandykite mėgstamą tinklalapį dėl spalvų naudojimo su naršyklės plėtiniu, pavyzdžiui, [WCAG spalvų tikrinimo įrankiu](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Ką sužinote?
+
+### Lighthouse
+
+Naršyklės kūrėjų įrankių srityje rasite Lighthouse įrankį. Šis įrankis yra svarbus norint gauti pirmąją tinklalapio prieinamumo (taip pat ir kitų analizės aspektų) apžvalgą. Nors svarbu nepasikliauti vien Lighthouse, 100% rezultatas yra labai naudingas kaip pagrindas.
+
+✅ Suraskite Lighthouse savo naršyklės kūrėjų įrankių skydelyje ir atlikite analizę bet kuriame tinklalapyje. Ką sužinote?
+
+## Prieinamumo dizainas
+
+Prieinamumas yra gana plati tema. Kad jums būtų lengviau, yra daugybė prieinamų išteklių.
+
+- [Accessible U - Minesotos universitetas](https://accessibility.umn.edu/your-role/web-developers)
+
+Nors negalėsime aptarti visų aspektų, susijusių su prieinamų tinklalapių kūrimu, žemiau pateikiami pagrindiniai principai, kuriuos norėsite įgyvendinti. Prieinamo puslapio kūrimas nuo pat pradžių **visada** yra lengvesnis nei grįžimas prie esamo puslapio ir jo pritaikymas.
+
+## Geros rodymo praktikos
+
+### Saugios spalvų paletės
+
+Žmonės mato pasaulį skirtingai, įskaitant spalvas. Renkantis spalvų schemą savo tinklalapiui, turėtumėte užtikrinti, kad ji būtų prieinama visiems. Puikus [įrankis spalvų paletėms generuoti yra Color Safe](http://colorsafe.co/).
+
+✅ Identifikuokite tinklalapį, kuris yra labai problemiškas dėl spalvų naudojimo. Kodėl?
+
+### Naudokite tinkamą HTML
+
+Naudojant CSS ir JavaScript, galima bet kurį elementą paversti bet kokio tipo valdikliu. `<span>` gali būti naudojamas sukurti `<button>`, o `<b>` gali tapti hipersaitu. Nors tai gali būti laikoma lengviau stilizuojama, tai nieko neperteikia ekrano skaitytuvui. Naudokite tinkamą HTML kurdami valdiklius puslapyje. Jei norite hipersaito, naudokite `<a>`. Tinkamo HTML naudojimas tinkamam valdikliui vadinamas semantinio HTML naudojimu.
+
+✅ Eikite į bet kurį tinklalapį ir pažiūrėkite, ar dizaineriai ir kūrėjai tinkamai naudoja HTML. Ar galite rasti mygtuką, kuris turėtų būti nuoroda? Užuomina: dešiniuoju pelės mygtuku spustelėkite ir pasirinkite „View Page Source“ savo naršyklėje, kad pamatytumėte pagrindinį kodą.
+
+### Sukurkite aprašomą antraščių hierarchiją
+
+Ekrano skaitytuvų vartotojai [labai pasikliauja antraštėmis](https://webaim.org/projects/screenreadersurvey8/#finding), kad rastų informaciją ir naršytų puslapyje. Rašyti aprašomą antraščių turinį ir naudoti semantines antraščių žymes yra svarbu kuriant lengvai naršomą puslapį ekrano skaitytuvų vartotojams.
+
+### Naudokite gerus vizualinius užuominas
+
+CSS suteikia visišką kontrolę dėl bet kurio elemento išvaizdos puslapyje. Galite sukurti teksto laukelius be kontūro arba hipersaitus be pabraukimo. Deja, pašalinus šias užuominas, gali būti sunkiau atpažinti valdiklio tipą tiems, kurie jomis pasikliauja.
+
+## Nuorodų teksto svarba
+
+Hipersaitai yra pagrindinis interneto naršymo elementas. Todėl užtikrinti, kad ekrano skaitytuvas tinkamai perskaitytų nuorodas, leidžia visiems vartotojams naršyti jūsų puslapyje.
+
+### Ekrano skaitytuvai ir nuorodos
+
+Kaip ir tikėtasi, ekrano skaitytuvai skaito nuorodų tekstą taip pat, kaip ir bet kurį kitą tekstą puslapyje. Atsižvelgiant į tai, žemiau pateiktas tekstas gali atrodyti visiškai priimtinas.
+
+> Mažasis pingvinas, kartais vadinamas fėjų pingvinu, yra mažiausias pingvinas pasaulyje. [Spauskite čia](https://en.wikipedia.org/wiki/Little_penguin) norėdami sužinoti daugiau.
+
+> Mažasis pingvinas, kartais vadinamas fėjų pingvinu, yra mažiausias pingvinas pasaulyje. Apsilankykite https://en.wikipedia.org/wiki/Little_penguin norėdami sužinoti daugiau.
+
+> **NOTE** Kaip netrukus perskaitysite, **niekada** neturėtumėte kurti nuorodų, kurios atrodo kaip aukščiau pateiktos.
+
+Atminkite, ekrano skaitytuvai yra kitokia sąsaja nei naršyklės, turinti kitą funkcijų rinkinį.
+
+### Problema su URL naudojimu
+
+Ekrano skaitytuvai skaito tekstą. Jei tekste yra URL, ekrano skaitytuvas perskaitys URL. Paprastai URL nesuteikia prasmingos informacijos ir gali skambėti erzinančiai. Jūs galėjote tai patirti, jei jūsų telefonas kada nors garsiai perskaitė tekstinę žinutę su URL.
+
+### Problema su „spausti čia“
+
+Ekrano skaitytuvai taip pat gali skaityti tik hipersaitus puslapyje, panašiai kaip regintis žmogus skenuotų puslapį ieškodamas nuorodų. Jei nuorodų tekstas visada yra „spausti čia“, vartotojas girdės tik „spausti čia, spausti čia, spausti čia, spausti čia, spausti čia, ...“. Visos nuorodos tampa neatskiriamos viena nuo kitos.
+
+### Geras nuorodų tekstas
+
+Geras nuorodų tekstas trumpai aprašo, kas yra kitoje nuorodos pusėje. Aukščiau pateiktame pavyzdyje, kalbant apie mažus pingvinus, nuoroda yra į Wikipedia puslapį apie šią rūšį. Frazė *mažasis pingvinas* būtų puikus nuorodos tekstas, nes aiškiai nurodo, ką sužinosite paspaudę nuorodą - apie mažus pingvinus.
+
+> [Mažasis pingvinas](https://en.wikipedia.org/wiki/Little_penguin), kartais vadinamas fėjų pingvinu, yra mažiausias pingvinas pasaulyje.
+
+✅ Naršykite internete kelias minutes ir raskite puslapius, kurie naudoja neaiškias nuorodų strategijas. Palyginkite juos su kitais, geriau susietais puslapiais. Ką sužinote?
+
+#### Paieškos sistemų pastabos
+
+Kaip papildoma nauda užtikrinant, kad jūsų puslapis būtų prieinamas visiems, padėsite paieškos sistemoms naršyti jūsų puslapyje. Paieškos sistemos naudoja nuorodų tekstą, kad sužinotų puslapių temas. Taigi, naudodami gerą nuorodų tekstą, padedate visiems!
+
+### ARIA
+
+Įsivaizduokite šį puslapį:
+
+| Produktas      | Aprašymas         | Užsakymas    |
+| -------------- | ----------------- | ------------ |
+| Widget         | [Aprašymas](../../../../1-getting-started-lessons/3-accessibility/')  | [Užsakymas](../../../../1-getting-started-lessons/3-accessibility/') |
+| Super widget   | [Aprašymas](../../../../1-getting-started-lessons/3-accessibility/')  | [Užsakymas](../../../../1-getting-started-lessons/3-accessibility/') |
+
+Šiame pavyzdyje teksto „aprašymas“ ir „užsakymas“ dubliavimas yra prasmingas naršyklės vartotojui. Tačiau ekrano skaitytuvo vartotojas girdėtų tik žodžius *aprašymas* ir *užsakymas* be konteksto.
+
+Norint palaikyti tokias situacijas, HTML palaiko atributų rinkinį, vadinamą [Prieinamos turtingos interneto programos (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Šie atributai leidžia pateikti papildomą informaciją ekrano skaitytuvams.
+
+> **NOTE**: Kaip ir daugelis HTML aspektų, naršyklės ir ekrano skaitytuvų palaikymas gali skirtis. Tačiau dauguma pagrindinių klientų palaiko ARIA atributus.
+
+Galite naudoti `aria-label`, kad aprašytumėte nuorodą, kai puslapio formatas to neleidžia. Aprašymas widget'ui galėtų būti nustatytas kaip
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Paprastai semantinio žymėjimo naudojimas, kaip aprašyta aukščiau, yra svarbesnis nei ARIA naudojimas, tačiau kartais nėra semantinio ekvivalento įvairiems HTML valdikliams. Geras pavyzdys yra Medis. HTML nėra ekvivalento medžiui, todėl jūs identifikuojate bendrą `<div>` šiam elementui su tinkamu vaidmeniu ir ARIA reikšmėmis. [MDN dokumentacija apie ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) turi daugiau naudingos informacijos.
+
+```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>
+```
+
+## Vaizdai
+
+Akivaizdu, kad ekrano skaitytuvai negali automatiškai perskaityti, kas yra vaizde. Užtikrinti, kad vaizdai būtų prieinami, nereikalauja daug darbo - tam skirtas atributas `alt`. Visi prasmingi vaizdai turėtų turėti `alt`, kuris aprašo, kas jie yra. Vaizdai, kurie yra tik dekoratyviniai, turėtų turėti `alt` atributą, nustatytą kaip tuščią eilutę: `alt=""`. Tai neleidžia ekrano skaitytuvams nereikalingai pranešti apie dekoratyvinį vaizdą.
+
+✅ Kaip galite tikėtis, paieškos sistemos taip pat negali suprasti, kas yra vaizde. Jos taip pat naudoja alt tekstą. Taigi dar kartą, užtikrinant, kad jūsų puslapis būtų prieinamas, gaunate papildomų privalumų!
+
+## Klaviatūra
+
+Kai kurie vartotojai negali naudoti pelės ar jutiklinio pulto, vietoj to pas
+Daugelis vyriausybių turi įstatymus, susijusius su prieinamumo reikalavimais. Pasidomėkite savo šalies prieinamumo įstatymais. Kas yra įtraukta, o kas ne? Pavyzdys yra [ši vyriausybinė svetainė](https://accessibility.blog.gov.uk/).
+
+## Užduotis
+
+[Analizuokite neprieinamą svetainę](assignment.md)
+
+Kreditai: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) sukūrė Instrument
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/1-getting-started-lessons/3-accessibility/assignment.md b/translations/lt/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..b28e4390
--- /dev/null
+++ b/translations/lt/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-28T12:03:43+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Analizuokite neprieinamą svetainę
+
+## Instrukcijos
+
+Pasirinkite svetainę, kuri, jūsų manymu, nėra prieinama, ir sukurkite veiksmų planą, kaip pagerinti jos prieinamumą. Pirmiausia identifikuokite šią svetainę, aprašykite būdus, kuriais ji, jūsų nuomone, yra neprieinama, nenaudodami analitinių įrankių, o tada atlikite Lighthouse analizę. Išsaugokite šios analizės rezultatus PDF formatu ir paruoškite išsamų planą, kuriame būtų bent dešimt punktų, kaip galima būtų pagerinti svetainę.
+
+## Lentelė svetainės prieinamumui testuoti
+
+| Kriterijai | Puikiai | Pakankamai | Reikia tobulinti |
+|------------|---------|------------|------------------|
+|            | trūksta <10% reikalavimų | trūksta 20% reikalavimų | trūksta 50% reikalavimų |
+
+----
+Studento ataskaita: apima pastraipas apie tai, kaip svetainė yra neprieinama, Lighthouse ataskaitą PDF formatu, dešimties punktų sąrašą su detalėmis, kaip ją pagerinti
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/1-getting-started-lessons/README.md b/translations/lt/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..3ba38f4b
--- /dev/null
+++ b/translations/lt/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-28T11:58:57+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "lt"
+}
+-->
+# Pradžia su interneto svetainių kūrimu
+
+Šioje mokymo programos dalyje susipažinsite su ne projektiniais principais, kurie yra svarbūs norint tapti profesionaliu programuotoju.
+
+### Temos
+
+1. [Įvadas į programavimo kalbas ir įrankius](1-intro-to-programming-languages/README.md)
+2. [Įvadas į GitHub](2-github-basics/README.md)
+3. [Prieinamumo pagrindai](3-accessibility/README.md)
+
+### Autorystė
+
+Įvadą į programavimo kalbas ir įrankius su ♥️ parašė [Jasmine Greenaway](https://twitter.com/paladique)
+
+Įvadą į GitHub su ♥️ parašė [Floor Drees](https://twitter.com/floordrees)
+
+Prieinamumo pagrindus su ♥️ parašė [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/2-js-basics/1-data-types/README.md b/translations/lt/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..38454356
--- /dev/null
+++ b/translations/lt/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-28T11:42:17+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "lt"
+}
+-->
+# JavaScript pagrindai: Duomenų tipai
+
+![JavaScript pagrindai - Duomenų tipai](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.lt.png)
+> Sketchnote sukūrė [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Klausimai prieš paskaitą
+[Klausimai prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Ši pamoka apima JavaScript pagrindus – kalbą, kuri suteikia interaktyvumo internete.
+
+> Šią pamoką galite rasti [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Kintamieji](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Kintamieji JavaScript")
+
+[![Duomenų tipai JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Duomenų tipai JavaScript")
+
+> 🎥 Spustelėkite aukščiau esančius paveikslėlius, kad peržiūrėtumėte vaizdo įrašus apie kintamuosius ir duomenų tipus.
+
+Pradėkime nuo kintamųjų ir duomenų tipų, kurie juos užpildo!
+
+## Kintamieji
+
+Kintamieji saugo reikšmes, kurias galima naudoti ir keisti visame jūsų kode.
+
+Kintamojo **sukūrimas** ir **deklaravimas** turi tokią sintaksę: **[raktinis žodis] [pavadinimas]**. Jis susideda iš dviejų dalių:
+
+- **Raktinis žodis**. Raktiniai žodžiai gali būti `let` arba `var`.  
+
+✅ Raktinis žodis `let` buvo pristatytas ES6 ir suteikia jūsų kintamajam vadinamąjį _blokų sritį_. Rekomenduojama naudoti `let` vietoj `var`. Blokų sritis bus aptarta išsamiau vėlesnėse dalyse.
+- **Kintamojo pavadinimas**, tai pavadinimas, kurį pasirenkate patys.
+
+### Užduotis - darbas su kintamaisiais
+
+1. **Deklaruokite kintamąjį**. Deklaruokime kintamąjį naudodami `let` raktinį žodį:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` dabar yra deklaruotas naudojant `let` raktinį žodį. Šiuo metu jis neturi reikšmės.
+
+1. **Priskirkite reikšmę**. Išsaugokite reikšmę kintamajame naudodami `=` operatorių, po kurio nurodoma reikšmė.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Pastaba: šioje pamokoje `=` reiškia "priskyrimo operatorių", naudojamą reikšmei priskirti kintamajam. Jis nereiškia lygybės.
+
+   `myVariable` dabar yra *inicializuotas* su reikšme 123.
+
+1. **Refaktorizuokite**. Pakeiskite savo kodą šiuo teiginiu.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Aukščiau pateiktas pavyzdys vadinamas _aiški inicializacija_, kai kintamasis deklaruojamas ir tuo pačiu metu jam priskiriama reikšmė.
+
+1. **Pakeiskite kintamojo reikšmę**. Pakeiskite kintamojo reikšmę šiuo būdu:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Kai kintamasis yra deklaruotas, jo reikšmę galite pakeisti bet kuriuo metu savo kode naudodami `=` operatorių ir naują reikšmę.
+
+   ✅ Išbandykite! JavaScript galite rašyti tiesiai savo naršyklėje. Atidarykite naršyklės langą ir eikite į kūrėjų įrankius. Konsolėje rasite komandų eilutę; įveskite `let myVariable = 123`, paspauskite Enter, tada įveskite `myVariable`. Kas nutinka? Atkreipkite dėmesį, kad daugiau apie šias sąvokas sužinosite vėlesnėse pamokose.
+
+## Konstantos
+
+Konstantos deklaravimas ir inicializavimas vyksta taip pat kaip kintamųjų, išskyrus tai, kad naudojamas `const` raktinis žodis. Konstantos paprastai deklaruojamos didžiosiomis raidėmis.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Konstantos yra panašios į kintamuosius, tačiau yra dvi išimtys:
+
+- **Privalo turėti reikšmę**. Konstantos turi būti inicializuotos, kitaip vykdant kodą įvyks klaida.
+- **Nuorodos negalima keisti**. Konstantos nuorodos negalima keisti po inicializavimo, kitaip vykdant kodą įvyks klaida. Pažvelkime į du pavyzdžius:
+   - **Paprasta reikšmė**. Šis veiksmas NĖRA leidžiamas:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Objekto nuoroda yra apsaugota**. Šis veiksmas NĖRA leidžiamas.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Objekto reikšmė nėra apsaugota**. Šis veiksmas YRA leidžiamas:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Aukščiau pateiktame pavyzdyje jūs keičiate objekto reikšmę, bet ne pačią nuorodą, todėl tai leidžiama.
+
+   > Pastaba: `const` reiškia, kad nuoroda yra apsaugota nuo perrašymo. Tačiau reikšmė nėra _nekintama_ ir gali keistis, ypač jei tai sudėtinga struktūra, pvz., objektas.
+
+## Duomenų tipai
+
+Kintamieji gali saugoti įvairių tipų reikšmes, pvz., skaičius ir tekstą. Šie įvairūs reikšmių tipai vadinami **duomenų tipais**. Duomenų tipai yra svarbi programinės įrangos kūrimo dalis, nes jie padeda programuotojams priimti sprendimus, kaip kodas turėtų būti parašytas ir kaip programinė įranga turėtų veikti. Be to, kai kurie duomenų tipai turi unikalių savybių, kurios padeda transformuoti arba išgauti papildomą informaciją iš reikšmės.
+
+✅ Duomenų tipai taip pat vadinami JavaScript duomenų primityvais, nes jie yra žemiausio lygio duomenų tipai, kuriuos teikia kalba. Yra 7 primityvūs duomenų tipai: string, number, bigint, boolean, undefined, null ir symbol. Skirkite minutę ir įsivaizduokite, ką kiekvienas iš šių primityvų galėtų reikšti. Kas yra `zebra`? O kaip `0`? `true`?
+
+### Skaičiai
+
+Ankstesniame skyriuje `myVariable` reikšmė buvo skaičiaus duomenų tipas.
+
+`let myVariable = 123;`
+
+Kintamieji gali saugoti visų tipų skaičius, įskaitant dešimtainius ar neigiamus skaičius. Skaičiai taip pat gali būti naudojami su aritmetiniais operatoriais, aptartais [kitame skyriuje](../../../../2-js-basics/1-data-types).
+
+### Aritmetiniai operatoriai
+
+Yra keli operatorių tipai, kuriuos galima naudoti atliekant aritmetines funkcijas, ir kai kurie iš jų pateikti čia:
+
+| Simbolis | Aprašymas                                                               | Pavyzdys                          |
+| -------- | ----------------------------------------------------------------------- | --------------------------------- |
+| `+`      | **Sudėtis**: Apskaičiuoja dviejų skaičių sumą                           | `1 + 2 //tikėtinas atsakymas yra 3`   |
+| `-`      | **Atimtis**: Apskaičiuoja dviejų skaičių skirtumą                       | `1 - 2 //tikėtinas atsakymas yra -1`  |
+| `*`      | **Daugyba**: Apskaičiuoja dviejų skaičių sandaugą                       | `1 * 2 //tikėtinas atsakymas yra 2`   |
+| `/`      | **Dalyba**: Apskaičiuoja dviejų skaičių dalmenį                         | `1 / 2 //tikėtinas atsakymas yra 0.5` |
+| `%`      | **Liekana**: Apskaičiuoja dviejų skaičių dalybos liekaną                | `1 % 2 //tikėtinas atsakymas yra 1`   |
+
+✅ Išbandykite! Išbandykite aritmetinę operaciją savo naršyklės konsolėje. Ar rezultatai jus nustebino?
+
+### Eilutės
+
+Eilutės yra simbolių rinkiniai, kurie yra tarp viengubų arba dvigubų kabučių.
+
+- `'Tai yra eilutė'`
+- `"Tai taip pat yra eilutė"`
+- `let myString = 'Tai yra eilutės reikšmė, saugoma kintamajame';`
+
+Nepamirškite naudoti kabučių rašydami eilutę, kitaip JavaScript laikys ją kintamojo pavadinimu.
+
+### Eilučių formatavimas
+
+Eilutės yra tekstinės ir kartais reikės jas formatuoti.
+
+Norėdami **sujungti** dvi ar daugiau eilučių, naudokite `+` operatorių.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Kodėl `1 + 1 = 2` JavaScript, bet `'1' + '1' = 11?` Pagalvokite apie tai. O kaip `'1' + 1`?
+
+**Šablonų literatai** yra dar vienas būdas formatuoti eilutes, išskyrus tai, kad vietoj kabučių naudojama atgalinė kabutė. Viskas, kas nėra paprastas tekstas, turi būti dedama į vietos rezervatorius `${ }`. Tai apima bet kokius kintamuosius, kurie gali būti eilutės.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Galite pasiekti savo formatavimo tikslus naudodami bet kurį metodą, tačiau šablonų literatai gerbs bet kokias tarpus ir eilutės pertraukas.
+
+✅ Kada naudotumėte šablonų literatą, o kada paprastą eilutę?
+
+### Buliai
+
+Buliai gali turėti tik dvi reikšmes: `true` arba `false`. Buliai gali padėti priimti sprendimus, kurios kodo eilutės turėtų būti vykdomos, kai tam tikros sąlygos yra įvykdytos. Daugeliu atvejų [operatoriai](../../../../2-js-basics/1-data-types) padeda nustatyti buliaus reikšmę, ir dažnai pastebėsite bei rašysite kintamuosius, kurie yra inicializuojami arba jų reikšmės atnaujinamos naudojant operatorių.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Kintamasis gali būti laikomas 'teisingu', jei jis įvertinamas kaip buliaus `true`. Įdomu tai, kad JavaScript [visos reikšmės yra teisingos, nebent apibrėžtos kaip klaidingos](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Iššūkis
+
+JavaScript garsėja savo netikėtais būdais kartais tvarkyti duomenų tipus. Šiek tiek pasidomėkite šiais 'netikėtumais'. Pavyzdžiui: didžiųjų ir mažųjų raidžių jautrumas gali sukelti problemų! Išbandykite tai savo konsolėje: `let age = 1; let Age = 2; age == Age` (rezultatas `false` – kodėl?). Kokius kitus netikėtumus galite rasti?
+
+## Klausimai po paskaitos
+[Klausimai po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Pažvelkite į [šį JavaScript užduočių sąrašą](https://css-tricks.com/snippets/javascript/) ir išbandykite vieną. Ką išmokote?
+
+## Užduotis
+
+[Duomenų tipų praktika](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/2-js-basics/1-data-types/assignment.md b/translations/lt/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..8c729472
--- /dev/null
+++ b/translations/lt/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-28T11:46:29+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Duomenų tipų praktika
+
+## Instrukcijos
+
+Įsivaizduokite, kad kuriate pirkinių krepšelį. Parašykite dokumentaciją apie duomenų tipus, kurių jums reikėtų norint užtikrinti sklandžią apsipirkimo patirtį. Kaip priėjote prie savo pasirinkimų?
+
+## Vertinimo kriterijai
+
+Kriterijai | Puikiai | Pakankamai | Reikia patobulinimų
+--- | --- | --- | --- |
+||Išvardyti ir išsamiai aptarti šeši duomenų tipai, dokumentuojant jų naudojimą|Aptarti keturi duomenų tipai|Aptarti du duomenų tipai|
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipiame dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudotis profesionalių vertėjų paslaugomis. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/2-js-basics/2-functions-methods/README.md b/translations/lt/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..578cc343
--- /dev/null
+++ b/translations/lt/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-28T11:39:54+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "lt"
+}
+-->
+# JavaScript pagrindai: metodai ir funkcijos
+
+![JavaScript pagrindai - funkcijos](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.lt.png)
+> Sketchnote sukūrė [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Klausimai prieš paskaitą
+[Klausimai prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Rašydami kodą visada norime užtikrinti, kad jis būtų lengvai skaitomas. Nors tai gali atrodyti nelogiška, kodas yra skaitomas daug dažniau nei rašomas. Vienas pagrindinių įrankių, padedančių kurti lengvai prižiūrimą kodą, yra **funkcija**.
+
+[![Metodai ir funkcijos](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Metodai ir funkcijos")
+
+> 🎥 Spustelėkite paveikslėlį aukščiau, kad peržiūrėtumėte vaizdo įrašą apie metodus ir funkcijas.
+
+> Šią pamoką galite rasti [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Funkcijos
+
+Funkcija iš esmės yra kodo blokas, kurį galime vykdyti pagal poreikį. Tai puikiai tinka situacijoms, kai reikia atlikti tą pačią užduotį kelis kartus; vietoj to, kad logiką dubliuotume keliose vietose (kas apsunkintų atnaujinimą ateityje), galime ją centralizuoti vienoje vietoje ir iškviesti, kai tik reikia atlikti operaciją – funkcijas netgi galima kviesti iš kitų funkcijų!
+
+Ne mažiau svarbu yra suteikti funkcijai pavadinimą. Nors tai gali atrodyti nereikšminga, pavadinimas suteikia greitą būdą dokumentuoti kodo dalį. Galite tai įsivaizduoti kaip mygtuko etiketę. Jei paspausiu mygtuką, ant kurio parašyta „Atšaukti laikmatį“, žinosiu, kad jis sustabdys laikrodžio veikimą.
+
+## Funkcijos kūrimas ir iškvietimas
+
+Funkcijos sintaksė atrodo taip:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Jei norėčiau sukurti funkciją, kuri rodytų pasisveikinimą, ji galėtų atrodyti taip:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Kai norime iškviesti (arba vykdyti) funkciją, naudojame funkcijos pavadinimą, po kurio rašome `()`. Verta paminėti, kad funkcija gali būti apibrėžta prieš arba po jos iškvietimo; JavaScript kompiliatorius ją suras už jus.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Yra specialus funkcijos tipas, vadinamas **metodu**, kurį jau naudojote! Iš tiesų, tai matėme aukščiau pateiktame pavyzdyje, kai naudojome `console.log`. Metodas skiriasi nuo funkcijos tuo, kad jis yra priskirtas objektui (mūsų pavyzdyje – `console`), o funkcija yra laisvai plaukiojanti. Daugelis programuotojų šiuos terminus naudoja pakaitomis.
+
+### Geriausios praktikos kuriant funkcijas
+
+Kuriant funkcijas verta atsižvelgti į keletą geriausių praktikų:
+
+- Visada naudokite aprašomuosius pavadinimus, kad žinotumėte, ką funkcija atliks
+- Naudokite **camelCasing**, kad sujungtumėte žodžius
+- Funkcijas orientuokite į konkrečią užduotį
+
+## Informacijos perdavimas funkcijai
+
+Kad funkcija būtų universalesnė, dažnai norėsite perduoti jai informaciją. Jei pažvelgtume į mūsų aukščiau pateiktą `displayGreeting` pavyzdį, jis rodys tik **Hello, world!**. Tai nėra pati naudingiausia funkcija, kokią galėtume sukurti. Jei norime ją padaryti šiek tiek lankstesnę, pavyzdžiui, leisti nurodyti asmens, kurį sveikiname, vardą, galime pridėti **parametrą**. Parametras (kartais vadinamas **argumentu**) yra papildoma informacija, siunčiama funkcijai.
+
+Parametrai nurodomi apibrėžimo dalyje, skliausteliuose, ir yra atskirti kableliais, kaip parodyta:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Galime atnaujinti `displayGreeting`, kad priimtų vardą ir jį rodytų.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Kai norime iškviesti funkciją ir perduoti parametrą, nurodome jį skliausteliuose.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Numatytosios reikšmės
+
+Funkciją galime padaryti dar lankstesnę, pridėdami daugiau parametrų. Bet ką daryti, jei nenorime, kad kiekviena reikšmė būtų privaloma? Grįžtant prie mūsų pasisveikinimo pavyzdžio, galime palikti vardą kaip privalomą (mums reikia žinoti, su kuo sveikinamės), tačiau norime leisti pasisveikinimą pritaikyti pagal poreikį. Jei kas nors nenori jo pritaikyti, vietoj to pateikiame numatytąją reikšmę. Norėdami nustatyti numatytąją parametro reikšmę, ją nustatome taip pat, kaip nustatytume kintamojo reikšmę – `parameterName = 'defaultValue'`. Pilnas pavyzdys:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Kai kviečiame funkciją, galime nuspręsti, ar norime nustatyti reikšmę `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Grąžinamosios reikšmės
+
+Iki šiol mūsų sukurta funkcija visada išves informaciją į [konsolę](https://developer.mozilla.org/docs/Web/API/console). Kartais tai gali būti būtent tai, ko ieškome, ypač kai kuriame funkcijas, kurios kvies kitas paslaugas. Bet ką daryti, jei noriu sukurti pagalbinę funkciją, kuri atliktų skaičiavimą ir grąžintų reikšmę, kad galėčiau ją naudoti kitur?
+
+Tai galime padaryti naudodami **grąžinamąją reikšmę**. Grąžinamoji reikšmė yra grąžinama funkcijos ir gali būti saugoma kintamajame taip pat, kaip galėtume saugoti literalinę reikšmę, pvz., eilutę ar skaičių.
+
+Jei funkcija grąžina ką nors, naudojamas raktažodis `return`. Raktažodis `return` tikisi reikšmės arba nuorodos į tai, kas grąžinama, kaip parodyta:
+
+```javascript
+return myVariable;
+```  
+
+Galime sukurti funkciją, kuri sukurtų pasisveikinimo pranešimą ir grąžintų reikšmę atgal kvietėjui.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Kai kviečiame šią funkciją, reikšmę saugosime kintamajame. Tai labai panašu į tai, kaip nustatytume kintamąjį statinei reikšmei (pvz., `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Funkcijos kaip funkcijų parametrai
+
+Tobulėjant jūsų programavimo karjerai, susidursite su funkcijomis, kurios priima funkcijas kaip parametrus. Šis įdomus triukas dažnai naudojamas, kai nežinome, kada kas nors įvyks ar baigsis, bet žinome, kad reikia atlikti operaciją reaguojant į tai.
+
+Pavyzdžiui, apsvarstykite [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), kuris pradeda laikmatį ir vykdo kodą, kai jis baigiasi. Turime pasakyti, kokį kodą norime vykdyti. Skamba kaip puikus darbas funkcijai!
+
+Jei vykdysite žemiau pateiktą kodą, po 3 sekundžių pamatysite pranešimą **Praėjo 3 sekundės**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Anoniminės funkcijos
+
+Pažvelkime dar kartą į tai, ką sukūrėme. Kuriame funkciją su pavadinimu, kuri bus naudojama tik vieną kartą. Kai mūsų programa tampa sudėtingesnė, galime pastebėti, kad kuriame daug funkcijų, kurios bus naudojamos tik vieną kartą. Tai nėra idealu. Pasirodo, ne visada reikia suteikti pavadinimą!
+
+Kai perduodame funkciją kaip parametrą, galime praleisti jos kūrimą iš anksto ir vietoj to ją sukurti kaip parametro dalį. Naudojame tą patį raktažodį `function`, tačiau ją kuriame kaip parametrą.
+
+Perrašykime aukščiau pateiktą kodą, kad naudotume anoniminę funkciją:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Jei vykdysite mūsų naują kodą, pastebėsite, kad gauname tuos pačius rezultatus. Sukūrėme funkciją, bet nereikėjo suteikti jai pavadinimo!
+
+### Fat arrow funkcijos
+
+Vienas iš dažnai naudojamų trumpinių daugelyje programavimo kalbų (įskaitant JavaScript) yra galimybė naudoti vadinamąją **arrow** arba **fat arrow** funkciją. Ji naudoja specialų simbolį `=>`, kuris atrodo kaip rodyklė – todėl toks pavadinimas! Naudodami `=>`, galime praleisti raktažodį `function`.
+
+Perrašykime mūsų kodą dar kartą, kad naudotume fat arrow funkciją:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Kada naudoti kiekvieną strategiją
+
+Dabar matėte, kad turime tris būdus perduoti funkciją kaip parametrą ir galbūt svarstote, kada naudoti kiekvieną. Jei žinote, kad funkciją naudosite daugiau nei vieną kartą, sukurkite ją įprastai. Jei ją naudosite tik vienoje vietoje, paprastai geriausia naudoti anoniminę funkciją. Ar naudosite fat arrow funkciją, ar tradicinę `function` sintaksę, priklauso nuo jūsų, tačiau pastebėsite, kad dauguma šiuolaikinių programuotojų renkasi `=>`.
+
+---
+
+## 🚀 Iššūkis
+
+Ar galite vienu sakiniu paaiškinti skirtumą tarp funkcijų ir metodų? Pabandykite!
+
+## Klausimai po paskaitos
+[Klausimai po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Verta [pasidomėti daugiau apie arrow funkcijas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), nes jos vis dažniau naudojamos kodų bazėse. Praktikuokite rašyti funkciją, o tada perrašykite ją naudodami šią sintaksę.
+
+## Užduotis
+
+[Linksmybės su funkcijomis](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipkite dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/2-js-basics/2-functions-methods/assignment.md b/translations/lt/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..cd3527d7
--- /dev/null
+++ b/translations/lt/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-28T11:40:35+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Linksmybės su funkcijomis
+
+## Instrukcijos
+
+Sukurkite įvairias funkcijas: tiek tas, kurios grąžina reikšmę, tiek tas, kurios nieko negrąžina.
+
+Pabandykite sukurti funkciją, kuri turėtų tiek paprastus parametrus, tiek parametrus su numatytosiomis reikšmėmis.
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai                                                                                  | Pakankamai                                                      | Reikia patobulinimų |
+| ---------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------- |
+|            | Pateiktas sprendimas su dviem ar daugiau gerai veikiančiomis funkcijomis su įvairiais parametrais | Pateiktas veikiantis sprendimas su viena funkcija ir keliais parametrais | Sprendime yra klaidų |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/2-js-basics/3-making-decisions/README.md b/translations/lt/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..a9778727
--- /dev/null
+++ b/translations/lt/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-28T11:41:04+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "lt"
+}
+-->
+# JavaScript pagrindai: Sprendimų priėmimas
+
+![JavaScript pagrindai - Sprendimų priėmimas](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.lt.png)
+
+> Sketchnote sukūrė [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Klausimai prieš paskaitą
+
+[Klausimai prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Sprendimų priėmimas ir kodo vykdymo eigos valdymas padaro jūsų kodą pakartotinai naudojamą ir patikimą. Šiame skyriuje aptariama, kaip valdyti duomenų srautą JavaScript'e ir kodėl tai svarbu, ypač naudojant Boolean duomenų tipus.
+
+[![Sprendimų priėmimas](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Sprendimų priėmimas")
+
+> 🎥 Spustelėkite aukščiau esančią nuotrauką, kad peržiūrėtumėte vaizdo įrašą apie sprendimų priėmimą.
+
+> Šią pamoką galite rasti [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## Trumpas Booleans apžvalga
+
+Boolean reikšmės gali būti tik dvi: `true` arba `false`. Boolean padeda nuspręsti, kurios kodo eilutės turėtų būti vykdomos, kai tenkinamos tam tikros sąlygos.
+
+Boolean reikšmę galite nustatyti taip:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Boolean pavadinimas kilo nuo anglų matematiko, filosofo ir logiko George Boole (1815–1864).
+
+## Palyginimo operatoriai ir Boolean
+
+Operatoriai naudojami sąlygoms įvertinti, atliekant palyginimus, kurie sukuria Boolean reikšmę. Žemiau pateikiamas dažniausiai naudojamų operatorių sąrašas.
+
+| Simbolis | Aprašymas                                                                                                                                                   | Pavyzdys           |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`      | **Mažiau nei**: Palygina dvi reikšmes ir grąžina `true`, jei kairėje pusėje esanti reikšmė yra mažesnė už dešinėje esančią                                   | `5 < 6 // true`    |
+| `<=`     | **Mažiau arba lygu**: Palygina dvi reikšmes ir grąžina `true`, jei kairėje pusėje esanti reikšmė yra mažesnė arba lygi dešinėje esančiai                     | `5 <= 6 // true`   |
+| `>`      | **Daugiau nei**: Palygina dvi reikšmes ir grąžina `true`, jei kairėje pusėje esanti reikšmė yra didesnė už dešinėje esančią                                  | `5 > 6 // false`   |
+| `>=`     | **Daugiau arba lygu**: Palygina dvi reikšmes ir grąžina `true`, jei kairėje pusėje esanti reikšmė yra didesnė arba lygi dešinėje esančiai                   | `5 >= 6 // false`  |
+| `===`    | **Griežta lygybė**: Palygina dvi reikšmes ir grąžina `true`, jei reikšmės kairėje ir dešinėje yra lygios IR yra to paties duomenų tipo                      | `5 === 6 // false` |
+| `!==`    | **Nelygybė**: Palygina dvi reikšmes ir grąžina priešingą Boolean reikšmę, nei griežtos lygybės operatorius                                                  | `5 !== 6 // true`  |
+
+✅ Patikrinkite savo žinias, parašydami keletą palyginimų naršyklės konsolėje. Ar jus nustebino kokie nors gauti duomenys?
+
+## If sakinys
+
+`if` sakinys vykdys kodą tarp savo blokų, jei sąlyga yra teisinga.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Loginiai operatoriai dažnai naudojami sąlygai sudaryti.
+
+```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 sakinys
+
+`else` sakinys vykdys kodą tarp savo blokų, kai sąlyga yra klaidinga. Jis yra neprivalomas naudojant `if` sakinį.
+
+```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!");
+}
+```
+
+✅ Patikrinkite savo supratimą apie šį kodą ir žemiau pateiktą kodą, paleisdami jį naršyklės konsolėje. Pakeiskite `currentMoney` ir `laptopPrice` kintamųjų reikšmes, kad pakeistumėte `console.log()` rezultatą.
+
+## Switch sakinys
+
+`switch` sakinys naudojamas skirtingiems veiksmams atlikti, atsižvelgiant į skirtingas sąlygas. Naudokite `switch` sakinį, kad pasirinktumėte vieną iš daugelio vykdytinų kodo blokų.
+
+```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}`);
+```
+
+✅ Patikrinkite savo supratimą apie šį kodą ir žemiau pateiktą kodą, paleisdami jį naršyklės konsolėje. Pakeiskite kintamojo `a` reikšmes, kad pakeistumėte `console.log()` rezultatą.
+
+## Loginiai operatoriai ir Boolean
+
+Sprendimams gali prireikti daugiau nei vieno palyginimo, ir jie gali būti sujungti naudojant loginius operatorius, kad būtų gauta Boolean reikšmė.
+
+| Simbolis | Aprašymas                                                                                     | Pavyzdys                                                                 |
+| -------- | --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`     | **Loginis IR**: Palygina dvi Boolean išraiškas. Grąžina `true` tik tada, jei abi pusės yra teisingos | `(5 > 6) && (5 < 6 ) // Viena pusė klaidinga, kita teisinga. Grąžina false` |
+| `\|\|`   | **Loginis ARBA**: Palygina dvi Boolean išraiškas. Grąžina `true`, jei bent viena pusė yra teisinga | `(5 > 6) \|\| (5 < 6) // Viena pusė klaidinga, kita teisinga. Grąžina true` |
+| `!`      | **Loginis NE**: Grąžina priešingą Boolean išraiškos reikšmę                                   | `!(5 > 6) // 5 nėra didesnis už 6, bet "!" grąžins true`                |
+
+## Sąlygos ir sprendimai su loginiais operatoriais
+
+Loginiai operatoriai gali būti naudojami sąlygoms sudaryti `if..else` sakiniuose.
+
+```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!");
+}
+```
+
+### Neigimo operatorius
+
+Jūs jau matėte, kaip galima naudoti `if...else` sakinį sąlyginei logikai kurti. Viskas, kas patenka į `if`, turi būti įvertinta kaip `true` arba `false`. Naudodami `!` operatorių galite _neigti_ išraišką. Tai atrodytų taip:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Ternarinės išraiškos
+
+`if...else` nėra vienintelis būdas išreikšti sprendimų logiką. Taip pat galite naudoti vadinamąjį ternarinį operatorių. Jo sintaksė atrodo taip:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Žemiau pateiktas konkretesnis pavyzdys:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Skirkite minutę šiam kodui perskaityti kelis kartus. Ar suprantate, kaip veikia šie operatoriai?
+
+Aukščiau pateiktas kodas sako:
+
+- jei `firstNumber` yra didesnis už `secondNumber`
+- tada priskirkite `firstNumber` kintamajam `biggestNumber`
+- kitu atveju priskirkite `secondNumber`.
+
+Ternarinė išraiška yra tiesiog kompaktiškas būdas parašyti žemiau pateiktą kodą:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Iššūkis
+
+Sukurkite programą, kuri pirmiausia būtų parašyta naudojant loginius operatorius, o tada perrašykite ją naudodami ternarinę išraišką. Kuri sintaksė jums labiau patinka?
+
+---
+
+## Klausimai po paskaitos
+
+[Klausimai po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Plačiau apie daugybę vartotojui prieinamų operatorių skaitykite [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Peržiūrėkite Josh Comeau nuostabų [operatorių vadovą](https://joshwcomeau.com/operator-lookup/)!
+
+## Užduotis
+
+[Operatoriai](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/2-js-basics/3-making-decisions/assignment.md b/translations/lt/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..3d8992e5
--- /dev/null
+++ b/translations/lt/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-28T11:41:45+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Operatoriai
+
+## Instrukcijos
+
+Eksperimentuokite su operatoriais. Štai pasiūlymas, kokią programą galite įgyvendinti:
+
+Turite studentų rinkinį iš dviejų skirtingų vertinimo sistemų.
+
+### Pirma vertinimo sistema
+
+Viena vertinimo sistema apibrėžia pažymius nuo 1 iki 5, kur 3 ir daugiau reiškia, kad kursas išlaikytas.
+
+### Antra vertinimo sistema
+
+Kita vertinimo sistema turi šiuos pažymius: `A, A-, B, B-, C, C-`, kur `A` yra aukščiausias pažymys, o `C` yra žemiausias išlaikymo pažymys.
+
+### Užduotis
+
+Turint šį masyvą `allStudents`, kuris atspindi visus studentus ir jų pažymius, sukurkite naują masyvą `studentsWhoPass`, kuriame būtų visi studentai, išlaikę kursą.
+
+> PATARIMAS: naudokite for ciklą, if...else ir palyginimo operatorius:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai                       | Pakankamai                   | Reikia patobulinimų            |
+| ---------- | ----------------------------- | ---------------------------- | ------------------------------ |
+|            | Pateiktas pilnas sprendimas   | Pateiktas dalinis sprendimas | Pateiktas sprendimas su klaidomis |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/2-js-basics/4-arrays-loops/README.md b/translations/lt/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..b5a881ad
--- /dev/null
+++ b/translations/lt/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-28T11:46:52+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "lt"
+}
+-->
+# JavaScript pagrindai: masyvai ir ciklai
+
+![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.lt.png)
+> Sketchnote sukūrė [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Klausimai prieš paskaitą
+[Klausimai prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Ši pamoka apima JavaScript pagrindus – kalbą, kuri suteikia interaktyvumo internete. Šioje pamokoje sužinosite apie masyvus ir ciklus, kurie naudojami duomenims manipuliuoti.
+
+[![Masyvai](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Masyvai")
+
+[![Ciklai](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Ciklai")
+
+> 🎥 Spustelėkite aukščiau esančius paveikslėlius, kad peržiūrėtumėte vaizdo įrašus apie masyvus ir ciklus.
+
+> Šią pamoką galite rasti [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Masyvai
+
+Darbas su duomenimis yra dažna užduotis bet kurioje programavimo kalboje, ir tai tampa daug lengviau, kai duomenys yra organizuoti struktūriškai, pavyzdžiui, masyvuose. Masyvuose duomenys saugomi struktūroje, panašioje į sąrašą. Vienas iš pagrindinių masyvų privalumų yra tas, kad viename masyve galite saugoti skirtingų tipų duomenis.
+
+✅ Masyvai yra visur aplink mus! Ar galite sugalvoti realaus gyvenimo pavyzdį, pavyzdžiui, saulės baterijų masyvą?
+
+Masyvo sintaksė yra kvadratinių skliaustų pora.
+
+```javascript
+let myArray = [];
+```
+
+Tai tuščias masyvas, tačiau masyvai gali būti deklaruojami jau užpildyti duomenimis. Keli masyvo elementai atskiriami kableliu.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Masyvo reikšmėms priskiriama unikali reikšmė, vadinama **indeksu**, kuris yra sveikasis skaičius, priskiriamas pagal jo atstumą nuo masyvo pradžios. Aukščiau pateiktame pavyzdyje eilutės reikšmė „Chocolate“ turi indeksą 0, o „Rocky Road“ indeksas yra 4. Naudokite indeksą su kvadratiniais skliaustais, kad gautumėte, pakeistumėte arba įterptumėte masyvo reikšmes.
+
+✅ Ar jus stebina, kad masyvai prasideda nuo nulio indekso? Kai kuriose programavimo kalbose indeksai prasideda nuo 1. Apie tai yra įdomi istorija, kurią galite [perskaityti Vikipedijoje](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Indeksą galite panaudoti reikšmei pakeisti, kaip šiame pavyzdyje:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+Taip pat galite įterpti naują reikšmę tam tikrame indekse, kaip šiame pavyzdyje:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Dažnesnis būdas pridėti reikšmes į masyvą yra naudojant masyvo operatorius, tokius kaip array.push()
+
+Norėdami sužinoti, kiek elementų yra masyve, naudokite `length` savybę.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Išbandykite patys! Naudokite savo naršyklės konsolę, kad sukurtumėte ir manipuliuotumėte savo sukurtu masyvu.
+
+## Ciklai
+
+Ciklai leidžia atlikti pasikartojančias arba **iteracines** užduotis ir gali sutaupyti daug laiko bei kodo. Kiekviena iteracija gali skirtis savo kintamaisiais, reikšmėmis ir sąlygomis. JavaScript yra skirtingų tipų ciklų, kurie turi nedidelius skirtumus, tačiau iš esmės atlieka tą patį: iteruoja per duomenis.
+
+### For ciklas
+
+`for` ciklas reikalauja 3 dalių, kad galėtų iteruoti:
+- `counter` Kintamasis, kuris paprastai inicializuojamas skaičiumi, skaičiuojančiu iteracijų skaičių
+- `condition` Išraiška, naudojanti palyginimo operatorius, kad ciklas sustotų, kai reikšmė yra `false`
+- `iteration-expression` Vykdoma kiekvienos iteracijos pabaigoje, paprastai naudojama keisti skaitiklio reikšmę
+  
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Paleiskite šį kodą naršyklės konsolėje. Kas nutinka, kai šiek tiek pakeičiate skaitiklį, sąlygą ar iteracijos išraišką? Ar galite priversti jį veikti atgal, sukuriant atgalinį skaičiavimą?
+
+### While ciklas
+
+Skirtingai nuo `for` ciklo sintaksės, `while` ciklai reikalauja tik sąlygos, kuri sustabdys ciklą, kai sąlyga taps `false`. Ciklų sąlygos paprastai priklauso nuo kitų reikšmių, tokių kaip skaitikliai, ir turi būti valdomos ciklo metu. Pradinės skaitiklių reikšmės turi būti sukurtos už ciklo ribų, o bet kokios išraiškos, reikalingos sąlygai įvykdyti, įskaitant skaitiklio keitimą, turi būti palaikomos ciklo viduje.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Kodėl rinktumėtės for ciklą, o ne while ciklą? 17 tūkst. žiūrovų turėjo tą patį klausimą StackOverflow, ir kai kurios nuomonės [gali būti jums įdomios](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Ciklai ir masyvai
+
+Masyvai dažnai naudojami su ciklais, nes dauguma sąlygų reikalauja masyvo ilgio, kad sustabdytų ciklą, o indeksas taip pat gali būti skaitiklio reikšmė.
+
+```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
+```
+
+✅ Eksperimentuokite su ciklu per savo sukurtą masyvą naršyklės konsolėje.
+
+---
+
+## 🚀 Iššūkis
+
+Yra ir kitų būdų iteruoti per masyvus, be for ir while ciklų. Yra [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) ir [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Pakeiskite savo masyvo ciklą naudodami vieną iš šių metodų.
+
+## Klausimai po paskaitos
+[Klausimai po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Apžvalga ir savarankiškas mokymasis
+
+JavaScript masyvai turi daug metodų, kurie yra labai naudingi duomenų manipuliavimui. [Perskaitykite apie šiuos metodus](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) ir išbandykite kai kuriuos iš jų (pvz., push, pop, slice ir splice) savo sukurtame masyve.
+
+## Užduotis
+
+[Iteruokite per masyvą](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/2-js-basics/4-arrays-loops/assignment.md b/translations/lt/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..29e1e96e
--- /dev/null
+++ b/translations/lt/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-28T11:47:19+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Kartokite masyvą
+
+## Instrukcijos
+
+Sukurkite programą, kuri išvardija kas 3-ą skaičių nuo 1 iki 20 ir atspausdina jį konsolėje.
+
+> TIP: naudokite for ciklą ir modifikuokite iteracijos išraišką
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai                                  | Patenkinamai            | Reikia patobulinimų            |
+| ---------- | ---------------------------------------- | ----------------------- | ------------------------------ |
+|            | Programa veikia teisingai ir yra pakomentuota | Programa nėra pakomentuota | Programa yra nebaigta arba turi klaidų |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/2-js-basics/README.md b/translations/lt/2-js-basics/README.md
new file mode 100644
index 00000000..3b630d01
--- /dev/null
+++ b/translations/lt/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-28T11:39:24+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "lt"
+}
+-->
+# Įvadas į JavaScript
+
+JavaScript yra interneto kalba. Šiose keturiose pamokose išmoksite jos pagrindus.
+
+### Temos
+
+1. [Kintamieji ir duomenų tipai](1-data-types/README.md)
+2. [Funkcijos ir metodai](2-functions-methods/README.md)
+3. [Sprendimų priėmimas naudojant JavaScript](3-making-decisions/README.md)
+4. [Masyvai ir ciklai](4-arrays-loops/README.md)
+
+### Kreditas
+
+Šias pamokas su ♥️ parašė [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) ir [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/3-terrarium/1-intro-to-html/README.md b/translations/lt/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..87d5ba9b
--- /dev/null
+++ b/translations/lt/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-28T11:49:10+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "lt"
+}
+-->
+# Terariumo projektas 1 dalis: Įvadas į HTML
+
+![Įvadas į HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.lt.png)
+> Sketchnote sukūrė [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Klausimynas prieš paskaitą
+
+[Klausimynas prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+> Peržiūrėkite vaizdo įrašą
+
+> 
+> [![Git ir GitHub pagrindų vaizdo įrašas](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Įvadas
+
+HTML, arba HyperText Markup Language, yra interneto „skeletas“. Jei CSS „aprengia“ jūsų HTML, o JavaScript suteikia jam gyvybės, tai HTML yra jūsų internetinės programos kūnas. HTML sintaksė netgi atspindi šią idėją, nes ji apima „head“, „body“ ir „footer“ žymes.
+
+Šioje pamokoje mes naudosime HTML, kad sukurtume virtualaus terariumo sąsajos „skeletą“. Jis turės pavadinimą ir tris stulpelius: dešinįjį ir kairįjį stulpelius, kuriuose bus perkeliamieji augalai, ir centrinę sritį, kuri bus stiklinio terariumo imitacija. Pamokos pabaigoje galėsite matyti augalus stulpeliuose, tačiau sąsaja atrodys šiek tiek keistai; nesijaudinkite, kitame skyriuje pridėsite CSS stilių, kad sąsaja atrodytų geriau.
+
+### Užduotis
+
+Savo kompiuteryje sukurkite aplanką pavadinimu „terrarium“ ir jame failą pavadinimu „index.html“. Tai galite padaryti naudodami Visual Studio Code, atidarę naują VS Code langą, spustelėję „open folder“ ir pasirinkę naują aplanką. Tada Explorer skydelyje spustelėkite mažą „file“ mygtuką ir sukurkite naują failą:
+
+![VS Code Explorer](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.lt.png)
+
+Arba
+
+Naudokite šias komandas savo git bash:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` arba `nano index.html`
+
+> index.html failai naršyklei nurodo, kad tai yra numatytasis failas aplanke; URL, pvz., `https://anysite.com/test`, gali būti sukurtas naudojant aplankų struktūrą, kurioje yra aplankas „test“ su „index.html“ viduje; „index.html“ nebūtinai turi būti rodomas URL.
+
+---
+
+## DocType ir html žymės
+
+Pirmoji HTML failo eilutė yra jo doctype. Gali būti šiek tiek netikėta, kad ši eilutė turi būti pačiame failo viršuje, tačiau ji nurodo senesnėms naršyklėms, kad puslapis turi būti atvaizduojamas standartiniu režimu, laikantis dabartinės HTML specifikacijos.
+
+> Patarimas: VS Code galite užvesti pelės žymeklį ant žymės ir gauti informaciją apie jos naudojimą iš MDN Reference vadovų.
+
+Antroji eilutė turėtų būti `<html>` žymės atidarymo žymė, o iškart po jos – uždarymo žymė `</html>`. Šios žymės yra jūsų sąsajos šaknies elementai.
+
+### Užduotis
+
+Pridėkite šias eilutes savo `index.html` failo viršuje:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Yra keletas skirtingų režimų, kuriuos galima nustatyti naudojant DocType su užklausos eilute: [Quirks Mode ir Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Šie režimai buvo naudojami palaikyti labai senas naršykles, kurios šiais laikais beveik nenaudojamos (pvz., Netscape Navigator 4 ir Internet Explorer 5). Galite laikytis standartinio doctype deklaravimo.
+
+---
+
+## Dokumento „head“
+
+HTML dokumento „head“ sritis apima svarbią informaciją apie jūsų tinklalapį, dar vadinamą [metaduomenimis](https://developer.mozilla.org/docs/Web/HTML/Element/meta). Mūsų atveju, mes nurodome žiniatinklio serveriui, kuriam šis puslapis bus siunčiamas atvaizduoti, šiuos keturis dalykus:
+
+-   puslapio pavadinimą
+-   puslapio metaduomenis, įskaitant:
+    -   „character set“, nurodantį, kokia simbolių koduotė naudojama puslapyje
+    -   naršyklės informaciją, įskaitant `x-ua-compatible`, kuris nurodo, kad palaikoma IE=edge naršyklė
+    -   informaciją apie tai, kaip turėtų elgtis peržiūros sritis, kai ji įkeliama. Nustatant peržiūros sritį su pradiniu masteliu 1, kontroliuojamas priartinimo lygis, kai puslapis pirmą kartą įkeliamas.
+
+### Užduotis
+
+Pridėkite „head“ bloką savo dokumente tarp `<html>` atidarymo ir uždarymo žymių.
+
+```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>
+```
+
+✅ Kas nutiktų, jei nustatytumėte peržiūros srities meta žymę taip: `<meta name="viewport" content="width=600">`? Skaitykite daugiau apie [peržiūros sritį](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## Dokumento `body`
+
+### HTML žymės
+
+HTML faile pridedate žymes, kad sukurtumėte tinklalapio elementus. Kiekviena žymė paprastai turi atidarymo ir uždarymo žymę, pvz.: `<p>hello</p>`, kad nurodytų pastraipą. Sukurkite savo sąsajos kūną, pridėdami `<body>` žymių rinkinį tarp `<html>` žymių poros; jūsų žymėjimas dabar atrodo taip:
+
+### Užduotis
+
+```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>
+```
+
+Dabar galite pradėti kurti savo puslapį. Paprastai naudojate `<div>` žymes, kad sukurtumėte atskirus puslapio elementus. Sukursime seriją `<div>` elementų, kuriuose bus vaizdai.
+
+### Vaizdai
+
+Viena HTML žymė, kuriai nereikia uždarymo žymės, yra `<img>` žymė, nes ji turi `src` elementą, kuriame yra visa informacija, reikalinga puslapiui atvaizduoti elementą.
+
+Sukurkite savo programoje aplanką pavadinimu `images` ir jame pridėkite visus vaizdus iš [šaltinio kodo aplanko](../../../../3-terrarium/solution/images); (yra 14 augalų vaizdų).
+
+### Užduotis
+
+Pridėkite tuos augalų vaizdus į du stulpelius tarp `<body></body>` žymių:
+
+```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>
+```
+
+> Pastaba: Span ir Div skirtumai. Div yra laikomi „blokų“ elementais, o Span – „eilutės“. Kas nutiktų, jei šiuos div pakeistumėte į span?
+
+Naudodami šį žymėjimą, augalai dabar rodomi ekrane. Tai atrodo gana prastai, nes jie dar nėra stilizuoti naudojant CSS, tačiau tai padarysime kitoje pamokoje.
+
+Kiekvienas vaizdas turi alternatyvų tekstą, kuris pasirodys, net jei negalite matyti ar atvaizduoti vaizdo. Tai svarbus atributas, kurį reikia įtraukti dėl prieinamumo. Sužinokite daugiau apie prieinamumą būsimose pamokose; kol kas prisiminkite, kad alt atributas pateikia alternatyvią informaciją apie vaizdą, jei vartotojas dėl kokių nors priežasčių negali jo matyti (dėl lėto ryšio, klaidos src atribute arba jei vartotojas naudoja ekrano skaitytuvą).
+
+✅ Ar pastebėjote, kad kiekvienas vaizdas turi tą patį alt tekstą? Ar tai gera praktika? Kodėl taip arba kodėl ne? Ar galite patobulinti šį kodą?
+
+---
+
+## Semantinis žymėjimas
+
+Apskritai, rašant HTML, geriau naudoti prasmingą „semantiką“. Ką tai reiškia? Tai reiškia, kad naudojate HTML žymes, kurios atspindi duomenų tipą arba sąveiką, kuriai jos buvo sukurtos. Pavyzdžiui, pagrindinis puslapio pavadinimo tekstas turėtų naudoti `<h1>` žymę.
+
+Pridėkite šią eilutę iškart po `<body>` atidarymo žymės:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Naudojant semantinį žymėjimą, pvz., antraštėms naudoti `<h1>` ir nesutvarkytoms sąrašams naudoti `<ul>`, padedama ekrano skaitytuvams naršyti puslapyje. Apskritai, mygtukai turėtų būti rašomi kaip `<button>`, o sąrašai – kaip `<li>`. Nors _įmanoma_ naudoti specialiai stilizuotus `<span>` elementus su paspaudimo valdikliais, kad imituotumėte mygtukus, neįgaliesiems skirtos technologijos geriau nustato, kur puslapyje yra mygtukas, ir sąveikauja su juo, jei elementas atrodo kaip mygtukas. Dėl šios priežasties stenkitės kuo daugiau naudoti semantinį žymėjimą.
+
+✅ Pažvelkite į ekrano skaitytuvą ir [kaip jis sąveikauja su tinklalapiu](https://www.youtube.com/watch?v=OUDV1gqs9GA). Ar matote, kodėl nesemantinis žymėjimas gali sukelti vartotojui nepatogumų?
+
+## Terariumas
+
+Paskutinė šios sąsajos dalis apima žymėjimo kūrimą, kuris bus stilizuotas, kad sukurtų terariumą.
+
+### Užduotis:
+
+Pridėkite šį žymėjimą virš paskutinės `</div>` žymės:
+
+```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>
+```
+
+✅ Nors pridėjote šį žymėjimą ekrane, nieko nesimato. Kodėl?
+
+---
+
+## 🚀Iššūkis
+
+HTML yra keletas senų „laukinės“ išvaizdos žymių, kurios vis dar smagios naudoti, nors neturėtumėte naudoti pasenusių žymių, tokių kaip [šios žymės](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements), savo žymėjime. Vis dėlto, ar galite naudoti seną `<marquee>` žymę, kad h1 pavadinimas slinktų horizontaliai? (jei taip padarysite, nepamirškite jos pašalinti vėliau)
+
+## Klausimynas po paskaitos
+
+[Klausimynas po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Apžvalga ir savarankiškas mokymasis
+
+HTML yra „patikrinta ir patikima“ statybinių blokų sistema, padėjusi sukurti internetą tokį, koks jis yra šiandien. Sužinokite šiek tiek apie jo istoriją, išnagrinėdami senas ir naujas žymes. Ar galite suprasti, kodėl kai kurios žymės buvo pasenusios, o kitos pridėtos? Kokios žymės galėtų būti pristatytos ateityje?
+
+Sužinokite daugiau apie svetainių kūrimą žiniatinkliui ir mobiliesiems įrenginiams [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+## Užduotis
+
+[Praktikuokite HTML: Sukurkite tinklaraščio maketą](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/3-terrarium/1-intro-to-html/assignment.md b/translations/lt/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..1aa9d258
--- /dev/null
+++ b/translations/lt/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-28T11:50:09+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Praktikuokite HTML: Sukurkite tinklaraščio maketą
+
+## Instrukcijos
+
+Įsivaizduokite, kad kuriate arba pertvarkote savo asmeninę svetainę. Sukurkite grafinį savo svetainės maketą, o tada užrašykite HTML žymėjimą, kurį naudotumėte įvairiems svetainės elementams sukurti. Tai galite padaryti ant popieriaus ir nuskenuoti arba naudoti pasirinktą programinę įrangą, tačiau būtinai rankiniu būdu parašykite HTML žymėjimą.
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai                                                                            | Patenkinamai                                                                    | Reikia tobulinti                                                                  |
+| ---------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|            | Tinklaraščio maketas vizualiai atvaizduotas su bent 10 žymėjimo elementais         | Tinklaraščio maketas vizualiai atvaizduotas su maždaug 5 žymėjimo elementais    | Tinklaraščio maketas vizualiai atvaizduotas su daugiausia 3 žymėjimo elementais   |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/3-terrarium/2-intro-to-css/README.md b/translations/lt/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..4215bf73
--- /dev/null
+++ b/translations/lt/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-28T11:51:04+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "lt"
+}
+-->
+# Terariumo projektas 2 dalis: Įvadas į CSS
+
+![Įvadas į CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.lt.png)
+> Sketchnote sukūrė [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Klausimynas prieš paskaitą
+
+[Klausimynas prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Įvadas
+
+CSS, arba Cascading Style Sheets, išsprendžia svarbią interneto svetainių kūrimo problemą: kaip padaryti, kad jūsų svetainė atrodytų gražiai. Programėlių stiliavimas padaro jas patogesnes naudoti ir vizualiai patrauklesnes; taip pat CSS leidžia kurti prisitaikantį dizainą (Responsive Web Design, RWD), kuris užtikrina, kad jūsų programėlės atrodys gerai nepriklausomai nuo ekrano dydžio. CSS nėra tik apie išvaizdą – specifikacijoje yra animacijos ir transformacijos, kurios leidžia kurti sudėtingas sąveikas jūsų programėlėse. CSS darbo grupė palaiko dabartines CSS specifikacijas; jų darbą galite sekti [World Wide Web Consortium svetainėje](https://www.w3.org/Style/CSS/members).
+
+> Pastaba: CSS yra nuolat besivystanti kalba, kaip ir visa kita internete, ir ne visi naršyklės palaiko naujausias specifikacijos dalis. Visada patikrinkite savo įgyvendinimus naudodamiesi [CanIUse.com](https://caniuse.com).
+
+Šioje pamokoje pridėsime stilių prie mūsų internetinio terariumo ir sužinosime daugiau apie kelias CSS sąvokas: kaskadą, paveldėjimą, selektorių naudojimą, pozicionavimą ir CSS naudojimą maketams kurti. Šio proceso metu išdėstysime terariumą ir sukursime patį terariumą.
+
+### Reikalavimai
+
+Jūsų terariumo HTML turėtų būti jau sukurtas ir paruoštas stiliavimui.
+
+> Peržiūrėkite vaizdo įrašą
+
+> 
+> [![Git ir GitHub pagrindų vaizdo įrašas](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Užduotis
+
+Savo terariumo aplanke sukurkite naują failą pavadinimu `style.css`. Importuokite šį failą į `<head>` sekciją:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## Kaskada
+
+Cascading Style Sheets remiasi idėja, kad stiliai „kaskaduoja“, todėl stiliaus taikymas yra valdomas pagal jo prioritetą. Svetainės autoriaus nustatyti stiliai turi prioritetą prieš naršyklės nustatytus stilius. „Inline“ stiliai turi prioritetą prieš išoriniame stiliaus faile nustatytus stilius.
+
+### Užduotis
+
+Pridėkite „inline“ stilių „color: red“ prie savo `<h1>` žymos:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Tada pridėkite šį kodą į savo `style.css` failą:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Kokia spalva rodoma jūsų internetinėje programėlėje? Kodėl? Ar galite rasti būdą, kaip perrašyti stilius? Kada norėtumėte tai padaryti arba kodėl ne?
+
+---
+
+## Paveldėjimas
+
+Stiliai yra paveldimi iš protėvio stiliaus į palikuonį, todėl įdėtieji elementai paveldi savo tėvų stilius.
+
+### Užduotis
+
+Nustatykite kūno (`body`) šriftą ir patikrinkite, ar įdėto elemento šriftas paveldėtas:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Atidarykite savo naršyklės konsolę „Elements“ skirtuke ir stebėkite H1 šriftą. Jis paveldi savo šriftą iš kūno, kaip nurodyta naršyklėje:
+
+![paveldėtas šriftas](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.lt.png)
+
+✅ Ar galite padaryti, kad įdėtasis stilius paveldėtų kitą savybę?
+
+---
+
+## CSS selektoriai
+
+### Žymos
+
+Iki šiol jūsų `style.css` faile buvo stiliuotos tik kelios žymos, todėl programėlė atrodo gana keistai:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Šis žymos stiliavimo būdas leidžia jums valdyti unikalius elementus, tačiau jums reikia valdyti daugelio augalų stilius jūsų terariume. Tam reikia naudoti CSS selektorius.
+
+### Id
+
+Pridėkite šiek tiek stiliaus, kad išdėstytumėte kairįjį ir dešinįjį konteinerius. Kadangi yra tik vienas kairysis ir vienas dešinysis konteineris, jie žymimi id HTML žymose. Norėdami juos stiliuoti, naudokite `#`:
+
+```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;
+}
+```
+
+Čia jūs išdėstėte šiuos konteinerius absoliučiai pozicijai ekrano kairėje ir dešinėje pusėse, o jų plotį nustatėte procentais, kad jie galėtų prisitaikyti prie mažų mobiliųjų ekranų.
+
+✅ Šis kodas yra gana pasikartojantis, todėl neatitinka „DRY“ (Don't Repeat Yourself) principo; ar galite rasti geresnį būdą stiliuoti šiuos id, galbūt naudojant id ir klasę? Jums reikės pakeisti HTML žymas ir perrašyti CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Klasės
+
+Ankstesniame pavyzdyje jūs stiliavote du unikalius elementus ekrane. Jei norite, kad stiliai būtų taikomi daugeliui elementų ekrane, galite naudoti CSS klases. Taip išdėstykite augalus kairiajame ir dešiniajame konteineriuose.
+
+Atkreipkite dėmesį, kad kiekvienas augalas HTML žymose turi id ir klasių derinį. Id čia naudojami JavaScript, kurį pridėsite vėliau, kad manipuliuotumėte terariumo augalų išdėstymu. Klasės, tačiau, suteikia visiems augalams tam tikrą stilių.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Pridėkite šį kodą į savo `style.css` failą:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Šiame fragmente pastebimas santykinio ir absoliutaus pozicionavimo derinys, kurį aptarsime kitame skyriuje. Atkreipkite dėmesį į aukščių valdymą procentais:
+
+Jūs nustatėte augalų laikiklio aukštį 13%, kad visi augalai būtų rodomi kiekviename vertikaliame konteineryje be slinkimo.
+
+Augalų laikiklis perkeliamas į kairę, kad augalai būtų labiau centruoti savo konteineryje. Vaizdai turi daug skaidraus fono, kad būtų lengviau juos perkelti, todėl reikia juos pastumti į kairę, kad geriau tilptų ekrane.
+
+Tada pats augalas gauna maksimalų plotį 150%. Tai leidžia jam sumažėti, kai naršyklė sumažinama. Pabandykite keisti naršyklės dydį; augalai lieka savo konteineriuose, bet sumažėja, kad tilptų.
+
+Taip pat pastebimas z-indekso naudojimas, kuris kontroliuoja elemento santykinį aukštį (kad augalai būtų virš konteinerio ir atrodytų, jog jie yra terariumo viduje).
+
+✅ Kodėl jums reikia tiek augalų laikiklio, tiek augalo CSS selektoriaus?
+
+## CSS pozicionavimas
+
+Pozicijų savybių (yra statinė, santykinė, fiksuota, absoliuti ir lipni pozicijos) derinimas gali būti šiek tiek sudėtingas, tačiau tinkamai atlikus, jis suteikia gerą elementų kontrolę jūsų puslapiuose.
+
+Absoliučiai pozicionuoti elementai yra pozicionuojami pagal artimiausią pozicionuotą protėvį, o jei tokio nėra, jie pozicionuojami pagal dokumento kūną.
+
+Santykiniai pozicionuoti elementai yra pozicionuojami pagal CSS nurodymus, kaip juos perkelti nuo pradinės pozicijos.
+
+Mūsų pavyzdyje `plant-holder` yra santykinės pozicijos elementas, kuris yra pozicionuojamas absoliučios pozicijos konteineryje. Rezultatas yra toks, kad šoniniai konteineriai yra pritvirtinti kairėje ir dešinėje, o `plant-holder` yra įdėtas, prisitaikydamas šoniniuose konteineriuose, suteikdamas vietos augalams išdėstyti vertikaliai.
+
+> Pats `plant` taip pat turi absoliučią poziciją, kuri yra būtina, kad jis būtų perkeliamas, kaip sužinosite kitoje pamokoje.
+
+✅ Eksperimentuokite, keisdami šoninių konteinerių ir `plant-holder` pozicijų tipus. Kas nutinka?
+
+## CSS maketai
+
+Dabar panaudosite tai, ką išmokote, kad sukurtumėte patį terariumą, naudodami tik CSS!
+
+Pirmiausia stiliuokite `.terrarium` div vaikus kaip suapvalintą stačiakampį naudodami 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;
+}
+```
+
+Atkreipkite dėmesį į procentų naudojimą čia. Jei sumažinsite naršyklės dydį, pamatysite, kaip stiklainis taip pat keičiasi. Taip pat atkreipkite dėmesį į stiklainio elementų pločio ir aukščio procentus bei tai, kaip kiekvienas elementas yra absoliučiai pozicionuojamas centre, pritvirtintas prie ekrano apačios.
+
+Mes taip pat naudojame `rem` kraštų spinduliui, kuris yra šrifto dydžio santykinis ilgis. Daugiau apie šį santykinį matavimo tipą skaitykite [CSS specifikacijoje](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Pabandykite pakeisti stiklainio spalvas ir skaidrumą, palyginti su žemės spalvomis. Kas nutinka? Kodėl?
+
+---
+
+## 🚀Iššūkis
+
+Pridėkite „burbulo“ blizgesį stiklainio kairiajame apatiniame kampe, kad jis atrodytų labiau stiklinis. Jūs stiliuosite `.jar-glossy-long` ir `.jar-glossy-short`, kad jie atrodytų kaip atspindėtas blizgesys. Štai kaip tai turėtų atrodyti:
+
+![baigtas terariumas](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.lt.png)
+
+Norėdami užbaigti klausimyną po paskaitos, peržiūrėkite šį mokymosi modulį: [Stiliuokite savo HTML programėlę naudodami CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Klausimynas po paskaitos
+
+[Klausimynas po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Apžvalga ir savarankiškas mokymasis
+
+CSS atrodo apgaulingai paprasta, tačiau yra daug iššūkių, kai reikia tobulai stiliuoti programėlę visoms naršyklėms ir visiems ekrano dydžiams. CSS-Grid ir Flexbox yra įrankiai, sukurti tam, kad darbas būtų šiek tiek struktūriškesnis ir patikimesnis. Sužinokite apie šiuos įrankius žaisdami [Flexbox Froggy](https://flexboxfroggy.com/) ir [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Užduotis
+
+[CSS refaktorizavimas](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/3-terrarium/2-intro-to-css/assignment.md b/translations/lt/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..0e0ba3d7
--- /dev/null
+++ b/translations/lt/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-28T11:51:58+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "lt"
+}
+-->
+# CSS Refaktorizavimas
+
+## Instrukcijos
+
+Pakeiskite terariumo stilių naudodami Flexbox arba CSS Grid ir padarykite ekrano nuotraukas, kad parodytumėte, jog išbandėte jį keliuose naršyklėse. Gali prireikti pakeisti žymėjimą, todėl sukurkite naują programos versiją su meno kūriniu, pritaikytu jūsų refaktorizavimui. Nesijaudinkite dėl elementų vilkimo funkcionalumo; šiuo metu refaktorizuokite tik HTML ir CSS.
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai atlikta                                                | Pakankamai gerai              | Reikia patobulinimų                  |
+| ---------- | -------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
+|            | Pateiktas visiškai naujai perstilizuotas terariumas naudojant Flexbox arba CSS Grid | Perstilizuota keletas elementų | Nepavyko perstilizuoti terariumo    |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/lt/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..a4e84431
--- /dev/null
+++ b/translations/lt/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-28T11:52:59+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "lt"
+}
+-->
+# Terariumo projektas 3 dalis: DOM manipuliacija ir uždara funkcija
+
+![DOM ir uždara funkcija](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.lt.png)
+> Sketchnote sukūrė [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Prieš paskaitą: testas
+
+[Prieš paskaitą: testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Įvadas
+
+DOM manipuliacija, arba "Dokumento Objektų Modelis", yra pagrindinis interneto kūrimo aspektas. Pasak [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "Dokumento Objektų Modelis (DOM) yra duomenų reprezentacija objektų, sudarančių dokumento struktūrą ir turinį internete." DOM manipuliacijos iššūkiai dažnai paskatino naudoti JavaScript karkasus vietoj gryno JavaScript, kad būtų lengviau valdyti DOM, tačiau mes susitvarkysime patys!
+
+Be to, ši pamoka supažindins su [JavaScript uždara funkcija](https://developer.mozilla.org/docs/Web/JavaScript/Closures), kurią galite įsivaizduoti kaip funkciją, apgaubtą kita funkcija, kad vidinė funkcija turėtų prieigą prie išorinės funkcijos srities.
+
+> JavaScript uždaros funkcijos yra plati ir sudėtinga tema. Ši pamoka paliečia pagrindinę idėją, kad šiame terariumo kode rasite uždarą funkciją: vidinę funkciją ir išorinę funkciją, sukonstruotas taip, kad vidinė funkcija galėtų pasiekti išorinės funkcijos sritį. Daugiau informacijos apie tai, kaip tai veikia, rasite [išsamioje dokumentacijoje](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Mes naudosime uždarą funkciją, kad manipuliuotume DOM.
+
+Įsivaizduokite DOM kaip medį, kuris reprezentuoja visus būdus, kaip galima manipuliuoti interneto puslapio dokumentu. Buvo sukurti įvairūs API (Programų Sąsajos), kad programuotojai, naudodami savo pasirinktą programavimo kalbą, galėtų pasiekti DOM ir jį redaguoti, keisti, pertvarkyti bei kitaip valdyti.
+
+![DOM medžio reprezentacija](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.lt.png)
+
+> DOM ir HTML žymėjimo, kuris jį nurodo, reprezentacija. Sukūrė [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+Šioje pamokoje užbaigsime interaktyvų terariumo projektą, sukurdami JavaScript kodą, kuris leis vartotojui manipuliuoti augalais puslapyje.
+
+### Būtinos žinios
+
+Jūs turėtumėte būti sukūrę HTML ir CSS savo terariumui. Pamokos pabaigoje galėsite perkelti augalus į terariumą ir iš jo, juos vilkdami.
+
+### Užduotis
+
+Savo terariumo aplanke sukurkite naują failą, pavadintą `script.js`. Importuokite šį failą į `<head>` sekciją:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Pastaba: naudokite `defer`, kai importuojate išorinį JavaScript failą į HTML failą, kad JavaScript būtų vykdomas tik po to, kai HTML failas bus visiškai įkeltas. Taip pat galite naudoti atributą `async`, kuris leidžia skriptui vykdyti, kol HTML failas yra analizuojamas, tačiau mūsų atveju svarbu, kad HTML elementai būtų visiškai prieinami vilkimui prieš leidžiant vykdyti vilkimo skriptą.
+---
+
+## DOM elementai
+
+Pirmiausia turite sukurti nuorodas į elementus, kuriuos norite manipuliuoti DOM. Mūsų atveju tai yra 14 augalų, šiuo metu esančių šoninėse juostose.
+
+### Užduotis
+
+```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'));
+```
+
+Kas čia vyksta? Jūs nurodote dokumentą ir ieškote jo DOM elemento su konkrečiu Id. Prisiminkite, kad pirmoje HTML pamokoje kiekvienam augalo paveikslėliui priskyrėte individualius Id (`id="plant1"`)? Dabar pasinaudosite šiuo darbu. Identifikavę kiekvieną elementą, perduodate jį funkcijai `dragElement`, kurią netrukus sukursite. Taigi, HTML elementas dabar yra paruoštas vilkimui arba netrukus bus.
+
+✅ Kodėl mes nurodome elementus pagal Id? Kodėl ne pagal jų CSS klasę? Galite grįžti prie ankstesnės pamokos apie CSS, kad atsakytumėte į šį klausimą.
+
+---
+
+## Uždara funkcija
+
+Dabar esate pasiruošę sukurti `dragElement` uždarą funkciją, kuri yra išorinė funkcija, apgaubianti vidinę funkciją ar funkcijas (mūsų atveju turėsime tris).
+
+Uždaros funkcijos yra naudingos, kai viena ar daugiau funkcijų turi prieigą prie išorinės funkcijos srities. Štai pavyzdys:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+Šiame pavyzdyje funkcija `displayCandy` apgaubia funkciją, kuri įterpia naują saldainių tipą į masyvą, kuris jau egzistuoja funkcijoje. Jei paleistumėte šį kodą, masyvas `candy` būtų neapibrėžtas, nes jis yra vietinis kintamasis (vietinis uždarai funkcijai).
+
+✅ Kaip galite padaryti, kad masyvas `candy` būtų prieinamas? Pabandykite perkelti jį už uždaros funkcijos ribų. Tokiu būdu masyvas taps globalus, o ne liks prieinamas tik uždaros funkcijos vietinei sričiai.
+
+### Užduotis
+
+Po elementų deklaracijų faile `script.js` sukurkite funkciją:
+
+```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` gauna savo `terrariumElement` objektą iš deklaracijų skripto viršuje. Tada jūs nustatote keletą vietinių pozicijų kaip `0` objektui, perduotam funkcijai. Tai yra vietiniai kintamieji, kurie bus manipuliuojami kiekvienam elementui, kai pridėsite vilkimo ir numetimo funkcionalumą uždaroje funkcijoje. Terariumas bus užpildytas šiais vilktais elementais, todėl programa turi sekti, kur jie yra patalpinti.
+
+Be to, `terrariumElement`, perduotas šiai funkcijai, priskiriamas `pointerdown` įvykis, kuris yra dalis [web API](https://developer.mozilla.org/docs/Web/API), sukurtų padėti valdyti DOM. `onpointerdown` įvykis įvyksta, kai paspaudžiamas mygtukas arba, mūsų atveju, paliečiamas vilkimo elementas. Šis įvykio tvarkytuvas veikia tiek [interneto, tiek mobiliuosiuose naršyklėse](https://caniuse.com/?search=onpointerdown), su keliomis išimtimis.
+
+✅ [Įvykio tvarkytuvas `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) turi daug didesnį palaikymą įvairiose naršyklėse; kodėl jo nenaudotumėte čia? Pagalvokite apie tikslų ekrano sąveikos tipą, kurį bandote sukurti.
+
+---
+
+## Pointerdrag funkcija
+
+`terrariumElement` yra pasiruošęs būti vilkamas; kai įvyksta `onpointerdown` įvykis, funkcija `pointerDrag` yra iškviečiama. Pridėkite šią funkciją tiesiai po šia eilute: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Užduotis 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Įvyksta keli dalykai. Pirma, jūs užkertate kelią numatytiesiems įvykiams, kurie paprastai įvyksta `pointerdown` metu, naudodami `e.preventDefault();`. Taip jūs turite daugiau kontrolės interfeiso elgesio atžvilgiu.
+
+> Grįžkite prie šios eilutės, kai visiškai sukursite skripto failą, ir pabandykite be `e.preventDefault()` - kas nutinka?
+
+Antra, atidarykite `index.html` naršyklės lange ir patikrinkite interfeisą. Kai spustelėsite augalą, galėsite pamatyti, kaip užfiksuojamas 'e' įvykis. Išanalizuokite įvykį, kad pamatytumėte, kiek informacijos surenkama vieno `pointerdown` įvykio metu!  
+
+Toliau atkreipkite dėmesį, kaip vietiniai kintamieji `pos3` ir `pos4` nustatomi kaip `e.clientX`. Šias `e` reikšmes galite rasti inspektavimo lange. Šios reikšmės užfiksuoja augalo x ir y koordinates tuo momentu, kai jį spustelėjate arba paliečiate. Jums reikės detalaus valdymo augalų elgesiui, kai juos spustelėsite ir vilksite, todėl sekate jų koordinates.
+
+✅ Ar tampa aiškiau, kodėl visa ši programa yra sukurta naudojant vieną didelę uždarą funkciją? Jei ne, kaip išlaikytumėte sritį kiekvienam iš 14 vilkimo augalų?
+
+Užbaikite pradinę funkciją pridėdami dar du manipuliavimus pointer įvykiais po `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Dabar jūs nurodote, kad norite, jog augalas būtų vilkamas kartu su pointer, kai jį judinate, ir kad vilkimo gestas sustotų, kai nustojate pasirinkti augalą. `onpointermove` ir `onpointerup` yra tos pačios API dalys kaip `onpointerdown`. Interfeisas dabar mes klaidas, nes dar neapibrėžėte funkcijų `elementDrag` ir `stopElementDrag`, todėl sukurkite jas toliau.
+
+## Funkcijos elementDrag ir stopElementDrag
+
+Užbaigsite savo uždarą funkciją pridėdami dar dvi vidines funkcijas, kurios tvarkys, kas nutinka, kai vilkote augalą ir nustojate jį vilkti. Norimas elgesys yra toks, kad bet kuriuo metu galėtumėte vilkti bet kurį augalą ir patalpinti jį bet kur ekrane. Šis interfeisas yra gana neapibrėžtas (pavyzdžiui, nėra numetimo zonos), kad galėtumėte sukurti savo terariumą taip, kaip norite, pridėdami, pašalindami ir perstatydami augalus.
+
+### Užduotis
+
+Pridėkite funkciją `elementDrag` tiesiai po `pointerDrag` uždarymo skliaustu:
+
+```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';
+}
+```
+Šioje funkcijoje jūs daug redaguojate pradinės pozicijos 1-4, kurias nustatėte kaip vietinius kintamuosius išorinėje funkcijoje. Kas čia vyksta?
+
+Kai vilkote, jūs iš naujo priskiriate `pos1`, padarydami ją lygią `pos3` (kurią anksčiau nustatėte kaip `e.clientX`) minus dabartinę `e.clientX` reikšmę. Panaši operacija atliekama su `pos2`. Tada jūs iš naujo nustatote `pos3` ir `pos4` į naujas elemento X ir Y koordinates. Šiuos pokyčius galite stebėti konsolėje, kai vilkote. Tada jūs manipuliuojate augalo CSS stiliumi, kad nustatytumėte jo naują poziciją, remdamiesi naujomis `pos1` ir `pos2` pozicijomis, apskaičiuodami augalo viršutinę ir kairę X ir Y koordinates, remdamiesi jo poslinkiu su šiomis naujomis pozicijomis.
+
+> `offsetTop` ir `offsetLeft` yra CSS savybės, kurios nustato elemento poziciją, remiantis jo tėviniu elementu; tėvinis elementas gali būti bet kuris elementas, kuris nėra pozicionuotas kaip `static`. 
+
+Visa ši pozicijų perskaičiavimo operacija leidžia jums tiksliai sureguliuoti terariumo ir jo augalų elgesį.
+
+### Užduotis 
+
+Paskutinė užduotis, kad užbaigtumėte interfeisą, yra pridėti funkciją `stopElementDrag` po `elementDrag` uždarymo skliaustu:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Ši maža funkcija iš naujo nustato `onpointerup` ir `onpointermove` įvykius, kad galėtumėte arba iš naujo pradėti augalo vilkimo procesą, pradėdami jį vilkti iš naujo, arba pradėti vilkti naują augalą.
+
+✅ Kas nutinka, jei nenustatote šių įvykių kaip null?
+
+Dabar jūs užbaigėte savo projektą!
+
+🥇Sveikiname! Jūs užbaigėte savo gražų terariumą! ![užbaigtas terariumas](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.lt.png)
+
+---
+
+## 🚀Iššūkis
+
+Pridėkite naują įvykio tvarkytuvą savo uždaroje funkcijoje, kad augalai atliktų kažką daugiau; pavyzdžiui, dukart spustelėkite augalą, kad jis būtų perkeltas į priekį. Būkite kūrybingi!
+
+## Po paskaitos: testas
+
+[Po paskaitos: testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Nors elementų vilkimas ekrane atrodo trivialus, yra daug būdų tai padaryti ir daug spąstų, priklausomai nuo norimo efekto. Iš tiesų, yra visa [vilkimo ir numetimo API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API), kurią galite išbandyti. Mes jos nenaudojome šiame modulyje, nes norimas efektas buvo šiek tiek kitoks, tačiau išbandykite šią API savo projekte ir pažiūrėkite, ką galite pasiekti.
+
+Daugiau informacijos apie pointer įvykius rasite [W3C dokumentacijoje](https://www.w3.org/TR/pointerevents1/) ir [MDN web dokumentacijoje](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Visada patikrinkite naršyklių galimybes naudodami [CanIUse.com](https://caniuse.com/).
+
+## Užduotis
+
+[Padirbėkite šiek tiek daugiau su DOM](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipiame dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudotis profesionalių vertėjų paslaugomis. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/lt/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..ba5922ad
--- /dev/null
+++ b/translations/lt/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-28T11:53:51+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Darbas su DOM
+
+## Instrukcijos
+
+Išsamiau susipažinkite su DOM, „įsisavindami“ DOM elementą. Apsilankykite MDN [DOM sąsajų sąraše](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) ir pasirinkite vieną. Suraskite, kaip jis naudojamas interneto svetainėje, ir parašykite paaiškinimą, kaip jis yra taikomas.
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai                                      | Patenkinamai                                    | Reikia patobulinimų     |
+| ---------- | -------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|            | Pateiktas parašytas paaiškinimas su pavyzdžiu | Pateiktas parašytas paaiškinimas be pavyzdžio   | Paaiškinimas nepateiktas |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/3-terrarium/README.md b/translations/lt/3-terrarium/README.md
new file mode 100644
index 00000000..8c7a5b29
--- /dev/null
+++ b/translations/lt/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-28T11:48:35+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "lt"
+}
+-->
+# Mano Terariumas: Projektas mokytis apie HTML, CSS ir DOM manipuliavimą naudojant JavaScript 🌵🌱
+
+Maža vilkimo ir numetimo kodo meditacija. Su šiek tiek HTML, JS ir CSS galėsite sukurti internetinę sąsają, ją stilizuoti ir net pridėti įvairių pasirinktų sąveikų.
+
+![mano terariumas](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.lt.png)
+
+# Pamokos
+
+1. [Įvadas į HTML](./1-intro-to-html/README.md)
+2. [Įvadas į CSS](./2-intro-to-css/README.md)
+3. [Įvadas į DOM ir JS uždarymus](./3-intro-to-DOM-and-closures/README.md)
+
+## Kreditas
+
+Parašyta su ♥️ [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terariumas, sukurtas naudojant CSS, buvo įkvėptas Jakub Mandra stiklinio indo [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Piešiniai ranka nupiešti [Jen Looper](http://jenlooper.com) naudojant Procreate.
+
+## Publikuokite savo Terariumą
+
+Galite publikuoti arba paskelbti savo terariumą internete naudodami Azure Static Web Apps.
+
+1. Fork'inkite šį repozitoriją
+
+2. Paspauskite šį mygtuką
+
+[![Publikuoti į Azure mygtukas](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Užpildykite vedlio nurodymus, kurdami savo programą. Įsitikinkite, kad programos šaknis nustatyta kaip `/solution` arba jūsų kodo bazės šaknis. Šioje programoje nėra API, todėl dėl to nesijaudinkite. Jūsų fork'intoje repozitorijoje bus sukurtas github aplankas, kuris padės Azure Static Web Apps kūrimo paslaugoms sukurti ir publikuoti jūsų programą nauju URL.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/3-terrarium/solution/README.md b/translations/lt/3-terrarium/solution/README.md
new file mode 100644
index 00000000..6da950a6
--- /dev/null
+++ b/translations/lt/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-28T11:50:25+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "lt"
+}
+-->
+# Mano Terariumas: Projektas mokytis apie HTML, CSS ir DOM manipuliavimą naudojant JavaScript 🌵🌱
+
+Maža vilkimo ir numetimo kodavimo meditacija. Naudodami šiek tiek HTML, JS ir CSS, galite sukurti internetinę sąsają, ją stilizuoti ir pridėti interaktyvumo.
+
+![mano terariumas](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.lt.png)
+
+## Kreditas
+
+Sukurta su ♥️ [Jen Looper](https://www.twitter.com/jenlooper)
+
+Terariumas, sukurtas naudojant CSS, buvo įkvėptas Jakubo Mandros stiklinio stiklainio [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Meno kūriniai buvo ranka piešti [Jen Looper](http://jenlooper.com) naudojant Procreate.
+
+## Publikuokite savo Terariumą
+
+Galite publikuoti arba paskelbti savo terariumą internete naudodami Azure Static Web Apps.
+
+1. Fork'inkite šį repozitoriją
+
+2. Paspauskite šį mygtuką
+
+[![Publikuoti į Azure mygtukas](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Sekite vedlio nurodymus, kurdami savo programėlę. Įsitikinkite, kad nustatėte programėlės šaknį kaip `/solution` arba savo kodo bazės šaknį. Šioje programėlėje nėra API, todėl dėl to nesijaudinkite. Fork'intoje repozitorijoje bus sukurta `.github` aplankas, kuris padės Azure Static Web Apps kūrimo paslaugai sukurti ir publikuoti jūsų programėlę nauju URL adresu.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/4-typing-game/README.md b/translations/lt/4-typing-game/README.md
new file mode 100644
index 00000000..16364b42
--- /dev/null
+++ b/translations/lt/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-28T11:56:44+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "lt"
+}
+-->
+# Įvykiais pagrįstas programavimas - Sukurkite rašymo žaidimą
+
+## Įvadas
+
+Rašymas yra vienas iš labiausiai neįvertintų programuotojo įgūdžių. Gebėjimas greitai perkelti mintis iš galvos į redaktorių leidžia kūrybiškumui laisvai tekėti. Vienas geriausių būdų mokytis – žaisti žaidimą!
+
+> Taigi, sukurkime rašymo žaidimą!
+
+Jūs naudosite iki šiol įgytas JavaScript, HTML ir CSS žinias, kad sukurtumėte rašymo žaidimą. Žaidimas pateiks žaidėjui atsitiktinę citatą (mes naudojame [Šerloko Holmso](https://en.wikipedia.org/wiki/Sherlock_Holmes) citatas) ir matuos, kiek laiko žaidėjas užtrunka, kad ją tiksliai perrašytų. Jūs naudosite iki šiol įgytas JavaScript, HTML ir CSS žinias, kad sukurtumėte rašymo žaidimą.
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## Reikalavimai
+
+Ši pamoka daro prielaidą, kad esate susipažinę su šiais dalykais:
+
+- Teksto įvesties ir mygtukų valdiklių kūrimas
+- CSS ir stilių nustatymas naudojant klases
+- JavaScript pagrindai
+  - Masyvo kūrimas
+  - Atsitiktinio skaičiaus generavimas
+  - Dabartinio laiko gavimas
+
+## Pamoka
+
+[Rašymo žaidimo kūrimas naudojant įvykiais pagrįstą programavimą](./typing-game/README.md)
+
+## Kreditas
+
+Parašyta su ♥️ [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/4-typing-game/solution/README.md b/translations/lt/4-typing-game/solution/README.md
new file mode 100644
index 00000000..522d8cef
--- /dev/null
+++ b/translations/lt/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T11:58:44+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "lt"
+}
+-->
+Tai yra vietos rezervacija, palikta tuščia sąmoningai
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/4-typing-game/typing-game/README.md b/translations/lt/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..7cc31807
--- /dev/null
+++ b/translations/lt/4-typing-game/typing-game/README.md
@@ -0,0 +1,341 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-28T11:57:32+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkime žaidimą naudodami įvykius
+
+## Klausimynas prieš paskaitą
+
+[Klausimynas prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Įvykiais pagrįstas programavimas
+
+Kuriant naršyklės pagrindu veikiančią programą, mes suteikiame vartotojui grafinę vartotojo sąsają (GUI), kurią jis naudoja sąveikai su mūsų sukurtu produktu. Dažniausias būdas sąveikauti su naršykle yra spustelėjimas ir rašymas įvairiuose elementuose. Tačiau kaip kūrėjai mes susiduriame su iššūkiu – mes nežinome, kada vartotojas atliks šiuos veiksmus!
+
+[Įvykiais pagrįstas programavimas](https://en.wikipedia.org/wiki/Event-driven_programming) – tai programavimo tipas, kurį turime naudoti kurdami GUI. Jei šiek tiek išskaidysime šią frazę, pamatysime, kad pagrindinis žodis čia yra **įvykis**. [Įvykis](https://www.merriam-webster.com/dictionary/event), pagal Merriam-Webster, apibrėžiamas kaip „kažkas, kas įvyksta“. Tai puikiai apibūdina mūsų situaciją. Mes žinome, kad kažkas įvyks, dėl ko norėsime vykdyti tam tikrą kodą, tačiau nežinome, kada tai įvyks.
+
+Norėdami pažymėti kodo dalį, kurią norime vykdyti, sukuriame funkciją. Kalbant apie [procedūrinį programavimą](https://en.wikipedia.org/wiki/Procedural_programming), funkcijos vykdomos tam tikra tvarka. Tas pats galioja ir įvykiais pagrįstam programavimui. Skirtumas yra **kaip** funkcijos bus iškviečiamos.
+
+Norėdami valdyti įvykius (mygtuko paspaudimą, rašymą ir pan.), registruojame **įvykių klausytojus**. Įvykio klausytojas – tai funkcija, kuri laukia, kol įvyks įvykis, ir vykdo kodą atsakydama į jį. Įvykių klausytojai gali atnaujinti vartotojo sąsają, siųsti užklausas serveriui ar atlikti kitus veiksmus, reaguodami į vartotojo veiksmus. Įvykio klausytoją pridedame naudodami [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) ir pateikdami funkciją, kurią reikia vykdyti.
+
+> **NOTE:** Verta paminėti, kad yra daugybė būdų sukurti įvykių klausytojus. Galite naudoti anonimines funkcijas arba sukurti pavadintas. Taip pat galite naudoti įvairias trumpesnes alternatyvas, pvz., nustatyti `click` savybę arba naudoti `addEventListener`. Mūsų užduotyje mes sutelksime dėmesį į `addEventListener` ir anonimines funkcijas, nes tai yra vienas dažniausių metodų, kuriuos naudoja interneto kūrėjai. Tai taip pat yra lankstiausias būdas, nes `addEventListener` veikia su visais įvykiais, o įvykio pavadinimą galima pateikti kaip parametrą.
+
+### Dažniausi įvykiai
+
+Yra [dešimtys įvykių](https://developer.mozilla.org/docs/Web/Events), kuriuos galite stebėti kurdami programą. Iš esmės bet koks vartotojo veiksmas puslapyje sukelia įvykį, suteikdamas jums daug galimybių užtikrinti, kad vartotojas gautų norimą patirtį. Laimei, dažniausiai jums reikės tik kelių įvykių. Štai keletas dažniausiai naudojamų (įskaitant du, kuriuos naudosime kurdami savo žaidimą):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Vartotojas spustelėjo kažką, paprastai mygtuką ar nuorodą
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Vartotojas spustelėjo dešinįjį pelės mygtuką
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Vartotojas pažymėjo tekstą
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Vartotojas įvedė tekstą
+
+## Žaidimo kūrimas
+
+Mes sukursime žaidimą, kad išnagrinėtume, kaip veikia įvykiai JavaScript kalboje. Mūsų žaidimas išbandys žaidėjo rašymo įgūdžius – vieną iš labiausiai neįvertintų įgūdžių, kuriuos turėtų turėti visi kūrėjai. Visi turėtume praktikuoti savo rašymą! Bendras žaidimo veikimo principas atrodys taip:
+
+- Žaidėjas spustelėja pradžios mygtuką ir gauna citatą, kurią reikia perrašyti
+- Žaidėjas kuo greičiau perrašo citatą teksto laukelyje
+  - Kai kiekvienas žodis užbaigiamas, kitas yra paryškinamas
+  - Jei žaidėjas padaro klaidą, teksto laukelis nusidažo raudonai
+  - Kai žaidėjas užbaigia citatą, rodoma sėkmės žinutė su praėjusiu laiku
+
+Sukurkime savo žaidimą ir sužinokime apie įvykius!
+
+### Failų struktūra
+
+Mums reikės trijų failų: **index.html**, **script.js** ir **style.css**. Pradėkime juos kurti, kad palengvintume sau darbą.
+
+- Sukurkite naują aplanką savo darbui, atidarydami konsolę arba terminalą ir įvesdami šią komandą:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Atidarykite Visual Studio Code
+
+```bash
+code .
+```
+
+- Pridėkite tris failus į aplanką Visual Studio Code su šiais pavadinimais:
+  - index.html
+  - script.js
+  - style.css
+
+## Sukurkite vartotojo sąsają
+
+Jei išnagrinėsime reikalavimus, žinome, kad mums reikės kelių elementų mūsų HTML puslapyje. Tai šiek tiek primena receptą, kuriame mums reikia tam tikrų ingredientų:
+
+- Vietos, kur būtų rodoma citata, kurią vartotojas turi perrašyti
+- Vietos, kur būtų rodomos žinutės, pvz., sėkmės žinutė
+- Teksto laukelio rašymui
+- Pradžios mygtuko
+
+Kiekvienam iš šių elementų reikės ID, kad galėtume su jais dirbti savo JavaScript kode. Taip pat pridėsime nuorodas į CSS ir JavaScript failus, kuriuos sukursime.
+
+Sukurkite naują failą pavadinimu **index.html**. Pridėkite šį HTML kodą:
+
+```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>
+```
+
+### Paleiskite programą
+
+Visada geriausia kurti iteratyviai, kad pamatytumėte, kaip viskas atrodo. Paleiskime savo programą. Yra puikus Visual Studio Code plėtinys, vadinamas [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), kuris tiek lokaliai talpins jūsų programą, tiek atnaujins naršyklę kiekvieną kartą, kai išsaugosite.
+
+- Įdiekite [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), sekdami nuorodą ir spustelėdami **Install**
+  - Naršyklė paragins atidaryti Visual Studio Code, o tada Visual Studio Code paragins atlikti diegimą
+  - Jei reikės, iš naujo paleiskite Visual Studio Code
+- Įdiegę, Visual Studio Code paspauskite Ctrl-Shift-P (arba Cmd-Shift-P), kad atidarytumėte komandų paletę
+- Įveskite **Live Server: Open with Live Server**
+  - Live Server pradės talpinti jūsų programą
+- Atidarykite naršyklę ir eikite į **https://localhost:5500**
+- Dabar turėtumėte matyti sukurtą puslapį!
+
+Pridėkime šiek tiek funkcionalumo.
+
+## Pridėkite CSS
+
+Sukūrę HTML, pridėkime CSS pagrindiniam stiliui. Turime paryškinti žodį, kurį žaidėjas turėtų rašyti, ir nuspalvinti teksto laukelį, jei tai, ką jis įvedė, yra neteisinga. Tai padarysime naudodami dvi klases.
+
+Sukurkite naują failą pavadinimu **style.css** ir pridėkite šį sintaksę.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ Kalbant apie CSS, galite išdėstyti savo puslapį taip, kaip jums patinka. Skirkite šiek tiek laiko ir padarykite puslapį patrauklesnį:
+
+- Pasirinkite kitą šriftą
+- Nuspalvinkite antraštes
+- Pakeiskite elementų dydį
+
+## JavaScript
+
+Sukūrę vartotojo sąsają, dabar sutelkime dėmesį į JavaScript, kuris suteiks logiką. Mes tai suskaidysime į kelis žingsnius:
+
+- [Sukurkite konstantas](../../../../4-typing-game/typing-game)
+- [Įvykio klausytojas žaidimo pradžiai](../../../../4-typing-game/typing-game)
+- [Įvykio klausytojas rašymui](../../../../4-typing-game/typing-game)
+
+Bet pirmiausia sukurkite naują failą pavadinimu **script.js**.
+
+### Sukurkite konstantas
+
+Mums reikės kelių elementų, kad palengvintume programavimą. Vėlgi, tai šiek tiek primena receptą, kuriame mums reikia tam tikrų ingredientų:
+
+- Masyvo su visų citatų sąrašu
+- Tuščio masyvo, kuriame bus saugomi visi dabartinės citatos žodžiai
+- Vietos, kurioje bus saugomas žodžio, kurį žaidėjas šiuo metu rašo, indeksas
+- Laiko, kada žaidėjas spustelėjo pradžią
+
+Taip pat norėsime nuorodų į vartotojo sąsajos elementus:
+
+- Teksto laukelis (**typed-value**)
+- Citatų rodymas (**quote**)
+- Žinutė (**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');
+```
+
+✅ Pridėkite daugiau citatų į savo žaidimą
+
+> **NOTE:** Mes galime gauti elementus bet kada kode naudodami `document.getElementById`. Kadangi reguliariai kreipsimės į šiuos elementus, vengsime klaidų su eilutėmis, naudodami konstantas. Tokie karkasai kaip [Vue.js](https://vuejs.org/) ar [React](https://reactjs.org/) gali padėti geriau valdyti kodo centralizavimą.
+
+Skirkite minutę ir pažiūrėkite vaizdo įrašą apie `const`, `let` ir `var` naudojimą.
+
+[![Kintamųjų tipai](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Kintamųjų tipai")
+
+> 🎥 Spustelėkite aukščiau esantį paveikslėlį, kad pamatytumėte vaizdo įrašą apie kintamuosius.
+
+### Pridėkite pradžios logiką
+
+Norėdami pradėti žaidimą, žaidėjas spustelės pradžios mygtuką. Žinoma, mes nežinome, kada jis tai padarys. Čia į pagalbą ateina [įvykio klausytojas](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). Įvykio klausytojas leis mums laukti, kol kažkas įvyks (įvykis), ir vykdyti kodą atsakant į tai. Mūsų atveju norime vykdyti kodą, kai vartotojas spustelėja pradžią.
+
+Kai vartotojas spustelėja **pradžią**, turime pasirinkti citatą, paruošti vartotojo sąsają ir nustatyti žodžio bei laiko sekimą. Žemiau pateiktas JavaScript kodas, kurį turite pridėti; aptarsime jį po kodo bloko.
+
+```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();
+});
+```
+
+Išskaidykime kodą!
+
+- Nustatome žodžių sekimą
+  - Naudodami [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) ir [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) atsitiktinai pasirenkame citatą iš `quotes` masyvo
+  - Konvertuojame `quote` į `words` masyvą, kad galėtume sekti žodį, kurį žaidėjas šiuo metu rašo
+  - `wordIndex` nustatome į 0, nes žaidėjas pradės nuo pirmojo žodžio
+- Paruošiame vartotojo sąsają
+  - Sukuriame `spanWords` masyvą, kuriame kiekvienas žodis yra `span` elemente
+    - Tai leis mums paryškinti žodį ekrane
+  - Naudojame `join`, kad sukurtume eilutę, kurią galime naudoti `quoteElement` `innerHTML` atnaujinimui
+    - Tai parodys citatą žaidėjui
+  - Nustatome pirmojo `span` elemento `className` į `highlight`, kad jis būtų paryškintas geltonai
+  - Išvalome `messageElement`, nustatydami `innerText` į `''`
+- Paruošiame teksto laukelį
+  - Išvalome dabartinę `typedValueElement` `value`
+  - Nustatome `focus` į `typedValueElement`
+- Pradedame laikmatį, iškviesdami `getTime`
+
+### Pridėkite rašymo logiką
+
+Kai žaidėjas rašo, bus iškeltas `input` įvykis. Šis įvykio klausytojas patikrins, ar žaidėjas teisingai rašo žodį, ir valdys žaidimo būseną. Grįžkite į **script.js** ir pridėkite šį kodą pabaigoje. Po to jį išskaidysime.
+
+```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';
+  }
+});
+```
+
+Išskaidykime kodą! Pradedame paimdami dabartinį žodį ir vertę, kurią žaidėjas iki šiol įvedė. Tada turime „krioklio“ logiką, kurioje tikriname, ar citata baigta, ar žodis baigtas, ar žodis teisingas, ar (galiausiai) yra klaida.
+
+- Citata baigta, jei `typedValue` yra lygi `currentWord`, o `wordIndex` yra lygus `words` `length` minus vienas
+  - Apskaičiuojame `elapsedTime`, atimdami `startTime` iš dabartinio laiko
+  - Padalijame `elapsedTime` iš 1 000, kad konvertuotume iš milisekundžių į sekundes
+  - Parodome sėkmės žinutę
+- Žodis baigtas, jei `typedValue` baigiasi tarpu (žodžio pabaiga) ir `typedValue` yra lygi `currentWord`
+  - Nustatome `typedElement` `value` į `''`, kad būtų galima rašyti kitą žodį
+  - Padidiname `wordIndex`, kad pereitume prie kito žodžio
+  - Pereiname per visus `quoteElement` `childNodes`, nustatydami `className` į `''`, kad grąžintume numatytąjį rodymą
+  - Nustatome dabartinio žodžio `className` į `highlight`, kad pažymėtume jį kaip kitą žodį, kurį reikia rašyti
+- Žodis šiuo metu rašomas teisingai (bet dar nebaigtas), jei `currentWord` prasideda `typedValue`
+  - Užtikriname, kad `typedValueElement` būtų rodomas kaip numatytasis, išvalydami `className`
+- Jei pasiekėme šią vietą, turime klaidą
+  - Nustatome `typedValueElement` `className` į `error`
+
+## Išbandykite savo programą
+
+Jūs pasiekėte pabaigą! Paskutinis žingsnis – užtikrinti, kad mūsų programa veikia. Išbandykite! Nesijaudinkite, jei yra klaidų; **visi kūrėjai** susiduria su klaidomis. Išnagrinėkite pranešimus ir derinkite, jei reikia.
+
+Spustelėkite **pradžią** ir pradėkite rašyti! Tai turėtų atrodyti š
+- Išsaugokite aukščiausius rezultatus naudodami [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Klausimynas po paskaitos
+
+[Klausimynas po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Peržiūra ir savarankiškas mokymasis
+
+Perskaitykite apie [visus įvykius](https://developer.mozilla.org/docs/Web/Events), kuriuos naršyklė suteikia kūrėjui, ir apsvarstykite scenarijus, kuriuose naudotumėte kiekvieną iš jų.
+
+## Užduotis
+
+[Sukurkite naują klaviatūros žaidimą](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipkite dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/4-typing-game/typing-game/assignment.md b/translations/lt/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..9238f5c8
--- /dev/null
+++ b/translations/lt/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-28T11:58:34+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite naują klaviatūros žaidimą
+
+## Instrukcijos
+
+Sukurkite nedidelį žaidimą, kuris naudoja klaviatūros įvykius užduotims atlikti. Tai gali būti kitokio tipo spausdinimo žaidimas arba meno tipo žaidimas, kuris piešia pikselius ekrane pagal klavišų paspaudimus. Būkite kūrybingi!
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikus                  | Tinkamas                 | Reikia patobulinimų |
+| ---------- | ----------------------- | ------------------------ | ------------------- |
+|            | Pateiktas pilnas žaidimas | Žaidimas yra labai minimalus | Žaidime yra klaidų |
+|            |                         |                          |                     |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/1-about-browsers/README.md b/translations/lt/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..aade541d
--- /dev/null
+++ b/translations/lt/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-28T11:23:39+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "lt"
+}
+-->
+# Naršyklės plėtinio projektas 1 dalis: Viskas apie naršykles
+
+![Naršyklės eskizas](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.lt.jpg)  
+> Eskizas sukurtas [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Klausimai prieš paskaitą
+
+[Klausimai prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Įvadas
+
+Naršyklės plėtiniai prideda papildomų funkcijų naršyklei. Tačiau prieš kuriant plėtinį, verta šiek tiek sužinoti, kaip naršyklės atlieka savo darbą.
+
+### Apie naršyklę
+
+Šioje pamokų serijoje išmoksite kurti naršyklės plėtinį, kuris veiks „Chrome“, „Firefox“ ir „Edge“ naršyklėse. Šioje dalyje sužinosite, kaip veikia naršyklės, ir sukursite naršyklės plėtinio struktūrą.
+
+Bet kas iš tikrųjų yra naršyklė? Tai programinė įranga, leidžianti galutiniam vartotojui pasiekti turinį iš serverio ir rodyti jį tinklalapiuose.
+
+✅ Šiek tiek istorijos: pirmoji naršyklė vadinosi „WorldWideWeb“ ir ją 1990 m. sukūrė seras Timotis Berners-Lee.
+
+![ankstyvosios naršyklės](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.lt.jpg)  
+> Kai kurios ankstyvosios naršyklės, šaltinis [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Kai vartotojas prisijungia prie interneto naudodamas URL (Uniform Resource Locator) adresą, paprastai per Hypertext Transfer Protocol su `http` arba `https` adresu, naršyklė bendrauja su žiniatinklio serveriu ir gauna tinklalapį.
+
+Šiuo metu naršyklės atvaizdavimo variklis rodo jį vartotojo įrenginyje, kuris gali būti mobilusis telefonas, stacionarus kompiuteris ar nešiojamasis kompiuteris.
+
+Naršyklės taip pat gali talpinti turinį, kad jo nereikėtų kiekvieną kartą gauti iš serverio. Jos gali įrašyti vartotojo naršymo istoriją, saugoti „sausainėlius“ (mažus duomenų fragmentus, kuriuose yra informacija apie vartotojo veiklą) ir dar daugiau.
+
+Labai svarbu prisiminti, kad naršyklės nėra vienodos! Kiekviena naršyklė turi savo privalumų ir trūkumų, o profesionalus žiniatinklio kūrėjas turi suprasti, kaip užtikrinti, kad tinklalapiai gerai veiktų įvairiose naršyklėse. Tai apima mažų ekranų, tokių kaip mobiliojo telefono, palaikymą, taip pat vartotojų, kurie yra neprisijungę, poreikius.
+
+Labai naudinga svetainė, kurią tikriausiai turėtumėte įtraukti į savo mėgstamos naršyklės žymes, yra [caniuse.com](https://www.caniuse.com). Kurdami tinklalapius, galite naudotis „caniuse“ palaikomų technologijų sąrašais, kad geriausiai palaikytumėte savo vartotojus.
+
+✅ Kaip galite sužinoti, kurios naršyklės yra populiariausios tarp jūsų svetainės vartotojų? Patikrinkite savo analizės duomenis – galite įdiegti įvairias analizės programas kaip savo žiniatinklio kūrimo proceso dalį, ir jos parodys, kurios naršyklės yra dažniausiai naudojamos.
+
+## Naršyklės plėtiniai
+
+Kodėl verta kurti naršyklės plėtinį? Tai patogus įrankis, kurį galima pridėti prie naršyklės, kai reikia greitai atlikti pasikartojančias užduotis. Pavyzdžiui, jei dažnai reikia tikrinti spalvas įvairiuose tinklalapiuose, galite įdiegti spalvų parinkiklio plėtinį. Jei sunku prisiminti slaptažodžius, galite naudoti slaptažodžių valdymo plėtinį.
+
+Naršyklės plėtinius taip pat smagu kurti. Jie paprastai atlieka ribotą skaičių užduočių, kurias atlieka labai gerai.
+
+✅ Kokie yra jūsų mėgstamiausi naršyklės plėtiniai? Kokias užduotis jie atlieka?
+
+### Plėtinių diegimas
+
+Prieš pradėdami kurti, pažvelkite į naršyklės plėtinio kūrimo ir diegimo procesą. Nors kiekviena naršyklė šiek tiek skiriasi, procesas „Chrome“ ir „Firefox“ yra panašus į šį pavyzdį „Edge“ naršyklėje:
+
+![ekrano nuotrauka iš Edge naršyklės, rodanti atidarytą edge://extensions puslapį ir nustatymų meniu](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.lt.png)
+
+> Pastaba: Įsitikinkite, kad įjungėte kūrėjo režimą ir leidote plėtinius iš kitų parduotuvių.
+
+Iš esmės procesas bus toks:
+
+- sukurkite savo plėtinį naudodami `npm run build`  
+- naršyklėje eikite į plėtinių skydelį naudodami mygtuką „Nustatymai ir daugiau“ (piktograma `...`) viršutiniame dešiniajame kampe  
+- jei tai naujas diegimas, pasirinkite `load unpacked`, kad įkeltumėte naują plėtinį iš jo kūrimo aplanko (mūsų atveju tai yra `/dist`)  
+- arba spustelėkite `reload`, jei atnaujinate jau įdiegtą plėtinį  
+
+✅ Šios instrukcijos taikomos jūsų pačių sukurtiems plėtiniams; norėdami įdiegti plėtinius, kurie jau yra išleisti naršyklės plėtinių parduotuvėje, turėtumėte apsilankyti šiose [parduotuvėse](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) ir įdiegti norimą plėtinį.
+
+### Pradėkite
+
+Jūs sukursite naršyklės plėtinį, kuris rodys jūsų regiono anglies pėdsaką, pateikdamas jūsų regiono energijos suvartojimą ir energijos šaltinį. Plėtinys turės formą, kuri surinks API raktą, kad galėtumėte pasiekti CO2 Signal API.
+
+**Jums reikės:**
+
+- [API rakto](https://www.co2signal.com/); įveskite savo el. pašto adresą šiame puslapyje ir jums bus atsiųstas raktas  
+- [kodo jūsų regionui](http://api.electricitymap.org/v3/zones), atitinkančio [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone naudoju „US-NEISO“)  
+- [pradinio kodo](../../../../5-browser-extension/start). Atsisiųskite aplanką `start`; užbaigsite kodą šiame aplanke  
+- [NPM](https://www.npmjs.com) – NPM yra paketų valdymo įrankis; įdiekite jį lokaliai, ir paketai, išvardyti jūsų `package.json` faile, bus įdiegti naudojimui jūsų žiniatinklio projekte  
+
+✅ Sužinokite daugiau apie paketų valdymą šiame [puikiame mokymosi modulyje](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Skirkite minutę peržiūrėti kodo bazę:
+
+dist  
+    -|manifest.json (numatytosios reikšmės nustatomos čia)  
+    -|index.html (HTML žymėjimas čia)  
+    -|background.js (JS foninis kodas čia)  
+    -|main.js (sukurtas JS)  
+src  
+    -|index.js (jūsų JS kodas čia)  
+
+✅ Kai turėsite savo API raktą ir regiono kodą, išsaugokite juos kur nors užrašuose, kad galėtumėte naudoti ateityje.
+
+### Sukurkite HTML plėtiniui
+
+Šis plėtinys turi dvi peržiūras. Viena skirta API rakto ir regiono kodo surinkimui:
+
+![ekrano nuotrauka iš užbaigto plėtinio, atidaryto naršyklėje, rodanti formą su įvestimis regiono pavadinimui ir API raktui.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.lt.png)
+
+Ir kita – regiono anglies suvartojimo rodymui:
+
+![ekrano nuotrauka iš užbaigto plėtinio, rodanti anglies suvartojimo ir iškastinio kuro procento reikšmes regionui US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.lt.png)
+
+Pradėkime nuo formos HTML kūrimo ir jos stiliaus pritaikymo naudojant CSS.
+
+Aplanke `/dist` sukursite formą ir rezultatų sritį. Faile `index.html` užpildykite nurodytą formos sritį:
+
+```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>	
+```  
+Tai yra forma, kurioje jūsų išsaugota informacija bus įvesta ir išsaugota vietinėje saugykloje.
+
+Toliau sukurkite rezultatų sritį; po paskutinės formos žymos pridėkite keletą div elementų:
+
+```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>
+```  
+Šiuo metu galite pabandyti sukurti projektą. Įsitikinkite, kad įdiegėte šio plėtinio paketų priklausomybes:
+
+```
+npm install
+```  
+
+Ši komanda naudos npm, „Node Package Manager“, kad įdiegtų „webpack“ jūsų plėtinio kūrimo procesui. Šio proceso išvestį galite pamatyti aplanke `/dist/main.js` – pamatysite, kad kodas buvo sujungtas.
+
+Kol kas plėtinys turėtų būti sukurtas, ir jei jį įdiegsite „Edge“ kaip plėtinį, pamatysite tvarkingai rodomą formą.
+
+Sveikiname, jūs žengėte pirmuosius žingsnius kuriant naršyklės plėtinį. Kitose pamokose padarysite jį funkcionalesnį ir naudingesnį.
+
+---
+
+## 🚀 Iššūkis
+
+Apsilankykite naršyklės plėtinių parduotuvėje ir įdiekite vieną plėtinį į savo naršyklę. Galite įdomiais būdais išnagrinėti jo failus. Ką atrandate?
+
+## Klausimai po paskaitos
+
+[Klausimai po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Šioje pamokoje sužinojote šiek tiek apie žiniatinklio naršyklės istoriją; pasinaudokite šia galimybe sužinoti, kaip Pasaulinio tinklo išradėjai įsivaizdavo jo naudojimą, skaitydami daugiau apie jo istoriją. Naudingos svetainės:
+
+[Žiniatinklio naršyklių istorija](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[Žiniatinklio istorija](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Interviu su Timu Bernersu-Li](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)
+
+## Užduotis
+
+[Perdarykite savo plėtinį](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/1-about-browsers/assignment.md b/translations/lt/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..953817c5
--- /dev/null
+++ b/translations/lt/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-28T11:24:22+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Pakeiskite savo plėtinio stilių
+
+## Instrukcijos
+
+Šio plėtinio kodų bazė jau turi stilius, tačiau jūs neprivalote jų naudoti; pritaikykite plėtinį pagal save, pakeisdami jo css failą.
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai atlikta                              | Pakankamai gerai       | Reikia patobulinimų |
+| ---------- | -------------------------------------------- | ---------------------- | ------------------- |
+|            | Kodas pateiktas su veikiančiais naujais stiliais | Stilių pritaikymas nebaigtas | Stiliai turi klaidų |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/lt/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..37da5fa4
--- /dev/null
+++ b/translations/lt/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-28T11:30:56+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "lt"
+}
+-->
+# Naršyklės plėtinio projektas 2 dalis: API iškvietimas, vietinės saugyklos naudojimas
+
+## Klausimynas prieš paskaitą
+
+[Klausimynas prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Įvadas
+
+Šioje pamokoje išmoksite iškviesti API, pateikdami savo naršyklės plėtinio formą ir rodydami rezultatus plėtinio lange. Be to, sužinosite, kaip galite saugoti duomenis naršyklės vietinėje saugykloje, kad galėtumėte juos naudoti ateityje.
+
+✅ Vadovaukitės numeruotais segmentais atitinkamuose failuose, kad žinotumėte, kur įterpti savo kodą.
+
+### Sukurkite elementus, kuriuos manipuliuosite plėtinyje:
+
+Iki šio momento jau sukūrėte HTML formos ir rezultatų `<div>` savo naršyklės plėtiniui. Dabar turėsite dirbti su `/src/index.js` failu ir po truputį kurti savo plėtinį. Peržiūrėkite [ankstesnę pamoką](../1-about-browsers/README.md), kad prisimintumėte, kaip nustatyti projektą ir kaip vyksta kūrimo procesas.
+
+Dirbdami su `index.js` failu, pradėkite nuo kelių `const` kintamųjų sukūrimo, kad išsaugotumėte reikšmes, susijusias su įvairiais laukais:
+
+```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');
+```
+
+Visi šie laukai yra nurodyti pagal jų CSS klasę, kaip nustatėte HTML faile ankstesnėje pamokoje.
+
+### Pridėkite klausytojus
+
+Toliau pridėkite įvykių klausytojus prie formos ir mygtuko, kuris išvalo formą, kad, jei vartotojas pateiktų formą arba paspaustų išvalymo mygtuką, kažkas įvyktų. Taip pat pridėkite iškvietimą, kuris inicijuoja programą failo apačioje:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Atkreipkite dėmesį į trumpinį, naudojamą klausytis pateikimo ar paspaudimo įvykių, ir kaip įvykis perduodamas `handleSubmit` arba `reset` funkcijoms. Ar galite parašyti šio trumpinio ekvivalentą ilgesniu formatu? Kuris variantas jums labiau patinka?
+
+### Sukurkite `init()` ir `reset()` funkcijas:
+
+Dabar sukursite funkciją, kuri inicijuoja plėtinį, vadinamą `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();
+}
+
+```
+
+Šioje funkcijoje yra įdomi logika. Perskaitykite ją ir pažiūrėkite, kas vyksta:
+
+- Sukuriami du `const`, kurie patikrina, ar vartotojas saugojo APIKey ir regiono kodą vietinėje saugykloje.
+- Jei kuris nors iš jų yra `null`, forma rodoma pakeičiant jos stilių į 'block'.
+- Paslepiami rezultatai, įkėlimo indikatorius ir `clearBtn`, o klaidos tekstas nustatomas kaip tuščias.
+- Jei yra raktas ir regionas, pradedama rutina:
+  - Iškviečiama API, kad gautų anglies naudojimo duomenis.
+  - Paslepiama rezultatų sritis.
+  - Paslepiama forma.
+  - Parodomas išvalymo mygtukas.
+
+Prieš tęsiant, naudinga sužinoti apie labai svarbią naršyklių funkciją: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage yra naudinga priemonė saugoti eilutes naršyklėje kaip `key-value` poras. Šio tipo žiniatinklio saugyklą galima valdyti naudojant JavaScript. LocalStorage neturi galiojimo laiko, o SessionStorage, kita saugyklos rūšis, išvaloma uždarius naršyklę. Skirtingos saugyklos rūšys turi savo privalumų ir trūkumų.
+
+> Pastaba - jūsų naršyklės plėtinys turi savo vietinę saugyklą; pagrindinis naršyklės langas yra atskira instancija ir veikia atskirai.
+
+Jūs nustatote savo APIKey kaip eilutės reikšmę, pavyzdžiui, ir galite matyti, kad ji nustatyta Edge naršyklėje, "inspektuojant" tinklalapį (galite dešiniuoju pelės mygtuku spustelėti naršyklę, kad inspektuotumėte) ir eiti į skirtuką "Applications", kad pamatytumėte saugyklą.
+
+![Vietinės saugyklos langas](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.lt.png)
+
+✅ Pagalvokite apie situacijas, kai NENORĖTUMĖTE saugoti tam tikrų duomenų LocalStorage. Apskritai, API raktų saugojimas LocalStorage yra bloga idėja! Ar suprantate kodėl? Mūsų atveju, kadangi mūsų programa yra skirta tik mokymuisi ir nebus įkelta į programų parduotuvę, mes naudosime šį metodą.
+
+Atkreipkite dėmesį, kad naudojate žiniatinklio API, kad manipuliuotumėte LocalStorage, naudodami `getItem()`, `setItem()` arba `removeItem()`. Tai plačiai palaikoma naršyklėse.
+
+Prieš kuriant `displayCarbonUsage()` funkciją, kuri yra iškviečiama `init()` funkcijoje, sukurkime funkcionalumą, kuris apdoroja pradinį formos pateikimą.
+
+### Apdorokite formos pateikimą
+
+Sukurkite funkciją, vadinamą `handleSubmit`, kuri priima įvykio argumentą `(e)`. Sustabdykite įvykio plitimą (šiuo atveju norime sustabdyti naršyklės atnaujinimą) ir iškvieskite naują funkciją, `setUpUser`, perduodami argumentus `apiKey.value` ir `region.value`. Tokiu būdu naudojate dvi reikšmes, kurios gaunamos per pradinę formą, kai atitinkami laukai yra užpildyti.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Atsigaivinkite atmintį - HTML, kurį sukūrėte ankstesnėje pamokoje, turi du įvesties laukus, kurių `values` yra užfiksuoti per `const`, kuriuos nustatėte failo viršuje, ir jie abu yra `required`, todėl naršyklė neleidžia vartotojams įvesti tuščių reikšmių.
+
+### Nustatykite vartotoją
+
+Pereikime prie `setUpUser` funkcijos, kurioje nustatote vietinės saugyklos reikšmes `apiKey` ir `regionName`. Pridėkite naują funkciją:
+
+```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);
+}
+```
+
+Ši funkcija nustato įkėlimo pranešimą, kuris rodomas, kol API yra iškviečiama. Šiuo metu pasiekėte svarbiausią šio naršyklės plėtinio funkciją!
+
+### Rodykite anglies naudojimą
+
+Pagaliau atėjo laikas užklausti API!
+
+Prieš tęsiant, turėtume aptarti API. API, arba [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), yra svarbi žiniatinklio kūrėjo įrankių dalis. Jos suteikia standartinius būdus programoms sąveikauti ir bendrauti tarpusavyje. Pavyzdžiui, jei kuriate svetainę, kuri turi užklausti duomenų bazę, kažkas galėjo sukurti API, kurią galite naudoti. Nors yra daug API tipų, vienas populiariausių yra [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ Terminas 'REST' reiškia 'Representational State Transfer' ir apima įvairiai sukonfigūruotų URL naudojimą duomenims gauti. Atlikite nedidelį tyrimą apie įvairius API tipus, prieinamus kūrėjams. Koks formatas jums atrodo patraukliausias?
+
+Šioje funkcijoje yra svarbių dalykų, į kuriuos reikia atkreipti dėmesį. Pirma, atkreipkite dėmesį į [`async` raktinį žodį](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Rašydami savo funkcijas taip, kad jos veiktų asinchroniškai, užtikrinate, kad jos lauktų veiksmo, pvz., duomenų gavimo, užbaigimo prieš tęsiant.
+
+Štai trumpas vaizdo įrašas apie `async`:
+
+[![Async ir Await valdyti pažadus](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async ir Await valdyti pažadus")
+
+> 🎥 Spustelėkite aukščiau esančią nuotrauką, kad peržiūrėtumėte vaizdo įrašą apie async/await.
+
+Sukurkite naują funkciją, skirtą užklausti C02Signal API:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+Tai didelė funkcija. Kas čia vyksta?
+
+- Vadovaujantis geriausia praktika, naudojate `async` raktinį žodį, kad ši funkcija veiktų asinchroniškai. Funkcija turi `try/catch` bloką, nes ji grąžins pažadą, kai API grąžins duomenis. Kadangi neturite kontrolės dėl API atsako greičio (ji gali visai neatsakyti!), turite valdyti šį neapibrėžtumą, iškviesdami ją asinchroniškai.
+- Užklausiate co2signal API, kad gautumėte savo regiono duomenis, naudodami savo API raktą. Norėdami naudoti šį raktą, turite naudoti autentifikacijos tipą savo antraštės parametruose.
+- Kai API atsako, priskiriate įvairius jos atsako duomenų elementus ekrano dalims, kurias nustatėte šiems duomenims rodyti.
+- Jei yra klaida arba nėra rezultato, rodote klaidos pranešimą.
+
+✅ Asinchroninio programavimo modelių naudojimas yra dar vienas labai naudingas įrankis jūsų arsenale. Perskaitykite [apie įvairius būdus](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function), kaip galite konfigūruoti tokio tipo kodą.
+
+Sveikiname! Jei sukursite savo plėtinį (`npm run build`) ir atnaujinsite jį savo plėtinių lange, turėsite veikiantį plėtinį! Vienintelis dalykas, kuris neveikia, yra piktograma, ir tai ištaisysite kitoje pamokoje.
+
+---
+
+## 🚀 Iššūkis
+
+Šiose pamokose aptarėme kelis API tipus. Pasirinkite vieną žiniatinklio API ir išsamiai ištirkite, ką ji siūlo. Pavyzdžiui, peržiūrėkite API, prieinamas naršyklėse, pvz., [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Kas, jūsų nuomone, sudaro puikią API?
+
+## Klausimynas po paskaitos
+
+[Klausimynas po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Šioje pamokoje sužinojote apie LocalStorage ir API, abu labai naudingus profesionaliam žiniatinklio kūrėjui. Ar galite pagalvoti, kaip šie du dalykai veikia kartu? Pagalvokite, kaip sukurtumėte svetainę, kuri saugotų elementus, kuriuos naudotų API.
+
+## Užduotis
+
+[Pasirinkite API](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/lt/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..66d6a353
--- /dev/null
+++ b/translations/lt/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-28T11:31:39+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Pasirinkite API
+
+## Instrukcijos
+
+API gali būti labai smagu naudoti. Štai [sąrašas daugybės nemokamų API](https://github.com/public-apis/public-apis). Pasirinkite vieną API ir sukurkite naršyklės plėtinį, kuris išspręstų kokią nors problemą. Tai gali būti net ir labai maža problema, pavyzdžiui, trūksta gyvūnų nuotraukų (tad išbandykite [dog CEO API](https://dog.ceo/dog-api/)) arba kažkas didesnio – svarbiausia, kad būtų smagu!
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai atlikta                                                           | Pakankamai gerai                        | Reikia patobulinimų     |
+| ---------- | ------------------------------------------------------------------------- | --------------------------------------- | ----------------------- |
+|            | Pateiktas pilnai veikiantis naršyklės plėtinys, naudojantis vieną iš sąrašo API | Pateiktas dalinai veikiantis plėtinys   | Pateikime yra klaidų    |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/lt/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..14480681
--- /dev/null
+++ b/translations/lt/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-28T11:25:53+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "lt"
+}
+-->
+# Naršyklės plėtinio projektas 3 dalis: Sužinokite apie fono užduotis ir našumą
+
+## Klausimynas prieš paskaitą
+
+[Klausimynas prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Įvadas
+
+Per paskutines dvi šio modulio pamokas išmokote sukurti formą ir duomenų rodymo sritį, skirtą informacijai iš API. Tai labai standartinis būdas kurti internetinį buvimą internete. Jūs netgi išmokote tvarkyti asinchroninį duomenų gavimą. Jūsų naršyklės plėtinys beveik baigtas.
+
+Liko valdyti kai kurias fono užduotis, įskaitant plėtinio piktogramos spalvos atnaujinimą, todėl tai puikus metas aptarti, kaip naršyklė tvarko tokio tipo užduotis. Pagalvokime apie šias naršyklės užduotis jūsų internetinių išteklių našumo kontekste, kai juos kuriate.
+
+## Interneto našumo pagrindai
+
+> „Svetainės našumas susijęs su dviem dalykais: kaip greitai puslapis įkeliama ir kaip greitai jame veikia kodas.“ -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Kaip padaryti, kad jūsų svetainės veiktų žaibiškai greitai visų tipų įrenginiuose, visų tipų vartotojams ir visose situacijose, yra, nenuostabu, labai plati tema. Štai keletas dalykų, kuriuos verta prisiminti, kuriant standartinį interneto projektą ar naršyklės plėtinį.
+
+Pirmas dalykas, kurį turite padaryti, kad užtikrintumėte efektyvų svetainės veikimą, yra surinkti duomenis apie jos našumą. Pirmoji vieta, kur tai padaryti, yra jūsų naršyklės kūrėjo įrankiai. Naršyklėje „Edge“ galite pasirinkti mygtuką „Nustatymai ir daugiau“ (trijų taškų piktograma viršutiniame dešiniajame naršyklės kampe), tada eiti į Daugiau įrankių > Kūrėjo įrankiai ir atidaryti našumo skirtuką. Taip pat galite naudoti klaviatūros sparčiuosius klavišus `Ctrl` + `Shift` + `I` „Windows“ arba `Option` + `Command` + `I` „Mac“, kad atidarytumėte kūrėjo įrankius.
+
+Našumo skirtuke yra Profilio įrankis. Atidarykite svetainę (pavyzdžiui, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ir spustelėkite mygtuką „Įrašyti“, tada atnaujinkite svetainę. Bet kuriuo metu sustabdykite įrašymą ir galėsite pamatyti rutinas, kurios generuojamos „script“, „render“ ir „paint“ svetainės:
+
+![Edge profileris](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.lt.png)
+
+✅ Aplankykite [Microsoft dokumentaciją](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) apie našumo skydelį „Edge“.
+
+> Patarimas: norėdami gauti tikslius svetainės paleidimo laiko duomenis, išvalykite naršyklės talpyklą.
+
+Pasirinkite profilio laiko juostos elementus, kad priartintumėte įvykius, vykstančius, kol jūsų puslapis įkeliama.
+
+Gaukite savo puslapio našumo momentinę nuotrauką, pasirinkdami profilio laiko juostos dalį ir peržiūrėdami santraukos skydelį:
+
+![Edge profilerio momentinė nuotrauka](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.lt.png)
+
+Patikrinkite įvykių žurnalo skydelį, kad pamatytumėte, ar kuris nors įvykis truko ilgiau nei 15 ms:
+
+![Edge įvykių žurnalas](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.lt.png)
+
+✅ Susipažinkite su savo profiliuotoju! Atidarykite kūrėjo įrankius šioje svetainėje ir pažiūrėkite, ar yra kokių nors kliūčių. Koks yra lėčiausiai įkeliantis išteklius? Greičiausias?
+
+## Profilio patikrinimai
+
+Apskritai, yra keletas „probleminių sričių“, į kurias kiekvienas interneto kūrėjas turėtų atkreipti dėmesį, kurdamas svetainę, kad išvengtų nemalonių staigmenų, kai ateis laikas ją diegti į gamybą.
+
+**Išteklių dydžiai**: Per pastaruosius kelerius metus internetas tapo „sunkesnis“ ir todėl lėtesnis. Dalis šio svorio susijusi su vaizdų naudojimu.
+
+✅ Peržiūrėkite [Interneto archyvą](https://httparchive.org/reports/page-weight), kad pamatytumėte istorinius puslapio svorio duomenis ir daugiau.
+
+Gera praktika yra užtikrinti, kad jūsų vaizdai būtų optimizuoti ir pateikti tinkamo dydžio bei raiškos jūsų vartotojams.
+
+**DOM naršymas**: Naršyklė turi sukurti savo Dokumento objektų modelį pagal jūsų parašytą kodą, todėl geram puslapio našumui svarbu, kad jūsų žymos būtų minimalios, naudojant ir stiliuojant tik tai, ko reikia puslapiui. Šiuo atžvilgiu perteklinė CSS, susijusi su puslapiu, galėtų būti optimizuota; stiliai, kurie turi būti naudojami tik viename puslapyje, neturėtų būti įtraukti į pagrindinį stiliaus lapą, pavyzdžiui.
+
+**JavaScript**: Kiekvienas JavaScript kūrėjas turėtų stebėti „render-blocking“ scenarijus, kurie turi būti įkelti prieš naršyklės galimybę naršyti ir piešti likusį DOM. Apsvarstykite galimybę naudoti `defer` su savo įterptaisiais scenarijais (kaip tai daroma „Terrarium“ modulyje).
+
+✅ Išbandykite keletą svetainių [Svetainės greičio testavimo svetainėje](https://www.webpagetest.org/), kad sužinotumėte daugiau apie įprastus patikrinimus, kurie atliekami siekiant nustatyti svetainės našumą.
+
+Dabar, kai turite idėją, kaip naršyklė atvaizduoja jūsų siunčiamus išteklius, pažvelkime į paskutinius kelis dalykus, kuriuos reikia padaryti, kad užbaigtumėte savo plėtinį:
+
+### Sukurkite funkciją spalvai apskaičiuoti
+
+Dirbdami su `/src/index.js`, pridėkite funkciją, pavadintą `calculateColor()`, po serijos `const` kintamųjų, kuriuos nustatėte, kad gautumėte prieigą prie 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 } });
+}
+```
+
+Kas čia vyksta? Jūs perduodate reikšmę (anglies intensyvumą) iš API užklausos, kurią užbaigėte per paskutinę pamoką, ir tada apskaičiuojate, kaip arti jos reikšmė yra spalvų masyve pateikto indekso. Tada siunčiate tą artimiausią spalvos reikšmę į „chrome runtime“.
+
+„chrome.runtime“ turi [API](https://developer.chrome.com/extensions/runtime), kuris tvarko įvairias fono užduotis, ir jūsų plėtinys tuo naudojasi:
+
+> „Naudokite „chrome.runtime“ API, kad gautumėte fono puslapį, grąžintumėte informaciją apie manifestą ir klausytumėte bei reaguotumėte į įvykius programos ar plėtinio gyvavimo cikle. Taip pat galite naudoti šią API, kad konvertuotumėte santykinius URL kelių į visiškai kvalifikuotus URL.“
+
+✅ Jei kuriate šį naršyklės plėtinį „Edge“, jus gali nustebinti, kad naudojate „chrome“ API. Naujesnės „Edge“ naršyklės versijos veikia „Chromium“ naršyklės variklyje, todėl galite naudotis šiais įrankiais.
+
+> Pastaba: jei norite profiliuoti naršyklės plėtinį, paleiskite kūrėjo įrankius iš paties plėtinio, nes tai yra atskira naršyklės instancija.
+
+### Nustatykite numatytąją piktogramos spalvą
+
+Dabar, funkcijoje `init()`, nustatykite piktogramą kaip bendrą žalią spalvą, iš naujo iškviesdami „chrome“ `updateIcon` veiksmą:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Iškvieskite funkciją, vykdykite užklausą
+
+Toliau iškvieskite ką tik sukurtą funkciją, pridėdami ją prie pažado, kurį grąžina C02Signal API:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+Ir galiausiai, faile `/dist/background.js`, pridėkite klausytoją šiems fono veiksmų iškvietimams:
+
+```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);
+}
+```
+
+Šiame kode pridedate klausytoją bet kokioms žinutėms, siunčiamoms į užduočių valdytoją fone. Jei ji vadinama „updateIcon“, tada vykdomas kitas kodas, kuris piešia tinkamos spalvos piktogramą, naudojant „Canvas API“.
+
+✅ Daugiau apie „Canvas API“ sužinosite [Kosmoso žaidimo pamokose](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Dabar, iš naujo sukurkite savo plėtinį (`npm run build`), atnaujinkite ir paleiskite savo plėtinį ir stebėkite, kaip keičiasi spalva. Ar tai tinkamas metas atlikti kokį nors darbą ar išplauti indus? Dabar jūs žinote!
+
+Sveikiname, jūs sukūrėte naudingą naršyklės plėtinį ir daugiau sužinojote apie tai, kaip veikia naršyklė ir kaip profiliuoti jos našumą.
+
+---
+
+## 🚀 Iššūkis
+
+Ištirkite kai kurias atvirojo kodo svetaines, kurios egzistuoja jau ilgą laiką, ir, remdamiesi jų „GitHub“ istorija, pabandykite nustatyti, kaip jos buvo optimizuotos našumui per metus, jei iš viso buvo. Koks yra dažniausias skausmo taškas?
+
+## Klausimynas po paskaitos
+
+[Klausimynas po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Apsvarstykite galimybę užsiprenumeruoti [našumo naujienlaiškį](https://perf.email/).
+
+Ištirkite kai kuriuos būdus, kaip naršyklės vertina interneto našumą, peržiūrėdami jų kūrėjo įrankių našumo skirtukus. Ar pastebėjote kokių nors esminių skirtumų?
+
+## Užduotis
+
+[Analizuokite svetainės našumą](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/lt/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..211827bc
--- /dev/null
+++ b/translations/lt/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-28T11:26:34+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Analizuokite svetainės našumą
+
+Pateikite išsamų svetainės ataskaitą, nurodydami sritis, kuriose kyla našumo problemų. Išanalizuokite, kodėl svetainė veikia lėtai, ir ką galėtumėte padaryti, kad ją pagreitintumėte. Neapsiribokite tik naršyklės įrankiais – atlikite tyrimą apie kitus įrankius, kurie galėtų padėti jūsų ataskaitai.
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai                                                                                                   | Pakankamai                  | Reikia patobulinimų           |
+| ---------- | --------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|            | Pateikta ataskaita su detalėmis, gautomis ne tik iš naršyklės įrankių, bet ir iš trečiųjų šalių įrankių, jei jie prieinami | Pateikta pagrindinė ataskaita | Pateikta minimali ataskaita   |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/README.md b/translations/lt/5-browser-extension/README.md
new file mode 100644
index 00000000..09403d81
--- /dev/null
+++ b/translations/lt/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-28T11:23:06+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "lt"
+}
+-->
+# Naršyklės plėtinio kūrimas
+
+Naršyklės plėtinių kūrimas yra smagus ir įdomus būdas galvoti apie savo programų našumą, kuriant kitokio tipo interneto išteklius. Šiame modulyje pateikiamos pamokos apie tai, kaip veikia naršyklės, kaip įdiegti naršyklės plėtinį, kaip sukurti formą, iškviesti API, naudoti vietinę saugyklą, taip pat kaip įvertinti savo svetainės našumą ir jį pagerinti.
+
+Jūs sukursite naršyklės plėtinį, kuris veikia Edge, Chrome ir Firefox naršyklėse. Šis plėtinys, kuris yra tarsi mini svetainė, pritaikyta labai specifinei užduočiai, tikrina [C02 Signal API](https://www.co2signal.com) tam tikro regiono elektros energijos naudojimą ir anglies intensyvumą, bei pateikia regiono anglies pėdsako rodmenis.
+
+Šį plėtinį vartotojas gali naudoti ad hoc būdu, kai į formą įvedamas API raktas ir regiono kodas, kad būtų nustatytas vietinis elektros energijos naudojimas ir pateikti duomenys, galintys paveikti vartotojo elektros energijos sprendimus. Pavyzdžiui, gali būti tikslinga atidėti drabužių džiovyklės (anglies intensyvi veikla) naudojimą laikotarpiu, kai jūsų regione yra didelis elektros energijos naudojimas.
+
+### Temos
+
+1. [Apie naršyklę](1-about-browsers/README.md)
+2. [Formos ir vietinė saugykla](2-forms-browsers-local-storage/README.md)
+3. [Fono užduotys ir našumas](3-background-tasks-and-performance/README.md)
+
+### Kreditas
+
+![žalias naršyklės plėtinys](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.lt.png)
+
+## Kreditas
+
+Šios interneto anglies pėdsako idėją pasiūlė Asim Hussain, „Microsoft“ Žaliosios debesų advokatūros komandos vadovas ir [Žaliųjų principų](https://principles.green/) autorius. Iš pradžių tai buvo [internetinės svetainės projektas](https://github.com/jlooper/green).
+
+Naršyklės plėtinio struktūrą įkvėpė [Adebola Adeniran COVID plėtinys](https://github.com/onedebos/covtension).
+
+„Taško“ piktogramų sistemos koncepciją pasiūlė [Energy Lollipop](https://energylollipop.com/) naršyklės plėtinio Kalifornijos emisijoms piktogramų struktūra.
+
+Šios pamokos buvo parašytos su ♥️ [Jen Looper](https://www.twitter.com/jenlooper).
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/solution/README.md b/translations/lt/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..c473ba2e
--- /dev/null
+++ b/translations/lt/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-28T11:27:08+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "lt"
+}
+-->
+# Naršyklės plėtinys „Carbon Trigger“: Baigtas kodas
+
+Naudojant tmrow C02 Signal API, skirtą stebėti elektros energijos suvartojimą, sukurkite naršyklės plėtinį, kad galėtumėte gauti priminimą tiesiai savo naršyklėje apie tai, kokia intensyvi yra jūsų regiono elektros energijos apkrova. Naudodami šį plėtinį ad hoc būdu, galėsite priimti sprendimus dėl savo veiklos, remdamiesi šia informacija.
+
+![plėtinio ekrano nuotrauka](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.lt.png)
+
+## Pradžia
+
+Jums reikės įdiegti [npm](https://npmjs.com). Atsisiųskite šio kodo kopiją į aplanką savo kompiuteryje.
+
+Įdiekite visas reikalingas paketas:
+
+```
+npm install
+```
+
+Sukurkite plėtinį naudodami webpack:
+
+```
+npm run build
+```
+
+Norėdami įdiegti „Edge“ naršyklėje, naudokite meniu „trys taškai“ viršutiniame dešiniajame naršyklės kampe, kad rastumėte plėtinių skydelį. Iš ten pasirinkite „Įkelti neišpakuotą“ („Load Unpacked“), kad įkeltumėte naują plėtinį. Atsidariusiame lange pasirinkite „dist“ aplanką, ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API ([gaukite jį el. paštu čia](https://www.co2signal.com/) – įveskite savo el. pašto adresą šiame puslapyje) ir [jūsų regiono kodo](http://api.electricitymap.org/v3/zones), atitinkančio [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone aš naudoju „US-NEISO“).
+
+![įdiegimas](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.lt.png)
+
+Kai API raktas ir regionas bus įvesti į plėtinio sąsają, spalvotas taškas naršyklės plėtinio juostoje turėtų pasikeisti, atspindėdamas jūsų regiono energijos suvartojimą, ir pateikti jums užuominą, kokia energiją naudojanti veikla būtų tinkama. Šios „taško“ sistemos idėją man pasiūlė [Energy Lollipop plėtinys](https://energylollipop.com/) Kalifornijos emisijoms.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/solution/translation/README.es.md b/translations/lt/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..13534054
--- /dev/null
+++ b/translations/lt/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-28T11:28:31+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "lt"
+}
+-->
+# Naršyklės plėtinys Carbon Trigger: Pilnas kodas
+
+Naudojant tmrow CO2 Signal API, skirtą stebėti elektros energijos naudojimą, sukurkite naršyklės plėtinį, kuris tiesiogiai jūsų naršyklėje primintų apie jūsų regiono elektros energijos suvartojimą. Šis ad hoc plėtinys padės priimti sprendimus dėl jūsų veiklų, remiantis šia informacija.
+
+![plėtinio ekrano nuotrauka](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.lt.png)
+
+## Pradžia
+
+Jums reikės įdiegti [npm](https://npmjs.com). Atsisiųskite šio kodo kopiją į savo kompiuterio aplanką.
+
+Įdiekite visus reikalingus paketus:
+
+```
+npm install
+```
+
+Sukurkite plėtinį naudodami webpack:
+
+```
+npm run build
+```
+
+Norėdami įdiegti Edge naršyklėje, naudokite 'trijų taškų' meniu, esantį viršutiniame dešiniajame naršyklės kampe, kad rastumėte plėtinių skydelį. Iš ten pasirinkite 'Įkelti neišpakuotą', kad įkeltumėte naują plėtinį. Kai būsite paprašyti, atidarykite aplanką 'dist', ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API ([gaukite jį el. paštu čia](https://www.co2signal.com/) - įveskite savo el. paštą šio puslapio laukelyje) ir [savo regiono kodą](http://api.electricitymap.org/v3/zones), atitinkantį [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone naudoju 'US-NEISO').
+
+![įdiegimas](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.lt.png)
+
+Kai API raktas ir regionas bus įvesti plėtinio sąsajoje, spalvotas taškas naršyklės plėtinių juostoje turėtų pasikeisti, atspindėdamas jūsų regiono energijos naudojimą ir suteikdamas indikatorių apie veiklas, kurios būtų tinkamos esant dideliam energijos suvartojimui. Šios "taškų" sistemos idėją man suteikė [plėtinys Energy Lollipop](https://energylollipop.com/) skirtas Kalifornijos emisijoms.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/solution/translation/README.fr.md b/translations/lt/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..24453a6a
--- /dev/null
+++ b/translations/lt/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-28T11:29:16+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "lt"
+}
+-->
+# Naršyklės plėtinys Carbon Trigger: Baigtas kodas
+
+Naudodami tmrow API C02 Signal, skirtą stebėti elektros energijos suvartojimą, sukurkite naršyklės plėtinį, kuris tiesiogiai jūsų naršyklėje primintų apie jūsų regiono elektros energijos suvartojimą. Šis plėtinys padės jums priimti sprendimus dėl savo veiklos, remiantis šia informacija.
+
+![plėtinio ekrano nuotrauka](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.lt.png)
+
+## Pradžia
+
+Jums reikės įdiegti [npm](https://npmjs.com). Atsisiųskite šio kodo kopiją į savo kompiuterio aplanką.
+
+Įdiekite visus reikalingus paketus:
+
+```
+npm install
+```
+
+Sukurkite plėtinį naudodami webpack
+
+```
+npm run build
+```
+
+Norėdami įdiegti Edge naršyklėje, naudokite meniu „trys taškai“ viršutiniame dešiniajame naršyklės kampe, kad rastumėte plėtinių skydelį. Iš ten pasirinkite „Įkelti neišpakuotą plėtinį“, kad įkeltumėte naują plėtinį. Atidarykite aplanką „dist“ pagal nurodymus, ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API ([gaukite jį el. paštu čia](https://www.co2signal.com/) - įveskite savo el. paštą laukelyje šioje svetainėje) ir [kodo savo regionui](http://api.electricitymap.org/v3/zones), atitinkančio [Elektros žemėlapį](https://www.electricitymap.org/map) (pavyzdžiui, Bostone aš naudoju „US-NEISO“).
+
+![įdiegimas](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.lt.png)
+
+Kai API raktas ir regionas bus įvesti į plėtinio sąsają, spalvotas taškas naršyklės plėtinių juostoje turėtų pasikeisti, atspindėdamas jūsų regiono energijos suvartojimą ir suteikdamas jums indikatorių apie energiją naudojančias veiklas, kurias būtų tinkama atlikti. Šios „taškų“ sistemos koncepciją man pasiūlė [plėtinys Energy Lollipop](https://energylollipop.com/) Kalifornijos emisijoms.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/solution/translation/README.hi.md b/translations/lt/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..f3703157
--- /dev/null
+++ b/translations/lt/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-28T11:27:28+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "lt"
+}
+-->
+# Anglies dioksido trigerio naršyklės plėtinys: Baigtas kodas
+
+Naudojant tmrow CO2 Signal API elektros energijos naudojimui stebėti, sukurtas naršyklės plėtinys, kuris primena, kiek intensyviai jūsų regione naudojama elektros energija. Naudodami šį plėtinį, galėsite priimti sprendimus dėl savo veiklos, remdamiesi šia informacija.
+
+![Plėtinio ekrano nuotrauka](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.lt.png)
+
+## Pradžia
+
+Jums reikės įdiegti [npm](https://npmjs.com). Atsisiųskite šio kodo kopiją į savo kompiuterio aplanką.
+
+Įdiekite visus reikalingus paketus:
+
+```
+npm install
+```
+
+Sukurkite plėtinį naudodami webpack:
+
+```
+npm run build
+```
+
+Norėdami įdiegti „Edge“ naršyklėje, naudokite naršyklės viršutiniame dešiniajame kampe esančiame meniu „trys taškai“, kad rastumėte plėtinių skydelį. Ten pasirinkite „Įkelti neišpakuotą“ ir atidarykite „dist“ aplanką, kai būsite paraginti. Plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės CO2 Signal API rakto ([gaukite čia el. paštu](https://www.co2snal.com/) – įveskite savo el. paštą laukelyje šiame puslapyje) ir [savo regiono kodo](http://api.electricitymap.org/v3/zones) iš [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone aš naudoju „US-NEISO“).
+
+![Įdiegimas](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.lt.png)
+
+Kai API raktas ir regionas bus įvesti į plėtinio sąsają, spalvotas taškas naršyklės plėtinių juostoje turėtų pasikeisti, atspindėdamas jūsų regiono energijos naudojimą, ir suteikti jums indikatorių, kokia energijai imli veikla būtų tinkama atlikti. Šios „taško“ sistemos idėją pasiskolinau iš Kalifornijos emisijų [Energy Lollipop plėtinio](https://energylollipop.com/).
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/solution/translation/README.it.md b/translations/lt/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..d8f89fbd
--- /dev/null
+++ b/translations/lt/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-28T11:27:49+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "lt"
+}
+-->
+# Naršyklės plėtinys Carbon Trigger: kodas pradžiai
+
+Naudosime tmrow Signal C02 API, kad stebėtume elektros energijos naudojimą ir sukurtume naršyklės plėtinį, kuris tiesiogiai naršyklėje primintų, kiek energijos naudojimas jūsų regione yra intensyvus. Šis specialiai sukurtas plėtinys padės įvertinti savo veiklą remiantis šiomis informacija.
+
+![plėtinio ekrano vaizdas](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.lt.png)
+
+## Pradžia
+
+Reikia, kad būtų įdiegtas [npm](https://npmjs.com). Atsisiųskite šio kodo kopiją į savo kompiuterio aplanką.
+
+Įdiekite visus reikalingus paketus:
+
+```
+npm install
+```
+
+Sukurkite plėtinį naudodami webpack:
+
+```
+npm run build
+```
+
+Norėdami įdiegti Edge naršyklėje, naudokite meniu „trys taškai“ viršutiniame dešiniajame naršyklės kampe, kad rastumėte plėtinių skydelį. Jei dar neaktyvuota, įjunkite Kūrėjo režimą (apačioje kairėje). Pasirinkite „Įkelti neišpakuotą“, kad įkeltumėte naują plėtinį. Atidarykite „dist“ aplanką, kai būsite paraginti, ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API (galite [gauti jį el. paštu čia](https://www.co2signal.com/) - įveskite savo el. pašto adresą laukelyje šioje puslapyje) ir [savo regiono kodą](http://api.electricitymap.org/v3/zones), atitinkantį [elektros žemėlapį](https://www.electricitymap.org/map) (pavyzdžiui, Bostone - „US-NEISO“).
+
+![įdiegimas](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.lt.png)
+
+Kai API raktas ir regionas bus įvesti plėtinio sąsajoje, spalvotas taškas naršyklės plėtinio juostoje turėtų pasikeisti, atspindėdamas regiono energijos naudojimą ir pateikdamas užuominą, kokia veikla, reikalaujanti daug energijos, būtų tinkama vykdyti. Šios „taškų“ sistemos koncepcija buvo pasiskolinta iš [Energy Lollipop plėtinio](https://energylollipop.com/) Kalifornijos emisijoms.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/solution/translation/README.ja.md b/translations/lt/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..17c7509c
--- /dev/null
+++ b/translations/lt/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-28T11:28:12+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "lt"
+}
+-->
+# Anglies pėdsako naršyklės plėtinys: Baigtas kodas
+
+Naudodami tmrow CO2 Signal API, sukursime naršyklės plėtinį, kuris primins, kiek energijos sunaudojama jūsų regione. Šis plėtinys leis stebėti elektros energijos suvartojimą ir priimti sprendimus, pagrįstus šia informacija.
+
+![plėtinio ekrano nuotrauka](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.lt.png)
+
+## Pradžia
+
+Įsitikinkite, kad jūsų sistemoje įdiegtas [npm](https://npmjs.com). Atsisiųskite šio kodo kopiją į savo kompiuterio aplanką.
+
+Įdiekite visas reikalingas paketas.
+
+```
+npm install
+```
+
+Sukurkite plėtinį naudodami webpack.
+
+```
+npm run build
+```
+
+Norėdami įdiegti plėtinį Edge naršyklėje, eikite į naršyklės viršutiniame dešiniajame kampe esantį „trijų taškų“ meniu ir suraskite „Plėtiniai“ skydelį. Pasirinkite „Įkelti neišpakuotą“ ir nurodykite „dist“ aplanką. Plėtinys bus įkeltas. Norėdami naudoti plėtinį, jums reikės CO2 Signal API rakto ([gaukite jį čia el. paštu](https://www.co2signal.com/) - įveskite savo el. pašto adresą į šios svetainės laukelį) ir [Electricity Map](https://www.electricitymap.org/map) atitinkančio [kodo jūsų regionui](http://api.electricitymap.org/v3/zones) (pavyzdžiui, Bostone naudojamas 'US-NEISO').
+
+![įdiegimas](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.lt.png)
+
+Įvedę API raktą ir regiono kodą į plėtinio sąsają, naršyklės plėtinių juostoje matysite spalvotą tašką, kuris atspindės jūsų regiono energijos suvartojimą. Tai padės nuspręsti, kokią veiklą atlikti, atsižvelgiant į energijos poreikius. Šios „taško“ sistemos idėją įkvėpė Kalifornijos emisijų stebėjimui skirtas [Energy Lollipop plėtinys](https://energylollipop.com/).
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/solution/translation/README.ms.md b/translations/lt/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..02ab9218
--- /dev/null
+++ b/translations/lt/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-28T11:28:54+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "lt"
+}
+-->
+# Naršyklės plėtinys Carbon Trigger: Pilnas kodas
+
+Naudojant tmrow CO2 Signal API, galima stebėti elektros energijos suvartojimą ir sukurti naršyklės plėtinį, kuris įspės jus apie jūsų regiono elektros energijos naudojimo intensyvumą. Šis plėtinys padės priimti sprendimus dėl jūsų veiklos, remiantis šia informacija.
+
+![naršyklės plėtinio ekrano nuotrauka](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.lt.png)
+
+## Pradėkite čia
+
+Jums reikės įdiegti [npm](https://npmjs.com). Atsisiųskite šio kodo kopiją į aplanką savo kompiuteryje.
+
+Įdiekite visas reikalingas paketas:
+
+```
+npm install
+```
+
+Sukurkite plėtinį naudodami webpack:
+
+```
+npm run build
+```
+
+Norėdami įdiegti Edge naršyklėje, naudokite meniu „trys taškai“ viršutiniame dešiniajame naršyklės kampe, kad surastumėte plėtinių skydelį. Ten pasirinkite „Load Unpacked“, kad įkeltumėte naują plėtinį. Atidarykite aplanką „dist“ pagal užklausą, ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API ([gaukite jį čia el. paštu](https://www.co2signal.com/) - įveskite savo el. pašto adresą į laukelį šioje svetainėje) ir [kodo savo regionui](http://api.electricitymap.org/v3/zones), kuris atitinka [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone aš naudoju „US-NEISO“).
+
+![parsisiuntimas](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.lt.png)
+
+Kai API raktas ir regionas bus įvesti į plėtinio sąsają, spalvotas taškas naršyklės plėtinio juostoje pasikeis, atspindėdamas jūsų regiono energijos suvartojimą, ir pateiks jums rekomendacijas dėl veiklos, kurią galite atlikti. Šios „taškų“ sistemos idėją pasiskolinau iš [naršyklės plėtinio Energy Lollipop](https://energylollipop.com/) skirtam Kalifornijos emisijoms.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/5-browser-extension/start/README.md b/translations/lt/5-browser-extension/start/README.md
new file mode 100644
index 00000000..3321261c
--- /dev/null
+++ b/translations/lt/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-28T11:26:50+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "lt"
+}
+-->
+# Naršyklės plėtinys „Carbon Trigger“: Pradinis kodas
+
+Naudojant „tmrow“ C02 Signal API stebėti elektros energijos naudojimą, sukurkite naršyklės plėtinį, kad galėtumėte gauti priminimą tiesiai savo naršyklėje apie tai, kaip intensyviai jūsų regione naudojama elektra. Naudojant šį plėtinį ad hoc būdu, galėsite priimti sprendimus dėl savo veiklos remdamiesi šia informacija.
+
+![plėtinio ekrano nuotrauka](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.lt.png)
+
+## Pradžia
+
+Jums reikės įdiegti [npm](https://npmjs.com). Atsisiųskite šio kodo kopiją į aplanką savo kompiuteryje.
+
+Įdiekite visas reikalingas paketas:
+
+```
+npm install
+```
+
+Sukurkite plėtinį naudodami „webpack“:
+
+```
+npm run build
+```
+
+Norėdami įdiegti „Edge“ naršyklėje, naudokite meniu „trys taškai“ viršutiniame dešiniajame naršyklės kampe, kad rastumėte plėtinių skydelį. Ten pasirinkite „Įkelti neišpakuotą“, kad įkeltumėte naują plėtinį. Atsidarius raginimui, pasirinkite „dist“ aplanką, ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API ([gaukite jį čia el. paštu](https://www.co2signal.com/) - įveskite savo el. pašto adresą į laukelį šiame puslapyje) ir [savo regiono kodą](http://api.electricitymap.org/v3/zones), atitinkantį [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone aš naudoju „US-NEISO“).
+
+![įdiegimas](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.lt.png)
+
+Kai API raktas ir regionas bus įvesti į plėtinio sąsają, spalvotas taškas naršyklės plėtinio juostoje turėtų pasikeisti, atspindėdamas jūsų regiono energijos naudojimą ir pateikdamas jums rekomendacijas, kokią energiją reikalaujančią veiklą būtų tinkama atlikti. Šio „taško“ sistemos koncepcija buvo pasiūlyta [Energy Lollipop plėtinio](https://energylollipop.com/) skirtam Kalifornijos emisijoms.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/1-introduction/README.md b/translations/lt/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..11175103
--- /dev/null
+++ b/translations/lt/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-28T11:38:41+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite kosminį žaidimą 1 dalis: Įvadas
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Prieš paskaitą: testas
+
+[Prieš paskaitą: testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Paveldėjimas ir kompozicija žaidimų kūrime
+
+Ankstesnėse pamokose nebuvo didelio poreikio rūpintis programų architektūra, nes projektai buvo labai nedideli. Tačiau, kai jūsų programos auga ir tampa sudėtingesnės, architektūriniai sprendimai tampa svarbesni. Yra du pagrindiniai būdai kurti didesnes programas JavaScript kalboje: *kompozicija* arba *paveldėjimas*. Abu turi savo privalumų ir trūkumų, tačiau paaiškinkime juos žaidimo kontekste.
+
+✅ Viena garsiausių programavimo knygų yra susijusi su [projektavimo šablonais](https://en.wikipedia.org/wiki/Design_Patterns).
+
+Žaidime turite `žaidimo objektus`, kurie yra objektai, egzistuojantys ekrane. Tai reiškia, kad jie turi vietą kartėzietinėje koordinačių sistemoje, apibūdinamą `x` ir `y` koordinatėmis. Kurdamas žaidimą pastebėsite, kad visi jūsų žaidimo objektai turi standartines savybes, bendras kiekvienam žaidimui, būtent elementus, kurie yra:
+
+- **vietos pagrindu** Dauguma, jei ne visi, žaidimo elementai yra vietos pagrindu. Tai reiškia, kad jie turi vietą, `x` ir `y`.
+- **judantys** Tai objektai, kurie gali judėti į naują vietą. Paprastai tai herojus, monstras arba NPC (ne žaidėjo personažas), bet ne, pavyzdžiui, statinis objektas, kaip medis.
+- **sunaikinantys save** Šie objektai egzistuoja tik tam tikrą laiką, kol jie pasiruošia ištrynimui. Paprastai tai yra `dead` arba `destroyed` logine reikšme, kuri signalizuoja žaidimo varikliui, kad šio objekto nebereikia rodyti.
+- **atsinaujinantys** 'Atsinaujinimas' yra tipiška savybė trumpalaikiams objektams. Tipiškas pavyzdys yra tekstas arba grafinis efektas, kaip sprogimas, kuris turėtų būti matomas tik kelias milisekundes.
+
+✅ Pagalvokite apie žaidimą Pac-Man. Ar galite identifikuoti keturis aukščiau išvardintus objektų tipus šiame žaidime?
+
+### Elgesio išreiškimas
+
+Visa tai, ką aprašėme aukščiau, yra elgesys, kurį žaidimo objektai gali turėti. Taigi, kaip mes tai užkoduojame? Šį elgesį galime išreikšti kaip metodus, susijusius su klasėmis arba objektais.
+
+**Klasės**
+
+Idėja yra naudoti `klases` kartu su `paveldėjimu`, kad pridėtume tam tikrą elgesį klasei.
+
+✅ Paveldėjimas yra svarbi sąvoka, kurią reikia suprasti. Sužinokite daugiau [MDN straipsnyje apie paveldėjimą](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Išreikšta per kodą, žaidimo objektas paprastai gali atrodyti taip:
+
+```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();
+```
+
+✅ Skirkite kelias minutes, kad įsivaizduotumėte Pac-Man herojų (pavyzdžiui, Inky, Pinky ar Blinky) ir kaip jis būtų parašytas JavaScript kalba.
+
+**Kompozicija**
+
+Kitas būdas tvarkyti objektų paveldėjimą yra naudojant *kompoziciją*. Tada objektai išreiškia savo elgesį taip:
+
+```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'); 
+```
+
+**Kokį šabloną turėčiau naudoti?**
+
+Pasirinkimas priklauso nuo jūsų. JavaScript palaiko abu šiuos paradigmus.
+
+--
+
+Kitas šablonas, dažnai naudojamas žaidimų kūrime, sprendžia žaidimo naudotojo patirties ir našumo valdymo problemą.
+
+## Pub/sub šablonas
+
+✅ Pub/Sub reiškia 'publikuoti-prenumeruoti'
+
+Šis šablonas sprendžia idėją, kad skirtingos jūsų programos dalys neturėtų žinoti viena apie kitą. Kodėl? Tai leidžia lengviau suprasti, kas vyksta apskritai, jei įvairios dalys yra atskirtos. Taip pat lengviau staiga pakeisti elgesį, jei to reikia. Kaip tai pasiekti? Tai darome įgyvendindami keletą sąvokų:
+
+- **žinutė**: Žinutė paprastai yra tekstinė eilutė, lydima pasirinktinio duomenų paketo (duomenų, kurie paaiškina, apie ką yra žinutė). Tipiška žinutė žaidime gali būti `KEY_PRESSED_ENTER`.
+- **publikuotojas**: Šis elementas *publikuoja* žinutę ir siunčia ją visiems prenumeratoriams.
+- **prenumeratorius**: Šis elementas *klausosi* specifinių žinučių ir atlieka tam tikrą užduotį gavęs šią žinutę, pavyzdžiui, paleidžia lazerį.
+
+Įgyvendinimas yra gana mažas, tačiau tai labai galingas šablonas. Štai kaip jis gali būti įgyvendintas:
+
+```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))
+    }
+  }
+}
+
+```
+
+Norėdami naudoti aukščiau pateiktą kodą, galime sukurti labai mažą įgyvendinimą:
+
+```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)
+  }
+});
+```
+
+Aukščiau mes sujungiame klaviatūros įvykį, `ArrowLeft`, ir siunčiame `HERO_MOVE_LEFT` žinutę. Mes klausomės tos žinutės ir judiname `herojų` kaip rezultatą. Šio šablono stiprybė yra ta, kad įvykio klausytojas ir herojus nežino vienas apie kitą. Galite perkelti `ArrowLeft` į `A` klavišą. Be to, būtų galima padaryti kažką visiškai kitokio su `ArrowLeft`, atlikus kelis pakeitimus eventEmitter funkcijoje `on`:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Kai jūsų žaidimas tampa sudėtingesnis, šis šablonas išlieka tokio pat sudėtingumo, o jūsų kodas išlieka švarus. Labai rekomenduojama naudoti šį šabloną.
+
+---
+
+## 🚀 Iššūkis
+
+Pagalvokite, kaip pub-sub šablonas gali pagerinti žaidimą. Kurios dalys turėtų siųsti įvykius, o kaip žaidimas turėtų į juos reaguoti? Dabar turite galimybę būti kūrybingi, sugalvodami naują žaidimą ir kaip jo dalys galėtų elgtis.
+
+## Po paskaitos: testas
+
+[Po paskaitos: testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Sužinokite daugiau apie Pub/Sub [skaitydami apie tai](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Užduotis
+
+[Maketuokite žaidimą](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/1-introduction/assignment.md b/translations/lt/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..850ee5c2
--- /dev/null
+++ b/translations/lt/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-28T11:39:11+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite žaidimo maketą
+
+## Instrukcijos
+
+Naudodamiesi pamokoje pateiktais kodo pavyzdžiais, sukurkite žaidimo, kuris jums patinka, reprezentaciją. Tai turės būti paprastas žaidimas, tačiau tikslas yra panaudoti klasės arba kompozicijos modelį ir pub/sub modelį, kad parodytumėte, kaip žaidimas galėtų būti paleidžiamas. Būkite kūrybingi!
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai atlikta                                       | Pakankamai gerai atlikta                              | Reikia patobulinimų                                |
+| ---------- | ----------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------- |
+|            | Trys elementai yra patalpinti ekrane ir manipuliuojami | Du elementai yra patalpinti ekrane ir manipuliuojami | Vienas elementas yra patalpintas ekrane ir manipuliuojamas |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipiame dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/2-drawing-to-canvas/README.md b/translations/lt/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..20383f60
--- /dev/null
+++ b/translations/lt/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-28T11:36:32+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite kosminį žaidimą, 2 dalis: Herojaus ir monstrų piešimas ant drobės
+
+## Klausimai prieš paskaitą
+
+[Klausimai prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Drobė
+
+Drobė yra HTML elementas, kuris pagal numatytuosius nustatymus neturi turinio – tai tuščias lapas. Jūs turite ją užpildyti piešdami ant jos.
+
+✅ Skaitykite [daugiau apie Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN svetainėje.
+
+Štai kaip ji paprastai deklaruojama kaip puslapio dalis:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Aukščiau nustatome `id`, `width` ir `height`.
+
+- `id`: nustatykite, kad galėtumėte gauti nuorodą, kai reikia su ja sąveikauti.
+- `width`: tai elemento plotis.
+- `height`: tai elemento aukštis.
+
+## Paprastos geometrijos piešimas
+
+Drobė naudoja Dekarto koordinačių sistemą objektų piešimui. Taigi, ji naudoja x ir y ašis, kad išreikštų, kur kažkas yra. Koordinatė `0,0` yra viršutinis kairysis kampas, o apatinis dešinysis kampas yra tai, ką nustatėte kaip drobės PLOTĮ ir AUKŠTĮ.
+
+![drobės tinklelis](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.lt.png)  
+> Vaizdas iš [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Norėdami piešti ant drobės elemento, turite atlikti šiuos veiksmus:
+
+1. **Gauti nuorodą** į drobės elementą.
+2. **Gauti nuorodą** į konteksto elementą, kuris yra drobės viduje.
+3. **Atlikti piešimo operaciją** naudojant konteksto elementą.
+
+Kodą šiems veiksmams paprastai sudaro:
+
+```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 daugiausia dėmesio skiria 2D formoms, tačiau taip pat galite piešti 3D elementus tinklalapyje; tam galite naudoti [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+Su Canvas API galite piešti įvairius dalykus, pavyzdžiui:
+
+- **Geometrines figūras**, jau parodėme, kaip piešti stačiakampį, tačiau yra daug daugiau, ką galite piešti.
+- **Tekstą**, galite piešti tekstą su bet kokiu šriftu ir spalva.
+- **Vaizdus**, galite piešti vaizdą, remdamiesi vaizdo failu, pvz., .jpg ar .png.
+
+✅ Išbandykite! Jūs jau žinote, kaip piešti stačiakampį, ar galite nupiešti apskritimą puslapyje? Pažvelkite į keletą įdomių Canvas piešinių CodePen svetainėje. Štai [ypatingai įspūdingas pavyzdys](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Įkelkite ir pieškite vaizdo failą
+
+Vaizdo failą įkeliate sukurdami `Image` objektą ir nustatydami jo `src` savybę. Tada klausotės `load` įvykio, kad sužinotumėte, kada jis paruoštas naudoti. Kodas atrodo taip:
+
+### Įkelkite failą
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Įkėlimo šablonas
+
+Rekomenduojama aukščiau pateiktą kodą apgaubti tokiu konstruktu, kad būtų lengviau naudoti ir manipuliuoti tik tada, kai jis visiškai įkeltas:
+
+```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')
+}
+
+```
+
+Norėdami piešti žaidimo elementus ekrane, jūsų kodas atrodytų taip:
+
+```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);
+}
+```
+
+## Dabar laikas pradėti kurti savo žaidimą
+
+### Ką kurti
+
+Jūs sukursite tinklalapį su drobės elementu. Jis turėtų rodyti juodą ekraną `1024*768`. Mes jums pateikėme du vaizdus:
+
+- Herojaus laivas
+
+   ![Herojaus laivas](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.lt.png)
+
+- 5*5 monstras
+
+   ![Monstro laivas](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.lt.png)
+
+### Rekomenduojami žingsniai pradėti kūrimą
+
+Suraskite failus, kurie buvo sukurti jums aplanke `your-work`. Jame turėtų būti:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Atidarykite šio aplanko kopiją Visual Studio Code programoje. Jums reikia turėti vietinę kūrimo aplinką, pageidautina su Visual Studio Code, NPM ir Node įdiegtais. Jei jūsų kompiuteryje nėra įdiegto `npm`, [štai kaip tai padaryti](https://www.npmjs.com/get-npm).
+
+Pradėkite projektą, naršydami į aplanką `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+Aukščiau pateiktas kodas paleis HTTP serverį adresu `http://localhost:5000`. Atidarykite naršyklę ir įveskite šį adresą. Dabar tai tuščias puslapis, bet tai pasikeis.
+
+> Pastaba: norėdami pamatyti pakeitimus ekrane, atnaujinkite naršyklę.
+
+### Pridėkite kodą
+
+Pridėkite reikalingą kodą į `your-work/app.js`, kad išspręstumėte žemiau pateiktus uždavinius:
+
+1. **Nupieškite** drobę su juodu fonu  
+   > patarimas: pridėkite dvi eilutes po atitinkamu TODO `/app.js` faile, nustatydami `ctx` elementą kaip juodą, o viršutinius/kairiuosius koordinates kaip 0,0, o aukštį ir plotį kaip drobės dydį.
+2. **Įkelkite** tekstūras  
+   > patarimas: pridėkite žaidėjo ir priešo vaizdus naudodami `await loadTexture` ir perduodami vaizdo kelią. Jų dar nematysite ekrane!
+3. **Nupieškite** herojų ekrano centre apatinėje pusėje  
+   > patarimas: naudokite `drawImage` API, kad nupieštumėte heroImg ekrane, nustatydami `canvas.width / 2 - 45` ir `canvas.height - canvas.height / 4)`.
+4. **Nupieškite** 5*5 monstrus  
+   > patarimas: dabar galite atkomentuoti kodą, kad nupieštumėte priešus ekrane. Tada eikite į `createEnemies` funkciją ir ją sukurkite.
+
+   Pirmiausia nustatykite keletą konstantų:
+
+    ```javascript
+    const MONSTER_TOTAL = 5;
+    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+    const STOP_X = START_X + MONSTER_WIDTH;
+    ```
+
+    tada sukurkite ciklą, kad nupieštumėte monstrų masyvą ekrane:
+
+    ```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);
+        }
+      }
+    ```
+
+## Rezultatas
+
+Galutinis rezultatas turėtų atrodyti taip:
+
+![Juodas ekranas su herojumi ir 5*5 monstrais](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.lt.png)
+
+## Sprendimas
+
+Pabandykite išspręsti patys, bet jei užstrigsite, peržiūrėkite [sprendimą](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Iššūkis
+
+Jūs išmokote piešti su 2D orientuota Canvas API; pažiūrėkite į [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ir pabandykite nupiešti 3D objektą.
+
+## Klausimai po paskaitos
+
+[Klausimai po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Sužinokite daugiau apie Canvas API [skaitydami apie ją](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Užduotis
+
+[Eksperimentuokite su Canvas API](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/2-drawing-to-canvas/assignment.md b/translations/lt/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..c9025743
--- /dev/null
+++ b/translations/lt/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-28T11:37:01+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Žaiskite su Canvas API
+
+## Instrukcijos
+
+Pasirinkite vieną Canvas API elementą ir sukurkite ką nors įdomaus. Ar galite sukurti mažą galaktiką iš pasikartojančių žvaigždžių? Ar galite sukurti įdomią spalvotų linijų tekstūrą? Įkvėpimo galite ieškoti CodePen (bet nekopijuokite).
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai atlikta                                          | Pakankamai gerai                   | Reikia patobulinimų   |
+| ---------- | -------------------------------------------------------- | ----------------------------------- | --------------------- |
+|            | Pateiktas kodas, rodantis įdomią tekstūrą ar formą       | Pateiktas kodas, bet jis neveikia  | Kodas nepateiktas     |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/3-moving-elements-around/README.md b/translations/lt/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..417da179
--- /dev/null
+++ b/translations/lt/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,402 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-28T11:32:26+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite Kosmoso Žaidimą 3 dalis: Judesio pridėjimas
+
+## Prieš paskaitą testas
+
+[Prieš paskaitą testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Žaidimai nėra labai smagūs, kol ekrane nesimato judančių ateivių! Šiame žaidime naudosime dviejų tipų judesius:
+
+- **Klaviatūros/pelės judesys**: kai vartotojas sąveikauja su klaviatūra ar pele, kad perkelti objektą ekrane.
+- **Žaidimo sukeltas judesys**: kai žaidimas perkelia objektą tam tikru laiko intervalu.
+
+Taigi, kaip mes judiname objektus ekrane? Viskas remiasi į Dekarto koordinates: keičiame objekto vietą (x, y) ir tada perpiešiame ekraną.
+
+Paprastai reikia atlikti šiuos veiksmus, kad pasiektumėte *judesį* ekrane:
+
+1. **Nustatyti naują vietą** objektui; tai būtina, kad objektas atrodytų kaip pajudėjęs.
+2. **Išvalyti ekraną**, ekranas turi būti išvalytas tarp piešimų. Galime jį išvalyti nupiešdami stačiakampį su fono spalva.
+3. **Perpiešti objektą** naujoje vietoje. Tai atlikę galiausiai pasiekiame objekto perkėlimą iš vienos vietos į kitą.
+
+Štai kaip tai gali atrodyti kode:
+
+```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);
+```
+
+✅ Ar galite sugalvoti priežastį, kodėl herojaus perpiešimas daug kartų per sekundę gali sukelti našumo problemų? Perskaitykite apie [alternatyvas šiam modeliui](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Klaviatūros įvykių valdymas
+
+Įvykius valdote priskirdami konkrečius įvykius kodui. Klaviatūros įvykiai suaktyvinami visame lange, o pelės įvykiai, tokie kaip `click`, gali būti susieti su konkretaus elemento paspaudimu. Šiame projekte naudosime klaviatūros įvykius.
+
+Norėdami valdyti įvykį, turite naudoti lango metodą `addEventListener()` ir pateikti jam du įvesties parametrus. Pirmasis parametras yra įvykio pavadinimas, pavyzdžiui, `keyup`. Antrasis parametras yra funkcija, kuri turėtų būti iškviečiama įvykio metu.
+
+Štai pavyzdys:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+Klavišų įvykiams yra dvi savybės, kurias galite naudoti norėdami pamatyti, kuris klavišas buvo paspaustas:
+
+- `key`, tai yra paspausto klavišo simbolinė reprezentacija, pavyzdžiui, `ArrowUp`
+- `keyCode`, tai yra skaitinė reprezentacija, pavyzdžiui, `37`, atitinkanti `ArrowLeft`.
+
+✅ Klavišų įvykių valdymas yra naudingas ne tik žaidimų kūrime. Kokius kitus šios technikos panaudojimo būdus galite sugalvoti?
+
+### Specialūs klavišai: įspėjimas
+
+Yra keletas *specialių* klavišų, kurie veikia langą. Tai reiškia, kad jei klausotės `keyup` įvykio ir naudojate šiuos specialius klavišus, kad perkeltumėte savo herojų, jie taip pat atliks horizontalų slinkimą. Dėl šios priežasties, kurdami savo žaidimą, galbūt norėsite *išjungti* šį įmontuotą naršyklės elgesį. Tam reikia tokio kodo:
+
+```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);
+```
+
+Aukščiau pateiktas kodas užtikrins, kad rodyklių klavišai ir tarpo klavišas turės *numatytąjį* elgesį išjungtą. *Išjungimo* mechanizmas įvyksta, kai iškviečiame `e.preventDefault()`.
+
+## Žaidimo sukeltas judesys
+
+Galime priversti objektus judėti patys naudodami laikmačius, tokius kaip `setTimeout()` arba `setInterval()`, kurie atnaujina objekto vietą kiekviename intervale. Štai kaip tai gali atrodyti:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## Žaidimo ciklas
+
+Žaidimo ciklas yra koncepcija, kuri iš esmės yra funkcija, iškviečiama reguliariais intervalais. Jis vadinamas žaidimo ciklu, nes viskas, kas turėtų būti matoma vartotojui, yra piešiama cikle. Žaidimo ciklas naudoja visus žaidimo objektus, kurie yra žaidimo dalis, piešdamas juos visus, nebent dėl kokios nors priežasties jie nebėra žaidimo dalis. Pavyzdžiui, jei objektas yra priešas, kurį pataikė lazeris ir jis susprogo, jis nebėra dabartinio žaidimo ciklo dalis (apie tai sužinosite daugiau vėlesnėse pamokose).
+
+Štai kaip žaidimo ciklas paprastai atrodo, išreikštas kode:
+
+```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);
+```
+
+Aukščiau pateiktas ciklas iškviečiamas kas `200` milisekundžių, kad perpieštų drobę. Galite pasirinkti geriausią intervalą, kuris tinka jūsų žaidimui.
+
+## Tęsiame Kosmoso Žaidimą
+
+Jūs paimsite esamą kodą ir jį išplėsite. Galite pradėti nuo kodo, kurį užbaigėte pirmoje dalyje, arba naudoti kodą iš [II dalies pradžios](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Herojaus judėjimas**: pridėsite kodą, kad galėtumėte judinti herojų naudodami rodyklių klavišus.
+- **Priešų judėjimas**: taip pat reikės pridėti kodą, kad priešai judėtų iš viršaus į apačią tam tikru greičiu.
+
+## Rekomenduojami žingsniai
+
+Raskite failus, kurie buvo sukurti jums aplanke `your-work`. Jame turėtų būti:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Pradėkite savo projektą aplanke `your_work`, įvesdami:
+
+```bash
+cd your-work
+npm start
+```
+
+Aukščiau pateiktas veiksmas paleis HTTP serverį adresu `http://localhost:5000`. Atidarykite naršyklę ir įveskite šį adresą, šiuo metu turėtų būti matomas herojus ir visi priešai; dar niekas nejuda!
+
+### Pridėkite kodą
+
+1. **Pridėkite specialius objektus** `hero`, `enemy` ir `game object`, jie turėtų turėti `x` ir `y` savybes. (Prisiminkite skyrių apie [Paveldėjimą arba kompoziciją](../README.md)).
+
+   *PATARIMAS* `game object` turėtų būti tas, kuris turi `x` ir `y` bei galimybę piešti save ant drobės.
+
+   >patarimas: pradėkite pridėdami naują GameObject klasę su jos konstruktoriaus apibrėžimu, kaip parodyta žemiau, ir tada nupieškite ją ant drobės:
+  
+    ```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);
+      }
+    }
+    ```
+
+    Dabar išplėskite šį GameObject, kad sukurtumėte Hero ir 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. **Pridėkite klavišų įvykių valdiklius**, kad valdytumėte herojaus judėjimą aukštyn/žemyn kairėn/dešinėn.
+
+   *ATMINKITE*, kad tai yra Dekarto sistema, viršutinis kairysis kampas yra `0,0`. Taip pat nepamirškite pridėti kodo, kad sustabdytumėte *numatytąjį elgesį*.
+
+   >patarimas: sukurkite savo onKeyDown funkciją ir priskirkite ją langui:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Šiuo metu patikrinkite savo naršyklės konsolę ir stebėkite, kaip registruojami klavišų paspaudimai.
+
+3. **Įgyvendinkite** [Pub sub modelį](../README.md), tai padės išlaikyti jūsų kodą švarų, kai tęsite likusias dalis.
+
+   Norėdami atlikti šią paskutinę dalį, galite:
+
+   1. **Pridėti įvykio klausiklį** prie lango:
+
+       ```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. **Sukurti EventEmitter klasę**, kad galėtumėte skelbti ir prenumeruoti pranešimus:
+
+        ```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. **Pridėti konstantas** ir nustatyti 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. **Inicijuoti žaidimą**
+
+    ```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. **Nustatyti žaidimo ciklą**
+
+   Refaktoruokite window.onload funkciją, kad inicijuotumėte žaidimą ir nustatytumėte žaidimo ciklą tinkamu intervalu. Taip pat pridėsite lazerio spindulį:
+
+    ```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. **Pridėkite kodą**, kad priešai judėtų tam tikru intervalu.
+
+    Refaktoruokite `createEnemies()` funkciją, kad sukurtumėte priešus ir įtrauktumėte juos į naują gameObjects klasę:
+
+    ```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);
+        }
+      }
+    }
+    ```
+    
+    ir pridėkite `createHero()` funkciją, kad atliktumėte panašų procesą herojui.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    ir galiausiai pridėkite `drawGameObjects()` funkciją, kad pradėtumėte piešimą:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Jūsų priešai turėtų pradėti artėti prie jūsų herojaus erdvėlaivio!
+
+---
+
+## 🚀 Iššūkis
+
+Kaip matote, jūsų kodas gali tapti „spagečių kodu“, kai pradedate pridėti funkcijas, kintamuosius ir klases. Kaip galite geriau organizuoti savo kodą, kad jis būtų lengviau skaitomas? Nubraižykite sistemą, kaip organizuoti savo kodą, net jei jis vis dar yra viename faile.
+
+## Po paskaitos testas
+
+[Po paskaitos testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Peržiūra ir savarankiškas mokymasis
+
+Nors mes rašome savo žaidimą nenaudodami karkasų, yra daug JavaScript pagrindu sukurtų drobės karkasų žaidimų kūrimui. Skirkite laiko [skaitymui apie juos](https://github.com/collections/javascript-game-engines).
+
+## Užduotis
+
+[Pakomentuokite savo kodą](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/3-moving-elements-around/assignment.md b/translations/lt/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..de02fe4f
--- /dev/null
+++ b/translations/lt/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-28T11:33:16+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Komentuokite savo kodą
+
+## Instrukcijos
+
+Peržiūrėkite savo dabartinį /app.js failą žaidimo aplanke ir suraskite būdus, kaip jį pakomentuoti ir sutvarkyti. Kodas labai lengvai gali tapti nevaldomas, todėl dabar yra puiki proga pridėti komentarus, kad užtikrintumėte, jog kodas būtų suprantamas ir galėtumėte jį naudoti vėliau.
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai                                                          | Pakankamai                           | Reikia patobulinimų                                           |
+| ---------- | ---------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------ |
+|            | `app.js` kodas yra pilnai pakomentuotas ir suskirstytas į loginius blokus | `app.js` kodas yra pakankamai pakomentuotas | `app.js` kodas yra šiek tiek nesutvarkytas ir trūksta gerų komentarų |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/4-collision-detection/README.md b/translations/lt/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..6e0b0de2
--- /dev/null
+++ b/translations/lt/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-28T11:35:06+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite kosminį žaidimą, 4 dalis: pridėkime lazerį ir aptikime susidūrimus
+
+## Prieš paskaitą: testas
+
+[Prieš paskaitą: testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+Šioje pamokoje išmoksite šaudyti lazeriais naudodami JavaScript! Į žaidimą pridėsime du dalykus:
+
+- **Lazerį**: šis lazeris bus iššautas iš herojaus laivo ir judės vertikaliai aukštyn
+- **Susidūrimų aptikimą**, kaip dalį šaudymo funkcionalumo, taip pat pridėsime keletą žaidimo taisyklių:
+   - **Lazeris pataiko į priešą**: priešas miršta, jei jį pataiko lazeris
+   - **Lazeris pataiko į ekrano viršų**: lazeris sunaikinamas, jei pataiko į ekrano viršutinę dalį
+   - **Priešo ir herojaus susidūrimas**: priešas ir herojus sunaikinami, jei susiduria vienas su kitu
+   - **Priešas pasiekia ekrano apačią**: priešas ir herojus sunaikinami, jei priešas pasiekia ekrano apačią
+
+Trumpai tariant, jūs – *herojus* – turite pataikyti į visus priešus lazeriu, kol jie nepasiekia ekrano apačios.
+
+✅ Atlikite nedidelį tyrimą apie pirmąjį kada nors sukurtą kompiuterinį žaidimą. Kokios buvo jo funkcijos?
+
+Būkime herojiški kartu!
+
+## Susidūrimų aptikimas
+
+Kaip aptikti susidūrimus? Turime galvoti apie žaidimo objektus kaip apie stačiakampius, kurie juda. Kodėl? Nes vaizdas, naudojamas žaidimo objektui piešti, yra stačiakampis: jis turi `x`, `y`, `plotį` ir `aukštį`.
+
+Jei du stačiakampiai, t. y. herojus ir priešas, *persidengia*, įvyksta susidūrimas. Kas turėtų nutikti, priklauso nuo žaidimo taisyklių. Norint įgyvendinti susidūrimų aptikimą, reikia:
+
+1. Būdo gauti stačiakampio reprezentaciją žaidimo objektui, kažką panašaus į tai:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Palyginimo funkcijos, kuri gali atrodyti taip:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Kaip sunaikinti objektus
+
+Norint sunaikinti objektus žaidime, reikia pranešti žaidimui, kad jis nebeturėtų piešti šio objekto žaidimo cikle, kuris vyksta tam tikru intervalu. Vienas būdas tai padaryti – pažymėti žaidimo objektą kaip *mirusį*, kai kažkas nutinka, pavyzdžiui:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Tada galite pašalinti *mirusius* objektus prieš atnaujindami ekraną, pavyzdžiui:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Kaip iššauti lazerį
+
+Lazerio iššovimas reiškia reakciją į klavišo paspaudimą ir objekto sukūrimą, kuris juda tam tikra kryptimi. Todėl reikia atlikti šiuos veiksmus:
+
+1. **Sukurti lazerio objektą**: iš herojaus laivo viršaus, kuris sukūrimo metu pradeda judėti aukštyn link ekrano viršaus.
+2. **Priskirti kodą klavišo įvykiui**: reikia pasirinkti klavišą klaviatūroje, kuris reprezentuos žaidėjo lazerio šūvį.
+3. **Sukurti žaidimo objektą, kuris atrodo kaip lazeris**, kai klavišas paspaudžiamas.
+
+## Lazerio šaudymo pertrauka
+
+Lazeris turi būti iššaunamas kiekvieną kartą, kai paspaudžiamas klavišas, pavyzdžiui, *space*. Kad žaidimas nesukurtų per daug lazerių per trumpą laiką, reikia tai išspręsti. Sprendimas – įgyvendinti vadinamąją *pertrauką*, laikmatį, kuris užtikrina, kad lazeris gali būti iššaunamas tik tam tikru dažniu. Tai galima įgyvendinti taip:
+
+```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.
+    }
+  }
+}
+```
+
+✅ Peržiūrėkite 1 pamoką kosminio žaidimo serijoje, kad prisimintumėte apie *pertraukas*.
+
+## Ką sukurti
+
+Turėsite paimti esamą kodą (kurį turėjote išvalyti ir pertvarkyti) iš ankstesnės pamokos ir jį išplėsti. Galite pradėti nuo II dalies kodo arba naudoti kodą iš [III dalies pradinio projekto](../../../../../../../../../your-work).
+
+> patarimas: lazeris, su kuriuo dirbsite, jau yra jūsų resursų aplanke ir yra nurodytas jūsų kode
+
+- **Pridėkite susidūrimų aptikimą**, kai lazeris susiduria su kažkuo, turėtų būti taikomos šios taisyklės:
+   1. **Lazeris pataiko į priešą**: priešas miršta, jei jį pataiko lazeris
+   2. **Lazeris pataiko į ekrano viršų**: lazeris sunaikinamas, jei pataiko į ekrano viršutinę dalį
+   3. **Priešo ir herojaus susidūrimas**: priešas ir herojus sunaikinami, jei susiduria vienas su kitu
+   4. **Priešas pasiekia ekrano apačią**: priešas ir herojus sunaikinami, jei priešas pasiekia ekrano apačią
+
+## Rekomenduojami žingsniai
+
+Raskite failus, kurie buvo sukurti jums aplanke `your-work`. Jame turėtų būti:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Pradėkite savo projektą aplanke `your_work` įvesdami:
+
+```bash
+cd your-work
+npm start
+```
+
+Tai paleis HTTP serverį adresu `http://localhost:5000`. Atidarykite naršyklę ir įveskite šį adresą, šiuo metu turėtų būti matomas herojus ir visi priešai, tačiau niekas dar nejuda :).
+
+### Pridėkite kodą
+
+1. **Sukurkite stačiakampio reprezentaciją savo žaidimo objektui, kad galėtumėte aptikti susidūrimus** Žemiau pateiktas kodas leidžia gauti stačiakampio reprezentaciją `GameObject`. Redaguokite savo `GameObject` klasę, kad ją išplėstumėte:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Pridėkite kodą, kuris tikrina susidūrimus** Tai bus nauja funkcija, kuri tikrina, ar du stačiakampiai persidengia:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Pridėkite lazerio šaudymo funkcionalumą**
+   1. **Pridėkite klavišo įvykio pranešimą**. *Space* klavišas turėtų sukurti lazerį tiesiai virš herojaus laivo. Pridėkite tris konstantas į `Messages` objektą:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Apdorokite space klavišą**. Redaguokite `window.addEventListener` funkciją, kad apdorotumėte space klavišą:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Pridėkite klausytojus**. Redaguokite `initGame()` funkciją, kad užtikrintumėte, jog herojus gali šaudyti paspaudus space klavišą:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       ir pridėkite naują `eventEmitter.on()` funkciją, kad užtikrintumėte elgesį, kai priešas susiduria su lazeriu:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Judinkite objektą**, Užtikrinkite, kad lazeris palaipsniui judėtų ekrano viršaus link. Sukurkite naują `Laser` klasę, kuri išplečia `GameObject`, kaip darėte anksčiau: 
+   
+      ```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. **Apdorokite susidūrimus**, Įgyvendinkite lazerio susidūrimo taisykles. Pridėkite `updateGameObjects()` funkciją, kuri tikrina susidūrimus tarp objektų:
+
+      ```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);
+      }  
+      ```
+
+      Įsitikinkite, kad pridėjote `updateGameObjects()` į savo žaidimo ciklą `window.onload`.
+
+   4. **Įgyvendinkite pertrauką** lazeriui, kad jis galėtų būti iššaunamas tik tam tikru dažniu.
+
+      Galiausiai, redaguokite `Hero` klasę, kad ji galėtų turėti pertrauką:
+
+       ```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;
+        }
+      }
+      ```
+
+Šiuo metu jūsų žaidimas turi tam tikrą funkcionalumą! Galite naviguoti naudodami rodyklių klavišus, šaudyti lazeriu paspaudę space klavišą, o priešai dingsta, kai juos pataikote. Puikiai padirbėta!
+
+---
+
+## 🚀 Iššūkis
+
+Pridėkite sprogimą! Pažvelkite į žaidimo resursus [Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) ir pabandykite pridėti sprogimą, kai lazeris pataiko į ateivį.
+
+## Po paskaitos: testas
+
+[Po paskaitos: testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Eksperimentuokite su intervalais savo žaidime. Kas nutinka, kai juos pakeičiate? Skaitykite daugiau apie [JavaScript laiko įvykius](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Užduotis
+
+[Tyrinėkite susidūrimus](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/4-collision-detection/assignment.md b/translations/lt/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..5b46f2b6
--- /dev/null
+++ b/translations/lt/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-28T11:35:39+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Tyrinėkite Susidūrimus
+
+## Instrukcijos
+
+Norėdami geriau suprasti, kaip veikia susidūrimai, sukurkite labai mažą žaidimą su keliais objektų susidūrimais. Padarykite, kad jie judėtų paspaudus klavišus arba pelės mygtukus, ir sugalvokite, kad vienam iš objektų kažkas nutiktų, kai jis susiduria. Tai galėtų būti, pavyzdžiui, meteoras, atsitrenkiantis į žemę, arba susiduriantys automobiliai. Būkite kūrybingi!
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai atlikta                                                                                                        | Pakankamai gerai               | Reikia patobulinimų |
+| ---------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------- |
+|            | Sukurtas pilnai veikiantis kodo pavyzdys, objektai nupiešti ant drobės, vyksta pagrindiniai susidūrimai ir reakcijos   | Kodas yra kažkiek neišbaigtas  | Kodas neveikia      |
+
+---
+
+**Atsakomybės atsisakymas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/4-collision-detection/solution/README.md b/translations/lt/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..bbb08308
--- /dev/null
+++ b/translations/lt/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T11:35:50+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "lt"
+}
+-->
+Tai yra vietos rezervacija, palikta tuščia sąmoningai
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/4-collision-detection/your-work/README.md b/translations/lt/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..737352a6
--- /dev/null
+++ b/translations/lt/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-28T11:35:59+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "lt"
+}
+-->
+Tai yra laikiklis, paliktas tuščias tyčia
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/5-keeping-score/README.md b/translations/lt/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..89c1d8e3
--- /dev/null
+++ b/translations/lt/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-28T11:33:44+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite kosminį žaidimą, 5 dalis: taškai ir gyvybės
+
+## Klausimai prieš paskaitą
+
+[Klausimai prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+Šioje pamokoje sužinosite, kaip pridėti taškų skaičiavimą žaidime ir apskaičiuoti gyvybes.
+
+## Teksto rodymas ekrane
+
+Norėdami ekrane rodyti žaidimo taškus, turite žinoti, kaip pateikti tekstą ekrane. Atsakymas yra naudojant `fillText()` metodą ant canvas objekto. Taip pat galite kontroliuoti kitus aspektus, pvz., kokį šriftą naudoti, teksto spalvą ir net jo lygiavimą (kairė, dešinė, centras). Žemiau pateiktas kodas, kuris piešia tekstą ekrane.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Skaitykite daugiau apie [kaip pridėti tekstą prie canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) ir drąsiai padarykite savo tekstą įdomesnį!
+
+## Gyvybės kaip žaidimo koncepcija
+
+Gyvybės koncepcija žaidime yra tik skaičius. Kosminio žaidimo kontekste dažnai priskiriamos kelios gyvybės, kurios mažėja po vieną, kai jūsų laivas patiria žalą. Gražu, jei galite parodyti grafinę šio atvaizdavimo formą, pvz., mažus laivelius ar širdeles, o ne skaičių.
+
+## Ką sukurti
+
+Pridėkime šiuos elementus į jūsų žaidimą:
+
+- **Žaidimo taškai**: Už kiekvieną sunaikintą priešo laivą herojus turėtų gauti taškų, siūlome 100 taškų už laivą. Žaidimo taškai turėtų būti rodomi apatiniame kairiajame kampe.
+- **Gyvybės**: Jūsų laivas turi tris gyvybes. Kiekvieną kartą, kai priešo laivas susiduria su jumis, prarandate gyvybę. Gyvybių skaičius turėtų būti rodomas apatiniame dešiniajame kampe ir būti sudarytas iš šio grafinio elemento ![gyvybės paveikslėlis](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.lt.png).
+
+## Rekomenduojami žingsniai
+
+Suraskite failus, kurie buvo sukurti jums `your-work` aplanke. Jame turėtų būti šie elementai:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Pradėkite savo projektą `your_work` aplanke įvesdami:
+
+```bash
+cd your-work
+npm start
+```
+
+Aukščiau pateiktas kodas paleis HTTP serverį adresu `http://localhost:5000`. Atidarykite naršyklę ir įveskite šį adresą. Šiuo metu turėtumėte matyti herojų ir visus priešus, o paspaudę kairės ir dešinės rodyklių klavišus, herojus judės ir galės šaudyti į priešus.
+
+### Pridėkite kodą
+
+1. **Nukopijuokite reikalingus išteklius** iš `solution/assets/` aplanko į `your-work` aplanką; pridėsite `life.png` išteklį. Pridėkite `lifeImg` į `window.onload` funkciją:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Pridėkite `lifeImg` į išteklių sąrašą:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Pridėkite kintamuosius**. Pridėkite kodą, kuris atspindi jūsų bendrą taškų skaičių (0) ir likusias gyvybes (3), parodykite šiuos skaičius ekrane.
+
+3. **Išplėskite `updateGameObjects()` funkciją**. Išplėskite `updateGameObjects()` funkciją, kad apdorotumėte priešų susidūrimus:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Pridėkite gyvybes ir taškus**. 
+   1. **Inicializuokite kintamuosius**. Po `this.cooldown = 0` `Hero` klasėje nustatykite gyvybes ir taškus:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Pieškite kintamuosius ekrane**. Rodykite šias reikšmes ekrane:
+
+        ```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. **Pridėkite metodus į žaidimo ciklą**. Įsitikinkite, kad pridėjote šias funkcijas į `window.onload` funkciją po `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Įgyvendinkite žaidimo taisykles**. Įgyvendinkite šias žaidimo taisykles:
+
+   1. **Už kiekvieną herojaus ir priešo susidūrimą** atimkite gyvybę.
+   
+      Išplėskite `Hero` klasę, kad atliktumėte šį atėmimą:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Už kiekvieną lazerį, kuris pataiko į priešą**, padidinkite žaidimo taškus 100 taškų.
+
+      Išplėskite `Hero` klasę, kad atliktumėte šį padidinimą:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Pridėkite šias funkcijas į susidūrimo įvykių emitentus:
+
+        ```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();
+        });
+        ```
+
+✅ Šiek tiek pasidomėkite, kokie kiti žaidimai yra sukurti naudojant JavaScript/Canvas. Kokie jų bendri bruožai?
+
+Baigę šį darbą, turėtumėte matyti mažus „gyvybės“ laivelius apatiniame dešiniajame kampe, taškus apatiniame kairiajame kampe, ir turėtumėte matyti, kaip jūsų gyvybių skaičius mažėja susidūrus su priešais, o taškai didėja šaudant į priešus. Puiku! Jūsų žaidimas beveik baigtas.
+
+---
+
+## 🚀 Iššūkis
+
+Jūsų kodas beveik baigtas. Ar galite įsivaizduoti kitus žingsnius?
+
+## Klausimai po paskaitos
+
+[Klausimai po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Pasidomėkite būdais, kaip galite padidinti ir sumažinti žaidimo taškus bei gyvybes. Yra keletas įdomių žaidimų variklių, pvz., [PlayFab](https://playfab.com). Kaip vieno iš jų naudojimas galėtų pagerinti jūsų žaidimą?
+
+## Užduotis
+
+[Sukurkite žaidimą su taškų skaičiavimu](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipiame dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/5-keeping-score/assignment.md b/translations/lt/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..39402252
--- /dev/null
+++ b/translations/lt/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-28T11:34:14+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite Taškų Skaičiavimo Žaidimą
+
+## Instrukcijos
+
+Sukurkite žaidimą, kuriame kūrybiškai rodytumėte gyvybes ir taškus. Pavyzdžiui, gyvybes galite pavaizduoti širdelėmis, o taškus – kaip didelį skaičių ekrano apačioje centre. Pažiūrėkite čia, kur rasite [Nemokamus žaidimų resursus](https://www.kenney.nl/)
+
+# Vertinimo Kriterijai
+
+| Kriterijai | Puikiai                 | Pakankamai                 | Reikia Tobulinimo          |
+| ---------- | ----------------------- | -------------------------- | -------------------------- |
+|            | pateiktas pilnas žaidimas | pateikta dalis žaidimo     | dalis žaidimo turi klaidų |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipiame dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudotis profesionalių vertėjų paslaugomis. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/5-keeping-score/solution/README.md b/translations/lt/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..81a81c27
--- /dev/null
+++ b/translations/lt/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T11:34:25+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "lt"
+}
+-->
+Tai yra vietos rezervacija, palikta tuščia sąmoningai
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/5-keeping-score/your-work/README.md b/translations/lt/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..b51ac2e2
--- /dev/null
+++ b/translations/lt/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-28T11:34:34+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "lt"
+}
+-->
+Tai yra vietos rezervacija, palikta tuščia sąmoningai
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/6-end-condition/README.md b/translations/lt/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..3cb0c943
--- /dev/null
+++ b/translations/lt/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-28T11:37:24+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite kosminį žaidimą 6 dalis: Pabaiga ir paleidimas iš naujo
+
+## Klausimai prieš paskaitą
+
+[Klausimai prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Yra įvairių būdų, kaip žaidime išreikšti *pabaigos sąlygą*. Jūs, kaip žaidimo kūrėjas, nusprendžiate, kodėl žaidimas baigiasi. Štai keletas priežasčių, jei kalbame apie kosminį žaidimą, kurį kūrėte iki šiol:
+
+- **Sunaikinta `N` priešo laivų**: Dažnai žaidimas yra padalintas į skirtingus lygius, kuriuose reikia sunaikinti `N` priešo laivų, kad užbaigtumėte lygį.
+- **Jūsų laivas sunaikintas**: Yra žaidimų, kuriuose pralaimite, jei jūsų laivas sunaikinamas. Kitas dažnas požiūris yra gyvybių koncepcija. Kiekvieną kartą, kai jūsų laivas sunaikinamas, prarandate gyvybę. Kai visos gyvybės prarandamos, pralaimite žaidimą.
+- **Surinkta `N` taškų**: Kita dažna pabaigos sąlyga yra taškų rinkimas. Kaip gaunate taškus, priklauso nuo jūsų, tačiau dažnai taškai priskiriami įvairioms veikloms, pavyzdžiui, priešo laivo sunaikinimui arba daiktų rinkimui, kurie atsiranda, kai jie sunaikinami.
+- **Užbaigtas lygis**: Tai gali apimti kelias sąlygas, tokias kaip `X` sunaikinti priešo laivai, `Y` surinkti taškai arba galbūt specifinio daikto surinkimas.
+
+## Paleidimas iš naujo
+
+Jei žmonėms patinka jūsų žaidimas, jie greičiausiai norės jį žaisti dar kartą. Kai žaidimas baigiasi dėl bet kokios priežasties, turėtumėte pasiūlyti galimybę jį paleisti iš naujo.
+
+✅ Pagalvokite, kokiomis sąlygomis žaidimas baigiasi, ir kaip jums siūloma jį paleisti iš naujo.
+
+## Ką sukurti
+
+Jūs pridėsite šias taisykles į savo žaidimą:
+
+1. **Žaidimo laimėjimas**. Kai visi priešo laivai sunaikinami, jūs laimite žaidimą. Be to, parodykite pergalės pranešimą.
+1. **Paleidimas iš naujo**. Kai visos gyvybės prarandamos arba žaidimas laimimas, turėtumėte pasiūlyti būdą paleisti žaidimą iš naujo. Nepamirškite! Jums reikės iš naujo inicializuoti žaidimą ir išvalyti ankstesnę žaidimo būseną.
+
+## Rekomenduojami žingsniai
+
+Raskite failus, kurie buvo sukurti jums aplanke `your-work`. Jame turėtų būti:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Pradėkite savo projektą aplanke `your_work`, įvesdami:
+
+```bash
+cd your-work
+npm start
+```
+
+Tai paleis HTTP serverį adresu `http://localhost:5000`. Atidarykite naršyklę ir įveskite šį adresą. Jūsų žaidimas turėtų būti paruoštas žaisti.
+
+> patarimas: kad išvengtumėte įspėjimų Visual Studio Code, redaguokite funkciją `window.onload`, kad ji kviestų `gameLoopId` kaip yra (be `let`), ir deklaruokite `gameLoopId` failo viršuje, nepriklausomai: `let gameLoopId;`
+
+### Pridėkite kodą
+
+1. **Sekite pabaigos sąlygą**. Pridėkite kodą, kuris seka priešų skaičių arba ar herojaus laivas buvo sunaikintas, pridėdami šias dvi funkcijas:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Pridėkite logiką pranešimų tvarkytojams**. Redaguokite `eventEmitter`, kad tvarkytų šias sąlygas:
+
+    ```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. **Pridėkite naujų pranešimų tipus**. Pridėkite šiuos pranešimus į constants objektą:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Pridėkite paleidimo iš naujo kodą**. Kodas, kuris paleidžia žaidimą iš naujo paspaudus pasirinktą mygtuką.
+
+   1. **Klausykite klavišo paspaudimo `Enter`**. Redaguokite savo lango eventListener, kad klausytų šio paspaudimo:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Pridėkite paleidimo iš naujo pranešimą**. Pridėkite šį pranešimą į Messages constant:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Įgyvendinkite žaidimo taisykles**. Įgyvendinkite šias žaidimo taisykles:
+
+   1. **Žaidėjo laimėjimo sąlyga**. Kai visi priešo laivai sunaikinami, parodykite pergalės pranešimą.
+
+      1. Pirmiausia sukurkite funkciją `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. Sukurkite funkciją `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. **Paleidimo iš naujo logika**. Kai visos gyvybės prarandamos arba žaidėjas laimi žaidimą, parodykite, kad žaidimą galima paleisti iš naujo. Be to, paleiskite žaidimą iš naujo, kai paspaudžiamas *paleidimo iš naujo* klavišas (jūs galite nuspręsti, kuris klavišas bus priskirtas paleidimui iš naujo).
+
+      1. Sukurkite funkciją `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. Pridėkite skambutį į `eventEmitter`, kad iš naujo inicializuotų žaidimą funkcijoje `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Pridėkite funkciją `clear()` į EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Sveikiname, Kapitone! Jūsų žaidimas baigtas! Puikiai padirbėta! 🚀 💥 👽
+
+---
+
+## 🚀 Iššūkis
+
+Pridėkite garsą! Ar galite pridėti garsą, kad pagerintumėte žaidimo patirtį, galbūt kai lazeris pataiko, arba kai herojus miršta ar laimi? Pažvelkite į šį [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play), kad sužinotumėte, kaip groti garsą naudojant JavaScript.
+
+## Klausimai po paskaitos
+
+[Klausimai po paskaitos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Jūsų užduotis yra sukurti naują pavyzdinį žaidimą, todėl išnagrinėkite keletą įdomių žaidimų, kad pamatytumėte, kokio tipo žaidimą galėtumėte sukurti.
+
+## Užduotis
+
+[Sukurkite pavyzdinį žaidimą](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipkite dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/6-end-condition/assignment.md b/translations/lt/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..9badc3a2
--- /dev/null
+++ b/translations/lt/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-28T11:37:57+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite Pavyzdinį Žaidimą
+
+## Instrukcijos
+
+Pabandykite sukurti mažą žaidimą, kuriame galėtumėte praktikuotis su skirtingomis pabaigos sąlygomis. Varijuokite tarp taškų skaičiaus surinkimo, herojaus visų gyvybių praradimo arba visų monstrų nugalėjimo. Sukurkite ką nors paprasto, pavyzdžiui, konsolėje veikiantį nuotykių žaidimą. Naudokite žemiau pateiktą žaidimo eigą kaip įkvėpimą:
+
+```
+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****
+```
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai atlikta       | Pakankamai atlikta          | Reikia patobulinimų         |
+| ---------- | --------------------- | --------------------------- | --------------------------- |
+|            | pateiktas pilnas žaidimas | pateikta dalis žaidimo      | dalis žaidimo turi klaidų   |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipiame dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudotis profesionalių vertėjų paslaugomis. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/6-end-condition/solution/README.md b/translations/lt/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..4cabf9d3
--- /dev/null
+++ b/translations/lt/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T11:38:10+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "lt"
+}
+-->
+Tai yra vietos rezervacija, palikta tuščia sąmoningai
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/6-end-condition/your-work/README.md b/translations/lt/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..7db4284c
--- /dev/null
+++ b/translations/lt/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-28T11:38:18+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "lt"
+}
+-->
+Tai yra vietos rezervacija, palikta tuščia sąmoningai
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/README.md b/translations/lt/6-space-game/README.md
new file mode 100644
index 00000000..8a123d99
--- /dev/null
+++ b/translations/lt/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-28T11:31:54+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite kosminį žaidimą
+
+Kosminis žaidimas, skirtas išmokti pažangesnių JavaScript pagrindų
+
+Šioje pamokoje išmoksite sukurti savo kosminį žaidimą. Jei kada nors žaidėte žaidimą „Space Invaders“, šis žaidimas turi tą pačią idėją: valdyti kosminį laivą ir šaudyti į monstrus, kurie leidžiasi iš viršaus. Štai kaip atrodys baigtas žaidimas:
+
+![Baigtas žaidimas](../../../6-space-game/images/pewpew.gif)
+
+Šiose šešiose pamokose išmoksite:
+
+- **Sąveikauti** su Canvas elementu, kad pieštumėte objektus ekrane
+- **Suprasti** Dekarto koordinačių sistemą
+- **Išmokti** Pub-Sub modelį, kad sukurtumėte patikimą žaidimo architektūrą, kurią lengviau prižiūrėti ir plėsti
+- **Pasinaudoti** Async/Await, kad įkeltumėte žaidimo resursus
+- **Tvarkyti** klaviatūros įvykius
+
+## Apžvalga
+
+- Teorija
+   - [Įvadas į žaidimų kūrimą su JavaScript](1-introduction/README.md)
+- Praktika
+   - [Piešimas ant Canvas](2-drawing-to-canvas/README.md)
+   - [Elementų judinimas ekrane](3-moving-elements-around/README.md)
+   - [Susidūrimų aptikimas](4-collision-detection/README.md)
+   - [Taškų skaičiavimas](5-keeping-score/README.md)
+   - [Žaidimo pabaiga ir paleidimas iš naujo](6-end-condition/README.md)
+
+## Kreditas
+
+Šiame projekte naudoti resursai yra iš https://www.kenney.nl/.  
+Jei domitės žaidimų kūrimu, tai yra tikrai geri resursai – daug jų yra nemokami, o kai kurie mokami.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipiame dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudotis profesionalių vertėjų paslaugomis. Mes neprisiimame atsakomybės už bet kokius nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/6-space-game/solution/README.md b/translations/lt/6-space-game/solution/README.md
new file mode 100644
index 00000000..a8d256fc
--- /dev/null
+++ b/translations/lt/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-28T11:34:42+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "lt"
+}
+-->
+Tai yra vietos rezervacija, palikta tuščia sąmoningai
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar neteisingą interpretaciją, atsiradusią dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/7-bank-project/1-template-route/README.md b/translations/lt/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..1ad8f2a6
--- /dev/null
+++ b/translations/lt/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-28T11:21:45+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite banko programėlę 1 dalis: HTML šablonai ir maršrutai internetinėje programėlėje
+
+## Prieš paskaitą – testas
+
+[Prieš paskaitą – testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Įvadas
+
+Nuo tada, kai naršyklėse atsirado JavaScript, svetainės tapo interaktyvesnės ir sudėtingesnės nei bet kada anksčiau. Interneto technologijos dabar dažnai naudojamos kuriant visiškai funkcionalias programėles, kurios veikia tiesiogiai naršyklėje ir vadinamos [internetinėmis programėlėmis](https://en.wikipedia.org/wiki/Web_application). Kadangi internetinės programėlės yra labai interaktyvios, vartotojai nenori laukti, kol kiekvieną kartą atliekant veiksmą bus iš naujo įkeliamas visas puslapis. Štai kodėl JavaScript naudojamas tiesiogiai atnaujinti HTML per DOM, kad vartotojo patirtis būtų sklandesnė.
+
+Šioje pamokoje mes sukursime pagrindus banko internetinei programėlei, naudodami HTML šablonus, kad sukurtume kelis ekranus, kuriuos galima rodyti ir atnaujinti be poreikio iš naujo įkelti visą HTML puslapį.
+
+### Būtinos žinios
+
+Jums reikės vietinio interneto serverio, kad galėtumėte išbandyti programėlę, kurią kursime šioje pamokoje. Jei jo neturite, galite įdiegti [Node.js](https://nodejs.org) ir naudoti komandą `npx lite-server` iš savo projekto aplanko. Tai sukurs vietinį interneto serverį ir atidarys jūsų programėlę naršyklėje.
+
+### Pasiruošimas
+
+Savo kompiuteryje sukurkite aplanką, pavadintą `bank`, su failu `index.html` viduje. Pradėsime nuo šio HTML [šablono](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 šablonai
+
+Jei norite sukurti kelis ekranus interneto puslapiui, vienas sprendimas būtų sukurti po vieną HTML failą kiekvienam ekranui, kurį norite rodyti. Tačiau šis sprendimas turi tam tikrų nepatogumų:
+
+- Kiekvieną kartą keičiant ekraną reikia iš naujo įkelti visą HTML, o tai gali būti lėta.
+- Sunku dalintis duomenimis tarp skirtingų ekranų.
+
+Kitas požiūris yra turėti tik vieną HTML failą ir apibrėžti kelis [HTML šablonus](https://developer.mozilla.org/docs/Web/HTML/Element/template), naudojant `<template>` elementą. Šablonas yra pakartotinai naudojamas HTML blokas, kurio naršyklė nerodo, ir jis turi būti sukurtas vykdymo metu naudojant JavaScript.
+
+### Užduotis
+
+Sukursime banko programėlę su dviem ekranais: prisijungimo puslapiu ir prietaisų skydeliu. Pirmiausia pridėkime HTML kūne vietos rezervavimo elementą, kurį naudosime skirtingiems programėlės ekranams rodyti:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Mes suteikiame jam `id`, kad vėliau būtų lengviau jį surasti naudojant JavaScript.
+
+> Patarimas: kadangi šio elemento turinys bus pakeistas, galime įdėti įkėlimo pranešimą arba indikatorių, kuris bus rodomas, kol programėlė kraunasi.
+
+Toliau pridėkime HTML šabloną prisijungimo puslapiui. Šiuo metu ten įdėsime tik pavadinimą ir sekciją su nuoroda, kurią naudosime navigacijai.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Tada pridėsime kitą HTML šabloną prietaisų skydelio puslapiui. Šiame puslapyje bus skirtingos sekcijos:
+
+- Antraštė su pavadinimu ir atsijungimo nuoroda
+- Dabartinis banko sąskaitos likutis
+- Operacijų sąrašas, rodomas lentelėje
+
+```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>
+```
+
+> Patarimas: kuriant HTML šablonus, jei norite pamatyti, kaip jie atrodys, galite užkomentuoti `<template>` ir `</template>` eilutes, apgaubdami jas `<!-- -->`.
+
+✅ Kodėl, jūsų manymu, mes naudojame `id` atributus šablonuose? Ar galėtume naudoti ką nors kitą, pavyzdžiui, klases?
+
+## Šablonų rodymas naudojant JavaScript
+
+Jei bandysite dabartinį HTML failą naršyklėje, pamatysite, kad jis užstringa rodydamas `Loading...`. Taip yra todėl, kad mums reikia pridėti JavaScript kodą, kad sukurtume ir parodytume HTML šablonus.
+
+Šablono sukūrimas paprastai atliekamas 3 etapais:
+
+1. Surasti šablono elementą DOM'e, pavyzdžiui, naudojant [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Nukopijuoti šablono elementą, naudojant [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Pridėti jį prie DOM po matomu elementu, pavyzdžiui, naudojant [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Kodėl mums reikia nukopijuoti šabloną prieš jį pridedant prie DOM? Kas, jūsų manymu, nutiktų, jei praleistume šį žingsnį?
+
+### Užduotis
+
+Sukurkite naują failą, pavadintą `app.js`, savo projekto aplanke ir importuokite šį failą į HTML `<head>` sekciją:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Dabar `app.js` faile sukursime naują funkciją `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);
+}
+```
+
+Čia mes atliekame būtent 3 aukščiau aprašytus žingsnius. Mes sukuriame šabloną su `templateId` ir įdedame jo nukopijuotą turinį į mūsų programėlės vietos rezervavimo elementą. Atkreipkite dėmesį, kad mums reikia naudoti `cloneNode(true)`, kad nukopijuotume visą šablono medį.
+
+Dabar iškvieskite šią funkciją su vienu iš šablonų ir pažiūrėkite rezultatą.
+
+```js
+updateRoute('login');
+```
+
+✅ Koks šio kodo `app.innerHTML = '';` tikslas? Kas nutinka be jo?
+
+## Maršrutų kūrimas
+
+Kalbant apie internetinę programėlę, maršrutizavimas (*Routing*) reiškia ketinimą susieti **URL** su konkrečiais ekranais, kurie turėtų būti rodomi. Svetainėje su keliais HTML failais tai atliekama automatiškai, nes failų keliai atsispindi URL. Pavyzdžiui, su šiais failais jūsų projekto aplanke:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Jei sukursite interneto serverį su `mywebsite` kaip šaknimi, URL susiejimas bus toks:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Tačiau mūsų internetinei programėlei mes naudojame vieną HTML failą, kuriame yra visi ekranai, todėl šis numatytasis elgesys mums nepadės. Turime rankiniu būdu sukurti šį susiejimą ir atnaujinti rodomą šabloną naudodami JavaScript.
+
+### Užduotis
+
+Naudosime paprastą objektą, kad įgyvendintume [žemėlapį](https://en.wikipedia.org/wiki/Associative_array) tarp URL kelių ir mūsų šablonų. Pridėkite šį objektą savo `app.js` failo viršuje.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Dabar šiek tiek pakeiskime `updateRoute` funkciją. Vietoj to, kad tiesiogiai perduotume `templateId` kaip argumentą, norime jį gauti pirmiausia pažvelgę į dabartinį URL, o tada naudoti mūsų žemėlapį, kad gautume atitinkamą šablono ID reikšmę. Galime naudoti [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname), kad gautume tik kelio dalį iš 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);
+}
+```
+
+Čia mes susiejome deklaruotus maršrutus su atitinkamu šablonu. Galite išbandyti, ar tai veikia teisingai, rankiniu būdu pakeisdami URL savo naršyklėje.
+
+✅ Kas nutinka, jei įvedate nežinomą kelią URL? Kaip galėtume tai išspręsti?
+
+## Navigacijos pridėjimas
+
+Kitas mūsų programėlės žingsnis yra pridėti galimybę pereiti tarp puslapių, nereikia rankiniu būdu keisti URL. Tai apima du dalykus:
+
+1. Atnaujinti dabartinį URL
+2. Atnaujinti rodomą šabloną pagal naują URL
+
+Antrąją dalį jau pasirūpinome su `updateRoute` funkcija, todėl turime išsiaiškinti, kaip atnaujinti dabartinį URL.
+
+Turėsime naudoti JavaScript, o konkrečiau [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), kuris leidžia atnaujinti URL ir sukurti naują įrašą naršymo istorijoje, neperkraunant HTML.
+
+> Pastaba: Nors HTML inkaro elementas [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) gali būti naudojamas savarankiškai kuriant nuorodas į skirtingus URL, jis pagal numatytuosius nustatymus privers naršyklę iš naujo įkelti HTML. Būtina užkirsti kelią šiam elgesiui, kai maršrutizavimas tvarkomas naudojant JavaScript, naudojant `preventDefault()` funkciją ant paspaudimo įvykio.
+
+### Užduotis
+
+Sukurkime naują funkciją, kurią galėsime naudoti navigacijai savo programėlėje:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Šis metodas pirmiausia atnaujina dabartinį URL pagal pateiktą kelią, tada atnaujina šabloną. Savybė `window.location.origin` grąžina URL šaknį, leidžiant mums rekonstruoti pilną URL iš pateikto kelio.
+
+Dabar, kai turime šią funkciją, galime pasirūpinti problema, kuri kyla, jei kelias neatitinka jokio apibrėžto maršruto. Pakeisime `updateRoute` funkciją, pridėdami atsarginį variantą vienam iš esamų maršrutų, jei nerandame atitikmens.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Jei maršrutas negali būti rastas, dabar nukreipsime į prisijungimo puslapį.
+
+Dabar sukurkime funkciją, kuri gautų URL, kai paspaudžiama nuoroda, ir užkirstų kelią naršyklės numatytam nuorodos elgesiui:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Užbaikime navigacijos sistemą, pridėdami ryšius su mūsų *Prisijungimo* ir *Atsijungimo* nuorodomis HTML.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Aukščiau esantis `event` objektas užfiksuoja `click` įvykį ir perduoda jį mūsų `onLinkClick` funkcijai.
+
+Naudodami [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) atributą, susiekite `click` įvykį su JavaScript kodu, šiuo atveju su `navigate()` funkcijos iškvietimu.
+
+Pabandykite paspausti šias nuorodas, dabar turėtumėte galėti pereiti tarp skirtingų savo programėlės ekranų.
+
+✅ `history.pushState` metodas yra HTML5 standarto dalis ir įgyvendintas [visose moderniose naršyklėse](https://caniuse.com/?search=pushState). Jei kuriate internetinę programėlę senesnėms naršyklėms, yra triukas, kurį galite naudoti vietoj šios API: naudodami [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) prieš kelią galite įgyvendinti maršrutizavimą, kuris veikia su įprasta inkaro navigacija ir neperkrauna puslapio, nes jo paskirtis buvo kurti vidines nuorodas puslapyje.
+
+## Naršyklės mygtukų „Atgal“ ir „Pirmyn“ tvarkymas
+
+Naudojant `history.pushState` sukuriami nauji įrašai naršyklės naršymo istorijoje. Galite tai patikrinti, laikydami naršyklės *atgal* mygtuką, jis turėtų rodyti kažką panašaus į tai:
+
+![Naršymo istorijos ekrano nuotrauka](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.lt.png)
+
+Jei bandysite kelis kartus paspausti atgal mygtuką, pamatysite, kad dabartinis URL keičiasi ir istorija atnaujinama, tačiau tas pats šablonas vis tiek rodomas.
+
+Taip yra todėl, kad programėlė nežino, kad reikia iškviesti `updateRoute()` kiekvieną kartą, kai istorija keičiasi. Jei pažvelgsite į [`history.pushState` dokumentaciją](https://developer.mozilla.org/docs/Web/API/History/pushState), pamatysite, kad jei būsena keičiasi – tai reiškia, kad perėjome į kitą URL – įvykis [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) yra suaktyvinamas. Naudosime tai, kad išspręstume šią problemą.
+
+### Užduotis
+
+Norėdami užtikrinti, kad rodomas šablonas būtų atnaujintas, kai naršyklės istorija keičiasi, pridėsime naują funkciją, kuri iškviečia `updateRoute()`. Tai padarysime `app.js` failo apačioje:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Pastaba: čia naudojome [rodyklės funkciją](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), kad deklaruotume mūsų `popstate` įvykio tvarkytuvą trumpumo dėlei, tačiau įprasta funkcija veiktų taip pat.
+
+Štai vaizdo įrašas apie rodyklės funkcijas:
+
+[![Rodyklės funkcijos](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Rodyklės funkcijos")
+
+> 🎥 Spustelėkite aukščiau esančią nuotrauką, kad pamatytumėte vaizdo įrašą apie rodyklės funkcijas.
+
+Dabar pabandykite naudoti naršyklės mygtukus „Atgal“ ir „Pirmyn“ ir patikrinkite, ar rodomas maršrutas dabar teisingai atnaujinamas.
+
+---
+
+## 🚀 Iššūkis
+
+Pridėkite naują šabloną ir maršrutą trečiam puslapiui, kuris rodo šios programėlės kūrėjų kreditus.
+
+## Po paskaitos – testas
+
+[Po paskaitos – testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Maršrutizavimas yra viena iš stebėtinai sudėtingų interneto kūrimo dalių, ypač kai internetas pereina nuo puslapio atnaujinimo elgesio prie vieno puslapio programėlių atnaujinimo. Perskaitykite šiek tiek apie [kaip Azure Static Web App paslauga](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) tvarko maršrutizavimą. Ar galite paaiškinti, kodėl kai kurie sprendimai, aprašyti tame dokumente, yra būtini?
+
+## Užduotis
+
+[Patobulinkite maršrutizavimą](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/7-bank-project/1-template-route/assignment.md b/translations/lt/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..a7b510da
--- /dev/null
+++ b/translations/lt/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-28T11:22:49+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Patobulinkite maršrutizavimą
+
+## Instrukcijos
+
+Maršrutų deklaracijoje šiuo metu nurodomas tik šablono ID, kurį reikia naudoti. Tačiau, kai rodoma nauja puslapio versija, kartais reikia šiek tiek daugiau. Patobulinkime mūsų maršrutizavimo įgyvendinimą pridėdami dvi papildomas funkcijas:
+
+- Priskirkite kiekvienam šablonui pavadinimus ir atnaujinkite lango pavadinimą nauju pavadinimu, kai keičiasi šablonas.
+- Pridėkite galimybę vykdyti tam tikrą kodą po šablono pakeitimo. Norime, kad kiekvieną kartą, kai rodoma prietaisų skydelio puslapis, kūrėjo konsolėje būtų atspausdinta `'Dashboard is shown'`.
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai                                                                                                                          | Pakankamai                                                                                                                                                                                | Reikia patobulinimų                                   |
+| ---------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
+|            | Abi funkcijos įgyvendintos ir veikia. Pavadinimo ir kodo pridėjimas taip pat veikia naujai pridėtame maršrute `routes` deklaracijoje. | Abi funkcijos veikia, tačiau elgsena yra užkoduota ir nekonfigūruojama per `routes` deklaraciją. Pridėjus trečią maršrutą su pavadinimu ir kodo pridėjimu, tai neveikia arba veikia iš dalies. | Viena iš funkcijų trūksta arba neveikia tinkamai.     |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/7-bank-project/2-forms/README.md b/translations/lt/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..270befc5
--- /dev/null
+++ b/translations/lt/7-bank-project/2-forms/README.md
@@ -0,0 +1,202 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-28T11:18:07+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite bankinę programėlę, 2 dalis: Sukurkite prisijungimo ir registracijos formą
+
+## Klausimynas prieš paskaitą
+
+[Klausimynas prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Įvadas
+
+Beveik visose šiuolaikinėse interneto programėlėse galite susikurti paskyrą, kad turėtumėte savo asmeninę erdvę. Kadangi keli vartotojai gali vienu metu naudotis interneto programėle, reikia mechanizmo, kuris leistų atskirai saugoti kiekvieno vartotojo asmeninius duomenis ir pasirinkti, kokią informaciją rodyti. Mes neaptarsime, kaip saugiai valdyti [vartotojo tapatybę](https://en.wikipedia.org/wiki/Authentication), nes tai yra plati tema, tačiau užtikrinsime, kad kiekvienas vartotojas galėtų sukurti vieną (ar daugiau) banko sąskaitų mūsų programėlėje.
+
+Šioje dalyje naudosime HTML formas, kad pridėtume prisijungimo ir registracijos funkcijas mūsų interneto programėlėje. Pamatysime, kaip programiškai siųsti duomenis į serverio API ir kaip apibrėžti pagrindines vartotojo įvesties tikrinimo taisykles.
+
+### Reikalavimai
+
+Turite būti užbaigę [HTML šablonų ir maršrutų](../1-template-route/README.md) pamoką, skirtą interneto programėlei. Taip pat turite įdiegti [Node.js](https://nodejs.org) ir [paleisti serverio API](../api/README.md) lokaliai, kad galėtumėte siųsti duomenis sąskaitų kūrimui.
+
+**Atkreipkite dėmesį**
+Vienu metu turėsite paleisti du terminalus, kaip nurodyta žemiau:
+1. Pagrindinei banko programėlei, kurią sukūrėme [HTML šablonų ir maršrutų](../1-template-route/README.md) pamokoje.
+2. [Banko programėlės serverio API](../api/README.md), kurią ką tik nustatėme aukščiau.
+
+Norint tęsti pamoką, abu serveriai turi veikti. Jie klausosi skirtinguose prievaduose (prievadas `3000` ir prievadas `5000`), todėl viskas turėtų veikti sklandžiai.
+
+Galite patikrinti, ar serveris veikia tinkamai, vykdydami šią komandą terminale:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Forma ir valdikliai
+
+`<form>` elementas apima HTML dokumento dalį, kurioje vartotojas gali įvesti ir pateikti duomenis naudodamas interaktyvius valdiklius. Yra daugybė vartotojo sąsajos (UI) valdiklių, kuriuos galima naudoti formoje, tačiau dažniausiai naudojami `<input>` ir `<button>` elementai.
+
+Yra daug skirtingų `<input>` [tipų](https://developer.mozilla.org/docs/Web/HTML/Element/input). Pavyzdžiui, norėdami sukurti lauką, kuriame vartotojas gali įvesti savo vartotojo vardą, galite naudoti:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+`name` atributas bus naudojamas kaip savybės pavadinimas, kai formos duomenys bus siunčiami. `id` atributas naudojamas `<label>` susieti su formos valdikliu.
+
+> Peržiūrėkite visą [`<input>` tipų](https://developer.mozilla.org/docs/Web/HTML/Element/input) ir [kitų formos valdiklių](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) sąrašą, kad susipažintumėte su visais natūraliais UI elementais, kuriuos galite naudoti kurdami savo sąsają.
+
+✅ Atkreipkite dėmesį, kad `<input>` yra [tuščias elementas](https://developer.mozilla.org/docs/Glossary/Empty_element), kuriam *nereikia* pridėti atitinkamos uždarymo žymos. Tačiau galite naudoti savarankiškai užsidarančią `<input/>` notaciją, bet tai nėra būtina.
+
+`<button>` elementas formoje yra šiek tiek ypatingas. Jei nenurodysite jo `type` atributo, jis automatiškai pateiks formos duomenis serveriui, kai bus paspaustas. Štai galimi `type` reikšmių variantai:
+
+- `submit`: Numatytasis `<form>` viduje, mygtukas sukelia formos pateikimo veiksmą.
+- `reset`: Mygtukas atstato visus formos valdiklius į jų pradinius nustatymus.
+- `button`: Nesuteikia numatytojo elgesio, kai mygtukas paspaudžiamas. Galite priskirti jam pasirinktinius veiksmus naudodami JavaScript.
+
+### Užduotis
+
+Pradėkime pridėdami formą prie `login` šablono. Mums reikės *vartotojo vardo* lauko ir *Prisijungimo* mygtuko.
+
+```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>
+```
+
+Jei atidžiau pažvelgsite, pastebėsite, kad čia taip pat pridėjome `<label>` elementą. `<label>` elementai naudojami UI valdikliams, tokiems kaip mūsų vartotojo vardo laukas, pavadinti. Etiketės yra svarbios formų skaitomumui, tačiau jos taip pat turi papildomų privalumų:
+
+- Susiejus etiketę su formos valdikliu, tai padeda vartotojams, naudojantiems pagalbines technologijas (pvz., ekrano skaitytuvus), suprasti, kokius duomenis jie turėtų pateikti.
+- Galite spustelėti etiketę, kad tiesiogiai sutelktumėte dėmesį į susietą įvestį, todėl ją lengviau pasiekti jutikliniuose įrenginiuose.
+
+> [Prieinamumas](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) internete yra labai svarbi tema, kuri dažnai pamirštama. Dėl [semantinių HTML elementų](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) nėra sunku sukurti prieinamą turinį, jei juos tinkamai naudojate. Galite [skaityti daugiau apie prieinamumą](https://developer.mozilla.org/docs/Web/Accessibility), kad išvengtumėte dažniausiai pasitaikančių klaidų ir taptumėte atsakingu kūrėju.
+
+Dabar pridėsime antrą formą registracijai, tiesiai po ankstesne:
+
+```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>
+```
+
+Naudodami `value` atributą galime apibrėžti numatytąją reikšmę tam tikrai įvesčiai. Taip pat pastebėkite, kad įvestis `balance` turi `number` tipą. Ar ji atrodo kitaip nei kitos įvestys? Pabandykite su ja sąveikauti.
+
+✅ Ar galite naršyti ir sąveikauti su formomis naudodami tik klaviatūrą? Kaip tai padarytumėte?
+
+## Duomenų pateikimas serveriui
+
+Dabar, kai turime veikiančią vartotojo sąsają, kitas žingsnis yra išsiųsti duomenis į serverį. Pabandykime greitai patikrinti naudodami dabartinį kodą: kas nutinka, jei spustelėsite *Prisijungti* arba *Registruotis* mygtuką?
+
+Ar pastebėjote pokytį naršyklės URL skiltyje?
+
+![Naršyklės URL pokyčio ekrano nuotrauka po mygtuko Registruotis paspaudimo](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.lt.png)
+
+Numatytasis `<form>` veiksmas yra pateikti formą dabartiniam serverio URL naudojant [GET metodą](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), pridedant formos duomenis tiesiai prie URL. Tačiau šis metodas turi tam tikrų trūkumų:
+
+- Siunčiamų duomenų dydis yra labai ribotas (apie 2000 simbolių).
+- Duomenys tiesiogiai matomi URL (nepuiku slaptažodžiams).
+- Jis neveikia su failų įkėlimais.
+
+Todėl galite pakeisti jį naudoti [POST metodą](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5), kuris siunčia formos duomenis serveriui HTTP užklausos kūne, be ankstesnių apribojimų.
+
+> Nors POST yra dažniausiai naudojamas metodas duomenims siųsti, [tam tikrose specifinėse situacijose](https://www.w3.org/2001/tag/doc/whenToUseGet.html) geriau naudoti GET metodą, pavyzdžiui, įgyvendinant paieškos lauką.
+
+### Užduotis
+
+Pridėkite `action` ir `method` savybes registracijos formai:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Dabar pabandykite užregistruoti naują paskyrą su savo vardu. Paspaudus *Registruotis* mygtuką, turėtumėte pamatyti kažką panašaus:
+
+![Naršyklės langas adresu localhost:5000/api/accounts, rodantis JSON eilutę su vartotojo duomenimis](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.lt.png)
+
+Jei viskas gerai, serveris turėtų atsakyti į jūsų užklausą su [JSON](https://www.json.org/json-en.html) atsakymu, kuriame yra sukurti paskyros duomenys.
+
+✅ Pabandykite dar kartą užsiregistruoti tuo pačiu vardu. Kas nutinka?
+Patarimas: galite pritaikyti formos valdiklių išvaizdą, priklausomai nuo to, ar jie yra tinkami, ar ne, naudodami CSS pseudo-klases `:valid` ir `:invalid`.
+### Užduotis
+
+Norint sukurti galiojančią naują paskyrą, būtini du laukai: vartotojo vardas ir valiuta, o kiti laukai yra pasirenkami. Atnaujinkite formos HTML, naudodami tiek `required` atributą, tiek tekstą lauko etiketėje, kad:
+
+```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>
+```
+
+Nors ši konkreti serverio įgyvendinimo versija nenustato specifinių apribojimų laukų maksimaliam ilgiui, visada yra gera praktika apibrėžti pagrįstus apribojimus bet kokiam vartotojo tekstui.
+
+Pridėkite `maxlength` atributą tekstiniams laukams:
+
+```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">
+```
+
+Dabar, jei paspausite mygtuką *Registruotis* ir kuris nors laukas neatitiks mūsų apibrėžtos validacijos taisyklės, turėtumėte pamatyti kažką panašaus į tai:
+
+![Ekrano nuotrauka, rodanti validacijos klaidą bandant pateikti formą](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.lt.png)
+
+Tokio tipo validacija, atliekama *prieš* siunčiant duomenis į serverį, vadinama **kliento pusės** validacija. Tačiau atkreipkite dėmesį, kad ne visada įmanoma atlikti visus patikrinimus be duomenų siuntimo. Pavyzdžiui, čia negalime patikrinti, ar paskyra jau egzistuoja su tuo pačiu vartotojo vardu, nesikreipdami į serverį. Papildoma validacija, atliekama serveryje, vadinama **serverio pusės** validacija.
+
+Paprastai reikia įgyvendinti abu metodus, ir nors kliento pusės validacija pagerina vartotojo patirtį, suteikdama greitą grįžtamąjį ryšį, serverio pusės validacija yra būtina, kad užtikrintumėte, jog vartotojo duomenys, su kuriais dirbate, yra patikimi ir saugūs.
+
+---
+
+## 🚀 Iššūkis
+
+Rodykite klaidos pranešimą HTML, jei vartotojas jau egzistuoja.
+
+Štai pavyzdys, kaip galutinė prisijungimo puslapio versija gali atrodyti po šiek tiek stiliaus pritaikymo:
+
+![Ekrano nuotrauka, rodanti prisijungimo puslapį po CSS stilių pridėjimo](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.lt.png)
+
+## Po paskaitos testas
+
+[Po paskaitos testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Apžvalga ir savarankiškas mokymasis
+
+Programuotojai tapo labai kūrybingi kurdami formas, ypač kalbant apie validacijos strategijas. Sužinokite apie skirtingus formų kūrimo būdus, peržiūrėdami [CodePen](https://codepen.com); ar galite rasti įdomių ir įkvepiančių formų?
+
+## Užduotis
+
+[Stilizuokite savo banko programėlę](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/7-bank-project/2-forms/assignment.md b/translations/lt/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..8208acca
--- /dev/null
+++ b/translations/lt/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-28T11:19:05+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite savo banko programėlės stilių
+
+## Instrukcijos
+
+Sukurkite naują `styles.css` failą ir pridėkite nuorodą į jį savo dabartiniame `index.html` faile. CSS faile, kurį ką tik sukūrėte, pridėkite stilių, kad *Prisijungimo* ir *Pagrindinio puslapio* puslapiai atrodytų tvarkingai ir patraukliai. Pabandykite sukurti spalvų temą, kad jūsų programėlė turėtų savo unikalų stilių.
+
+> Patarimas: galite redaguoti HTML ir pridėti naujų elementų bei klasių, jei reikia.
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai                                                                                                               | Pakankamai                                                                       | Reikia patobulinimų                                                                             |
+| ---------- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+|            | Visi puslapiai atrodo tvarkingai ir lengvai skaitomi, su nuoseklia spalvų tema ir aiškiai išskirtomis skirtingomis sekcijomis. | Puslapiai yra stilizuoti, tačiau be temos arba su neaiškiai atskirtomis sekcijomis. | Puslapiai neturi stiliaus, sekcijos atrodo netvarkingai, o informaciją sunku perskaityti.       |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/7-bank-project/3-data/README.md b/translations/lt/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..3f228ab4
--- /dev/null
+++ b/translations/lt/7-bank-project/3-data/README.md
@@ -0,0 +1,337 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-28T11:14:53+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite bankinę programėlę 3 dalis: Duomenų gavimo ir naudojimo metodai
+
+## Klausimynas prieš paskaitą
+
+[Klausimynas prieš paskaitą](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Įvadas
+
+Kiekvienos internetinės programėlės pagrindas yra *duomenys*. Duomenys gali būti įvairių formų, tačiau jų pagrindinis tikslas visada yra pateikti informaciją vartotojui. Kadangi internetinės programėlės tampa vis interaktyvesnės ir sudėtingesnės, tai, kaip vartotojas pasiekia ir sąveikauja su informacija, tampa esmine interneto kūrimo dalimi.
+
+Šioje pamokoje pamatysime, kaip asinchroniškai gauti duomenis iš serverio ir naudoti juos informacijai pateikti interneto puslapyje, neperkraunant HTML.
+
+### Būtinos sąlygos
+
+Jums reikia būti sukūrus [Prisijungimo ir registracijos formą](../2-forms/README.md) kaip šios pamokos dalį. Taip pat turite įdiegti [Node.js](https://nodejs.org) ir [paleisti serverio API](../api/README.md) lokaliai, kad gautumėte paskyros duomenis.
+
+Galite patikrinti, ar serveris veikia tinkamai, vykdydami šią komandą terminale:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX ir duomenų gavimas
+
+Tradicinės interneto svetainės atnaujina rodomą turinį, kai vartotojas pasirenka nuorodą arba pateikia duomenis naudodamas formą, perkraudamos visą HTML puslapį. Kiekvieną kartą, kai reikia įkelti naujus duomenis, interneto serveris grąžina visiškai naują HTML puslapį, kurį naršyklė turi apdoroti, nutraukdama dabartinį vartotojo veiksmą ir apribodama sąveiką per įkrovimą. Šis darbo procesas taip pat vadinamas *daugiapuslapių programėlių* arba *MPA*.
+
+![Atnaujinimo procesas daugiapuslapių programėlėje](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.lt.png)
+
+Kai internetinės programėlės pradėjo tapti sudėtingesnės ir interaktyvesnės, atsirado nauja technika, vadinama [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)). Ši technika leidžia internetinėms programėlėms siųsti ir gauti duomenis iš serverio asinchroniškai naudojant JavaScript, neperkraunant HTML puslapio, todėl atnaujinimai vyksta greičiau, o vartotojo sąveika tampa sklandesnė. Kai nauji duomenys gaunami iš serverio, dabartinis HTML puslapis taip pat gali būti atnaujintas naudojant [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API. Laikui bėgant, šis požiūris išsivystė į tai, kas dabar vadinama [*vieno puslapio programėle* arba *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Atnaujinimo procesas vieno puslapio programėlėje](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.lt.png)
+
+Kai AJAX buvo pirmą kartą pristatytas, vienintelė API, leidžianti asinchroniškai gauti duomenis, buvo [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Tačiau šiuolaikinės naršyklės dabar taip pat įgyvendina patogesnę ir galingesnę [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), kuri naudoja pažadus ir yra geriau pritaikyta manipuliuoti JSON duomenimis.
+
+> Nors visos šiuolaikinės naršyklės palaiko `Fetch API`, jei norite, kad jūsų internetinė programėlė veiktų senesnėse naršyklėse, visada verta patikrinti [suderinamumo lentelę caniuse.com](https://caniuse.com/fetch).
+
+### Užduotis
+
+[Ankstesnėje pamokoje](../2-forms/README.md) įgyvendinome registracijos formą paskyrai sukurti. Dabar pridėsime kodą, kad galėtume prisijungti naudojant esamą paskyrą ir gauti jos duomenis. Atidarykite `app.js` failą ir pridėkite naują `login` funkciją:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Čia pradedame nuo formos elemento gavimo naudojant `getElementById()`, o tada gauname vartotojo vardą iš įvesties su `loginForm.user.value`. Kiekvieną formos valdiklį galima pasiekti pagal jo pavadinimą (nustatytą HTML naudojant `name` atributą) kaip formos savybę.
+
+Panašiai kaip darėme registracijai, sukursime kitą funkciją, skirtą serverio užklausai atlikti, tačiau šį kartą duomenims gauti:
+
+```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' };
+  }
+}
+```
+
+Naudojame `fetch` API, kad asinchroniškai užklaustume duomenis iš serverio, tačiau šį kartą mums nereikia jokių papildomų parametrų, išskyrus URL, kurį reikia iškviesti, nes mes tik užklausome duomenis. Pagal numatymą `fetch` sukuria [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP užklausą, kurios mes čia siekiame.
+
+✅ `encodeURIComponent()` yra funkcija, kuri užkoduoja specialius simbolius URL. Kokias problemas galėtume turėti, jei nekviestume šios funkcijos ir tiesiogiai naudotume `user` reikšmę URL?
+
+Dabar atnaujinkime mūsų `login` funkciją, kad ji naudotų `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');
+}
+```
+
+Pirma, kadangi `getAccount` yra asinchroninė funkcija, turime ją suderinti su `await` raktažodžiu, kad lauktume serverio rezultato. Kaip ir bet kurioje serverio užklausoje, taip pat turime spręsti klaidų atvejus. Kol kas pridėsime tik žurnalo pranešimą, kad būtų rodoma klaida, ir vėliau grįšime prie jos.
+
+Tada turime išsaugoti duomenis kažkur, kad vėliau galėtume juos naudoti informacijos pateikimui prietaisų skydelyje. Kadangi `account` kintamasis dar neegzistuoja, sukursime globalų kintamąjį failo viršuje:
+
+```js
+let account = null;
+```
+
+Kai vartotojo duomenys išsaugomi kintamajame, galime pereiti nuo *prisijungimo* puslapio prie *prietaisų skydelio* naudodami jau turimą `navigate()` funkciją.
+
+Galiausiai, turime iškviesti mūsų `login` funkciją, kai prisijungimo forma pateikiama, modifikuodami HTML:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Patikrinkite, ar viskas veikia tinkamai, registruodami naują paskyrą ir bandydami prisijungti naudodami tą pačią paskyrą.
+
+Prieš pereidami prie kitos dalies, taip pat galime užbaigti `register` funkciją, pridėdami tai funkcijos apačioje:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Ar žinojote, kad pagal numatymą serverio API galite kviesti tik iš *to paties domeno ir prievado*, kaip ir interneto puslapis, kurį peržiūrite? Tai yra naršyklių taikoma saugumo priemonė. Bet palaukite, mūsų internetinė programėlė veikia `localhost:3000`, o serverio API veikia `localhost:5000`, kodėl tai veikia? Naudojant techniką, vadinamą [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), galima atlikti kryžminės kilmės HTTP užklausas, jei serveris prideda specialias antraštes prie atsakymo, leidžiančias išimtis konkretiems domenams.
+
+> Sužinokite daugiau apie API, peržiūrėdami šią [pamoką](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)
+
+## Atnaujinkite HTML, kad būtų rodomi duomenys
+
+Dabar, kai turime vartotojo duomenis, turime atnaujinti esamą HTML, kad juos būtų galima rodyti. Jau žinome, kaip gauti elementą iš DOM, pavyzdžiui, naudojant `document.getElementById()`. Kai turite bazinį elementą, čia yra keletas API, kurias galite naudoti norėdami jį modifikuoti arba pridėti vaikų elementų:
+
+- Naudojant [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) savybę galite pakeisti elemento tekstą. Atkreipkite dėmesį, kad keičiant šią reikšmę pašalinami visi elemento vaikai (jei jų yra) ir pakeičiama pateiktu tekstu. Todėl tai taip pat yra efektyvus būdas pašalinti visus nurodyto elemento vaikus, priskiriant tuščią eilutę `''`.
+
+- Naudojant [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) kartu su [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) metodu galite sukurti ir pridėti vieną ar daugiau naujų vaikų elementų.
+
+✅ Naudojant [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) savybę elemento HTML turinį taip pat galima pakeisti, tačiau šios savybės reikėtų vengti, nes ji yra pažeidžiama [kryžminio svetainės scenarijaus (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) atakoms.
+
+### Užduotis
+
+Prieš pereidami prie prietaisų skydelio ekrano, turime atlikti dar vieną dalyką prisijungimo puslapyje. Šiuo metu, jei bandote prisijungti su vartotojo vardu, kuris neegzistuoja, pranešimas rodomas konsolėje, tačiau paprastam vartotojui niekas nesikeičia ir nežinote, kas vyksta.
+
+Pridėkime vietos rezervavimo elementą prisijungimo formoje, kur prireikus galime rodyti klaidos pranešimą. Geriausia vieta būtų prieš prisijungimo `<button>`:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Šis `<div>` elementas yra tuščias, tai reiškia, kad nieko nebus rodoma ekrane, kol nepridėsime turinio. Taip pat suteikiame jam `id`, kad galėtume lengvai jį gauti naudodami JavaScript.
+
+Grįžkite į `app.js` failą ir sukurkite naują pagalbinę funkciją `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Ši funkcija yra gana paprasta: pateikus elemento *id* ir *tekstą*, ji atnaujins DOM elemento tekstinį turinį, atitinkantį `id`. Naudokime šį metodą vietoje ankstesnio klaidos pranešimo `login` funkcijoje:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Dabar, jei bandysite prisijungti su neteisinga paskyra, turėtumėte matyti kažką panašaus:
+
+![Ekrano nuotrauka, rodanti klaidos pranešimą prisijungimo metu](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.lt.png)
+
+Dabar turime klaidos tekstą, kuris vizualiai rodomas, tačiau jei bandysite jį naudoti su ekrano skaitytuvu, pastebėsite, kad nieko nepranešama. Kad tekstas, kuris dinamiškai pridedamas prie puslapio, būtų pranešamas ekrano skaitytuvams, jis turės naudoti vadinamąją [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Čia naudosime specifinį gyvos srities tipą, vadinamą pranešimu:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Įgyvendinkite tą patį elgesį `register` funkcijos klaidoms (nepamirškite atnaujinti HTML).
+
+## Informacijos rodymas prietaisų skydelyje
+
+Naudodami tuos pačius metodus, kuriuos ką tik matėme, taip pat pasirūpinsime paskyros informacijos rodymu prietaisų skydelio puslapyje.
+
+Štai kaip atrodo paskyros objektas, gautas iš serverio:
+
+```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 }
+  ],
+}
+```
+
+> Pastaba: kad būtų lengviau, galite naudoti iš anksto sukurtą `test` paskyrą, kuri jau yra užpildyta duomenimis.
+
+### Užduotis
+
+Pradėkime nuo "Balanso" skyriaus pakeitimo HTML, kad pridėtume vietos rezervavimo elementus:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Taip pat pridėsime naują skyrių žemiau, kad būtų rodoma paskyros aprašymas:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Kadangi paskyros aprašymas veikia kaip turinio antraštė, jis semantiškai pažymėtas kaip antraštė. Sužinokite daugiau apie tai, kaip [antraščių struktūra](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) yra svarbi prieinamumui, ir kritiškai įvertinkite puslapį, kad nustatytumėte, kas dar galėtų būti antraštė.
+
+Tada sukursime naują funkciją `app.js`, kad užpildytume vietos rezervavimo elementus:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Pirma, patikriname, ar turime reikalingus paskyros duomenis, prieš tęsdami. Tada naudojame anksčiau sukurtą `updateElement()` funkciją, kad atnaujintume HTML.
+
+> Kad balanso rodymas būtų gražesnis, naudojame metodą [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), kad priverstinai rodytume reikšmę su 2 skaitmenimis po kablelio.
+
+Dabar turime iškviesti mūsų `updateDashboard()` funkciją kiekvieną kartą, kai prietaisų skydelis įkeliamas. Jei jau baigėte [1 pamokos užduotį](../1-template-route/assignment.md), tai turėtų būti paprasta, kitaip galite naudoti šią įgyvendinimą.
+
+Pridėkite šį kodą `updateRoute()` funkcijos pabaigoje:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+Ir atnaujinkite maršrutų apibrėžimą su:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+Su šiuo pakeitimu kiekvieną kartą, kai rodomas prietaisų skydelio puslapis, iškviečiama funkcija `updateDashboard()`. Po prisijungimo turėtumėte matyti paskyros balansą, valiutą ir aprašymą.
+
+## Dinamiškai kurkite lentelės eilutes naudodami HTML šablonus
+
+Pirmoje pamokoje](../1-template-route/README.md) naudojome HTML šablonus kartu su [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) metodu, kad įgyvendintume navigaciją mūsų programėlėje. Šablonai taip pat gali būti mažesni ir naudojami dinamiškai užpildyti pasikartojančias puslapio dalis.
+
+Naudosime panašų požiūrį, kad rodytume operacijų sąrašą HTML lentelėje.
+
+### Užduotis
+
+Pridėkite naują šabloną HTML `<body>`:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Šis šablonas atspindi vieną lentelės eilutę su 3 stulpeliais, kuriuos norime užpildyti: *data*, *objektas* ir *suma* operacijos.
+
+Tada pridėkite šį `id` atributą `<tbody>` elementui lentelėje prietaisų skydelio šablone, kad būtų lengviau rasti naudojant JavaScript:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+Mūsų HTML paruoštas, pereikime prie JavaScript kodo ir sukurkime naują funkciją `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;
+}
+```
+
+Ši funkcija daro būtent tai, ką jos pavadinimas reiškia: naudodama anksčiau sukurtą šabloną, ji sukuria naują lentelės eilutę ir užpildo jos turinį naudodama operacijos duomenis. Naudosime tai mūsų `updateDashboard()` funkcijoje, kad užpildytume lentelę:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Čia naudojame metodą [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), kuris sukuria naują DOM fragmentą, su kuriuo galime dirbti, prieš galiausiai jį prijungdami prie mūsų HTML lentelės.
+
+Dar yra vienas dalykas, kurį turime padaryti, kad šis kodas veiktų, nes mūsų `updateElement()` funkcija šiuo metu palaiko tik
+Jei bandysite prisijungti naudodami paskyrą „test“, dabar turėtumėte matyti operacijų sąrašą prietaisų skydelyje 🎉.
+
+---
+
+## 🚀 Iššūkis
+
+Dirbkite kartu, kad prietaisų skydelio puslapis atrodytų kaip tikra bankininkystės programa. Jei jau stilizavote savo programą, pabandykite naudoti [media užklausas](https://developer.mozilla.org/docs/Web/CSS/Media_Queries), kad sukurtumėte [prisitaikantį dizainą](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), kuris gerai veiktų tiek staliniuose, tiek mobiliuosiuose įrenginiuose.
+
+Štai pavyzdys, kaip gali atrodyti stilizuotas prietaisų skydelio puslapis:
+
+![Stilizuoto prietaisų skydelio pavyzdžio ekrano nuotrauka](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.lt.png)
+
+## Po paskaitos testas
+
+[Po paskaitos testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Užduotis
+
+[Refaktorizuokite ir pakomentuokite savo kodą](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipkite dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/7-bank-project/3-data/assignment.md b/translations/lt/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..f0447f2d
--- /dev/null
+++ b/translations/lt/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-28T11:16:02+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Refaktorizuokite ir komentuokite savo kodą
+
+## Instrukcijos
+
+Kai jūsų kodo bazė auga, svarbu reguliariai refaktorizuoti kodą, kad jis išliktų skaitomas ir lengvai prižiūrimas. Pridėkite komentarus ir refaktorizuokite savo `app.js`, kad pagerintumėte kodo kokybę:
+
+- Išskirkite konstantas, pvz., serverio API bazinį URL
+- Suvienodinkite panašų kodą: pavyzdžiui, galite sukurti funkciją `sendRequest()`, kuri apjungtų kodą, naudojamą tiek `createAccount()`, tiek `getAccount()`
+- Pertvarkykite kodą, kad jis būtų lengviau skaitomas, ir pridėkite komentarus
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai                                                                                                                                                     | Pakankamai                                                                                       | Reikia tobulinti                                                                     |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
+|            | Kodas yra komentuotas, gerai organizuotas į skirtingas sekcijas ir lengvai skaitomas. Konstantos yra išskirtos, o suvienodinta funkcija `sendRequest()` sukurta. | Kodas yra tvarkingas, bet jį dar galima patobulinti pridėjus daugiau komentarų, išskiriant konstantas ar suvienodinant kodą. | Kodas yra netvarkingas, nekomentuotas, konstantos neišskirtos, o kodas nesuvienodintas. |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/7-bank-project/4-state-management/README.md b/translations/lt/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..879d5d52
--- /dev/null
+++ b/translations/lt/7-bank-project/4-state-management/README.md
@@ -0,0 +1,275 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-28T11:19:47+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite bankinę programėlę 4 dalis: Būsenos valdymo koncepcijos
+
+## Prieš paskaitą: testas
+
+[Prieš paskaitą: testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Įvadas
+
+Kai internetinė programėlė auga, tampa sudėtinga sekti visus duomenų srautus. Kuris kodas gauna duomenis, kuris puslapis juos naudoja, kur ir kada juos reikia atnaujinti... lengva pasiekti netvarkingą kodą, kurį sunku prižiūrėti. Tai ypač aktualu, kai reikia dalintis duomenimis tarp skirtingų programėlės puslapių, pavyzdžiui, vartotojo duomenimis. *Būsenos valdymo* koncepcija visada egzistavo įvairiose programose, tačiau internetinėms programėlėms vis augant sudėtingumu, tai tapo svarbiu aspektu, kurį reikia apsvarstyti kuriant.
+
+Šioje paskutinėje dalyje peržiūrėsime sukurtą programėlę, kad iš naujo apgalvotume, kaip valdoma būsena, suteikiant galimybę naršyklės atnaujinimui bet kuriuo metu ir duomenų išsaugojimui tarp vartotojo sesijų.
+
+### Reikalavimai
+
+Turite būti baigę [duomenų gavimo](../3-data/README.md) dalį, susijusią su šia pamoka. Taip pat turite įdiegti [Node.js](https://nodejs.org) ir [paleisti serverio API](../api/README.md) lokaliai, kad galėtumėte valdyti paskyros duomenis.
+
+Galite patikrinti, ar serveris veikia tinkamai, vykdydami šią komandą terminale:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Iš naujo apgalvokite būsenos valdymą
+
+[Ankstesnėje pamokoje](../3-data/README.md) pristatėme pagrindinę būsenos koncepciją mūsų programėlėje su globaliu `account` kintamuoju, kuris saugo banko duomenis apie šiuo metu prisijungusį vartotoją. Tačiau dabartinis įgyvendinimas turi keletą trūkumų. Pabandykite atnaujinti puslapį, kai esate prietaisų skydelyje. Kas nutinka?
+
+Yra 3 problemos su dabartiniu kodu:
+
+- Būsena nėra išsaugoma, nes naršyklės atnaujinimas grąžina jus į prisijungimo puslapį.
+- Yra kelios funkcijos, kurios keičia būseną. Kai programėlė auga, tampa sunku sekti pakeitimus ir lengva pamiršti atnaujinti vieną iš jų.
+- Būsena nėra išvaloma, todėl paspaudus *Atsijungti* paskyros duomenys vis dar lieka, nors esate prisijungimo puslapyje.
+
+Galėtume atnaujinti savo kodą, kad spręstume šias problemas po vieną, tačiau tai sukurtų daugiau kodo dubliavimo ir padarytų programėlę sudėtingesnę bei sunkiau prižiūrimą. Arba galėtume sustoti kelioms minutėms ir iš naujo apgalvoti savo strategiją.
+
+> Kokias problemas iš tikrųjų bandome išspręsti?
+
+[Būsenos valdymas](https://en.wikipedia.org/wiki/State_management) yra apie geros strategijos radimą sprendžiant šias dvi konkrečias problemas:
+
+- Kaip išlaikyti duomenų srautus programėlėje suprantamus?
+- Kaip užtikrinti, kad būsenos duomenys visada būtų sinchronizuoti su vartotojo sąsaja (ir atvirkščiai)?
+
+Kai pasirūpinsite šiais aspektais, bet kokios kitos problemos, su kuriomis galite susidurti, gali būti jau išspręstos arba tapti lengviau išsprendžiamos. Yra daug galimų būdų spręsti šias problemas, tačiau mes pasirinkime bendrą sprendimą, kuris apima **duomenų ir jų keitimo būdų centralizavimą**. Duomenų srautai atrodytų taip:
+
+![Schema, rodanti duomenų srautus tarp HTML, vartotojo veiksmų ir būsenos](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.lt.png)
+
+> Čia neaptarsime dalies, kurioje duomenys automatiškai sukelia vaizdo atnaujinimą, nes tai susiję su pažangesnėmis [reaktyvaus programavimo](https://en.wikipedia.org/wiki/Reactive_programming) koncepcijomis. Tai gera tema gilintis, jei norite išsamiau pasinerti.
+
+✅ Yra daug bibliotekų su skirtingais būsenos valdymo metodais, [Redux](https://redux.js.org) yra populiarus pasirinkimas. Susipažinkite su naudojamomis koncepcijomis ir modeliais, nes tai dažnai yra geras būdas sužinoti, kokių potencialių problemų galite susidurti didelėse internetinėse programėlėse ir kaip jas galima išspręsti.
+
+### Užduotis
+
+Pradėsime nuo šiek tiek refaktoringo. Pakeiskite `account` deklaraciją:
+
+```js
+let account = null;
+```
+
+Į:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Idėja yra *centralizuoti* visus mūsų programėlės duomenis viename būsenos objekte. Šiuo metu būsenoje turime tik `account`, todėl tai daug nekeičia, tačiau tai sukuria kelią evoliucijoms.
+
+Taip pat turime atnaujinti funkcijas, kurios ją naudoja. `register()` ir `login()` funkcijose pakeiskite `account = ...` į `state.account = ...`;
+
+`updateDashboard()` funkcijos viršuje pridėkite šią eilutę:
+
+```js
+const account = state.account;
+```
+
+Šis refaktoringas pats savaime neatnešė daug patobulinimų, tačiau idėja buvo sukurti pagrindą kitoms pakeitimams.
+
+## Sekite duomenų pokyčius
+
+Dabar, kai sukūrėme `state` objektą duomenims saugoti, kitas žingsnis yra centralizuoti atnaujinimus. Tikslas yra palengvinti bet kokių pokyčių sekimą ir kada jie įvyksta.
+
+Kad išvengtume pakeitimų `state` objekte, taip pat gera praktika laikyti jį [*nekintamu*](https://en.wikipedia.org/wiki/Immutable_object), tai reiškia, kad jo negalima visiškai modifikuoti. Tai taip pat reiškia, kad norėdami ką nors pakeisti, turite sukurti naują būsenos objektą. Taip sukuriate apsaugą nuo galimų nepageidaujamų [šalutinių efektų](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) ir atveriate galimybes naujoms funkcijoms programėlėje, pvz., įgyvendinti atšaukimą/atstatymą, taip pat palengvinate derinimą. Pavyzdžiui, galite registruoti kiekvieną būsenos pakeitimą ir išsaugoti pakeitimų istoriją, kad suprastumėte klaidos šaltinį.
+
+JavaScripte galite naudoti [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze), kad sukurtumėte nekintamą objekto versiją. Jei bandysite pakeisti nekintamą objektą, bus iškelta išimtis.
+
+✅ Ar žinote skirtumą tarp *paviršutiniškai* ir *giliai* nekintamo objekto? Apie tai galite perskaityti [čia](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Užduotis
+
+Sukurkime naują `updateState()` funkciją:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+Šioje funkcijoje mes sukuriame naują būsenos objektą ir kopijuojame duomenis iš ankstesnės būsenos naudodami [*sklaidos (`...`) operatorių*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Tada mes pakeičiame tam tikrą būsenos objekto savybę naujais duomenimis naudodami [skliaustų notaciją](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` priskyrimui. Galiausiai mes užrakiname objektą, kad išvengtume pakeitimų, naudodami `Object.freeze()`. Šiuo metu būsenoje saugome tik `account` savybę, tačiau su šiuo metodu galite pridėti tiek savybių, kiek reikia.
+
+Taip pat atnaujinsime `state` inicializaciją, kad įsitikintume, jog pradinė būsena taip pat yra užšaldyta:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Po to atnaujinkite `register` funkciją, pakeisdami `state.account = result;` priskyrimą į:
+
+```js
+updateState('account', result);
+```
+
+Padarykite tą patį su `login` funkcija, pakeisdami `state.account = data;` į:
+
+```js
+updateState('account', data);
+```
+
+Dabar pasinaudosime proga išspręsti problemą, kai paskyros duomenys nėra išvalomi, kai vartotojas paspaudžia *Atsijungti*.
+
+Sukurkite naują funkciją `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+`updateDashboard()` funkcijoje pakeiskite nukreipimą `return navigate('/login');` į `return logout()`;
+
+Pabandykite užregistruoti naują paskyrą, atsijungti ir vėl prisijungti, kad patikrintumėte, ar viskas vis dar veikia tinkamai.
+
+> Patarimas: galite peržiūrėti visus būsenos pakeitimus, pridėdami `console.log(state)` `updateState()` apačioje ir atidarę naršyklės kūrimo įrankių konsolę.
+
+## Išsaugokite būseną
+
+Dauguma internetinių programėlių turi išsaugoti duomenis, kad galėtų tinkamai veikti. Visi svarbūs duomenys paprastai saugomi duomenų bazėje ir pasiekiami per serverio API, kaip mūsų atveju vartotojo paskyros duomenys. Tačiau kartais taip pat įdomu išsaugoti kai kuriuos duomenis kliento programėlėje, kuri veikia jūsų naršyklėje, siekiant geresnės vartotojo patirties arba pagerinti įkėlimo našumą.
+
+Kai norite išsaugoti duomenis naršyklėje, yra keletas svarbių klausimų, kuriuos turėtumėte sau užduoti:
+
+- *Ar duomenys yra jautrūs?* Turėtumėte vengti saugoti bet kokius jautrius duomenis kliente, pvz., vartotojo slaptažodžius.
+- *Kiek laiko jums reikia išsaugoti šiuos duomenis?* Ar planuojate pasiekti šiuos duomenis tik dabartinei sesijai, ar norite, kad jie būtų saugomi amžinai?
+
+Yra keli būdai saugoti informaciją internetinėje programėlėje, priklausomai nuo to, ką norite pasiekti. Pavyzdžiui, galite naudoti URL, kad saugotumėte paieškos užklausą ir padarytumėte ją dalinamą tarp vartotojų. Taip pat galite naudoti [HTTP slapukus](https://developer.mozilla.org/docs/Web/HTTP/Cookies), jei duomenys turi būti dalinami su serveriu, pvz., [autentifikacijos](https://en.wikipedia.org/wiki/Authentication) informacija.
+
+Kita galimybė yra naudoti vieną iš daugelio naršyklės API duomenims saugoti. Dvi iš jų yra ypač įdomios:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): [Raktų/Verčių saugykla](https://en.wikipedia.org/wiki/Key%E2%80%93value_database), leidžianti išsaugoti duomenis, specifinius dabartinei svetainei, tarp skirtingų sesijų. Duomenys, išsaugoti joje, niekada nepasibaigia.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): veikia taip pat kaip `localStorage`, išskyrus tai, kad joje saugomi duomenys ištrinami, kai sesija baigiasi (kai naršyklė uždaroma).
+
+Atkreipkite dėmesį, kad abi šios API leidžia saugoti tik [eilutes](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Jei norite saugoti sudėtingus objektus, turėsite juos serializuoti į [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) formatą, naudodami [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Jei norite sukurti internetinę programėlę, kuri neveikia su serveriu, taip pat galima sukurti duomenų bazę kliente, naudojant [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Ši API skirta pažangiems naudojimo atvejams arba jei reikia saugoti didelį kiekį duomenų, nes ją naudoti yra sudėtingiau.
+
+### Užduotis
+
+Norime, kad mūsų vartotojai liktų prisijungę, kol jie aiškiai nepaspaudžia *Atsijungti* mygtuko, todėl naudosime `localStorage`, kad saugotume paskyros duomenis. Pirmiausia apibrėžkime raktą, kurį naudosime duomenims saugoti.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Tada pridėkite šią eilutę `updateState()` funkcijos pabaigoje:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+Su tuo vartotojo paskyros duomenys bus išsaugoti ir visada atnaujinti, nes anksčiau centralizavome visus būsenos atnaujinimus. Čia pradedame naudotis visais ankstesniais refaktoringais 🙂.
+
+Kadangi duomenys yra išsaugoti, taip pat turime pasirūpinti jų atkūrimu, kai programėlė įkeliama. Kadangi pradėsime turėti daugiau inicializacijos kodo, gali būti gera idėja sukurti naują `init` funkciją, kuri taip pat apimtų mūsų ankstesnį kodą `app.js` apačioje:
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // Our previous initialization code
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+Čia mes atkuriame išsaugotus duomenis, ir jei jų yra, atnaujiname būseną atitinkamai. Svarbu tai padaryti *prieš* atnaujinant maršrutą, nes gali būti kodas, kuris remiasi būsena puslapio atnaujinimo metu.
+
+Taip pat galime padaryti *Prietaisų skydelio* puslapį mūsų programėlės numatytuoju puslapiu, nes dabar išsaugome paskyros duomenis. Jei duomenų nerandama, prietaisų skydelis vis tiek pasirūpina nukreipimu į *Prisijungimo* puslapį. `updateRoute()` funkcijoje pakeiskite atsarginį `return navigate('/login');` į `return navigate('/dashboard');`.
+
+Dabar prisijunkite prie programėlės ir pabandykite atnaujinti puslapį. Turėtumėte likti prietaisų skydelyje. Su šiuo atnaujinimu mes išsprendėme visas pradines problemas...
+
+## Atnaujinkite duomenis
+
+...Bet mes taip pat galėjome sukurti naują problemą. Oi!
+
+Eikite į prietaisų skydelį naudodami `test` paskyrą, tada paleiskite šią komandą terminale, kad sukurtumėte naują operaciją:
+
+```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
+```
+
+Dabar pabandykite atnaujinti prietaisų skydelio puslapį naršyklėje. Kas nutinka? Ar matote naują operaciją?
+
+Būsena yra išsaugota neribotai, dėka `localStorage`, tačiau tai taip pat reiškia, kad ji niekada nėra atnaujinama, kol neatsijungiate nuo programėlės ir vėl neprisijungiate!
+
+Viena galimų strategijų tai išspręsti yra pakartotinai įkelti paskyros duomenis kiekvieną kartą, kai įkeliamas prietaisų skydelis, kad išvengtume pasenusių duomenų.
+
+### Užduotis
+
+Sukurkite naują funkciją `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);
+}
+```
+
+Šis metodas patikrina, ar šiuo metu esame prisijungę, tada pakartotinai įkelia paskyros duomenis iš serverio.
+
+Sukurkite kitą funkciją, pavadintą `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Ši funkcija atnaujina paskyros duomenis, tada pasirūpina prietaisų skydelio puslapio HTML atnaujinimu. Tai yra tai, ką reikia iškviesti, kai įkeliamas prietaisų skydelio maršrutas. Atnaujinkite maršruto
+[Po paskaitos testas](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Užduotis
+
+[Įgyvendinkite dialogo langą „Pridėti operaciją“](assignment.md)
+
+Štai pavyzdys, kaip turėtų atrodyti rezultatas po užduoties atlikimo:
+
+![Ekrano nuotrauka, rodanti pavyzdinį dialogo langą „Pridėti operaciją“](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.lt.png)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/7-bank-project/4-state-management/assignment.md b/translations/lt/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..b1fd2380
--- /dev/null
+++ b/translations/lt/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,38 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-28T11:20:56+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Įgyvendinkite „Pridėti operaciją“ dialogą
+
+## Instrukcijos
+
+Mūsų banko programėlėje vis dar trūksta vienos svarbios funkcijos: galimybės įvesti naujas operacijas. Naudodamiesi viskuo, ką išmokote per keturias ankstesnes pamokas, įgyvendinkite „Pridėti operaciją“ dialogą:
+
+- Pridėkite mygtuką „Pridėti operaciją“ prietaisų skydelio puslapyje
+- Sukurkite naują puslapį su HTML šablonu arba naudokite JavaScript, kad parodytumėte/paslėptumėte dialogo HTML neišeidami iš prietaisų skydelio puslapio (galite naudoti [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) atributą arba CSS klases)
+- Užtikrinkite, kad dialogas būtų pritaikytas [klaviatūros ir ekrano skaitytuvo prieinamumui](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)
+- Įgyvendinkite HTML formą, skirtą įvesties duomenims gauti
+- Sukurkite JSON duomenis iš formos duomenų ir išsiųskite juos į API
+- Atnaujinkite prietaisų skydelio puslapį su naujais duomenimis
+
+Peržiūrėkite [serverio API specifikacijas](../api/README.md), kad sužinotumėte, kokį API reikia iškviesti ir koks yra laukiamas JSON formatas.
+
+Štai pavyzdys, kaip turėtų atrodyti rezultatas atlikus užduotį:
+
+![Ekrano nuotrauka, rodanti pavyzdinį „Pridėti operaciją“ dialogą](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.lt.png)
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai                                                                                         | Pakankamai                                                                                                             | Reikia patobulinimų                          |
+| ---------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+|            | Operacijos pridėjimas įgyvendintas visiškai laikantis visų pamokose aptartų geriausių praktikų. | Operacijos pridėjimas įgyvendintas, bet nesilaikant geriausių praktikų arba veikia tik iš dalies.                     | Operacijos pridėjimas visiškai neveikia.     |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/7-bank-project/README.md b/translations/lt/7-bank-project/README.md
new file mode 100644
index 00000000..f2485407
--- /dev/null
+++ b/translations/lt/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-28T11:13:59+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "lt"
+}
+-->
+# :dollar: Sukurkite Banką
+
+Šiame projekte išmoksite, kaip sukurti fiktyvų banką. Šios pamokos apima instrukcijas, kaip sukurti internetinės programos išdėstymą ir maršrutus, kurti formas, valdyti būseną ir gauti duomenis iš API, iš kurios galėsite gauti banko duomenis.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.lt.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.lt.png) |
+|--------------------------------|--------------------------------|
+
+## Pamokos
+
+1. [HTML šablonai ir maršrutai internetinėje programoje](1-template-route/README.md)
+2. [Prisijungimo ir registracijos formos kūrimas](2-forms/README.md)
+3. [Duomenų gavimo ir naudojimo metodai](3-data/README.md)
+4. [Būsenos valdymo koncepcijos](4-state-management/README.md)
+
+### Kreditas
+
+Šios pamokos buvo parašytos su :hearts: [Yohan Lasorsa](https://twitter.com/sinedied).
+
+Jei norite sužinoti, kaip sukurti [serverio API](/7-bank-project/api/README.md), naudojamą šiose pamokose, galite sekti [šią vaizdo įrašų seriją](https://aka.ms/NodeBeginner) (ypač 17–21 vaizdo įrašus).
+
+Taip pat galite peržiūrėti [šį interaktyvų mokymosi vadovą](https://aka.ms/learn/express-api).
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/7-bank-project/api/README.md b/translations/lt/7-bank-project/api/README.md
new file mode 100644
index 00000000..99da58b7
--- /dev/null
+++ b/translations/lt/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-28T11:16:21+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "lt"
+}
+-->
+# Banko API
+
+> Banko API sukurta naudojant [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+API jau yra sukurta ir nėra šios užduoties dalis.
+
+Tačiau, jei norite sužinoti, kaip sukurti tokią API, galite peržiūrėti šią vaizdo įrašų seriją: https://aka.ms/NodeBeginner (17–21 vaizdo įrašuose aptariama būtent ši API).
+
+Taip pat galite peržiūrėti šį interaktyvų vadovą: https://aka.ms/learn/express-api
+
+## Serverio paleidimas
+
+Įsitikinkite, kad turite įdiegtą [Node.js](https://nodejs.org).
+
+1. Nuklonuokite šį repozitoriją [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Atidarykite terminalą ir pereikite į aplanką `Web-Dev-For-Beginners/7-bank-project/api`.
+3. Paleiskite komandą `npm install` ir palaukite, kol bus įdiegtos visos priklausomybės (tai gali užtrukti priklausomai nuo jūsų interneto ryšio kokybės).
+4. Kai diegimas bus baigtas, paleiskite komandą `npm start` ir viskas paruošta.
+
+Serveris turėtų pradėti klausytis prievado `5000`.
+*Šis serveris veiks kartu su pagrindiniu banko programos serveriu (klausantis prievado `3000`), todėl jo neuždarykite.*
+
+> Pastaba: visi įrašai saugomi atmintyje ir nėra išsaugomi, todėl sustabdžius serverį visi duomenys bus prarasti.
+
+## API detalės
+
+Maršrutas                                    | Aprašymas
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Gauti serverio informaciją
+POST   /api/accounts/                        | Sukurti paskyrą, pvz.: `{ user: 'Yohan', description: 'Mano biudžetas', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Gauti visus nurodytos paskyros duomenis
+DELETE /api/accounts/:user                   | Pašalinti nurodytą paskyrą
+POST   /api/accounts/:user/transactions      | Pridėti operaciją, pvz.: `{ date: '2020-07-23T18:25:43.511Z', object: 'Nupirkta knyga', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Pašalinti nurodytą operaciją
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/7-bank-project/solution/README.md b/translations/lt/7-bank-project/solution/README.md
new file mode 100644
index 00000000..ffb1e2da
--- /dev/null
+++ b/translations/lt/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-28T11:16:39+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "lt"
+}
+-->
+# Banko programa
+
+> Pavyzdinis banko programos projekto sprendimas, sukurtas naudojant gryną HTML5, CSS ir JavaScript (be jokių karkasų ar bibliotekų).
+
+## Programos paleidimas
+
+Pirmiausia įsitikinkite, kad veikia [API serveris](../api/README.md).
+
+Bet kuris žiniatinklio serveris gali būti naudojamas programai paleisti, tačiau kadangi jums vis tiek reikia įdiegti [Node.js](https://nodejs.org), kad paleistumėte API, galite:
+
+1. Nuklonuokite šį repozitoriją naudodami Git.
+2. Atidarykite terminalą, pereikite į šį katalogą ir paleiskite `npx lite-server .`. Tai paleis vystymo žiniatinklio serverį 3000 prievade.
+3. Naršyklėje atidarykite `http://localhost:3000`, kad paleistumėte programą.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/8-code-editor/1-using-a-code-editor/README.md b/translations/lt/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..3e9f1be8
--- /dev/null
+++ b/translations/lt/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,156 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-28T11:54:49+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "lt"
+}
+-->
+# Naudojimasis kodo redaktoriumi
+
+Ši pamoka apima pagrindus, kaip naudotis [VSCode.dev](https://vscode.dev) – internetiniu kodo redaktoriumi, kad galėtumėte keisti savo kodą ir prisidėti prie projekto, nieko neįdiegdami savo kompiuteryje.
+
+## Mokymosi tikslai
+
+Šioje pamokoje išmoksite:
+
+- Naudotis kodo redaktoriumi kodo projekte
+- Sekti pakeitimus naudojant versijų kontrolę
+- Pritaikyti redaktorių programavimui
+
+### Reikalavimai
+
+Prieš pradėdami, turite susikurti paskyrą [GitHub](https://github.com). Eikite į [GitHub](https://github.com/) ir susikurkite paskyrą, jei dar neturite.
+
+### Įvadas
+
+Kodo redaktorius yra esminis įrankis programoms rašyti ir bendradarbiauti su esamais kodavimo projektais. Kai suprasite redaktoriaus pagrindus ir kaip naudotis jo funkcijomis, galėsite jas pritaikyti rašydami kodą.
+
+## Pradžia su VSCode.dev
+
+[VSCode.dev](https://vscode.dev) yra internetinis kodo redaktorius. Jums nereikia nieko įdiegti, kad galėtumėte juo naudotis – tiesiog atidarykite jį kaip bet kurią kitą svetainę. Norėdami pradėti naudotis redaktoriumi, atidarykite šią nuorodą: [https://vscode.dev](https://vscode.dev). Jei nesate prisijungę prie [GitHub](https://github.com/), sekite nurodymus, kad prisijungtumėte arba susikurtumėte naują paskyrą, o tada prisijunkite.
+
+Kai redaktorius užsikraus, jis turėtų atrodyti panašiai kaip šiame paveikslėlyje:
+
+![Numatytasis VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.lt.png)
+
+Yra trys pagrindinės sekcijos, pradedant nuo kairės ir judant į dešinę:
+
+1. _Veiklos juosta_ su keliais piktogramomis, pvz., didinamuoju stiklu 🔎, krumpliaračiu ⚙️ ir kitomis.
+2. Išplėsta veiklos juosta, kuri pagal numatymą yra _Naršyklė_, vadinama _šonine juosta_.
+3. Ir galiausiai kodo sritis dešinėje.
+
+Paspauskite ant kiekvienos piktogramos, kad pamatytumėte skirtingus meniu. Baigę, paspauskite _Naršyklę_, kad grįžtumėte į pradinę padėtį.
+
+Kai pradėsite kurti kodą arba keisti esamą kodą, tai vyks didžiausioje srityje dešinėje. Šią sritį taip pat naudosite esamam kodui peržiūrėti, ką darysite toliau.
+
+## Atidarykite GitHub saugyklą
+
+Pirmiausia turite atidaryti GitHub saugyklą. Yra keli būdai, kaip atidaryti saugyklą. Šioje sekcijoje pamatysite du skirtingus būdus, kaip galite atidaryti saugyklą ir pradėti dirbti su pakeitimais.
+
+### 1. Naudojant redaktorių
+
+Naudokite patį redaktorių, kad atidarytumėte nuotolinę saugyklą. Jei eiksite į [VSCode.dev](https://vscode.dev), pamatysite mygtuką _"Open Remote Repository"_:
+
+![Atidaryti nuotolinę saugyklą](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.lt.png)
+
+Taip pat galite naudoti komandų paletę. Komandų paletė yra įvesties laukelis, kuriame galite įvesti bet kokį žodį, susijusį su komanda ar veiksmu, kad rastumėte tinkamą komandą vykdymui. Naudokite meniu viršuje kairėje, tada pasirinkite _View_, o tada _Command Palette_, arba naudokite šį klavišų derinį: Ctrl-Shift-P (MacOS sistemoje tai būtų Command-Shift-P).
+
+![Paletės meniu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.lt.png)
+
+Kai meniu atsidarys, įveskite _open remote repository_, o tada pasirinkite pirmąją parinktį. Pasirodys kelios saugyklos, kurių dalimi esate arba kurias neseniai atidarėte. Taip pat galite naudoti pilną GitHub URL, kad pasirinktumėte vieną. Naudokite šį URL ir įklijuokite jį į laukelį:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Jei viskas pavyko, redaktoriuje bus įkelti visi šios saugyklos failai.
+
+### 2. Naudojant URL
+
+Taip pat galite naudoti URL tiesiogiai, kad įkeltumėte saugyklą. Pavyzdžiui, pilnas URL dabartinei saugyklai yra [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), tačiau galite pakeisti GitHub domeną į `VSCode.dev/github` ir tiesiogiai įkelti saugyklą. Rezultatas būtų [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Redaguokite failus
+
+Kai atidarėte saugyklą naršyklėje arba vscode.dev, kitas žingsnis būtų atnaujinti ar pakeisti projektą.
+
+### 1. Sukurkite naują failą
+
+Galite sukurti failą esamame aplanke arba pagrindiniame kataloge/aplanke. Norėdami sukurti naują failą, atidarykite vietą/katalogą, kur norite išsaugoti failą, ir pasirinkite _'New file ...'_ piktogramą veiklos juostoje _(kairėje)_, suteikite failui pavadinimą ir paspauskite Enter.
+
+![Sukurti naują failą](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.lt.png)
+
+### 2. Redaguokite ir išsaugokite failą saugykloje
+
+Naudojimasis vscode.dev yra naudingas, kai norite greitai atnaujinti savo projektą, neįkeldami jokios programinės įrangos lokaliai. Norėdami atnaujinti savo kodą, paspauskite 'Explorer' piktogramą, esančią veiklos juostoje, kad peržiūrėtumėte failus ir aplankus saugykloje. Pasirinkite failą, kad atidarytumėte jį kodo srityje, atlikite pakeitimus ir išsaugokite.
+
+![Redaguoti failą](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.lt.png)
+
+Kai baigsite atnaujinti projektą, pasirinkite _`source control`_ piktogramą, kurioje bus visi nauji pakeitimai, kuriuos atlikote savo saugykloje.
+
+Norėdami peržiūrėti pakeitimus, kuriuos atlikote projekte, pasirinkite failą(-us) aplanke `Changes` išplėstoje veiklos juostoje. Tai atidarys 'Working Tree', kuriame vizualiai matysite pakeitimus, kuriuos atlikote faile. Raudona spalva rodo projekto pašalinimą, o žalia – pridėjimą.
+
+![Peržiūrėti pakeitimus](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.lt.png)
+
+Jei esate patenkinti atliktais pakeitimais, užveskite pelės žymeklį ant aplanko `Changes` ir paspauskite `+` mygtuką, kad paruoštumėte pakeitimus įrašymui. Paruošimas reiškia, kad ruošiate pakeitimus įrašymui į GitHub.
+
+Jei vis dėlto nesate patenkinti kai kuriais pakeitimais ir norite juos atmesti, užveskite pelės žymeklį ant aplanko `Changes` ir pasirinkite `undo` piktogramą.
+
+Tada įveskite `commit message` _(aprašymas apie pakeitimą, kurį atlikote projekte)_, paspauskite `check icon`, kad įrašytumėte ir išsiųstumėte pakeitimus.
+
+Baigę darbą su projektu, pasirinkite `hamburger menu icon` viršuje kairėje, kad grįžtumėte į saugyklą github.com.
+
+![Paruošti ir įrašyti pakeitimus](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Naudojimasis plėtiniais
+
+Įdiegus plėtinius VSCode, galite pridėti naujų funkcijų ir pritaikyti redaktoriaus aplinką, kad pagerintumėte savo programavimo eigą. Šie plėtiniai taip pat padeda pridėti palaikymą kelioms programavimo kalboms ir dažniausiai yra bendrieji arba kalbos pagrindu sukurti plėtiniai.
+
+Norėdami peržiūrėti visų galimų plėtinių sąrašą, paspauskite _`Extensions icon`_ veiklos juostoje ir pradėkite rašyti plėtinio pavadinimą teksto laukelyje, pažymėtame _'Search Extensions in Marketplace'_.
+Pamatysite plėtinių sąrašą, kuriame bus **plėtinio pavadinimas, leidėjo vardas, vieno sakinio aprašymas, atsisiuntimų skaičius** ir **žvaigždučių įvertinimas**.
+
+![Plėtinių detalės](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.lt.png)
+
+Taip pat galite peržiūrėti visus anksčiau įdiegtus plėtinius, išplėsdami aplanką _`Installed folder`_, populiarius plėtinius, kuriuos naudoja dauguma programuotojų, aplanke _`Popular folder`_ ir rekomenduojamus plėtinius jums, remiantis vartotojais toje pačioje darbo aplinkoje arba neseniai atidarytais failais aplanke _`recommended folder`_.
+
+![Peržiūrėti plėtinius](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.lt.png)
+
+### 1. Įdiegti plėtinius
+
+Norėdami įdiegti plėtinį, įveskite plėtinio pavadinimą paieškos laukelyje ir paspauskite ant jo, kad peržiūrėtumėte papildomą informaciją apie plėtinį kodo srityje, kai jis pasirodys išplėstoje veiklos juostoje.
+
+Galite paspausti _mėlyną įdiegimo mygtuką_ išplėstoje veiklos juostoje arba naudoti įdiegimo mygtuką, kuris pasirodo kodo srityje, kai pasirinksite plėtinį, kad įkeltumėte papildomą informaciją.
+
+![Įdiegti plėtinius](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Pritaikyti plėtinius
+
+Įdiegus plėtinį, gali reikėti pakeisti jo veikimą ir pritaikyti jį pagal savo poreikius. Norėdami tai padaryti, pasirinkite Extensions piktogramą, ir šį kartą jūsų plėtinys pasirodys aplanke _Installed folder_, paspauskite _**Gear icon**_ ir eikite į _Extensions Setting_.
+
+![Keisti plėtinių nustatymus](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.lt.png)
+
+### 3. Valdyti plėtinius
+
+Įdiegus ir naudojant plėtinį, vscode.dev siūlo galimybes valdyti plėtinį pagal skirtingus poreikius. Pavyzdžiui, galite pasirinkti:
+
+- **Išjungti:** _(Laikinai išjungiate plėtinį, kai jo nebereikia, bet nenorite jo visiškai pašalinti)_
+
+    Pasirinkite įdiegtą plėtinį išplėstoje veiklos juostoje > paspauskite Gear piktogramą > pasirinkite 'Disable' arba 'Disable (Workspace)' **ARBA** atidarykite plėtinį kodo srityje ir paspauskite mėlyną Disable mygtuką.
+
+- **Pašalinti:** Pasirinkite įdiegtą plėtinį išplėstoje veiklos juostoje > paspauskite Gear piktogramą > pasirinkite 'Uninstall' **ARBA** atidarykite plėtinį kodo srityje ir paspauskite mėlyną Uninstall mygtuką.
+
+---
+
+## Užduotis
+
+[Sukurkite gyvenimo aprašymo svetainę naudodami vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Peržiūra ir savarankiškas mokymasis
+
+Skaitykite daugiau apie [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) ir kai kurias kitas jo funkcijas.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/8-code-editor/1-using-a-code-editor/assignment.md b/translations/lt/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..5619c431
--- /dev/null
+++ b/translations/lt/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-28T11:55:53+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "lt"
+}
+-->
+# Sukurkite gyvenimo aprašymo svetainę naudodami vscode.dev
+
+_Kaip šaunu būtų, jei darbdavys paprašytų jūsų gyvenimo aprašymo, o jūs jam atsiųstumėte nuorodą?_ 😎
+
+## Tikslai
+
+Po šios užduoties jūs išmoksite:
+
+- Sukurti svetainę, kurioje būtų pateiktas jūsų gyvenimo aprašymas
+
+### Reikalavimai
+
+1. GitHub paskyra. Eikite į [GitHub](https://github.com/) ir susikurkite paskyrą, jei dar neturite.
+
+## Žingsniai
+
+**1 žingsnis:** Sukurkite naują GitHub saugyklą ir pavadinkite ją `my-resume`.
+
+**2 žingsnis:** Sukurkite `index.html` failą savo saugykloje. Pridėsime bent vieną failą tiesiogiai github.com, nes tuščios saugyklos negalima atidaryti vscode.dev.
+
+Paspauskite nuorodą `creating a new file`, įveskite pavadinimą `index.html` ir pasirinkite mygtuką `Commit new file`.
+
+![Sukurti naują failą github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.lt.png)
+
+**3 žingsnis:** Atidarykite [VSCode.dev](https://vscode.dev) ir pasirinkite mygtuką `Open Remote Repository`.
+
+Nukopijuokite nuorodą į ką tik sukurtą saugyklą ir įklijuokite ją į įvesties laukelį:
+
+_Pakeiskite `your-username` savo GitHub naudotojo vardu._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Jei viskas pavyko, pamatysite savo projektą ir `index.html` failą, atidarytą naršyklės teksto redaktoriuje.
+
+![Sukurti naują failą](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.lt.png)
+
+**4 žingsnis:** Atidarykite `index.html` failą, įklijuokite žemiau pateiktą kodą į savo kodo sritį ir išsaugokite.
+
+<details>
+    <summary><b>HTML kodas, atsakingas už jūsų gyvenimo aprašymo svetainės turinį.</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>Jūsų vardas čia!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- gyvenimo aprašymo antraštė su jūsų vardu ir pareigomis -->
+                    <h1>Jūsų vardas čia!</h1>
+                    <hr>
+                    Jūsų pareigos!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>KONTAKTAI</h2>
+                            <!-- kontaktinė informacija, įskaitant socialinius tinklus -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Įrašykite savo el. paštą čia</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Įrašykite savo naudotojo vardą čia!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Įrašykite savo naudotojo vardą čia!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>ĮGŪDŽIAI</h2>
+                            <!-- jūsų įgūdžiai -->
+                            <ul>
+                                <li>Įgūdis 1!</li>
+                                <li>Įgūdis 2!</li>
+                                <li>Įgūdis 3!</li>
+                                <li>Įgūdis 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>IŠSILAVINIMAS</h2>
+                            <!-- jūsų išsilavinimas -->
+                            <h3>Įrašykite savo studijų programą čia!</h3>
+                            <p>
+                                Įrašykite savo instituciją čia!
+                            </p>
+                            <p>
+                                Pradžios - Pabaigos data
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>APIE</h2>
+                            <!-- apie jus -->
+                            <p>Parašykite trumpą tekstą apie save!</p>
+                        </section>
+                        <section>
+                            <h2>DARBINĖ PATIRTIS</h2>
+                            <!-- jūsų darbinė patirtis -->
+                            <h3>Pareigos</h3>
+                            <p>
+                                Organizacijos pavadinimas čia | Pradžios mėnuo – Pabaigos mėnuo
+                            </p>
+                            <ul>
+                                    <li>Užduotis 1 - Parašykite, ką darėte!</li>
+                                    <li>Užduotis 2 - Parašykite, ką darėte!</li>
+                                    <li>Parašykite savo indėlio rezultatus/poveikį</li>
+                                    
+                            </ul>
+                            <h3>Pareigos 2</h3>
+                            <p>
+                                Organizacijos pavadinimas čia | Pradžios mėnuo – Pabaigos mėnuo
+                            </p>
+                            <ul>
+                                    <li>Užduotis 1 - Parašykite, ką darėte!</li>
+                                    <li>Užduotis 2 - Parašykite, ką darėte!</li>
+                                    <li>Parašykite savo indėlio rezultatus/poveikį</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Pakeiskite _vietos rezervavimo tekstą_ savo gyvenimo aprašymo informacija.
+
+**5 žingsnis:** Užveskite pelės žymeklį ant My-Resume aplanko, spustelėkite `New File ...` piktogramą ir sukurkite 2 naujus failus savo projekte: `style.css` ir `codeswing.json`.
+
+**6 žingsnis:** Atidarykite `style.css` failą, įklijuokite žemiau pateiktą kodą ir išsaugokite.
+
+<details>
+        <summary><b>CSS kodas, skirtas svetainės išdėstymui formatuoti.</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 žingsnis:** Atidarykite `codeswing.json` failą, įklijuokite žemiau pateiktą kodą ir išsaugokite.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**7 žingsnis:** Įdiekite `Codeswing` plėtinį, kad galėtumėte peržiūrėti gyvenimo aprašymo svetainę kodo srityje.
+
+Paspauskite _`Extensions`_ piktogramą veiklos juostoje ir įveskite Codeswing. Spustelėkite _mėlyną įdiegimo mygtuką_ išplėstoje veiklos juostoje arba naudokite įdiegimo mygtuką, kuris pasirodo kodo srityje, kai pasirenkate plėtinį. Iškart po plėtinio įdiegimo stebėkite, kaip jūsų projektas pasikeičia 😃
+
+![Įdiegti plėtinius](../../../../8-code-editor/images/install-extension.gif)
+
+Štai ką pamatysite savo ekrane po plėtinio įdiegimo.
+
+![Codeswing plėtinys veikia](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.lt.png)
+
+Jei esate patenkinti atliktais pakeitimais, užveskite pelės žymeklį ant `Changes` aplanko ir spustelėkite `+` mygtuką, kad įtrauktumėte pakeitimus.
+
+Įveskite įsipareigojimo pranešimą _(projekto pakeitimų aprašymą)_ ir įsipareigokite pakeitimus spustelėdami `check`. Baigę darbą su projektu, pasirinkite viršutiniame kairiajame kampe esančią meniu piktogramą, kad grįžtumėte į saugyklą GitHub.
+
+Sveikiname 🎉 Jūs ką tik sukūrėte savo gyvenimo aprašymo svetainę naudodami vscode.dev vos keliais žingsniais.
+
+## 🚀 Iššūkis
+
+Atidarykite nuotolinę saugyklą, kurioje turite leidimus atlikti pakeitimus, ir atnaujinkite kelis failus. Tada pabandykite sukurti naują šaką su savo pakeitimais ir pateikti „Pull Request“.
+
+## Peržiūra ir savarankiškas mokymasis
+
+Skaitykite daugiau apie [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) ir kitas jo funkcijas.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/CODE_OF_CONDUCT.md b/translations/lt/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..8266d130
--- /dev/null
+++ b/translations/lt/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-28T11:13:46+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "lt"
+}
+-->
+# Microsoft Atvirojo Kodo Elgesio Kodeksas
+
+Šis projektas priėmė [Microsoft Atvirojo Kodo Elgesio Kodeksą](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Ištekliai:
+
+- [Microsoft Atvirojo Kodo Elgesio Kodeksas](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Microsoft Elgesio Kodekso DUK](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Klausimus ar rūpesčius siųskite adresu [opencode@microsoft.com](mailto:opencode@microsoft.com)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/CONTRIBUTING.md b/translations/lt/CONTRIBUTING.md
new file mode 100644
index 00000000..91f7d5f4
--- /dev/null
+++ b/translations/lt/CONTRIBUTING.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-28T11:12:34+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "lt"
+}
+-->
+# Prisidėjimas
+
+Šis projektas kviečia prisidėti ir teikti pasiūlymus. Dauguma indėlių reikalauja, kad jūs
+sutiktumėte su Contributor License Agreement (CLA), patvirtindami, kad turite teisę
+ir iš tikrųjų suteikiate mums teises naudoti jūsų indėlį. Daugiau informacijos rasite
+[https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Kai pateikiate „pull request“, CLA-botas automatiškai nustatys, ar jums reikia
+pateikti CLA ir atitinkamai pažymės PR (pvz., pridės etiketę, komentarą). Tiesiog vykdykite
+botų pateiktas instrukcijas. Tai reikės padaryti tik vieną kartą visose saugyklose, kurios naudoja mūsų CLA. Taip pat pabandykite paaiškinti, kodėl atlikote tą pakeitimą, kad geriau suprastume jūsų prašymą.
+
+Šis projektas priėmė [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+Daugiau informacijos rasite [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+arba susisiekite su [opencode@microsoft.com](mailto:opencode@microsoft.com), jei turite papildomų klausimų ar komentarų.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/README.md b/translations/lt/README.md
new file mode 100644
index 00000000..0339e1b4
--- /dev/null
+++ b/translations/lt/README.md
@@ -0,0 +1,209 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T11:10:48+00:00",
+  "source_file": "README.md",
+  "language_code": "lt"
+}
+-->
+[![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)  
+
+Sekite šiuos žingsnius, kad pradėtumėte naudotis šiais ištekliais:  
+1. **Fork'inkite saugyklą**: Spustelėkite [![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. **Klonuokite saugyklą**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Prisijunkite prie Azure AI Foundry Discord ir susipažinkite su ekspertais bei kitais kūrėjais**](https://discord.com/invite/ByRwuEEgH4)  
+
+# Interneto svetainių kūrimas pradedantiesiems – mokymo programa  
+
+Išmokite interneto svetainių kūrimo pagrindus per 12 savaičių išsamią kursų programą, kurią parengė Microsoft Cloud Advocates. Kiekviena iš 24 pamokų apima JavaScript, CSS ir HTML per praktinius projektus, tokius kaip terariumai, naršyklės plėtiniai ir kosminiai žaidimai. Dalyvaukite viktorinose, diskusijose ir praktinėse užduotyse. Tobulinkite savo įgūdžius ir optimizuokite žinių įsisavinimą naudodami efektyvią projektų pagrindu paremtą mokymo metodiką. Pradėkite savo programavimo kelionę jau šiandien!  
+
+#### 🧑‍🎓 _Ar esate studentas?_  
+
+Apsilankykite [**Studentų centro puslapyje**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kur rasite pradedančiųjų išteklius, studentų paketus ir net būdus, kaip gauti nemokamą sertifikato kuponą. Tai puslapis, kurį verta įsiminti ir reguliariai tikrinti, nes turinys keičiamas kas mėnesį.  
+
+### 📣 Pranešimas - _Nauja mokymo programa_ apie generatyvinį AI JavaScript kalbai  
+
+Nepraleiskite mūsų naujos generatyvinio AI mokymo programos!  
+
+Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), kad pradėtumėte!  
+
+![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.lt.png)  
+
+- Pamokos nuo pagrindų iki RAG.  
+- Sąveika su istoriniais veikėjais naudojant GenAI ir mūsų pagalbinę programėlę.  
+- Smagi ir įtraukianti pasakojimo forma – keliausite laiku!  
+
+![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.lt.png)  
+
+Kiekviena pamoka apima užduotį, žinių patikrinimą ir iššūkį, kurie padės mokytis tokių temų kaip:  
+- Užklausų kūrimas ir jų inžinerija  
+- Teksto ir vaizdų programėlių kūrimas  
+- Paieškos programėlės  
+
+Apsilankykite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), kad pradėtumėte!  
+
+## 🌱 Pradžia  
+
+> **Mokytojai**, mes [įtraukėme keletą pasiūlymų](for-teachers.md), kaip naudoti šią mokymo programą. Laukiame jūsų atsiliepimų [mūsų diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Mokiniams](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kiekvienai pamokai pradėkite nuo viktorinos prieš paskaitą, perskaitykite paskaitos medžiagą, atlikite įvairias veiklas ir patikrinkite savo supratimą su viktorina po paskaitos.  
+
+Norėdami pagerinti mokymosi patirtį, susisiekite su savo bendraamžiais ir dirbkite kartu prie projektų! Diskusijos skatinamos mūsų [diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kur mūsų moderatorių komanda bus pasirengusi atsakyti į jūsų klausimus.  
+
+Norėdami tęsti mokymąsi, labai rekomenduojame tyrinėti [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) papildomai studijų medžiagai.  
+
+### 📋 Aplinkos paruošimas  
+
+Ši mokymo programa turi paruoštą kūrimo aplinką! Pradėdami galite pasirinkti vykdyti mokymo programą [Codespace](https://github.com/features/codespaces/) (_naršyklėje, nereikia nieko įdiegti_), arba vietoje savo kompiuteryje naudodami teksto redaktorių, pvz., [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Sukurkite savo saugyklą  
+Kad galėtumėte lengvai išsaugoti savo darbą, rekomenduojama sukurti savo šios saugyklos kopiją. Tai galite padaryti spustelėję mygtuką **Use this template** puslapio viršuje. Tai sukurs naują saugyklą jūsų GitHub paskyroje su mokymo programos kopija.  
+
+Sekite šiuos žingsnius:  
+1. **Fork'inkite saugyklą**: Spustelėkite mygtuką "Fork" puslapio viršuje dešinėje.  
+2. **Klonuokite saugyklą**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Mokymo programos vykdymas Codespace aplinkoje  
+
+Savo sukurtoje šios saugyklos kopijoje spustelėkite mygtuką **Code** ir pasirinkite **Open with Codespaces**. Tai sukurs naują Codespace aplinką, kurioje galėsite dirbti.  
+
+[!Codespace](../..)./images/createcodespace.png)  
+
+#### Mokymo programos vykdymas vietoje savo kompiuteryje  
+
+Norėdami vykdyti mokymo programą vietoje savo kompiuteryje, jums reikės teksto redaktoriaus, naršyklės ir komandinės eilutės įrankio. Pirmoji pamoka, [Įvadas į programavimo kalbas ir įrankius](../../1-getting-started-lessons/1-intro-to-programming-languages), padės jums pasirinkti geriausius įrankius.  
+
+Mūsų rekomendacija yra naudoti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kaip redaktorių, kuris taip pat turi integruotą [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code galite atsisiųsti [čia](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Klonuokite savo saugyklą į kompiuterį. Tai galite padaryti spustelėję mygtuką **Code** ir nukopijuodami URL:  
+
+    [!CodeSpace](./images/createcodespace.png)  
+
+    Tada atidarykite [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) Visual Studio Code ir vykdykite šią komandą, pakeisdami `<your-repository-url>` į ką tik nukopijuotą URL:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Atidarykite aplanką Visual Studio Code. Tai galite padaryti spustelėję **File** > **Open Folder** ir pasirinkę ką tik klonuotą aplanką.  
+
+>  Rekomenduojami Visual Studio Code plėtiniai:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - peržiūrėti HTML puslapius Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - padeda greičiau rašyti kodą  
+
+## 📂 Kiekviena pamoka apima:  
+
+- pasirenkamą eskizą  
+- pasirenkamą papildomą vaizdo įrašą  
+- viktoriną prieš pamoką  
+- rašytinę pamoką  
+- projektų pagrindu paremtoms pamokoms – žingsnis po žingsnio vadovus, kaip sukurti projektą  
+- žinių patikrinimus  
+- iššūkį  
+- papildomą skaitymą  
+- užduotį  
+- [viktoriną po pamokos](https://ff-quizzes.netlify.app/)  
+
+> **Pastaba apie viktorinas**: Visos viktorinos yra Quiz-app aplanke, iš viso 48 viktorinos po tris klausimus. Jas galite rasti [čia](https://ff-quizzes.netlify.app/), viktorinų programėlę galima vykdyti vietoje arba įdiegti Azure; sekite instrukcijas `quiz-app` aplanke.  
+
+## 🗃️ Pamokos  
+
+|     |                       Projekto pavadinimas                       |                            Mokomos sąvokos                             | Mokymosi tikslai                                                                                                                 |                                                         Susieta pamoka                                                          |         Autorius          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Pradžia                      |           Įvadas į programavimą ir įrankius           | Sužinokite pagrindinius programavimo kalbų principus ir apie programinę įrangą, kuri padeda profesionaliems kūrėjams atlikti savo darbą | [Įvadas į programavimo kalbas ir įrankius](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Pradžia                      |             GitHub pagrindai, įskaitant darbą komandoje             | Kaip naudoti GitHub savo projekte, kaip bendradarbiauti su kitais kodų bazėje                                                    |                            [Įvadas į GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Pradžia                      |                             Prieinamumas                              | Sužinokite pagrindinius interneto prieinamumo principus                                                                                               |                       [Prieinamumo pagrindai](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        JS pagrindai                         |                         JavaScript duomenų tipai                          | JavaScript duomenų tipų pagrindai                                                                                                 |                                       [Duomenų tipai](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        JS pagrindai                         |                         Funkcijos ir metodai                          | Sužinokite apie funkcijas ir metodus, kurie padeda valdyti programos logikos eigą                                                             |                              [Funkcijos ir metodai](./2-js-basics/2-functions-methods/README.md)                               | Jasmine ir Christopher |  
+| 06  |                        JS pagrindai                         |                        Sprendimų priėmimas su JS                        | Sužinokite, kaip kurti sąlygas savo kode naudojant sprendimų priėmimo metodus                                                           |                                 [Sprendimų priėmimas](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        JS pagrindai                         |                            Masyvai ir ciklai                            | Darbas su duomenimis naudojant masyvus ir ciklus JavaScript                                                                                 |                                   [Masyvai ir ciklai](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terariumas](./3-terrarium/solution/README.md)       |                            HTML praktikoje                            | Sukurkite HTML, kad sukurtumėte internetinį terariumą, sutelkiant dėmesį į išdėstymo kūrimą                                                         |                                 [Įvadas į HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terariumas](./3-terrarium/solution/README.md)       |                            CSS praktikoje                             | Sukurkite CSS, kad stilizuotumėte internetinį terariumą, sutelkiant dėmesį į CSS pagrindus, įskaitant puslapio pritaikymą                     |                                  [Įvadas į CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript uždarymai, DOM manipuliacija                | Sukurkite JavaScript, kad terariumas veiktų kaip vilkimo/nuleidimo sąsaja, sutelkiant dėmesį į uždarymus ir DOM manipuliaciją       |                  [JavaScript uždarymai, DOM manipuliacija](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                  |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          Sukurkite rašymo žaidimą                      | Sužinokite, kaip naudoti klaviatūros įvykius, kad valdytumėte savo JavaScript programos logiką                                      |                                [Įvykių valdymas](./4-typing-game/typing-game/README.md)                                          |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         Darbas su naršyklėmis                          | Sužinokite, kaip veikia naršyklės, jų istoriją ir kaip sukurti pirmuosius naršyklės plėtinio elementus                              |                               [Apie naršykles](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | Formos kūrimas, API kvietimas ir kintamųjų saugojimas vietinėje saugykloje | Sukurkite JavaScript elementus savo naršyklės plėtiniui, kad galėtumėte kviesti API, naudojant vietinėje saugykloje saugomus kintamuosius |                [API, formos ir vietinė saugykla](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          Fono procesai naršyklėje, interneto našumas                   | Naudokite naršyklės fono procesus, kad valdytumėte plėtinio piktogramą; sužinokite apie interneto našumą ir optimizacijas           |             [Fono užduotys ir našumas](./5-browser-extension/3-background-tasks-and-performance/README.md)                      |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             Pažangesnis žaidimų kūrimas su JavaScript                  | Sužinokite apie paveldėjimą, naudojant klases ir kompoziciją, bei Pub/Sub modelį, ruošiantis žaidimo kūrimui                       |                      [Įvadas į pažangų žaidimų kūrimą](./6-space-game/1-introduction/README.md)                                  |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           Piešimas ant drobės                          | Sužinokite apie Canvas API, naudojamą elementų piešimui ekrane                                                                      |                                [Piešimas ant drobės](./6-space-game/2-drawing-to-canvas/README.md)                               |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   Elementų judėjimas ekrane                            | Sužinokite, kaip elementai gali judėti naudojant Dekarto koordinates ir Canvas API                                                  |                           [Elementų judėjimas](./6-space-game/3-moving-elements-around/README.md)                               |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          Susidūrimų aptikimas                          | Padarykite, kad elementai susidurtų ir reaguotų vienas į kitą, naudojant klavišų paspaudimus, ir pridėkite atvėsimo funkciją, kad užtikrintumėte žaidimo našumą |                              [Susidūrimų aptikimas](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             Taškų skaičiavimas                         | Atlikite matematinius skaičiavimus, remdamiesi žaidimo būsena ir našumu                                                             |                                    [Taškų skaičiavimas](./6-space-game/5-keeping-score/README.md)                                |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     Žaidimo pabaiga ir paleidimas iš naujo             | Sužinokite apie žaidimo pabaigą ir paleidimą iš naujo, įskaitant išteklių valymą ir kintamųjų reikšmių atstatymą                    |                                [Pabaigos sąlyga](./6-space-game/6-end-condition/README.md)                                       |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 HTML šablonai ir maršrutai interneto programoje         | Sužinokite, kaip sukurti daugiapusės svetainės architektūros karkasą, naudojant maršrutizavimą ir HTML šablonus                     |                            [HTML šablonai ir maršrutai](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  Prisijungimo ir registracijos formos kūrimas          | Sužinokite apie formų kūrimą ir validacijos rutinų valdymą                                                                          |                                           [Formos](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   Duomenų gavimo ir naudojimo metodai                  | Sužinokite, kaip duomenys teka į jūsų programą ir iš jos, kaip juos gauti, saugoti ir ištrinti                                      |                                            [Duomenys](./7-bank-project/3-data/README.md)                                         |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      Būsenos valdymo koncepcijos                       | Sužinokite, kaip jūsų programa išlaiko būseną ir kaip ją valdyti programiškai                                                       |                                [Būsenos valdymas](./7-bank-project/4-state-management/README.md)                                 |          Yohan          |
+
+
+## 🏫 Pedagogika
+
+Mūsų mokymo programa sukurta remiantis dviem pagrindiniais pedagoginiais principais:
+* projektinis mokymasis
+* dažni testai
+
+Programa moko JavaScript, HTML ir CSS pagrindų, taip pat naujausių įrankių ir technikų, kurias naudoja šiuolaikiniai interneto kūrėjai. Studentai turės galimybę įgyti praktinės patirties, kurdami rašymo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, žaidimą „kosmoso įsibrovėliai“ ir verslo bankininkystės programą. Baigę kursą, studentai turės tvirtą interneto kūrimo supratimą.
+
+> 🎓 Pirmąsias kelias pamokas iš šios mokymo programos galite išbandyti kaip [mokymosi kelią](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) „Microsoft Learn“ platformoje!
+
+Užtikrinant, kad turinys atitiktų projektus, mokymosi procesas tampa įdomesnis studentams, o koncepcijų išlaikymas sustiprėja. Taip pat sukūrėme kelias pradedančiųjų pamokas apie JavaScript pagrindus, suporuotas su vaizdo įrašu iš kolekcijos „[Pradedančiųjų serija: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“, kurios autoriai prisidėjo prie šios mokymo programos.
+
+Be to, mažo streso testas prieš pamoką nukreipia studento dėmesį į mokymąsi, o antras testas po pamokos užtikrina geresnį išlaikymą. Ši mokymo programa buvo sukurta taip, kad būtų lanksti ir įdomi, ją galima mokytis visą arba dalimis. Projektai prasideda nuo mažų ir tampa vis sudėtingesni per 12 savaičių ciklą.
+
+Nors sąmoningai vengėme įtraukti JavaScript karkasus, kad sutelktume dėmesį į pagrindinius įgūdžius, reikalingus interneto kūrėjui prieš pradedant naudoti karkasą, geras kitas žingsnis baigus šią mokymo programą būtų Node.js mokymasis per kitą vaizdo įrašų kolekciją: „[Pradedančiųjų serija: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)“.
+
+> Apsilankykite mūsų [Elgesio kodekse](CODE_OF_CONDUCT.md) ir [Prisidėjimo](CONTRIBUTING.md) gairėse. Laukiame jūsų konstruktyvaus atsiliepimo!
+
+
+## 🧭 Prieiga neprisijungus
+
+Šią dokumentaciją galite naudoti neprisijungus, naudodami [Docsify](https://docsify.js.org/#/). Fork'inkite šį repozitoriją, [įdiekite Docsify](https://docsify.js.org/#/quickstart) savo vietiniame kompiuteryje, o tada pagrindiniame šio repozitorijos aplanke įveskite `docsify serve`. Svetainė bus pasiekiama 3000 prievade jūsų vietiniame kompiuteryje: `localhost:3000`.
+
+## 📘 PDF
+
+Visų pamokų PDF galite rasti [čia](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Kiti kursai
+
+Mūsų komanda kuria ir kitus kursus! Peržiūrėkite:
+
+- [Generatyvinis AI pradedantiesiems](https://aka.ms/genai-beginners)
+- [Generatyvinis AI pradedantiesiems .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generatyvinis AI su JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
+- [Generatyvinis AI su Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [AI pradedantiesiems](https://aka.ms/ai-beginners)
+- [Duomenų mokslas pradedantiesiems](https://aka.ms/datascience-beginners)
+- [ML pradedantiesiems](https://aka.ms/ml-beginners)
+- [Kibernetinis saugumas pradedantiesiems](https://github.com/microsoft/Security-101)
+- [Interneto kūrimas pradedantiesiems](https://aka.ms/webdev-beginners)
+- [IoT pradedantiesiems](https://aka.ms/iot-beginners)
+- [XR kūrimas pradedantiesiems](https://github.com/microsoft/xr-development-for-beginners)
+- [GitHub Copilot valdymas agentiniam naudojimui](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [GitHub Copilot valdymas C#/.NET kūrėjams](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Pasirinkite savo Copilot nuotykį](https://github.com/microsoft/CopilotAdventures)
+
+## Licencija
+
+Šis repozitorijus yra licencijuotas pagal MIT licenciją. Daugiau informacijos rasite [LICENCIJOJE](../../LICENSE).
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/SECURITY.md b/translations/lt/SECURITY.md
new file mode 100644
index 00000000..669da423
--- /dev/null
+++ b/translations/lt/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-28T11:12:57+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "lt"
+}
+-->
+## Saugumas
+
+„Microsoft“ rimtai žiūri į savo programinės įrangos produktų ir paslaugų saugumą, įskaitant visus šaltinio kodo saugyklas, valdomas per mūsų „GitHub“ organizacijas, tokias kaip [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) ir [mūsų GitHub organizacijas](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Jei manote, kad radote saugumo pažeidžiamumą bet kurioje „Microsoft“ valdomoje saugykloje, kuri atitinka [„Microsoft“ saugumo pažeidžiamumo apibrėžimą](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), praneškite apie tai mums, kaip aprašyta toliau.
+
+## Saugumo klausimų pranešimas
+
+**Prašome nepranešti apie saugumo pažeidžiamumus viešose „GitHub“ problemose.**
+
+Vietoj to, praneškite apie juos „Microsoft Security Response Center“ (MSRC) adresu [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Jei norite pateikti pranešimą neprisijungę, siųskite el. laišką adresu [secure@microsoft.com](mailto:secure@microsoft.com). Jei įmanoma, užšifruokite savo pranešimą naudodami mūsų PGP raktą; atsisiųskite jį iš [Microsoft Security Response Center PGP Key puslapio](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Atsakymą turėtumėte gauti per 24 valandas. Jei dėl kokių nors priežasčių jo negaunate, prašome susisiekti el. paštu, kad įsitikintumėte, jog gavome jūsų pradinį pranešimą. Papildomos informacijos galite rasti [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Prašome pateikti toliau nurodytą informaciją (kiek įmanoma daugiau), kad padėtumėte mums geriau suprasti galimos problemos pobūdį ir mastą:
+
+  * Problemos tipas (pvz., buferio perpildymas, SQL injekcija, kryžminio svetainės scenarijavimo ataka ir pan.)
+  * Pilni šaltinio failų keliai, susiję su problemos pasireiškimu
+  * Pažeisto šaltinio kodo vieta (žyma/šaka/įsipareigojimas arba tiesioginis URL)
+  * Bet kokia speciali konfigūracija, reikalinga problemai atkurti
+  * Žingsnis po žingsnio instrukcijos problemai atkurti
+  * Koncepcijos įrodymas arba išnaudojimo kodas (jei įmanoma)
+  * Problemos poveikis, įskaitant tai, kaip užpuolikas galėtų išnaudoti problemą
+
+Ši informacija padės mums greičiau įvertinti jūsų pranešimą.
+
+Jei pranešate dėl klaidų atlygio programos, išsamesni pranešimai gali prisidėti prie didesnio atlygio. Daugiau informacijos apie mūsų aktyvias programas rasite mūsų [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) puslapyje.
+
+## Pageidaujamos kalbos
+
+Pageidaujame, kad visa komunikacija būtų anglų kalba.
+
+## Politika
+
+„Microsoft“ laikosi [Koordinuoto pažeidžiamumo atskleidimo](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon) principo.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/SUPPORT.md b/translations/lt/SUPPORT.md
new file mode 100644
index 00000000..c54b52e8
--- /dev/null
+++ b/translations/lt/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-28T11:12:09+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "lt"
+}
+-->
+# Palaikymas
+
+## Kaip pranešti apie problemas ir gauti pagalbą  
+
+Šis projektas naudoja „GitHub Issues“ klaidoms ir funkcijų užklausoms sekti. Prieš pateikdami naują problemą, peržiūrėkite esamas problemas, kad išvengtumėte dublikatų. Naujas problemas pateikite kaip naują klaidos ar funkcijos užklausą.
+
+Dėl pagalbos ir klausimų, susijusių su šio projekto naudojimu, prašome kreiptis į [mūsų prisidėjimo gaires](CONTRIBUTING.md).
+
+## „Microsoft“ palaikymo politika  
+
+Šio projekto palaikymas apsiriboja aukščiau išvardytais ištekliais.
+
+---
+
+**Atsakomybės atsisakymas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/_404.md b/translations/lt/_404.md
new file mode 100644
index 00000000..97f6b3e4
--- /dev/null
+++ b/translations/lt/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-28T11:12:22+00:00",
+  "source_file": "_404.md",
+  "language_code": "lt"
+}
+-->
+# Darbas vyksta
+
+Šiuo metu dirbame su šiuo puslapiu. Prašome sugrįžti vėliau.
+
+Jei turite klausimų, atidarykite [problemą](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose).
+
+**[Grįžti į pradžią](../../../../../../..)**
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/docs/_navbar.md b/translations/lt/docs/_navbar.md
new file mode 100644
index 00000000..b20e9308
--- /dev/null
+++ b/translations/lt/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-28T11:47:52+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "lt"
+}
+-->
+- Vertimai
+  - [Anglų (Jungtinės Valstijos)](../../../docs/README)
+  - [বাংলা](../../../docs/README.bn)
+  - [中文(中国)](../../../docs/README.zh-cn)
+  - [中文(台湾)](../../../docs/README.zh-tw)
+  - [Ispanų](../../../docs/README.es)
+  - [Prancūzų](../../../docs/README.fr)
+  - [Graikų](../../../docs/README.el)
+  - [Hindi](../../../docs/README.hi)
+  - [Malajų kalba](../../../docs/README.ms)
+  - [Malajalių kalba](../../../docs/README.ml)
+  - [Tamilų kalba](../../../docs/README.ta)
+  - [Telugų kalba](../../../docs/README.te)
+  - [Indoneziečių kalba](../../../docs/README.id)
+  - [Italų](../../../docs/README.it)
+  - [Japonų](../../../docs/README.ja)
+  - [Olandų](../../../docs/README.nl)
+  - [Nepalų](../../../docs/README.np)
+  - [Portugalų](../../../docs/README.pt)
+  - [Rusų](../../../docs/README.ru)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/docs/_sidebar.md b/translations/lt/docs/_sidebar.md
new file mode 100644
index 00000000..960da651
--- /dev/null
+++ b/translations/lt/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-28T11:47:36+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "lt"
+}
+-->
+- Įvadas
+  - [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 Pagrindai
+  - [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)
+
+- Spausdinimo žaidimas
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Naršyklės plėtinys
+  - [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)
+
+- Kosmoso žaidimas
+  - [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)
+
+- Banko projektas
+  - [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)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/for-teachers.md b/translations/lt/for-teachers.md
new file mode 100644
index 00000000..9548cf3c
--- /dev/null
+++ b/translations/lt/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-28T11:13:25+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "lt"
+}
+-->
+## Mokytojams
+
+Norėtumėte naudoti šią mokymo programą savo klasėje? Drąsiai tai darykite!
+
+Iš tiesų, galite ją naudoti tiesiog GitHub platformoje, pasitelkdami GitHub Classroom.
+
+Norėdami tai padaryti, nukopijuokite šį repozitoriją. Jums reikės sukurti atskirą repozitoriją kiekvienai pamokai, todėl turėsite išskirti kiekvieną aplanką į atskirą repozitoriją. Tokiu būdu [GitHub Classroom](https://classroom.github.com/classrooms) galės atskirai apdoroti kiekvieną pamoką.
+
+Šios [išsamios instrukcijos](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) padės jums suprasti, kaip sukurti savo klasę.
+
+## Naudojimas Moodle, Canvas ar Blackboard platformose
+
+Ši mokymo programa puikiai veikia šiose mokymosi valdymo sistemose! Naudokite [Moodle įkėlimo failą](../../../../../../../teaching-files/webdev-moodle.mbz) visam turiniui arba išbandykite [Common Cartridge failą](../../../../../../../teaching-files/webdev-common-cartridge.imscc), kuriame yra dalis turinio. Moodle Cloud nepalaiko pilnų Common Cartridge eksportų, todėl geriau naudoti Moodle atsisiuntimo failą, kurį galima įkelti į Canvas. Prašome pranešti, kaip galėtume pagerinti šią patirtį.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.lt.png)
+> Mokymo programa Moodle klasėje
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.lt.png)
+> Mokymo programa Canvas platformoje
+
+## Naudojimas repozitorijos dabartiniu pavidalu
+
+Jei norėtumėte naudoti šią repozitoriją tokią, kokia ji yra dabar, be GitHub Classroom, tai taip pat įmanoma. Jums reikės informuoti savo mokinius, kurią pamoką dirbti kartu.
+
+Naudojant internetinį formatą (Zoom, Teams ar kitą), galite sukurti atskiras grupes viktorinoms ir padėti mokiniams pasiruošti mokymuisi. Tada pakvieskite mokinius dalyvauti viktorinose ir pateikti savo atsakymus kaip „issues“ tam tikru metu. Tą patį galite daryti ir su užduotimis, jei norite, kad mokiniai dirbtų bendradarbiaudami viešai.
+
+Jei norite labiau privačios aplinkos, paprašykite mokinių nukopijuoti mokymo programą, pamoka po pamokos, į savo privačias GitHub repozitorijas ir suteikti jums prieigą. Tada jie galės atlikti viktorinas ir užduotis privačiai bei pateikti jas jums per „issues“ jūsų klasės repozitorijoje.
+
+Yra daugybė būdų, kaip tai pritaikyti internetinio mokymo formatui. Prašome pranešti, kas jums veikia geriausiai!
+
+## Pasidalinkite savo mintimis!
+
+Norime, kad ši mokymo programa būtų naudinga jums ir jūsų mokiniams. Susisiekite su mumis [Mokytojų kampelyje](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) ir atidarykite [**naują „issue“**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) dėl bet kokių prašymų, klaidų ar atsiliepimų.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/lesson-template/README.md b/translations/lt/lesson-template/README.md
new file mode 100644
index 00000000..59f738a6
--- /dev/null
+++ b/translations/lt/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-28T11:48:08+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "lt"
+}
+-->
+# [Pamokos tema]
+
+![Įterpkite vaizdo įrašą čia](../../../lesson-template/video-url)
+
+## [Prieš paskaitą viktorina](../../../lesson-template/quiz-url)
+
+[Aprašykite, ką išmoksime]
+
+### Įvadas
+
+Aprašykite, kas bus aptarta
+
+> Pastabos
+
+### Būtinos žinios
+
+Kokius žingsnius reikėjo atlikti prieš šią pamoką?
+
+### Pasiruošimas
+
+Parengiamieji žingsniai, kad galėtumėte pradėti šią pamoką
+
+---
+
+[Turinio peržiūra blokais]
+
+## [Tema 1]
+
+### Užduotis:
+
+Dirbkite kartu, kad palaipsniui patobulintumėte savo kodų bazę ir sukurtumėte projektą su bendru kodu:
+
+```html
+code blocks
+```
+
+✅ Žinių patikrinimas - pasinaudokite šia akimirka, kad praplėstumėte studentų žinias atvirais klausimais
+
+## [Tema 2]
+
+## [Tema 3]
+
+🚀 Iššūkis: Pasiūlykite studentams klasėje bendradarbiaujant dirbti su projektu ir jį patobulinti
+
+Pasirinktinai: pridėkite ekrano nuotrauką su baigtos pamokos sąsaja, jei tai tinkama
+
+## [Po paskaitos viktorina](../../../lesson-template/quiz-url)
+
+## Apžvalga ir savarankiškas mokymasis
+
+**Užduoties terminas [MM/YY]**: [Užduoties pavadinimas](assignment.md)
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/lt/lesson-template/assignment.md b/translations/lt/lesson-template/assignment.md
new file mode 100644
index 00000000..f7e3c1d6
--- /dev/null
+++ b/translations/lt/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-28T11:48:21+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "lt"
+}
+-->
+# [Užduoties pavadinimas]
+
+## Instrukcijos
+
+## Vertinimo kriterijai
+
+| Kriterijai | Puikiai | Pakankamai | Reikia tobulinti |
+| ---------- | ------- | ---------- | ---------------- |
+|            |         |            |                  |
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipiame dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.
\ No newline at end of file
diff --git a/translations/lt/quiz-app/README.md b/translations/lt/quiz-app/README.md
new file mode 100644
index 00000000..80d92ede
--- /dev/null
+++ b/translations/lt/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-28T11:54:10+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "lt"
+}
+-->
+# Viktorinos programa
+
+Šios viktorinos yra prieš ir po paskaitų skirtos duomenų mokslo mokymo programai adresu https://aka.ms/webdev-beginners
+
+## Kaip pridėti išverstą viktorinų rinkinį
+
+Pridėkite viktorinų vertimą, sukurdami atitinkamas viktorinų struktūras aplanke `assets/translations`. Originalios viktorinos yra aplanke `assets/translations/en`. Viktorinų rinkiniai suskirstyti į kelias grupes. Įsitikinkite, kad numeracija atitinka tinkamą viktorinų sekciją. Šioje mokymo programoje yra iš viso 40 viktorinų, numeracija prasideda nuo 0.
+
+  
+<details>
+<summary>Štai kaip atrodo vertimo failo struktūra:</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 vertimo redagavimo, redaguokite `index.js` failą vertimų aplanke, kad importuotumėte visus failus pagal `en` konvencijas.
+
+Redaguokite `index.js` failą aplanke `assets/translations`, kad importuotumėte naujus išverstus failus.
+
+Pavyzdžiui, jei jūsų vertimo JSON failas yra `ex.json`, naudokite 'ex' kaip lokalizacijos raktą, tada įveskite jį taip, kaip parodyta žemiau:
+
+<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>
+
+## Paleiskite viktorinų programą lokaliai
+
+### Reikalavimai
+
+- GitHub paskyra
+- [Node.js ir Git](https://nodejs.org/)
+
+### Įdiegimas ir nustatymas
+
+1. Sukurkite saugyklą iš šio [šablono](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Nukopijuokite savo naują saugyklą ir pereikite į aplanką quiz-app
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Įdiekite npm paketus ir priklausomybes
+
+   ```bash
+   npm install
+   ```
+
+### Sukurkite programą
+
+1. Norėdami sukurti sprendimą, paleiskite:
+
+   ```bash
+   npm run build
+   ```
+
+### Paleiskite programą
+
+1. Norėdami paleisti sprendimą, paleiskite:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Pasirinktinai] Kodo tikrinimas
+
+1. Norėdami užtikrinti, kad kodas būtų patikrintas, paleiskite:
+
+    ```bash
+    npm run lint
+    ```
+
+## Viktorinų programos diegimas Azure platformoje 
+
+### Reikalavimai
+- Azure prenumerata. Užsiregistruokite nemokamai [čia](https://aka.ms/azure-free).
+
+    _Šios viktorinų programos diegimo kaina: NEMOKAMA_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Kai prisijungsite prie Azure per aukščiau pateiktą nuorodą, pasirinkite prenumeratą ir resursų grupę, tada:
+
+- Statinės interneto programos detalės: Įveskite pavadinimą ir pasirinkite talpinimo planą
+- GitHub prisijungimas: Nustatykite diegimo šaltinį kaip GitHub, tada prisijunkite ir užpildykite reikiamus laukus formoje:
+    - *Organizacija* – Pasirinkite savo organizaciją.
+    - *Saugykla* – Pasirinkite Web Dev for Beginners mokymo programos saugyklą. 
+    - *Šaka* - Pasirinkite šaką (main) 
+- Kūrimo nustatymai: Azure Static Web Apps naudoja aptikimo algoritmą, kad nustatytų jūsų programoje naudojamą sistemą. 
+    - *Programos vieta* - ./quiz-app
+    - *Api vieta* -
+    - *Rezultatų vieta* - dist
+- Diegimas: Spustelėkite 'Review + Create', tada 'Create'
+
+    Po diegimo *.github* aplanke jūsų saugykloje bus sukurtas darbo eigos failas. Šis darbo eigos failas apima instrukcijas apie įvykius, kurie inicijuos programos per-diegimą Azure platformoje, pavyzdžiui, _**push** į šaką **main**_ ir pan.
+
+    <details>
+    <summary>Pavyzdinis darbo eigos failas</summary>
+    Štai kaip gali atrodyti GitHub Actions darbo eigos failas:
+    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 diegimo: Kai diegimas bus baigtas, spustelėkite 'Go to Deployment', tada 'View app in browser'.
+
+Kai jūsų GitHub Action (darbo eiga) bus sėkmingai įvykdyta, atnaujinkite tiesioginį puslapį, kad pamatytumėte savo programą.
+
+---
+
+**Atsakomybės apribojimas**:  
+Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.
\ No newline at end of file
diff --git a/translations/pl/README.md b/translations/pl/README.md
index 56c9ae47..48fdbd70 100644
--- a/translations/pl/README.md
+++ b/translations/pl/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b672130244189715ac084c3259f6ab58",
-  "translation_date": "2025-08-24T11:51:17+00:00",
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T11:08:21+00:00",
   "source_file": "README.md",
   "language_code": "pl"
 }
@@ -21,36 +21,39 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![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)  
+
+Wykonaj poniższe kroki, aby rozpocząć korzystanie z tych zasobów:  
+1. **Sforkuj repozytorium**: Kliknij [![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. **Sklonuj repozytorium**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Dołącz do Azure AI Foundry Discord, aby spotkać ekspertów i innych programistów**](https://discord.com/invite/ByRwuEEgH4)  
+
 # Tworzenie stron internetowych dla początkujących - Kurs
 
-Poznaj podstawy tworzenia stron internetowych dzięki naszemu 12-tygodniowemu kursowi przygotowanemu przez Microsoft Cloud Advocates. Każda z 24 lekcji wprowadza w świat JavaScript, CSS i HTML poprzez praktyczne projekty, takie jak terraria, rozszerzenia przeglądarki czy gry kosmiczne. Uczestnicz w quizach, dyskusjach i zadaniach praktycznych. Rozwijaj swoje umiejętności i utrwalaj wiedzę dzięki efektywnej metodzie nauki opartej na projektach. Rozpocznij swoją przygodę z programowaniem już dziś!
+Poznaj podstawy tworzenia stron internetowych dzięki naszemu 12-tygodniowemu, kompleksowemu kursowi przygotowanemu przez Microsoft Cloud Advocates. Każda z 24 lekcji wprowadza w zagadnienia JavaScript, CSS i HTML poprzez praktyczne projekty, takie jak terraria, rozszerzenia przeglądarki czy gry kosmiczne. Weź udział w quizach, dyskusjach i zadaniach praktycznych. Rozwijaj swoje umiejętności i utrwalaj wiedzę dzięki efektywnej metodzie nauki opartej na projektach. Rozpocznij swoją przygodę z programowaniem już dziś!
 
 #### 🧑‍🎓 _Jesteś studentem?_
 
-Odwiedź [**stronę Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), gdzie znajdziesz materiały dla początkujących, pakiety dla studentów, a nawet sposoby na zdobycie darmowego vouchera na certyfikat. To strona, którą warto dodać do zakładek i regularnie sprawdzać, ponieważ co miesiąc zmieniamy zawartość.
+Odwiedź [**stronę Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), gdzie znajdziesz zasoby dla początkujących, pakiety dla studentów, a nawet sposoby na zdobycie darmowego vouchera na certyfikat. To strona, którą warto dodać do zakładek i regularnie odwiedzać, ponieważ co miesiąc zmieniamy zawartość.
 
-### 📣 Ogłoszenie - _Nowy kurs_ dotyczący Generatywnej AI dla JavaScript właśnie został opublikowany
+### 📣 Ogłoszenie - _Nowy kurs_ o Generatywnej AI dla JavaScript już dostępny
 
-Nie przegap naszego nowego kursu dotyczącego Generatywnej AI!
+Nie przegap naszego nowego kursu o Generatywnej AI!
 
 Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby rozpocząć!
 
-<div>
-  <img src="./images/background.png" width="600px" />
-</div>
+![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.pl.png)
 
-- Lekcje obejmujące wszystko od podstaw po RAG.
-- Interakcja z postaciami historycznymi za pomocą GenAI i naszej aplikacji towarzyszącej.
-- Ciekawa i angażująca narracja, będziesz podróżować w czasie!
+- Lekcje obejmujące wszystko, od podstaw po RAG.  
+- Interakcja z postaciami historycznymi za pomocą GenAI i naszej aplikacji towarzyszącej.  
+- Ciekawa i angażująca narracja, będziesz podróżować w czasie!  
 
-<div>
-  <img src="./images/character.png" width="600px" />
-</div>
+![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.pl.png)
 
-Każda lekcja zawiera zadanie do wykonania, sprawdzanie wiedzy oraz wyzwanie, które pomoże Ci nauczyć się takich tematów jak:
-- Tworzenie i optymalizacja promptów
-- Generowanie aplikacji tekstowych i graficznych
-- Aplikacje wyszukiwawcze
+Każda lekcja zawiera zadanie do wykonania, sprawdzian wiedzy i wyzwanie, które pomoże Ci nauczyć się takich tematów jak:  
+- Tworzenie i optymalizacja promptów  
+- Generowanie aplikacji tekstowych i graficznych  
+- Tworzenie aplikacji wyszukiwarkowych  
 
 Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby rozpocząć!
 
@@ -58,38 +61,38 @@ Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby r
 
 > **Nauczyciele**, przygotowaliśmy [kilka sugestii](for-teachers.md) dotyczących wykorzystania tego kursu. Chętnie poznamy Wasze opinie [na naszym forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
 
-**[Uczniowie](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, każdą lekcję rozpocznij od quizu wprowadzającego, a następnie zapoznaj się z materiałem lekcyjnym, wykonaj różne aktywności i sprawdź swoją wiedzę w quizie końcowym.
+**[Uczniowie](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, każdą lekcję rozpocznij od quizu wprowadzającego, następnie przeczytaj materiały wykładowe, wykonaj różne aktywności i sprawdź swoją wiedzę w quizie końcowym.
 
-Aby wzbogacić swoje doświadczenie edukacyjne, połącz się z innymi uczestnikami kursu, aby wspólnie pracować nad projektami! Dyskusje są mile widziane na naszym [forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), gdzie nasz zespół moderatorów będzie dostępny, aby odpowiedzieć na Twoje pytania.
+Aby wzbogacić swoje doświadczenie edukacyjne, połącz się z innymi uczestnikami kursu, aby wspólnie pracować nad projektami! Zachęcamy do dyskusji na naszym [forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), gdzie nasz zespół moderatorów odpowie na Twoje pytania.
 
-Aby poszerzyć swoją wiedzę, gorąco polecamy zapoznanie się z materiałami na [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon).
+Aby poszerzyć swoją wiedzę, gorąco polecamy zapoznanie się z dodatkowymi materiałami na [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon).
 
 ### 📋 Konfiguracja środowiska
 
-Ten kurs ma gotowe środowisko programistyczne! Na początek możesz wybrać uruchomienie kursu w [Codespace](https://github.com/features/codespaces/) (_środowisko w przeglądarce, bez konieczności instalacji_), lub lokalnie na swoim komputerze, korzystając z edytora tekstu, takiego jak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
+Ten kurs ma gotowe środowisko programistyczne! Na początku możesz wybrać, czy chcesz uruchomić kurs w [Codespace](https://github.com/features/codespaces/) (_środowisko przeglądarkowe, bez konieczności instalacji_), czy lokalnie na swoim komputerze, używając edytora tekstu, takiego jak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
 
 #### Utwórz swoje repozytorium
 Aby łatwo zapisywać swoją pracę, zaleca się utworzenie własnej kopii tego repozytorium. Możesz to zrobić, klikając przycisk **Use this template** na górze strony. Spowoduje to utworzenie nowego repozytorium w Twoim koncie GitHub z kopią kursu.
 
-Postępuj zgodnie z tymi krokami:
-1. **Forkuj repozytorium**: Kliknij przycisk "Fork" w prawym górnym rogu tej strony.
-2. **Sklonuj repozytorium**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+Wykonaj następujące kroki:  
+1. **Sforkuj repozytorium**: Kliknij przycisk "Fork" w prawym górnym rogu tej strony.  
+2. **Sklonuj repozytorium**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
 
 #### Uruchamianie kursu w Codespace
 
 W swojej kopii tego repozytorium, którą utworzyłeś, kliknij przycisk **Code** i wybierz **Open with Codespaces**. Spowoduje to utworzenie nowego Codespace, w którym możesz pracować.
 
-<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
+[!Codespace](../..)./images/createcodespace.png)
 
 #### Uruchamianie kursu lokalnie na komputerze
 
-Aby uruchomić ten kurs lokalnie na swoim komputerze, będziesz potrzebować edytora tekstu, przeglądarki i narzędzia wiersza poleceń. Nasza pierwsza lekcja, [Wprowadzenie do języków programowania i narzędzi](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), przeprowadzi Cię przez różne opcje dla każdego z tych narzędzi, abyś mógł wybrać to, co najlepiej Ci odpowiada.
+Aby uruchomić kurs lokalnie na swoim komputerze, będziesz potrzebować edytora tekstu, przeglądarki i narzędzia wiersza poleceń. Nasza pierwsza lekcja, [Wprowadzenie do języków programowania i narzędzi](../../1-getting-started-lessons/1-intro-to-programming-languages), przeprowadzi Cię przez różne opcje tych narzędzi, abyś mógł wybrać to, co najlepiej Ci odpowiada.
 
 Naszą rekomendacją jest użycie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako edytora, który ma również wbudowany [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Możesz pobrać Visual Studio Code [tutaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
 
 1. Sklonuj swoje repozytorium na komputer. Możesz to zrobić, klikając przycisk **Code** i kopiując URL:
 
-    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
+    [!CodeSpace](./images/createcodespace.png)
 
     Następnie otwórz [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) w [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i uruchom następujące polecenie, zastępując `<your-repository-url>` skopiowanym URL:
 
@@ -99,78 +102,79 @@ Naszą rekomendacją jest użycie [Visual Studio Code](https://code.visualstudio
 
 2. Otwórz folder w Visual Studio Code. Możesz to zrobić, klikając **File** > **Open Folder** i wybierając folder, który właśnie sklonowałeś.
 
->  Rekomendowane rozszerzenia dla Visual Studio Code:
+>  Zalecane rozszerzenia do Visual Studio Code:  
 >
-> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - do podglądu stron HTML w Visual Studio Code
-> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aby szybciej pisać kod
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - do podglądu stron HTML w Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aby pisać kod szybciej  
 
 ## 📂 Każda lekcja zawiera:
 
-- opcjonalny szkic
-- opcjonalny materiał wideo
-- quiz rozgrzewkowy przed lekcją
-- pisemny materiał lekcyjny
-- dla lekcji opartych na projektach, przewodniki krok po kroku, jak zbudować projekt
-- sprawdzanie wiedzy
-- wyzwanie
-- dodatkowe materiały do czytania
-- zadanie
-- quiz po lekcji
+- opcjonalny szkic  
+- opcjonalne wideo uzupełniające  
+- quiz rozgrzewkowy przed lekcją  
+- pisemne materiały lekcyjne  
+- w przypadku lekcji projektowych, przewodniki krok po kroku dotyczące budowy projektu  
+- sprawdziany wiedzy  
+- wyzwanie  
+- dodatkowe materiały do przeczytania  
+- zadanie  
+- [quiz po lekcji](https://ff-quizzes.netlify.app/)  
 
-> **Informacja o quizach**: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są one podlinkowane w lekcjach, aplikację quizową można uruchomić lokalnie lub wdrożyć na Azure; postępuj zgodnie z instrukcjami w folderze `quiz-app`. Quizy są stopniowo lokalizowane.
+> **Informacja o quizach**: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są dostępne [tutaj](https://ff-quizzes.netlify.app/). Aplikację quizową można uruchomić lokalnie lub wdrożyć w Azure; instrukcje znajdują się w folderze `quiz-app`.
 
 ## 🗃️ Lekcje
 
-|     |                       Nazwa projektu                       |                            Nauczane zagadnienia                            | Cele nauczania                                                                                                                     |                                                         Powiązana lekcja                                                         |         Autor          |
-| :-: | :---------------------------------------------------------: | :------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------: | :--------------------: |
-| 01  |                     Pierwsze kroki                         |           Wprowadzenie do programowania i narzędzi pracy programisty        | Poznaj podstawy większości języków programowania oraz oprogramowanie, które pomaga profesjonalnym programistom w ich pracy         | [Wprowadzenie do języków programowania i narzędzi pracy](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
-| 02  |                     Pierwsze kroki                         |             Podstawy GitHub, w tym praca zespołowa                         | Jak korzystać z GitHub w swoim projekcie, jak współpracować z innymi nad kodem                                                     |                            [Wprowadzenie do GitHub](/1-getting-started-lessons/2-github-basics/README.md)                            |          Floor          |
-| 03  |                     Pierwsze kroki                         |                             Dostępność                                    | Poznaj podstawy dostępności stron internetowych                                                                                   |                       [Podstawy dostępności](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
-| 04  |                        Podstawy JS                         |                         Typy danych w JavaScript                          | Podstawy typów danych w JavaScript                                                                                                 |                                       [Typy danych](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
-| 05  |                        Podstawy JS                         |                         Funkcje i metody                                  | Dowiedz się, jak używać funkcji i metod do zarządzania logiką aplikacji                                                           |                              [Funkcje i metody](/2-js-basics/2-functions-methods/README.md)                               | Jasmine i Christopher |
-| 06  |                        Podstawy JS                         |                        Podejmowanie decyzji w JS                          | Naucz się tworzyć warunki w kodzie za pomocą metod podejmowania decyzji                                                           |                                 [Podejmowanie decyzji](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
-| 07  |                        Podstawy JS                         |                            Tablice i pętle                                | Praca z danymi za pomocą tablic i pętli w JavaScript                                                                               |                                   [Tablice i pętle](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
-| 08  |       [Terrarium](/3-terrarium/solution/README.md)         |                            HTML w praktyce                                | Tworzenie HTML do stworzenia terrarium online, skupiając się na budowie układu                                                     |                                 [Wprowadzenie do HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
-| 09  |       [Terrarium](/3-terrarium/solution/README.md)         |                            CSS w praktyce                                 | Tworzenie CSS do stylizacji terrarium online, skupiając się na podstawach CSS, w tym na responsywności strony                      |                                  [Wprowadzenie do CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
-| 10  |            [Terrarium](/3-terrarium/solution/README.md)            |                 Zamknięcia w JavaScript, manipulacja DOM                  | Tworzenie JavaScript, aby terrarium działało jako interfejs przeciągnij i upuść, skupiając się na zamknięciach i manipulacji DOM   |                  [Zamknięcia w JavaScript, manipulacja DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
-| 11  |          [Gra Typing](/4-typing-game/solution/README.md)          |                          Tworzenie gry Typing                             | Naucz się używać zdarzeń klawiatury do sterowania logiką aplikacji JavaScript                                                      |                                [Programowanie oparte na zdarzeniach](/4-typing-game/typing-game/README.md)                                |       Christopher       |
-| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Praca z przeglądarkami                         | Dowiedz się, jak działają przeglądarki, poznaj ich historię i naucz się tworzyć pierwsze elementy rozszerzenia przeglądarki         |                               [O przeglądarkach](/5-browser-extension/1-about-browsers/README.md)                               |           Jen           |
-| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Tworzenie formularza, wywoływanie API i przechowywanie zmiennych lokalnie | Zbuduj elementy JavaScript swojego rozszerzenia przeglądarki, aby wywoływać API, używając zmiennych przechowywanych lokalnie        |                [API, formularze i lokalne przechowywanie](/5-browser-extension/2-forms-browsers-local-storage/README.md)        |           Jen           |
-| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Procesy w tle w przeglądarce, wydajność sieci                 | Wykorzystaj procesy w tle przeglądarki do zarządzania ikoną rozszerzenia; dowiedz się o wydajności sieci i optymalizacjach          |             [Zadania w tle i wydajność](/5-browser-extension/3-background-tasks-and-performance/README.md)                      |           Jen           |
-| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Bardziej zaawansowane tworzenie gier w JavaScript          | Dowiedz się o dziedziczeniu, używając zarówno klas, jak i kompozycji, oraz o wzorcu Pub/Sub, przygotowując się do tworzenia gry     |                      [Wprowadzenie do zaawansowanego tworzenia gier](/6-space-game/1-introduction/README.md)                    |          Chris          |
-| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Rysowanie na canvasie                        | Poznaj API Canvas, które służy do rysowania elementów na ekranie                                                                    |                                [Rysowanie na canvasie](/6-space-game/2-drawing-to-canvas/README.md)                              |          Chris          |
-| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Przesuwanie elementów po ekranie                     | Dowiedz się, jak elementy mogą się poruszać, używając współrzędnych kartezjańskich i API Canvas                                     |                           [Przesuwanie elementów](/6-space-game/3-moving-elements-around/README.md)                             |          Chris          |
-| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Wykrywanie kolizji                            | Spraw, aby elementy zderzały się i reagowały na siebie, używając klawiszy, oraz dodaj funkcję cooldown, aby poprawić wydajność gry |                              [Wykrywanie kolizji](/6-space-game/4-collision-detection/README.md)                                |          Chris          |
-| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Liczenie punktów                           | Wykonuj obliczenia matematyczne na podstawie statusu i wyników gry                                                                  |                                    [Liczenie punktów](/6-space-game/5-keeping-score/README.md)                                  |          Chris          |
-| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Zakończenie i restart gry                          | Dowiedz się, jak zakończyć i zrestartować grę, w tym jak wyczyścić zasoby i zresetować wartości zmiennych                          |                                [Warunek zakończenia](/6-space-game/6-end-condition/README.md)                                   |          Chris          |
-| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 Szablony HTML i trasy w aplikacji internetowej          | Dowiedz się, jak stworzyć szkielet architektury wielostronicowej strony internetowej, używając tras i szablonów HTML               |                            [Szablony HTML i trasy](/7-bank-project/1-template-route/README.md)                                  |          Yohan          |
-| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Tworzenie formularza logowania i rejestracji          | Dowiedz się, jak tworzyć formularze i obsługiwać procedury walidacji                                                                |                                           [Formularze](/7-bank-project/2-forms/README.md)                                       |          Yohan          |
-| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Metody pobierania i używania danych                  | Dowiedz się, jak dane przepływają do i z aplikacji, jak je pobierać, przechowywać i usuwać                                         |                                            [Dane](/7-bank-project/3-data/README.md)                                             |          Yohan          |
-| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Koncepcje zarządzania stanem                      | Dowiedz się, jak aplikacja zachowuje stan i jak zarządzać nim programowo                                                            |                                [Zarządzanie stanem](/7-bank-project/4-state-management/README.md)                               |          Yohan          |
+|     |                       Nazwa projektu                       |                            Omawiane zagadnienia                            | Cele nauki                                                                                                                         |                                                         Powiązana lekcja                                                         |         Autor          |
+| :-: | :--------------------------------------------------------: | :------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | :--------------------: |
+| 01  |                     Pierwsze kroki                        |           Wprowadzenie do programowania i narzędzi pracy programisty        | Poznaj podstawy większości języków programowania oraz oprogramowanie, które pomaga profesjonalnym programistom w ich pracy         | [Wprowadzenie do języków programowania i narzędzi pracy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
+| 02  |                     Pierwsze kroki                        |             Podstawy GitHub, w tym praca zespołowa                         | Jak korzystać z GitHub w swoim projekcie i współpracować z innymi nad kodem                                                        |                            [Wprowadzenie do GitHub](./1-getting-started-lessons/2-github-basics/README.md)                       |          Floor          |
+| 03  |                     Pierwsze kroki                        |                             Dostępność                                    | Poznaj podstawy dostępności stron internetowych                                                                                   |                       [Podstawy dostępności](./1-getting-started-lessons/3-accessibility/README.md)                              |       Christopher       |
+| 04  |                        Podstawy JS                        |                         Typy danych w JavaScript                          | Podstawy typów danych w JavaScript                                                                                                |                                       [Typy danych](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
+| 05  |                        Podstawy JS                        |                         Funkcje i metody                                  | Dowiedz się, jak używać funkcji i metod do zarządzania logiką aplikacji                                                           |                              [Funkcje i metody](./2-js-basics/2-functions-methods/README.md)                                     | Jasmine i Christopher   |
+| 06  |                        Podstawy JS                        |                        Podejmowanie decyzji w JS                          | Naucz się tworzyć warunki w swoim kodzie za pomocą metod decyzyjnych                                                              |                                 [Podejmowanie decyzji](./2-js-basics/3-making-decisions/README.md)                               |         Jasmine         |
+| 07  |                        Podstawy JS                        |                            Tablice i pętle                                | Praca z danymi za pomocą tablic i pętli w JavaScript                                                                              |                                   [Tablice i pętle](./2-js-basics/4-arrays-loops/README.md)                                      |         Jasmine         |
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML w praktyce                                | Tworzenie HTML do budowy terrarium online, skupiając się na tworzeniu układu                                                      |                                 [Wprowadzenie do HTML](./3-terrarium/1-intro-to-html/README.md)                                  |           Jen           |
+| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS w praktyce                                 | Tworzenie CSS do stylizacji terrarium online, skupiając się na podstawach CSS, w tym na responsywności                            |                                  [Wprowadzenie do CSS](./3-terrarium/2-intro-to-css/README.md)                                   |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 Zamknięcia w JavaScript, manipulacja DOM               | Stwórz JavaScript, aby terrarium działało jako interfejs przeciągnij i upuść, koncentrując się na zamknięciach i manipulacji DOM    |                  [Zamknięcia w JavaScript, manipulacja DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          Stwórz grę do pisania                         | Naucz się używać zdarzeń klawiatury do sterowania logiką swojej aplikacji JavaScript                                                |                                [Programowanie oparte na zdarzeniach](./4-typing-game/typing-game/README.md)                     |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         Praca z przeglądarkami                         | Dowiedz się, jak działają przeglądarki, ich historia oraz jak stworzyć pierwsze elementy rozszerzenia przeglądarki                  |                               [O przeglądarkach](./5-browser-extension/1-about-browsers/README.md)                              |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | Tworzenie formularza, wywoływanie API i przechowywanie zmiennych w lokalnej pamięci | Stwórz elementy JavaScript swojego rozszerzenia przeglądarki, aby wywoływać API, używając zmiennych przechowywanych w lokalnej pamięci |                [API, formularze i lokalna pamięć](./5-browser-extension/2-forms-browsers-local-storage/README.md)               |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          Procesy w tle w przeglądarce, wydajność sieci                 | Użyj procesów w tle przeglądarki do zarządzania ikoną rozszerzenia; dowiedz się o wydajności sieci i optymalizacjach                |             [Zadania w tle i wydajność](./5-browser-extension/3-background-tasks-and-performance/README.md)                     |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             Bardziej zaawansowane tworzenie gier w JavaScript          | Dowiedz się o dziedziczeniu, używając zarówno klas, jak i kompozycji, oraz o wzorcu Pub/Sub, przygotowując się do tworzenia gry     |                      [Wprowadzenie do zaawansowanego tworzenia gier](./6-space-game/1-introduction/README.md)                   |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           Rysowanie na canvas                          | Dowiedz się o API Canvas, używanym do rysowania elementów na ekranie                                                                |                                [Rysowanie na canvas](./6-space-game/2-drawing-to-canvas/README.md)                               |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   Przemieszczanie elementów na ekranie                 | Odkryj, jak elementy mogą się poruszać, używając współrzędnych kartezjańskich i API Canvas                                          |                           [Przemieszczanie elementów](./6-space-game/3-moving-elements-around/README.md)                        |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          Wykrywanie kolizji                            | Spraw, aby elementy zderzały się i reagowały na siebie, używając klawiszy, oraz dodaj funkcję cooldown, aby poprawić wydajność gry |                              [Wykrywanie kolizji](./6-space-game/4-collision-detection/README.md)                               |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             Liczenie punktów                           | Wykonuj obliczenia matematyczne na podstawie statusu gry i jej wydajności                                                           |                                    [Liczenie punktów](./6-space-game/5-keeping-score/README.md)                                 |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     Zakończenie i restart gry                          | Dowiedz się, jak zakończyć i zrestartować grę, w tym jak wyczyścić zasoby i zresetować wartości zmiennych                          |                                [Warunek zakończenia](./6-space-game/6-end-condition/README.md)                                  |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 Szablony HTML i trasy w aplikacji internetowej         | Naucz się tworzyć szkielet architektury wielostronicowej strony internetowej, używając tras i szablonów HTML                       |                            [Szablony HTML i trasy](./7-bank-project/1-template-route/README.md)                                 |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  Tworzenie formularza logowania i rejestracji          | Dowiedz się, jak tworzyć formularze i obsługiwać procedury walidacji                                                                |                                           [Formularze](./7-bank-project/2-forms/README.md)                                      |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   Metody pobierania i używania danych                  | Jak dane przepływają do i z aplikacji, jak je pobierać, przechowywać i usuwać                                                       |                                            [Dane](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      Koncepcje zarządzania stanem                      | Dowiedz się, jak aplikacja zachowuje stan i jak zarządzać nim programowo                                                            |                                [Zarządzanie stanem](./7-bank-project/4-state-management/README.md)                              |          Yohan          |
 
 
 ## 🏫 Pedagogika
 
 Nasz program nauczania opiera się na dwóch kluczowych zasadach pedagogicznych:
-* nauka oparta na projektach
+* nauka poprzez projekty
 * częste quizy
 
-Program uczy podstaw JavaScript, HTML i CSS, a także najnowszych narzędzi i technik używanych przez współczesnych programistów internetowych. Studenci mają okazję zdobyć praktyczne doświadczenie, budując grę do pisania na klawiaturze, wirtualne terrarium, ekologiczne rozszerzenie przeglądarki, grę w stylu Space Invaders oraz aplikację bankową dla firm. Po ukończeniu serii studenci zdobędą solidne podstawy w zakresie tworzenia stron internetowych.
+Program uczy podstaw JavaScript, HTML i CSS, a także najnowszych narzędzi i technik używanych przez współczesnych programistów internetowych. Studenci będą mieli okazję zdobyć praktyczne doświadczenie, tworząc grę do pisania, wirtualne terrarium, ekologiczne rozszerzenie przeglądarki, grę w stylu "space invaders" oraz aplikację bankową dla firm. Pod koniec serii studenci zdobędą solidne podstawy w zakresie tworzenia stron internetowych.
 
-> 🎓 Pierwsze lekcje tego programu można znaleźć jako [Ścieżkę nauki](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na platformie Microsoft Learn!
 
-Dzięki powiązaniu treści z projektami proces nauki staje się bardziej angażujący dla studentów, a przyswajanie koncepcji jest skuteczniejsze. Przygotowaliśmy również kilka lekcji wprowadzających do podstaw JavaScript, które są połączone z wideo z serii "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", której autorzy przyczynili się do powstania tego programu.
+> 🎓 Pierwsze lekcje tego programu nauczania możesz odbyć jako [Ścieżka nauki](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
 
-Dodatkowo quiz o niskiej stawce przed zajęciami ustawia intencję studenta na naukę danego tematu, a drugi quiz po zajęciach wzmacnia przyswajanie wiedzy. Program został zaprojektowany tak, aby był elastyczny i przyjemny, i można go realizować w całości lub częściowo. Projekty zaczynają się od prostych i stają się coraz bardziej złożone w trakcie 12-tygodniowego cyklu.
+Dzięki dopasowaniu treści do projektów proces nauki staje się bardziej angażujący dla studentów, a przyswajanie koncepcji zostaje wzmocnione. Przygotowaliśmy również kilka lekcji wprowadzających do podstaw JavaScript, które są połączone z filmami z kolekcji "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", których autorzy przyczynili się do powstania tego programu nauczania.
 
-Chociaż celowo unikaliśmy wprowadzania frameworków JavaScript, aby skupić się na podstawowych umiejętnościach potrzebnych programiście internetowemu przed przyjęciem frameworka, dobrym kolejnym krokiem po ukończeniu tego programu byłoby poznanie Node.js za pomocą innej serii wideo: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+Dodatkowo quiz o niskim poziomie trudności przed zajęciami ukierunkowuje uwagę studenta na naukę danego tematu, a drugi quiz po zajęciach zapewnia lepsze przyswajanie materiału. Ten program nauczania został zaprojektowany tak, aby był elastyczny i przyjemny, i można go realizować w całości lub częściowo. Projekty zaczynają się od prostych i stają się coraz bardziej złożone pod koniec 12-tygodniowego cyklu.
 
-> Odwiedź nasz [Kodeks postępowania](CODE_OF_CONDUCT.md) i wytyczne dotyczące [Współpracy](CONTRIBUTING.md). Czekamy na Twoje konstruktywne uwagi!
+Chociaż celowo unikaliśmy wprowadzania frameworków JavaScript, aby skupić się na podstawowych umiejętnościach potrzebnych programiście internetowemu przed przyjęciem frameworka, dobrym kolejnym krokiem po ukończeniu tego programu nauczania byłoby poznanie Node.js za pomocą innej kolekcji filmów: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Odwiedź nasze [Zasady postępowania](CODE_OF_CONDUCT.md) i wytyczne dotyczące [Współtworzenia](CONTRIBUTING.md). Czekamy na Twoje konstruktywne uwagi!
 
 
 ## 🧭 Dostęp offline
 
-Możesz uruchomić tę dokumentację offline, korzystając z [Docsify](https://docsify.js.org/#/). Sforkuj to repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swoim komputerze, a następnie w katalogu głównym tego repozytorium wpisz `docsify serve`. Strona internetowa zostanie uruchomiona na porcie 3000 na Twoim localhost: `localhost:3000`.
+Możesz uruchomić tę dokumentację offline, korzystając z [Docsify](https://docsify.js.org/#/). Sforkuj to repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swoim lokalnym komputerze, a następnie w katalogu głównym tego repozytorium wpisz `docsify serve`. Strona internetowa zostanie uruchomiona na porcie 3000 na Twoim localhost: `localhost:3000`.
 
 ## 📘 PDF
 
@@ -179,7 +183,7 @@ PDF ze wszystkimi lekcjami można znaleźć [tutaj](https://microsoft.github.io/
 
 ## 🎒 Inne kursy
 
-Nasz zespół tworzy również inne kursy! Sprawdź:
+Nasz zespół tworzy inne kursy! Sprawdź:
 
 - [Generative AI for Beginners](https://aka.ms/genai-beginners)
 - [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@@ -198,7 +202,9 @@ Nasz zespół tworzy również inne kursy! Sprawdź:
 
 ## Licencja
 
-To repozytorium jest licencjonowane na licencji MIT. Zobacz plik [LICENSE](../../LICENSE), aby uzyskać więcej informacji.
+To repozytorium jest licencjonowane na licencji MIT. Zobacz plik [LICENSE](../../LICENSE) po więcej informacji.
+
+---
 
 **Zastrzeżenie**:  
-Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż staramy się zapewnić dokładność, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za wiarygodne źródło. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.
\ No newline at end of file
+Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dokładamy wszelkich starań, aby tłumaczenie było precyzyjne, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za źródło autorytatywne. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.
\ No newline at end of file
diff --git a/translations/pt/README.md b/translations/pt/README.md
index e83b85a7..2b163ab0 100644
--- a/translations/pt/README.md
+++ b/translations/pt/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b672130244189715ac084c3259f6ab58",
-  "translation_date": "2025-08-24T11:47:12+00:00",
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T11:07:19+00:00",
   "source_file": "README.md",
   "language_code": "pt"
 }
@@ -19,90 +19,93 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)  
 
-[![Abrir no Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Abrir%20no%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)  
+[![Abrir no 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)  
+
+Siga estes passos para começar a usar estes recursos:  
+1. **Faça um Fork do Repositório**: Clique [![Forks do GitHub](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 o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Junte-se ao Discord do Azure AI Foundry e conheça especialistas e outros desenvolvedores**](https://discord.com/invite/ByRwuEEgH4)  
 
 # Desenvolvimento Web para Iniciantes - Um Currículo  
 
-Aprenda os fundamentos do desenvolvimento web com o nosso curso abrangente de 12 semanas oferecido pelos Microsoft Cloud Advocates. Cada uma das 24 lições explora JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Melhore suas habilidades e otimize a retenção de conhecimento com nossa metodologia eficaz baseada em projetos. Comece sua jornada de programação hoje!  
+Aprenda os fundamentos do desenvolvimento web com o nosso curso abrangente de 12 semanas oferecido pelos Microsoft Cloud Advocates. Cada uma das 24 lições explora JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Melhore suas habilidades e otimize sua retenção de conhecimento com nossa metodologia eficaz baseada em projetos. Comece sua jornada de programação hoje!  
 
 #### 🧑‍🎓 _És estudante?_  
 
-Visita a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), onde encontrarás recursos para iniciantes, pacotes para estudantes e até formas de obter um voucher gratuito para certificação. Esta é a página que deves marcar nos favoritos e verificar regularmente, pois o conteúdo é atualizado mensalmente.  
+Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), onde encontrarás recursos para iniciantes, pacotes para estudantes e até formas de obter um voucher para certificado gratuito. Esta é a página que deves marcar como favorita e verificar regularmente, pois o conteúdo é atualizado mensalmente.  
 
 ### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript foi lançado  
 
 Não percas o nosso novo currículo sobre IA Generativa!  
 
-Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar!  
+Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar!  
 
-<div>  
-  <img src="./images/background.png" width="600px" />  
-</div>  
+![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.pt.png)  
 
-- Lições que abrangem desde os fundamentos até RAG.  
-- Interage com personagens históricos usando GenAI e a nossa aplicação complementar.  
+- Lições que cobrem desde os fundamentos até RAG.  
+- Interaja com personagens históricos usando GenAI e a nossa aplicação complementar.  
 - Narrativa divertida e envolvente, vais viajar no tempo!  
 
-<div>  
-  <img src="./images/character.png" width="600px" />  
-</div>  
+![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.pt.png)  
 
 Cada lição inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para te guiar no aprendizado de tópicos como:  
 - Criação de prompts e engenharia de prompts  
 - Geração de aplicações de texto e imagem  
 - Aplicações de pesquisa  
 
-Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar!  
+Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar!  
 
-## 🌱 Começar  
+## 🌱 Começando  
 
 > **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos receber o vosso feedback [no nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
 
-**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, começa com um quiz pré-aula e segue com a leitura do material da aula, completando as várias atividades e verificando a tua compreensão com o quiz pós-aula.  
+**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um quiz pré-aula e continue lendo o material da aula, completando as várias atividades e verificando a sua compreensão com o quiz pós-aula.  
 
-Para melhorar a tua experiência de aprendizagem, conecta-te com colegas para trabalharem juntos nos projetos! As discussões são incentivadas no nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), onde a nossa equipa de moderadores estará disponível para responder às tuas perguntas.  
+Para melhorar a sua experiência de aprendizagem, conecte-se com colegas para trabalhar nos projetos juntos! Discussões são incentivadas no nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), onde a nossa equipa de moderadores estará disponível para responder às suas perguntas.  
 
-Para aprofundar a tua educação, recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais.  
+Para aprofundar a sua educação, recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais.  
 
-### 📋 Configurar o teu ambiente  
+### 📋 Configurando o seu ambiente  
 
-Este currículo tem um ambiente de desenvolvimento pronto para usar! Ao começar, podes optar por executar o currículo num [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado no navegador, sem necessidade de instalações_), ou localmente no teu computador usando um editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+Este currículo tem um ambiente de desenvolvimento pronto para uso! Ao começar, pode optar por executar o currículo num [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado no navegador, sem necessidade de instalações_), ou localmente no seu computador usando um editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
 
-#### Criar o teu repositório  
-Para guardares facilmente o teu trabalho, recomendamos que cries a tua própria cópia deste repositório. Podes fazer isso clicando no botão **Use this template** no topo da página. Isto criará um novo repositório na tua conta GitHub com uma cópia do currículo.  
+#### Crie o seu repositório  
+Para guardar facilmente o seu trabalho, recomendamos que crie uma cópia deste repositório. Pode fazer isso clicando no botão **Use this template** no topo da página. Isso criará um novo repositório na sua conta GitHub com uma cópia do currículo.  
 
-Segue estes passos:  
-1. **Faz um Fork do Repositório**: Clica no botão "Fork" no canto superior direito desta página.  
-2. **Clona o Repositório**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+Siga estes passos:  
+1. **Faça um Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página.  
+2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
 
-#### Executar o currículo num Codespace  
+#### Executando o currículo num Codespace  
 
-Na tua cópia deste repositório que criaste, clica no botão **Code** e seleciona **Open with Codespaces**. Isto criará um novo Codespace para trabalhares.  
+Na sua cópia deste repositório que criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para trabalhar.  
 
-<img src="./images/createcodespace.png" alt="Criar Codespace" style="width:270px;"/>  
+[!Codespace](../..)./images/createcodespace.png)  
 
-#### Executar o currículo localmente no teu computador  
+#### Executando o currículo localmente no seu computador  
 
-Para executar este currículo localmente no teu computador, vais precisar de um editor de texto, um navegador e uma ferramenta de linha de comando. A nossa primeira lição, [Introdução às Linguagens de Programação e Ferramentas de Trabalho](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), vai guiar-te através de várias opções para cada uma destas ferramentas, para que possas escolher o que funciona melhor para ti.  
+Para executar este currículo localmente no seu computador, precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. A nossa primeira lição, [Introdução às Linguagens de Programação e Ferramentas de Trabalho](../../1-getting-started-lessons/1-intro-to-programming-languages), irá guiá-lo através de várias opções para cada uma destas ferramentas, para que possa escolher o que funciona melhor para si.  
 
-A nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como editor, que também tem um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Podes descarregar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+Recomendamos usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como editor, que também tem um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Pode fazer o download do Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
 
-1. Clona o teu repositório para o teu computador. Podes fazer isso clicando no botão **Code** e copiando o URL:  
+1. Clone o seu repositório para o seu computador. Pode fazer isso clicando no botão **Code** e copiando o URL:  
 
-    <img src="./images/createcodespace.png" alt="Copiar o URL do teu repositório" style="width:270px;"/>  
+    [!CodeSpace](./images/createcodespace.png)  
 
-    Depois, abre o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e executa o seguinte comando, substituindo `<your-repository-url>` pelo URL que acabaste de copiar:  
+    Depois, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `<your-repository-url>` pelo URL que acabou de copiar:  
 
     ```bash 
     git clone <your-repository-url>
     ```  
 
-2. Abre a pasta no Visual Studio Code. Podes fazer isso clicando em **File** > **Open Folder** e selecionando a pasta que acabaste de clonar.  
+2. Abra a pasta no Visual Studio Code. Pode fazer isso clicando em **File** > **Open Folder** e selecionando a pasta que acabou de clonar.  
 
 > Extensões recomendadas para Visual Studio Code:  
 >  
 > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para pré-visualizar páginas HTML dentro do Visual Studio Code  
-> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para te ajudar a escrever código mais rapidamente  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar a escrever código mais rapidamente  
 
 ## 📂 Cada lição inclui:  
 
@@ -115,62 +118,62 @@ A nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.
 - um desafio  
 - leitura suplementar  
 - tarefa  
-- quiz pós-aula  
+- [quiz pós-aula](https://ff-quizzes.netlify.app/)  
 
-> **Nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, 48 quizzes no total, cada um com três perguntas. Estão ligados dentro das lições e a aplicação de quizzes pode ser executada localmente ou implantada no Azure; segue as instruções na pasta `quiz-app`. Estão a ser gradualmente localizados.  
+> **Nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, 48 quizzes no total, cada um com três perguntas. Estão disponíveis [aqui](https://ff-quizzes.netlify.app/). A aplicação de quizzes pode ser executada localmente ou implantada no Azure; siga as instruções na pasta `quiz-app`.  
 
 ## 🗃️ Lições  
 
-|     |                       Nome do Projeto                       |                            Conceitos Ensinados                             | Objetivos de Aprendizagem                                                                                                           |                                                         Lição Ligada                                                          |         Autor          |  
-| :-: | :---------------------------------------------------------: | :------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
-| 01  |                     Primeiros Passos                       |           Introdução à Programação e Ferramentas de Trabalho              | Aprende os fundamentos por trás da maioria das linguagens de programação e sobre software que ajuda os programadores profissionais | [Introdução às Linguagens de Programação e Ferramentas de Trabalho](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
-| 02  |                     Primeiros Passos                       |             Noções Básicas de GitHub, incluindo trabalho em equipa         | Como usar o GitHub no teu projeto e colaborar com outros numa base de código                                                       |                            [Introdução ao GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
-| 03  |                     Primeiros Passos                       |                             Acessibilidade                                | Aprende os fundamentos da acessibilidade na web                                                                                     |                       [Fundamentos de Acessibilidade](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
-| 04  |                        Noções de JS                        |                         Tipos de Dados em JavaScript                      | Os fundamentos dos tipos de dados em JavaScript                                                                                     |                                       [Tipos de Dados](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
-| 05  |                        Noções de JS                        |                         Funções e Métodos                                 | Aprende sobre funções e métodos para gerir o fluxo lógico de uma aplicação                                                          |                              [Funções e Métodos](/2-js-basics/2-functions-methods/README.md)                               | Jasmine e Christopher |  
-| 06  |                        Noções de JS                        |                        Tomar Decisões com JS                              | Aprende como criar condições no teu código usando métodos de tomada de decisão                                                     |                                 [Tomar Decisões](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
-| 07  |                        Noções de JS                        |                            Arrays e Loops                                 | Trabalha com dados usando arrays e loops em JavaScript                                                                              |                                   [Arrays e Loops](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
-| 08  |       [Terrário](/3-terrarium/solution/README.md)          |                            HTML na Prática                                | Constrói o HTML para criar um terrário online, focando na construção de um layout                                                   |                                 [Introdução ao HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
-| 09  |       [Terrário](/3-terrarium/solution/README.md)          |                            CSS na Prática                                 | Constrói o CSS para estilizar o terrário online, focando nos fundamentos do CSS, incluindo tornar a página responsiva               |                                  [Introdução ao CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
-| 10  |            [Terrário](/3-terrarium/solution/README.md)            |                 Closures em JavaScript, manipulação do DOM                | Constrói o JavaScript para fazer o terrário funcionar como uma interface de arrastar e soltar, focando em closures e manipulação do DOM |                  [Closures em JavaScript, manipulação do DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
-| 11  |          [Jogo de Digitação](/4-typing-game/solution/README.md)          |                          Constrói um Jogo de Digitação                   | Aprende como usar eventos de teclado para conduzir a lógica da tua aplicação JavaScript                                             |                                [Programação Orientada a Eventos](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
-| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Trabalhar com Navegadores                          | Aprenda como os navegadores funcionam, sua história e como estruturar os primeiros elementos de uma extensão de navegador           |                               [Sobre Navegadores](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Criar um formulário, chamar uma API e armazenar variáveis no armazenamento local | Construa os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas no armazenamento local |                [APIs, Formulários e Armazenamento Local](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Processos em segundo plano no navegador, desempenho web          | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho web e algumas otimizações |             [Tarefas em Segundo Plano e Desempenho](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Desenvolvimento de Jogos Mais Avançado com JavaScript             | Aprenda sobre Herança usando Classes e Composição e o padrão Pub/Sub, preparando-se para criar um jogo                              |                      [Introdução ao Desenvolvimento Avançado de Jogos](/6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Desenhar no Canvas                            | Aprenda sobre a API Canvas, usada para desenhar elementos na tela                                                                      |                                [Desenhar no Canvas](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Mover elementos pela tela                    | Descubra como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas                                       |                           [Mover Elementos](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Detecção de colisão                           | Faça os elementos colidirem e reagirem uns aos outros usando teclas pressionadas e forneça uma função de cooldown para garantir o desempenho do jogo |                              [Detecção de Colisão](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Contabilizar pontos                              | Realize cálculos matemáticos com base no status e desempenho do jogo                                                                  |                                    [Contabilizar Pontos](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Finalizar e reiniciar o jogo                     | Aprenda sobre como finalizar e reiniciar o jogo, incluindo limpar recursos e redefinir valores de variáveis                          |                                [Condição de Finalização](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 Templates HTML e Rotas em uma Aplicação Web                 | Aprenda como criar a estrutura de uma arquitetura de site com várias páginas usando rotas e templates HTML                           |                            [Templates HTML e Rotas](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Criar um Formulário de Login e Registo                   | Aprenda sobre como criar formulários e lidar com rotinas de validação                                                                  |                                           [Formulários](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Métodos de Obtenção e Utilização de Dados                   | Como os dados fluem para dentro e fora da sua aplicação, como obtê-los, armazená-los e descartá-los                                   |                                            [Dados](/7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Conceitos de Gestão de Estado                      | Aprenda como a sua aplicação mantém o estado e como gerenciá-lo programaticamente                                                     |                                [Gestão de Estado](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+|     |                       Nome do Projeto                       |                            Conceitos Ensinados                             | Objetivos de Aprendizagem                                                                                                           |                                                         Lição Vinculada                                                          |         Autor          |  
+| :-: | :---------------------------------------------------------: | :------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Primeiros Passos                       |           Introdução à Programação e Ferramentas de Trabalho               | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre software que ajuda desenvolvedores         | [Introdução às Linguagens de Programação e Ferramentas de Trabalho](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Primeiros Passos                       |             Noções Básicas do GitHub, incluindo trabalho em equipa         | Como usar o GitHub no seu projeto e colaborar com outros numa base de código                                                       |                            [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Primeiros Passos                       |                             Acessibilidade                                | Aprenda os fundamentos da acessibilidade na web                                                                                     |                       [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        JS Básico                           |                         Tipos de Dados em JavaScript                      | Os fundamentos dos tipos de dados em JavaScript                                                                                     |                                       [Tipos de Dados](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        JS Básico                           |                         Funções e Métodos                                 | Aprenda sobre funções e métodos para gerir o fluxo lógico de uma aplicação                                                          |                              [Funções e Métodos](./2-js-basics/2-functions-methods/README.md)                                       | Jasmine e Christopher  |  
+| 06  |                        JS Básico                           |                        Tomando Decisões com JS                            | Aprenda a criar condições no seu código usando métodos de tomada de decisão                                                         |                                 [Tomando Decisões](./2-js-basics/3-making-decisions/README.md)                                      |         Jasmine         |  
+| 07  |                        JS Básico                           |                            Arrays e Loops                                 | Trabalhe com dados usando arrays e loops em JavaScript                                                                              |                                   [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md)                                         |         Jasmine         |  
+| 08  |       [Terrário](./3-terrarium/solution/README.md)          |                            HTML na Prática                                | Construa o HTML para criar um terrário online, focando na criação de um layout                                                      |                                 [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md)                                      |           Jen           |  
+| 09  |       [Terrário](./3-terrarium/solution/README.md)          |                            CSS na Prática                                 | Construa o CSS para estilizar o terrário online, focando nos fundamentos do CSS, incluindo tornar a página responsiva               |                                  [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md)                                       |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 Closures em JavaScript, manipulação do DOM              | Desenvolve o JavaScript para fazer o terrário funcionar como uma interface de arrastar/soltar, com foco em closures e manipulação do DOM |                  [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          Criar um Jogo de Digitação                    | Aprende a usar eventos de teclado para conduzir a lógica da tua aplicação JavaScript                                                  |                                [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         Trabalhar com Navegadores                      | Aprende como os navegadores funcionam, a sua história e como estruturar os primeiros elementos de uma extensão de navegador           |                               [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | Criar um formulário, chamar uma API e armazenar variáveis no local storage | Desenvolve os elementos JavaScript da tua extensão de navegador para chamar uma API usando variáveis armazenadas no local storage     |                [APIs, Formulários e Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          Processos em segundo plano no navegador, desempenho web        | Usa os processos em segundo plano do navegador para gerir o ícone da extensão; aprende sobre desempenho web e algumas otimizações    |             [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             Desenvolvimento de Jogos Mais Avançado com JavaScript       | Aprende sobre Herança usando Classes e Composição e o padrão Pub/Sub, em preparação para criar um jogo                                |                      [Introdução ao Desenvolvimento de Jogos Avançado](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           Desenhar no Canvas                           | Aprende sobre a API Canvas, usada para desenhar elementos no ecrã                                                                      |                                [Desenhar no Canvas](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   Mover elementos pelo ecrã                             | Descobre como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas                                       |                           [Mover Elementos](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          Deteção de colisões                           | Faz com que os elementos colidam e reajam entre si usando teclas e fornece uma função de cooldown para garantir o desempenho do jogo  |                              [Deteção de Colisões](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             Contabilizar Pontuação                      | Realiza cálculos matemáticos com base no estado e desempenho do jogo                                                                  |                                    [Contabilizar Pontuação](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     Terminar e reiniciar o jogo                         | Aprende a terminar e reiniciar o jogo, incluindo limpar recursos e redefinir valores de variáveis                                     |                                [Condição de Término](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 Templates HTML e Rotas numa Aplicação Web               | Aprende a criar a estrutura de uma arquitetura de site multipágina usando rotas e templates HTML                                      |                            [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  Criar um Formulário de Login e Registo                 | Aprende a criar formulários e a lidar com rotinas de validação                                                                         |                                           [Formulários](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   Métodos de Obtenção e Utilização de Dados             | Como os dados fluem para dentro e fora da tua aplicação, como obtê-los, armazená-los e descartá-los                                   |                                            [Dados](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      Conceitos de Gestão de Estado                      | Aprende como a tua aplicação mantém o estado e como geri-lo programaticamente                                                         |                                [Gestão de Estado](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
 
 
 ## 🏫 Pedagogia
 
-O nosso currículo foi desenvolvido com dois princípios pedagógicos fundamentais:
+O nosso currículo foi concebido com dois princípios pedagógicos fundamentais em mente:
 * aprendizagem baseada em projetos
 * questionários frequentes
 
-O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes utilizadas pelos desenvolvedores web de hoje. Os alunos terão a oportunidade de adquirir experiência prática ao criar um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo "space invader" e uma aplicação bancária para empresas. Ao final da série, os alunos terão adquirido uma compreensão sólida do desenvolvimento web.
+O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes utilizadas pelos programadores web de hoje. Os alunos terão a oportunidade de ganhar experiência prática ao construir um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo no estilo "space invader" e uma aplicação bancária para empresas. No final da série, os alunos terão adquirido uma compreensão sólida do desenvolvimento web.
 
-> 🎓 Pode realizar as primeiras lições deste currículo como um [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn!
+> 🎓 Podes fazer as primeiras lições deste currículo como um [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn!
 
-Ao garantir que o conteúdo esteja alinhado com os projetos, o processo torna-se mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias lições introdutórias sobre os fundamentos de JavaScript para apresentar conceitos, acompanhadas por um vídeo da coleção "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", cujos autores contribuíram para este currículo.
+Ao garantir que o conteúdo está alinhado com os projetos, o processo torna-se mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias lições introdutórias sobre os fundamentos de JavaScript para apresentar conceitos, acompanhadas de um vídeo da coleção "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", cujos autores contribuíram para este currículo.
 
-Além disso, um questionário de baixo impacto antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo questionário após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser realizado na íntegra ou em partes. Os projetos começam pequenos e tornam-se cada vez mais complexos ao final do ciclo de 12 semanas.
+Além disso, um questionário de baixo risco antes de uma aula define a intenção do aluno em aprender um tópico, enquanto um segundo questionário após a aula garante uma maior retenção. Este currículo foi concebido para ser flexível e divertido e pode ser realizado na totalidade ou em parte. Os projetos começam pequenos e tornam-se progressivamente mais complexos ao longo do ciclo de 12 semanas.
 
-Embora tenhamos evitado intencionalmente introduzir frameworks de JavaScript para nos concentrarmos nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo após completar este currículo seria aprender sobre Node.js através de outra coleção de vídeos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+Embora tenhamos evitado intencionalmente introduzir frameworks de JavaScript para nos concentrarmos nas competências básicas necessárias como programador web antes de adotar um framework, um bom próximo passo após completar este currículo seria aprender sobre Node.js através de outra coleção de vídeos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
 
-> Visite as nossas diretrizes de [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuição](CONTRIBUTING.md). Agradecemos o seu feedback construtivo!
+> Visita o nosso [Código de Conduta](CODE_OF_CONDUCT.md) e as diretrizes de [Contribuição](CONTRIBUTING.md). Agradecemos o teu feedback construtivo!
 
 
 ## 🧭 Acesso offline
 
-Pode executar esta documentação offline utilizando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) na sua máquina local e, na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 no seu localhost: `localhost:3000`.
+Podes executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faz um fork deste repositório, [instala o Docsify](https://docsify.js.org/#/quickstart) na tua máquina local e, na pasta raiz deste repositório, escreve `docsify serve`. O site será servido na porta 3000 no teu localhost: `localhost:3000`.
 
 ## 📘 PDF
 
@@ -179,7 +182,7 @@ Um PDF de todas as lições pode ser encontrado [aqui](https://microsoft.github.
 
 ## 🎒 Outros Cursos
 
-A nossa equipa produz outros cursos! Confira:
+A nossa equipa produz outros cursos! Dá uma vista de olhos:
 
 - [Generative AI for Beginners](https://aka.ms/genai-beginners)
 - [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@@ -198,7 +201,9 @@ A nossa equipa produz outros cursos! Confira:
 
 ## Licença
 
-Este repositório está licenciado sob a licença MIT. Consulte o arquivo [LICENSE](../../LICENSE) para mais informações.
+Este repositório está licenciado sob a licença MIT. Consulta o ficheiro [LICENSE](../../LICENSE) para mais informações.
+
+---
 
 **Aviso Legal**:  
-Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original no seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas resultantes do uso desta tradução.
\ No newline at end of file
+Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, é importante notar que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.
\ No newline at end of file
diff --git a/translations/tw/README.md b/translations/tw/README.md
index 9e43c6c1..529dee06 100644
--- a/translations/tw/README.md
+++ b/translations/tw/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b672130244189715ac084c3259f6ab58",
-  "translation_date": "2025-08-23T22:13:25+00:00",
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T11:03:29+00:00",
   "source_file": "README.md",
   "language_code": "tw"
 }
@@ -21,156 +21,159 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![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)  
 
-透過我們由 Microsoft Cloud Advocates 提供的 12 週完整課程，學習網頁開發的基礎知識。24 節課程涵蓋 JavaScript、CSS 和 HTML，並透過實作專案如生態瓶、瀏覽器擴充功能及太空遊戲來學習。課程包含測驗、討論及實作作業，幫助你提升技能並加強知識記憶。立即開始你的程式設計旅程吧！
+按照以下步驟開始使用這些資源：  
+1. **Fork 此儲存庫**：點擊 [![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. **複製此儲存庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**加入 Azure AI Foundry Discord，與專家和其他開發者交流**](https://discord.com/invite/ByRwuEEgH4)  
 
-#### 🧑‍🎓 _你是學生嗎？_
+# 初學者的網頁開發課程 - 一套完整的課程  
 
-造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你可以找到初學者資源、學生套件，甚至有機會獲得免費證書兌換券。這是你應該加入書籤並定期查看的頁面，因為我們每月都會更新內容。
+透過 Microsoft Cloud Advocates 提供的 12 週完整課程，學習網頁開發的基礎知識。24 節課涵蓋 JavaScript、CSS 和 HTML，並通過實作專案（如生態瓶、瀏覽器擴展和太空遊戲）進行學習。參與測驗、討論和實際作業，提升技能並加深知識記憶。立即開始您的程式設計旅程吧！  
 
-### 📣 公告 - _全新課程_ 關於 JavaScript 的生成式 AI 已經發布
+#### 🧑‍🎓 _你是學生嗎？_  
 
-別錯過我們全新的生成式 AI 課程！
+造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，您可以找到初學者資源、學生套件，甚至有機會獲得免費證書兌換券。這是您想要加入書籤並定期查看的頁面，因為我們每月都會更新內容。  
 
-造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
+### 📣 公告 - _全新課程_：JavaScript 的生成式 AI  
 
-<div>
-  <img src="./images/background.png" width="600px" />
-</div>
+不要錯過我們全新的生成式 AI 課程！  
 
-- 課程涵蓋從基礎到 RAG 的所有內容。
-- 使用 GenAI 和我們的配套應用程式與歷史人物互動。
-- 有趣且引人入勝的故事情節，帶你穿越時空！
+造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！  
 
-<div>
-  <img src="./images/character.png" width="600px" />
-</div>
+![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.tw.png)  
 
-每節課包含一個作業、一個知識檢查及一個挑戰，幫助你學習以下主題：
-- 提示設計與提示工程
-- 文字與圖片應用程式生成
-- 搜尋應用程式
+- 課程涵蓋從基礎到 RAG 的所有內容。  
+- 使用 GenAI 和我們的配套應用程式與歷史人物互動。  
+- 有趣且引人入勝的敘事，您將進行時光旅行！  
 
-造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
+![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.tw.png)  
 
-## 🌱 開始學習
+每節課都包含一個作業、一個知識檢查和一個挑戰，幫助您學習以下主題：  
+- 提示和提示工程  
+- 文字與圖像應用程式生成  
+- 搜索應用程式  
 
-> **教師們**，我們已[提供一些建議](for-teachers.md)供您參考如何使用這套課程。我們期待您在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)中提供回饋！
+造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！  
 
-**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課從課前測驗開始，接著閱讀課程內容，完成各種活動，並透過課後測驗檢查你的理解程度。
+## 🌱 開始使用  
 
-為了提升學習體驗，與同儕一起合作完成專案吧！我們鼓勵你在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)中進行討論，我們的版主團隊將隨時回答你的問題。
+> **教師們**，我們已[提供一些建議](for-teachers.md)供您使用這套課程。我們期待您在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)中的回饋！  
 
-為了進一步提升你的教育水平，我們強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 以獲取更多學習資源。
+**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課從課前測驗開始，接著閱讀課程材料，完成各種活動，並通過課後測驗檢查您的理解。  
 
-### 📋 設置你的開發環境
+為了提升學習體驗，與同儕一起合作完成專案吧！我們鼓勵您在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)中進行討論，我們的版主團隊將隨時回答您的問題。  
 
-這套課程已經準備好開發環境！你可以選擇在 [Codespace](https://github.com/features/codespaces/)（_基於瀏覽器，無需安裝的環境_）中運行課程，或者在本地電腦上使用像 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 這樣的文字編輯器。
+為了進一步提升您的教育，我們強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 以獲取更多學習材料。  
 
-#### 建立你的倉庫
-為了方便保存你的學習進度，建議你建立這個倉庫的副本。你可以點擊頁面頂部的 **Use this template** 按鈕，這將在你的 GitHub 帳戶中建立一個包含課程副本的新倉庫。
+### 📋 設置您的環境  
 
-操作步驟如下：
-1. **Fork 倉庫**：點擊頁面右上角的 "Fork" 按鈕。
-2. **克隆倉庫**：執行 `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+這套課程已準備好開發環境！開始時，您可以選擇在 [Codespace](https://github.com/features/codespaces/)（_基於瀏覽器，無需安裝的環境_）中運行課程，或者在本地電腦上使用文字編輯器（如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)）。  
 
-#### 在 Codespace 中運行課程
+#### 建立您的儲存庫  
+為了方便保存您的工作，建議您建立此儲存庫的副本。您可以通過點擊頁面頂部的 **Use this template** 按鈕來完成。這將在您的 GitHub 帳戶中建立一個包含課程副本的新儲存庫。  
 
-在你建立的倉庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為你創建一個新的 Codespace 以便進行學習。
+按照以下步驟：  
+1. **Fork 此儲存庫**：點擊頁面右上角的 "Fork" 按鈕。  
+2. **複製此儲存庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
 
-<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
+#### 在 Codespace 中運行課程  
 
-#### 在本地電腦上運行課程
+在您建立的儲存庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為您創建一個新的 Codespace 以便進行工作。  
 
-若要在本地電腦上運行課程，你需要一個文字編輯器、一個瀏覽器及一個命令行工具。我們的第一節課 [程式語言與工具介紹](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages) 將引導你了解這些工具的各種選擇，幫助你選擇最適合自己的工具。
+[!Codespace](../..)./images/createcodespace.png)  
 
-我們推薦使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器，它還內建了 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以在[這裡](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下載 Visual Studio Code。
+#### 在本地電腦上運行課程  
 
-1. 將你的倉庫克隆到電腦上。點擊 **Code** 按鈕並複製 URL：
+若要在本地電腦上運行此課程，您需要一個文字編輯器、一個瀏覽器和一個命令行工具。我們的第一節課 [程式語言與工具介紹](../../1-getting-started-lessons/1-intro-to-programming-languages) 將引導您了解這些工具的各種選項，幫助您選擇最適合自己的工具。  
 
-    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
+我們推薦使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器，它還內建了 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。您可以在[這裡](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下載 Visual Studio Code。  
 
-    然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 中運行以下命令，將 `<your-repository-url>` 替換為你剛剛複製的 URL：
+1. 將您的儲存庫複製到電腦上。您可以通過點擊 **Code** 按鈕並複製 URL：  
+
+    [!CodeSpace](./images/createcodespace.png)  
+
+    然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 中運行以下命令，將 `<your-repository-url>` 替換為您剛剛複製的 URL：  
 
     ```bash 
     git clone <your-repository-url>
-    ```
+    ```  
 
-2. 在 Visual Studio Code 中打開該資料夾。點擊 **File** > **Open Folder**，選擇你剛剛克隆的資料夾。
+2. 在 Visual Studio Code 中打開該資料夾。您可以通過點擊 **File** > **Open Folder** 並選擇您剛剛複製的資料夾來完成。  
 
-> 推薦的 Visual Studio Code 擴充功能：
->
-> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面
-> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快速地撰寫程式碼
+> 推薦的 Visual Studio Code 擴展：  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助您更快速地編寫程式碼  
 
-## 📂 每節課包含：
+## 📂 每節課包含：  
 
-- 可選的手繪筆記
-- 可選的補充影片
-- 課前熱身測驗
-- 書面課程
-- 專案型課程的逐步指導
-- 知識檢查
-- 挑戰
-- 補充閱讀
-- 作業
-- 課後測驗
+- 可選的手繪筆記  
+- 可選的補充影片  
+- 課前熱身測驗  
+- 書面課程  
+- 專案型課程的逐步指南  
+- 知識檢查  
+- 挑戰  
+- 補充閱讀  
+- 作業  
+- [課後測驗](https://ff-quizzes.netlify.app/)  
 
-> **關於測驗的說明**：所有測驗都包含在 Quiz-app 資料夾中，共有 48 個測驗，每個測驗包含三個問題。測驗可以在本地運行或部署到 Azure；請按照 `quiz-app` 資料夾中的指示進行操作。我們正在逐步進行本地化。
+> **關於測驗的說明**：所有測驗都包含在 Quiz-app 資料夾中，共有 48 個測驗，每個測驗包含三個問題。測驗可在[這裡](https://ff-quizzes.netlify.app/)找到，測驗應用程式可以在本地運行或部署到 Azure；請按照 `quiz-app` 資料夾中的說明進行操作。  
 
-## 🗃️ 課程列表
+## 🗃️ 課程  
 
-|     |                       專案名稱                       |                            教學概念                             | 學習目標                                                                                                                 |                                                         連結課程                                                          |         作者          |
-| :-: | :--------------------------------------------------: | :------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------: | :-------------------: |
-| 01  |                     入門篇                          |           程式語言與工具介紹                                   | 學習大多數程式語言的基本原理，以及幫助專業開發者完成工作的軟體工具                                                   | [程式語言與工具介紹](/1-getting-started-lessons/1-intro-to-programming-languages/README.md)                              |         Jasmine       |
-| 02  |                     入門篇                          |             GitHub 基礎與團隊合作                              | 學習如何在專案中使用 GitHub，並與他人協作管理程式碼                                                                  | [GitHub 基礎介紹](/1-getting-started-lessons/2-github-basics/README.md)                                                  |          Floor        |
-| 03  |                     入門篇                          |                             無障礙設計                         | 學習網頁無障礙設計的基本知識                                                                                           | [無障礙設計基礎](/1-getting-started-lessons/3-accessibility/README.md)                                                  |       Christopher     |
-| 04  |                        JS 基礎                     |                         JavaScript 資料型別                   | 學習 JavaScript 資料型別的基礎知識                                                                                     | [資料型別](/2-js-basics/1-data-types/README.md)                                                                         |         Jasmine       |
-| 05  |                        JS 基礎                     |                         函式與方法                            | 學習如何使用函式與方法來管理應用程式的邏輯流程                                                                         | [函式與方法](/2-js-basics/2-functions-methods/README.md)                                                                | Jasmine 和 Christopher |
-| 06  |                        JS 基礎                     |                        使用 JS 做決策                          | 學習如何在程式碼中使用條件語句進行決策                                                                                 | [做決策](/2-js-basics/3-making-decisions/README.md)                                                                     |         Jasmine       |
-| 07  |                        JS 基礎                     |                            陣列與迴圈                         | 使用 JavaScript 的陣列與迴圈來處理資料                                                                                 | [陣列與迴圈](/2-js-basics/4-arrays-loops/README.md)                                                                     |         Jasmine       |
-| 08  |       [生態瓶](/3-terrarium/solution/README.md)     |                            HTML 實作                          | 建立 HTML 來創建線上生態瓶，專注於建立頁面佈局                                                                         | [HTML 入門](/3-terrarium/1-intro-to-html/README.md)                                                                      |           Jen         |
-| 09  |       [生態瓶](/3-terrarium/solution/README.md)     |                            CSS 實作                           | 建立 CSS 來設計線上生態瓶，專注於 CSS 的基礎知識，包括讓頁面響應式                                                     | [CSS 入門](/3-terrarium/2-intro-to-css/README.md)                                                                       |           Jen         |
-| 10  |       [生態瓶](/3-terrarium/solution/README.md)     |                 JavaScript 閉包與 DOM 操作                    | 建立 JavaScript 來讓生態瓶具備拖放功能，專注於閉包與 DOM 操作                                                         | [JavaScript 閉包與 DOM 操作](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                                         |           Jen         |
-| 11  |       [打字遊戲](/4-typing-game/solution/README.md) |                          建立打字遊戲                         | 學習如何使用鍵盤事件來驅動 JavaScript 應用程式的邏輯                                                                   | [事件驅動程式設計](/4-typing-game/typing-game/README.md)                                                                |       Christopher     |  
-| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         與瀏覽器互動                          | 學習瀏覽器的運作方式、歷史，以及如何搭建瀏覽器擴展的基本元素                               |                               [關於瀏覽器](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | 建立表單、調用 API 並將變數存儲於本地存儲中 | 建立瀏覽器擴展的 JavaScript 元素，使用存儲於本地存儲中的變數來調用 API                      |                [API、表單與本地存儲](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          瀏覽器中的背景進程與網頁性能          | 使用瀏覽器的背景進程來管理擴展的圖標；學習網頁性能以及一些優化方法   |             [背景任務與性能](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [Space Game](/6-space-game/solution/README.md)           |             更高級的 JavaScript 遊戲開發             | 學習如何使用類別與組合進行繼承，以及 Pub/Sub 模式，為開發遊戲做準備              |                      [高級遊戲開發介紹](/6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           繪製到畫布                            | 學習如何使用 Canvas API，將元素繪製到螢幕上                                                                       |                                [繪製到畫布](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   在螢幕上移動元素                    | 探索如何使用笛卡爾座標系和 Canvas API 讓元素產生運動                                            |                           [移動元素](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          碰撞檢測                           | 讓元素通過按鍵碰撞並相互反應，並提供冷卻功能以確保遊戲性能    |                              [碰撞檢測](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             計分                              | 根據遊戲的狀態和表現進行數學計算                                                                |                                    [計分](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     結束與重啟遊戲                     | 學習如何結束與重啟遊戲，包括清理資產和重置變數值                              |                                [結束條件](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 網頁應用中的 HTML 模板與路由                 | 學習如何使用路由和 HTML 模板來搭建多頁網站的架構                             |                            [HTML 模板與路由](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  建立登入與註冊表單                   | 學習如何建立表單並處理驗證流程                                                                          |                                           [表單](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   獲取與使用數據的方法                   | 瞭解數據如何在應用中流動，如何獲取、存儲和處理數據                                                 |                                            [數據](/7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      狀態管理的概念                      | 學習應用如何保留狀態以及如何以程式化方式進行管理                                                              |                                [狀態管理](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+|     |                       專案名稱                       |                            教授概念                             | 學習目標                                                                                                                 |                                                         連結課程                                                          |         作者          |  
+| :-: | :--------------------------------------------------: | :------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------: | :-------------------: |  
+| 01  |                     入門篇                          |           程式設計與工具介紹                                   | 學習大多數程式語言的基本原理以及幫助專業開發者完成工作的軟體工具                                                      | [程式語言與工具介紹](./1-getting-started-lessons/1-intro-to-programming-languages/README.md)                              |         Jasmine       |  
+| 02  |                     入門篇                          |             GitHub 基礎與團隊合作                              | 學習如何在專案中使用 GitHub，如何與他人協作管理程式碼                                                                  | [GitHub 基礎介紹](./1-getting-started-lessons/2-github-basics/README.md)                                                  |          Floor        |  
+| 03  |                     入門篇                          |                             無障礙設計                         | 學習網頁無障礙設計的基礎知識                                                                                           | [無障礙設計基礎](./1-getting-started-lessons/3-accessibility/README.md)                                                   |       Christopher     |  
+| 04  |                        JS 基礎                      |                         JavaScript 資料類型                   | 學習 JavaScript 資料類型的基礎知識                                                                                     | [資料類型](./2-js-basics/1-data-types/README.md)                                                                          |         Jasmine       |  
+| 05  |                        JS 基礎                      |                         函數與方法                             | 學習如何使用函數與方法來管理應用程式的邏輯流程                                                                         | [函數與方法](./2-js-basics/2-functions-methods/README.md)                                                                 | Jasmine 和 Christopher |  
+| 06  |                        JS 基礎                      |                        使用 JS 做決策                          | 學習如何在程式碼中使用條件語句進行決策                                                                                 | [做決策](./2-js-basics/3-making-decisions/README.md)                                                                       |         Jasmine       |  
+| 07  |                        JS 基礎                      |                            陣列與迴圈                         | 使用 JavaScript 的陣列與迴圈來處理資料                                                                                 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md)                                                                       |         Jasmine       |  
+| 08  |       [生態瓶](./3-terrarium/solution/README.md)     |                            HTML 實作                          | 建立 HTML 來創建線上生態瓶，專注於建立頁面佈局                                                                         | [HTML 介紹](./3-terrarium/1-intro-to-html/README.md)                                                                       |           Jen         |  
+| 09  |       [生態瓶](./3-terrarium/solution/README.md)     |                            CSS 實作                           | 建立 CSS 來設計線上生態瓶，專注於 CSS 的基礎知識，包括使頁面響應式                                                     | [CSS 介紹](./3-terrarium/2-intro-to-css/README.md)                                                                         |           Jen         |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript 閉包、DOM 操作                  | 建立 JavaScript 使生態瓶具備拖放介面功能，重點在於閉包和 DOM 操作             |                  [JavaScript 閉包、DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          建立打字遊戲                           | 學習如何使用鍵盤事件來驅動 JavaScript 應用程式的邏輯                                                          |                                [事件驅動程式設計](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         瀏覽器操作                          | 學習瀏覽器的運作方式、歷史，以及如何搭建瀏覽器擴充功能的初始元素                               |                               [關於瀏覽器](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 並將變數存儲於本地存儲 | 建立瀏覽器擴充功能的 JavaScript 元素，使用存儲於本地存儲的變數來呼叫 API                      |                [API、表單與本地存儲](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          瀏覽器背景處理程序與網頁效能          | 使用瀏覽器的背景處理程序來管理擴充功能的圖示；學習網頁效能及一些優化方法   |             [背景任務與效能](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             更進階的 JavaScript 遊戲開發             | 學習使用類別與組合進行繼承，以及 Pub/Sub 模式，為建立遊戲做準備              |                      [進階遊戲開發介紹](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           繪製到畫布                            | 學習 Canvas API，用於將元素繪製到螢幕                                                                       |                                [繪製到畫布](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   在螢幕上移動元素                    | 探索如何使用笛卡爾座標和 Canvas API 使元素產生移動                                            |                           [移動元素](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          碰撞檢測                           | 使用按鍵使元素碰撞並相互反應，並提供冷卻功能以確保遊戲效能    |                              [碰撞檢測](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             計分                              | 根據遊戲的狀態和效能進行數學計算                                                                |                                    [計分](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     結束並重新開始遊戲                     | 學習如何結束並重新開始遊戲，包括清理資產和重置變數值                              |                                [結束條件](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 網頁應用程式中的 HTML 模板與路由                 | 學習如何使用路由和 HTML 模板搭建多頁網站的架構                             |                            [HTML 模板與路由](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  建立登入與註冊表單                   | 學習如何建立表單並處理驗證程序                                                                          |                                           [表單](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   資料的獲取與使用方法                   | 資料如何在應用程式中流動、如何獲取、存儲及處理                                                 |                                            [資料](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      狀態管理概念                      | 學習應用程式如何保留狀態以及如何以程式方式管理它                                                              |                                [狀態管理](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
 
 
 ## 🏫 教學法
 
-我們的課程設計基於兩個關鍵的教學原則：
+我們的課程設計基於兩個主要的教學原則：
 * 專案導向學習
-* 頻繁的小測驗
+* 頻繁測驗
 
-該課程教授 JavaScript、HTML 和 CSS 的基礎知識，以及當今網頁開發者使用的最新工具和技術。學生將有機會通過構建打字遊戲、虛擬生態瓶、環保瀏覽器擴展、太空侵略者風格的遊戲以及商業銀行應用來獲得實踐經驗。在課程結束時，學生將對網頁開發有扎實的理解。
+此課程教授 JavaScript、HTML 和 CSS 的基礎知識，以及現代網頁開發者使用的最新工具和技術。學生將有機會透過建立打字遊戲、虛擬生態瓶、環保瀏覽器擴充功能、類似太空侵略者的遊戲，以及商業銀行應用程式來獲得實作經驗。到課程結束時，學生將對網頁開發有扎實的理解。
 
-> 🎓 您可以在 Microsoft Learn 上以 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 的形式學習本課程的前幾節課！
+> 🎓 您可以在 Microsoft Learn 上以 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 的形式學習此課程的前幾節課！
 
-通過確保內容與專案相符，學習過程對學生來說更加有趣，並能增強概念的記憶。我們還撰寫了幾節 JavaScript 基礎課程來介紹概念，並搭配 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 視頻教程中的視頻，其中一些作者也參與了本課程的編寫。
+透過確保內容與專案相符，學習過程對學生而言更具吸引力，並能增強概念的記憶。我們還撰寫了幾個 JavaScript 基礎課程作為入門，並搭配 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 視頻教程，其中一些作者也參與了此課程的編寫。
 
-此外，課前的低壓力小測驗可以幫助學生專注於學習主題，而課後的第二次測驗則能進一步鞏固記憶。該課程設計靈活有趣，可以整體學習或部分學習。專案從小型開始，並在 12 週的課程週期結束時逐漸變得複雜。
+此外，課前的低壓測驗能幫助學生專注於學習主題，而課後的第二次測驗則能進一步鞏固記憶。此課程設計靈活有趣，可完整學習或部分選修。專案從小型開始，並在 12 週的周期內逐漸變得更複雜。
 
-雖然我們有意避免引入 JavaScript 框架，以專注於作為網頁開發者在採用框架之前所需的基本技能，但完成本課程後的下一步可以是通過另一系列視頻學習 Node.js："[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。
+我們刻意避免引入 JavaScript 框架，以專注於網頁開發者在採用框架之前所需的基本技能。完成此課程後，下一步可以學習 Node.js，透過另一系列視頻 "[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。
 
-> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性反饋！
+> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性意見！
 
 
-## 🧭 離線訪問
+## 🧭 離線存取
 
-您可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文檔。Fork 此倉庫，在本地機器上[安裝 Docsify](https://docsify.js.org/#/quickstart)，然後在此倉庫的根目錄中輸入 `docsify serve`。網站將在本地端口 3000 上提供服務：`localhost:3000`。
+您可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文件。Fork 此 repo，並在本地機器上 [安裝 Docsify](https://docsify.js.org/#/quickstart)，然後在此 repo 的根目錄中輸入 `docsify serve`。網站將在本地端的 3000 端口上提供服務：`localhost:3000`。
 
 ## 📘 PDF
 
@@ -183,22 +186,24 @@ CO_OP_TRANSLATOR_METADATA:
 
 - [生成式 AI 初學者課程](https://aka.ms/genai-beginners)
 - [生成式 AI 初學者課程 .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
-- [使用 JavaScript 的生成式 AI](https://github.com/microsoft/generative-ai-with-javascript)
-- [使用 Java 的生成式 AI](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [生成式 AI 與 JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
+- [生成式 AI 與 Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
 - [AI 初學者課程](https://aka.ms/ai-beginners)
-- [數據科學初學者課程](https://aka.ms/datascience-beginners)
+- [資料科學初學者課程](https://aka.ms/datascience-beginners)
 - [機器學習初學者課程](https://aka.ms/ml-beginners)
-- [網絡安全初學者課程](https://github.com/microsoft/Security-101)
+- [網路安全初學者課程](https://github.com/microsoft/Security-101)
 - [網頁開發初學者課程](https://aka.ms/webdev-beginners)
 - [物聯網初學者課程](https://aka.ms/iot-beginners)
 - [XR 開發初學者課程](https://github.com/microsoft/xr-development-for-beginners)
-- [掌握 GitHub Copilot 的智能使用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
-- [為 C#/.NET 開發者掌握 GitHub Copilot](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [精通 GitHub Copilot 的代理使用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [精通 GitHub Copilot 的 C#/.NET 開發者課程](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
 - [選擇您的 Copilot 冒險](https://github.com/microsoft/CopilotAdventures)
 
 ## 授權
 
-此倉庫採用 MIT 授權。更多信息請參閱 [LICENSE](../../LICENSE) 文件。
+此存儲庫採用 MIT 授權。請參閱 [LICENSE](../../LICENSE) 文件以了解更多資訊。
+
+---
 
 **免責聲明**：  
-本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
\ No newline at end of file
+本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
diff --git a/translations/zh/README.md b/translations/zh/README.md
index fd859c84..ca7ef1d0 100644
--- a/translations/zh/README.md
+++ b/translations/zh/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b672130244189715ac084c3259f6ab58",
-  "translation_date": "2025-08-23T22:12:32+00:00",
+  "original_hash": "efa251c5fc089367f0a81c572874afca",
+  "translation_date": "2025-08-28T11:01:12+00:00",
   "source_file": "README.md",
   "language_code": "zh"
 }
@@ -21,156 +21,160 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![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)  
 
-通过微软云倡导者提供的为期12周的综合课程，学习网页开发的基础知识。24节课涵盖了JavaScript、CSS和HTML，通过实践项目如生态瓶、浏览器扩展和太空游戏进行学习。课程包含测验、讨论和实践作业，帮助你提升技能并优化知识吸收。今天就开始你的编程之旅吧！
+按照以下步骤开始使用这些资源：  
+1. **Fork 仓库**：点击 [![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. **克隆仓库**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**加入 Azure AI Foundry Discord，与专家和开发者交流**](https://discord.com/invite/ByRwuEEgH4)  
 
-#### 🧑‍🎓 _你是学生吗？_
+# 初学者的网页开发课程  
 
-访问 [**学生中心页面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你可以找到初学者资源、学生礼包，甚至有机会获得免费证书代金券。记得将此页面加入书签并定期查看，我们会每月更新内容。
+通过微软云倡导者提供的12周全面课程，学习网页开发的基础知识。24节课涵盖了 JavaScript、CSS 和 HTML，通过实践项目如生态瓶、浏览器扩展和太空游戏进行学习。课程包括测验、讨论和实践作业，帮助你提升技能并优化知识保留。今天就开始你的编程之旅吧！  
 
-### 📣 公告 - _全新生成式AI JavaScript课程_ 已发布
+#### 🧑‍🎓 _你是学生吗？_  
 
-不要错过我们的全新生成式AI课程！
+访问 [**学生中心页面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，这里有初学者资源、学生礼包，甚至还有免费证书代金券的获取方式。这个页面值得收藏，每月更新内容。  
 
-访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习！
+### 📣 公告 - _JavaScript 生成式 AI 新课程_ 已发布  
 
-<div>
-  <img src="./images/background.png" width="600px" />
-</div>
+不要错过我们的生成式 AI 新课程！  
 
-- 课程内容涵盖从基础到RAG的所有内容。
-- 使用生成式AI和我们的配套应用与历史人物互动。
-- 有趣且引人入胜的叙事，你将进行时间旅行！
+访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习！  
 
-<div>
-  <img src="./images/character.png" width="600px" />
-</div>
+![背景](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.zh.png)  
 
-每节课都包含一个作业、知识检查和挑战，帮助你学习以下主题：
-- 提示和提示工程
-- 文本和图像应用生成
-- 搜索应用
+- 课程内容涵盖从基础到 RAG 的所有知识。  
+- 使用生成式 AI 和我们的配套应用与历史人物互动。  
+- 有趣且引人入胜的叙事，你将穿越时空！  
 
-访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习！
+![角色](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.zh.png)  
 
-## 🌱 开始学习
+每节课包括一个作业、知识检查和挑战，帮助你学习以下主题：  
+- 提示词设计与提示工程  
+- 文本和图像应用生成  
+- 搜索应用  
 
-> **教师们**，我们[提供了一些建议](for-teachers.md)供您参考如何使用此课程。欢迎在[讨论论坛](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)中分享您的反馈！
+访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习！  
 
-**[学习者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每节课从课前测验开始，接着阅读课程材料，完成各种活动，并通过课后测验检查你的理解。
+## 🌱 开始学习  
 
-为了提升学习体验，与同伴一起完成项目吧！我们鼓励在[讨论论坛](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)中进行讨论，我们的版主团队会解答你的问题。
+> **教师们**，我们[提供了一些建议](for-teachers.md)供您使用此课程。欢迎在[讨论论坛](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)中提供反馈！  
 
-为了进一步学习，我们强烈推荐探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 以获取更多学习资料。
+**[学习者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每节课从课前测验开始，阅读课程材料，完成各种活动，并通过课后测验检查你的理解。  
 
-### 📋 设置你的学习环境
+为了提升学习体验，与同伴一起完成项目！我们鼓励在[讨论论坛](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)中交流，我们的版主团队会回答你的问题。  
 
-本课程已准备好开发环境！你可以选择在 [Codespace](https://github.com/features/codespaces/)（_基于浏览器，无需安装_）中运行课程，或者在本地使用如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的文本编辑器。
+为了进一步学习，我们强烈推荐探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 提供的额外学习材料。  
 
-#### 创建你的代码库
-为了方便保存你的学习进度，建议你创建此代码库的副本。点击页面顶部的 **Use this template** 按钮即可。这将在你的GitHub账户中创建一个包含课程内容的新代码库。
+### 📋 设置你的开发环境  
 
-操作步骤：
-1. **Fork代码库**：点击页面右上角的 "Fork" 按钮。
-2. **克隆代码库**：运行 `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+此课程已准备好开发环境！开始学习时，你可以选择在 [Codespace](https://github.com/features/codespaces/)（基于浏览器，无需安装的环境）中运行课程，或在本地计算机上使用文本编辑器如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。  
 
-#### 在Codespace中运行课程
+#### 创建你的仓库  
+为了方便保存你的学习成果，建议创建此仓库的副本。点击页面顶部的 **Use this template** 按钮即可。这将在你的 GitHub 账户中创建一个包含课程内容的新仓库。  
 
-在你创建的代码库副本中，点击 **Code** 按钮并选择 **Open with Codespaces**。这将为你创建一个新的Codespace以供学习。
+按照以下步骤操作：  
+1. **Fork 仓库**：点击页面右上角的 "Fork" 按钮。  
+2. **克隆仓库**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
 
-<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
+#### 在 Codespace 中运行课程  
 
-#### 在本地运行课程
+在你创建的仓库副本中，点击 **Code** 按钮并选择 **Open with Codespaces**。这将为你创建一个新的 Codespace 以供学习。  
 
-要在本地运行课程，你需要一个文本编辑器、浏览器和命令行工具。我们的第一节课 [编程语言和工具介绍](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages) 将指导你选择适合的工具。
+[!Codespace](../..)./images/createcodespace.png)  
 
-我们推荐使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作为编辑器，它还内置了 [终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以在[这里](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下载Visual Studio Code。
+#### 在本地计算机上运行课程  
 
-1. 将你的代码库克隆到本地。点击 **Code** 按钮并复制URL：
+要在本地计算机上运行课程，你需要一个文本编辑器、浏览器和命令行工具。我们的第一节课 [编程语言和工具介绍](../../1-getting-started-lessons/1-intro-to-programming-languages) 将指导你选择适合自己的工具。  
 
-    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
+我们推荐使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作为编辑器，它还内置了 [终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以在[这里](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下载 Visual Studio Code。  
 
-    然后，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的 [终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 中运行以下命令，将 `<your-repository-url>` 替换为你刚刚复制的URL：
+1. 将你的仓库克隆到计算机。点击 **Code** 按钮并复制 URL：  
+
+    [!CodeSpace](./images/createcodespace.png)  
+
+    然后，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的 [终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 中运行以下命令，将 `<your-repository-url>` 替换为你刚复制的 URL：  
 
     ```bash 
     git clone <your-repository-url>
-    ```
+    ```  
 
-2. 在Visual Studio Code中打开文件夹。点击 **File** > **Open Folder**，选择你刚刚克隆的文件夹。
+2. 在 Visual Studio Code 中打开文件夹。点击 **File** > **Open Folder**，选择你刚克隆的文件夹。  
 
-> 推荐的Visual Studio Code扩展：
->
-> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在Visual Studio Code中预览HTML页面
-> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 帮助你更快地编写代码
+> 推荐的 Visual Studio Code 扩展：  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中预览 HTML 页面  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 帮助你更快编写代码  
 
-## 📂 每节课包含：
+## 📂 每节课包括：  
 
-- 可选的手绘笔记
-- 可选的补充视频
-- 课前热身测验
-- 书面课程
-- 针对项目的逐步构建指南
-- 知识检查
-- 挑战
-- 补充阅读
-- 作业
-- 课后测验
+- 可选的手绘笔记  
+- 可选的补充视频  
+- 课前热身测验  
+- 书面课程内容  
+- 对于基于项目的课程，提供逐步指导如何完成项目  
+- 知识检查  
+- 挑战  
+- 补充阅读材料  
+- 作业  
+- [课后测验](https://ff-quizzes.netlify.app/)  
 
-> **关于测验的说明**：所有测验都在Quiz-app文件夹中，共48个测验，每个测验包含三个问题。测验链接在课程中，可以本地运行或部署到Azure；请按照`quiz-app`文件夹中的说明操作。测验正在逐步本地化。
+> **关于测验的说明**：所有测验都包含在 Quiz-app 文件夹中，共48个测验，每个测验有三个问题。测验可在[这里](https://ff-quizzes.netlify.app/)访问，可以在本地运行或部署到 Azure；请按照 `quiz-app` 文件夹中的说明操作。  
 
-## 🗃️ 课程目录
+## 🗃️ 课程  
 
-|     |                       项目名称                       |                            教授概念                             | 学习目标                                                                                                                 |                                                         课程链接                                                          |         作者          |
-| :-: | :--------------------------------------------------: | :------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------: | :-----------------: |
-| 01  |                     入门课程                      |           编程和工具的基础介绍           | 学习大多数编程语言的基本原理以及帮助专业开发者完成工作的工具 | [编程语言和工具介绍](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
-| 02  |                     入门课程                      |             GitHub基础及团队协作             | 学习如何在项目中使用GitHub，以及如何与他人协作开发代码                                                    |                            [GitHub基础](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
-| 03  |                     入门课程                      |                             无障碍设计                              | 学习网页无障碍设计的基础知识                                                                                               |                       [无障碍设计基础](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
-| 04  |                        JS基础                         |                         JavaScript数据类型                          | 学习JavaScript数据类型的基础知识                                                                                                 |                                       [数据类型](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
-| 05  |                        JS基础                         |                         函数和方法                          | 学习如何使用函数和方法管理应用程序的逻辑流                                                             |                              [函数和方法](/2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |
-| 06  |                        JS基础                         |                        使用JS进行决策                        | 学习如何通过决策方法在代码中创建条件                                                           |                                 [决策方法](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
-| 07  |                        JS基础                         |                            数组和循环                            | 学习如何在JavaScript中使用数组和循环处理数据                                                                                 |                                   [数组和循环](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
-| 08  |       [生态瓶](/3-terrarium/solution/README.md)       |                            HTML实践                            | 构建HTML以创建一个在线生态瓶，重点学习布局构建                                                         |                                 [HTML介绍](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
-| 09  |       [生态瓶](/3-terrarium/solution/README.md)       |                            CSS实践                             | 构建CSS以美化在线生态瓶，重点学习CSS基础知识，包括使页面响应式                     |                                  [CSS介绍](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
-| 10  |            [生态瓶](/3-terrarium/solution/README.md)            |                 JavaScript闭包和DOM操作                  | 构建JavaScript以使生态瓶具备拖放功能，重点学习闭包和DOM操作             |                  [JavaScript闭包和DOM操作](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
-| 11  |          [打字游戏](/4-typing-game/solution/README.md)          |                          构建一个打字游戏                           | 学习如何使用键盘事件驱动JavaScript应用的逻辑                                                          |                                [事件驱动编程](/4-typing-game/typing-game/README.md)                                |       Christopher       |
-| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         浏览器相关工作                          | 学习浏览器的工作原理、历史，以及如何搭建浏览器扩展的初始元素                               |                               [关于浏览器](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | 构建表单、调用 API 并将变量存储在本地存储中 | 构建浏览器扩展的 JavaScript 元素，通过存储在本地存储中的变量调用 API                      |                [API、表单和本地存储](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          浏览器中的后台进程与网页性能          | 使用浏览器的后台进程管理扩展图标；学习网页性能及一些优化方法   |             [后台任务与性能](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [Space Game](/6-space-game/solution/README.md)           |             更高级的 JavaScript 游戏开发             | 学习使用类和组合进行继承，以及发布/订阅模式，为构建游戏做准备              |                      [高级游戏开发简介](/6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           绘制到画布                            | 学习 Canvas API，用于在屏幕上绘制元素                                                                       |                                [绘制到画布](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   在屏幕上移动元素                    | 探索如何使用笛卡尔坐标和 Canvas API 让元素获得运动效果                                            |                           [移动元素](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          碰撞检测                           | 通过按键让元素碰撞并相互反应，并提供冷却功能以确保游戏性能    |                              [碰撞检测](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             计分                              | 根据游戏状态和表现进行数学计算                                                                |                                    [计分](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     结束和重启游戏                     | 学习如何结束和重启游戏，包括清理资源和重置变量值                              |                                [结束条件](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 网页应用中的 HTML 模板和路由                 | 学习如何使用路由和 HTML 模板创建多页面网站的架构                             |                            [HTML 模板和路由](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  构建登录和注册表单                   | 学习构建表单和处理验证逻辑                                                                          |                                           [表单](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   数据获取和使用的方法                   | 学习数据如何在应用中流动，如何获取、存储和处理数据                                                 |                                            [数据](/7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      状态管理的概念                      | 学习应用如何保持状态以及如何以编程方式管理状态                                                              |                                [状态管理](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+|     |                       项目名称                       |                            教授概念                             | 学习目标                                                                                                                 |                                                         课程链接                                                          |         作者          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     入门                      |           编程语言和工具介绍           | 学习大多数编程语言的基本原理以及帮助专业开发者完成工作的软件 | [编程语言和工具介绍](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     入门                      |             GitHub 基础知识，包括团队协作             | 学习如何在项目中使用 GitHub，以及如何与他人协作代码库                                                    |                            [GitHub 基础知识](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     入门                      |                             无障碍设计                              | 学习网页无障碍设计的基础知识                                                                                               |                       [无障碍设计基础](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        JS 基础                         |                         JavaScript 数据类型                          | 学习 JavaScript 数据类型的基础知识                                                                                                 |                                       [数据类型](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        JS 基础                         |                         函数和方法                          | 学习如何使用函数和方法管理应用程序的逻辑流                                                             |                              [函数和方法](./2-js-basics/2-functions-methods/README.md)                               | Jasmine 和 Christopher |  
+| 06  |                        JS 基础                         |                        使用 JS 做决策                        | 学习如何使用决策方法在代码中创建条件                                                           |                                 [做决策](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        JS 基础                         |                            数组和循环                            | 使用 JavaScript 中的数组和循环处理数据                                                                                 |                                   [数组和循环](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [生态瓶](./3-terrarium/solution/README.md)       |                            HTML 实践                            | 构建 HTML 创建在线生态瓶，重点是布局构建                                                         |                                 [HTML 入门](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [生态瓶](./3-terrarium/solution/README.md)       |                            CSS 实践                             | 构建 CSS 样式在线生态瓶，重点是 CSS 基础知识，包括使页面响应式                     |                                  [CSS 入门](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript 闭包，DOM 操作                  | 编写 JavaScript 代码，使微型生态瓶成为一个拖放界面，重点学习闭包和 DOM 操作             |                  [JavaScript 闭包，DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          构建一个打字游戏                           | 学习如何使用键盘事件来驱动 JavaScript 应用程序的逻辑                                                          |                                [事件驱动编程](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         浏览器相关工作                          | 学习浏览器的工作原理、历史，以及如何搭建浏览器扩展的基本元素                               |                               [关于浏览器](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | 构建表单、调用 API 并将变量存储在本地存储中 | 编写浏览器扩展的 JavaScript 元素，通过本地存储的变量调用 API                      |                [API、表单和本地存储](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          浏览器中的后台进程，网页性能优化          | 使用浏览器的后台进程管理扩展图标；学习网页性能优化的一些方法   |             [后台任务和性能优化](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             更高级的 JavaScript 游戏开发             | 学习使用类和组合的继承以及发布/订阅模式，为构建游戏做准备              |                      [高级游戏开发简介](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           在画布上绘图                            | 学习使用 Canvas API，在屏幕上绘制元素                                                                       |                                [画布绘图](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   在屏幕上移动元素                    | 探索如何使用笛卡尔坐标和 Canvas API 让元素获得运动                                            |                           [移动元素](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          碰撞检测                           | 通过按键使元素碰撞并相互反应，并提供冷却功能以确保游戏性能    |                              [碰撞检测](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             计分                              | 根据游戏状态和表现进行数学计算                                                                |                                    [计分](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     结束和重启游戏                     | 学习如何结束和重启游戏，包括清理资源和重置变量值                              |                                [结束条件](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 Web 应用中的 HTML 模板和路由                 | 学习如何通过路由和 HTML 模板创建多页面网站的架构                             |                            [HTML 模板和路由](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  构建登录和注册表单                   | 学习如何构建表单并处理验证逻辑                                                                          |                                           [表单](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   获取和使用数据的方法                   | 学习数据如何在应用中流动，如何获取、存储和处理数据                                                 |                                            [数据](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      状态管理的概念                      | 学习应用如何保留状态以及如何以编程方式管理状态                                                              |                                [状态管理](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
 
 
-## 🏫 教学法
+## 🏫 教学理念
 
-我们的课程设计基于两个关键教学原则：
+我们的课程设计基于两个关键的教学原则：
 * 项目驱动学习
-* 频繁测验
+* 频繁的小测验
+
+该课程教授 JavaScript、HTML 和 CSS 的基础知识，以及当今 Web 开发者使用的最新工具和技术。学生将有机会通过构建打字游戏、虚拟生态瓶、环保浏览器扩展、太空入侵者风格的游戏以及企业银行应用程序来获得实践经验。在课程结束时，学生将对 Web 开发有一个扎实的理解。
 
-该课程教授 JavaScript、HTML 和 CSS 的基础知识，以及当今网页开发者使用的最新工具和技术。学生将有机会通过构建打字游戏、虚拟生态瓶、环保浏览器扩展、太空入侵者风格游戏以及企业银行应用来获得实践经验。课程结束时，学生将对网页开发有一个扎实的理解。
 
 > 🎓 您可以在 Microsoft Learn 上以 [学习路径](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 的形式学习本课程的前几节课！
 
-通过确保内容与项目相结合，学习过程变得更加有趣，同时增强了学生对概念的记忆。我们还编写了几节 JavaScript 基础知识的入门课程，并配有 "[JavaScript 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 视频教程，其中一些作者也参与了本课程的编写。
+通过确保内容与项目相结合，学习过程变得更加有趣，同时也增强了学生对概念的记忆。我们还编写了一些 JavaScript 基础知识的入门课程，并配有 "[JavaScript 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 视频教程，其中一些作者也为本课程做出了贡献。
 
-此外，课前的低压力测验可以帮助学生集中注意力学习某个主题，而课后的第二次测验则进一步巩固记忆。本课程设计灵活有趣，可以完整学习或部分学习。项目从小型开始，到 12 周周期结束时逐渐变得复杂。
+此外，课前的低风险小测验可以帮助学生集中注意力学习某个主题，而课后的第二次测验则进一步巩固了知识点。本课程设计灵活有趣，可以完整学习，也可以选择部分内容。项目从简单开始，到 12 周课程结束时逐渐变得复杂。
 
-虽然我们有意避免引入 JavaScript 框架，以专注于网页开发者在采用框架之前所需的基本技能，但完成本课程后的一个良好下一步是通过另一系列视频学习 Node.js："[Node.js 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。
+虽然我们有意避免引入 JavaScript 框架，以便在学习框架之前专注于成为 Web 开发者所需的基本技能，但完成本课程后的一个不错的下一步是通过另一系列视频学习 Node.js："[Node.js 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。
 
 > 请访问我们的 [行为准则](CODE_OF_CONDUCT.md) 和 [贡献指南](CONTRIBUTING.md)。我们欢迎您的建设性反馈！
 
 
 ## 🧭 离线访问
 
-您可以使用 [Docsify](https://docsify.js.org/#/) 离线运行此文档。Fork 此仓库，在本地机器上[安装 Docsify](https://docsify.js.org/#/quickstart)，然后在此仓库的根文件夹中输入 `docsify serve`。网站将在本地的端口 3000 上运行：`localhost:3000`。
+您可以使用 [Docsify](https://docsify.js.org/#/) 离线运行此文档。Fork 此仓库，在本地机器上 [安装 Docsify](https://docsify.js.org/#/quickstart)，然后在此仓库的根文件夹中输入 `docsify serve`。网站将在本地的 3000 端口运行：`localhost:3000`。
 
 ## 📘 PDF
 
@@ -179,7 +183,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## 🎒 其他课程
 
-我们的团队还制作了其他课程！查看以下内容：
+我们的团队还制作了其他课程！请查看：
 
 - [生成式 AI 初学者课程](https://aka.ms/genai-beginners)
 - [生成式 AI 初学者课程 .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@@ -189,16 +193,18 @@ CO_OP_TRANSLATOR_METADATA:
 - [数据科学初学者课程](https://aka.ms/datascience-beginners)
 - [机器学习初学者课程](https://aka.ms/ml-beginners)
 - [网络安全初学者课程](https://github.com/microsoft/Security-101)
-- [网页开发初学者课程](https://aka.ms/webdev-beginners)
+- [Web 开发初学者课程](https://aka.ms/webdev-beginners)
 - [物联网初学者课程](https://aka.ms/iot-beginners)
 - [XR 开发初学者课程](https://github.com/microsoft/xr-development-for-beginners)
 - [掌握 GitHub Copilot 的智能使用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
 - [为 C#/.NET 开发者掌握 GitHub Copilot](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
-- [选择您的 Copilot 冒险](https://github.com/microsoft/CopilotAdventures)
+- [选择你的 Copilot 冒险](https://github.com/microsoft/CopilotAdventures)
 
 ## 许可证
 
-此仓库采用 MIT 许可证。有关更多信息，请参阅 [LICENSE](../../LICENSE) 文件。
+此仓库根据 MIT 许可证授权。有关更多信息，请参阅 [LICENSE](../../LICENSE) 文件。
+
+---
 
 **免责声明**：  
-本文档使用AI翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。应以原始语言的文档作为权威来源。对于关键信息，建议使用专业人工翻译。我们对因使用本翻译而引起的任何误解或误读不承担责任。
\ No newline at end of file
+本文档使用AI翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于关键信息，建议使用专业人工翻译。我们对因使用此翻译而产生的任何误解或误读不承担责任。
\ No newline at end of file