diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.my.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.my.png
new file mode 100644
index 00000000..7e969102
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.my.png differ
diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.uk.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.uk.png
new file mode 100644
index 00000000..f34f12f4
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.uk.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.my.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.my.png
new file mode 100644
index 00000000..a0be9f74
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.my.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.uk.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.uk.png
new file mode 100644
index 00000000..beb8f6d3
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.uk.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.my.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.my.png
new file mode 100644
index 00000000..c620de22
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.my.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.uk.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.uk.png
new file mode 100644
index 00000000..9004584c
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.uk.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.my.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.my.png
new file mode 100644
index 00000000..2987eed9
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.my.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.uk.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.uk.png
new file mode 100644
index 00000000..d6b1fd2a
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.uk.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.my.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.my.png
new file mode 100644
index 00000000..ed0ae925
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.my.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.uk.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.uk.png
new file mode 100644
index 00000000..0bc68dfe
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.uk.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.my.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.my.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.my.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.uk.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.uk.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.uk.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.my.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.my.png
new file mode 100644
index 00000000..b9a25114
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.my.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.uk.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.uk.png
new file mode 100644
index 00000000..71e5706a
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.uk.png differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.my.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.my.jpg
new file mode 100644
index 00000000..0e181fd3
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.my.jpg differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.uk.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.uk.jpg
new file mode 100644
index 00000000..7ba79a3b
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.uk.jpg differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.my.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.my.png
new file mode 100644
index 00000000..c4f09201
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.my.png differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.uk.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.uk.png
new file mode 100644
index 00000000..6f8a0501
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.uk.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.my.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.my.png
new file mode 100644
index 00000000..1ce80598
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.my.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.uk.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.uk.png
new file mode 100644
index 00000000..f1a8807d
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.uk.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.my.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.my.png
new file mode 100644
index 00000000..c8c33a4e
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.my.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.uk.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.uk.png
new file mode 100644
index 00000000..3e2984db
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.uk.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.my.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.my.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.my.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.uk.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.uk.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.uk.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.my.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.my.png
new file mode 100644
index 00000000..7cd2185b
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.my.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.uk.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.uk.png
new file mode 100644
index 00000000..085b43c4
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.uk.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.my.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.my.png
new file mode 100644
index 00000000..111f0f5f
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.my.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.uk.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.uk.png
new file mode 100644
index 00000000..82a92f11
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.uk.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.my.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.my.png
new file mode 100644
index 00000000..7b27f157
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.my.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.uk.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.uk.png
new file mode 100644
index 00000000..89d0de38
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.uk.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.my.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.my.png
new file mode 100644
index 00000000..e565efe2
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.my.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.uk.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.uk.png
new file mode 100644
index 00000000..f9f60fa6
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.uk.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.my.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.my.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.my.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.uk.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.uk.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.uk.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.my.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.my.png
new file mode 100644
index 00000000..27cffeaf
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.my.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.uk.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.uk.png
new file mode 100644
index 00000000..42be91bf
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.uk.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.my.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.my.png
new file mode 100644
index 00000000..427c6c44
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.my.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.uk.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.uk.png
new file mode 100644
index 00000000..76ff0017
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.uk.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.my.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.my.png
new file mode 100644
index 00000000..b0008595
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.my.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.uk.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.uk.png
new file mode 100644
index 00000000..63c609a0
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.uk.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.my.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.my.png
new file mode 100644
index 00000000..94f67bb4
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.my.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.uk.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.uk.png
new file mode 100644
index 00000000..40c470e7
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.uk.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.my.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.my.png
new file mode 100644
index 00000000..8755a2e5
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.my.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.uk.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.uk.png
new file mode 100644
index 00000000..ec220707
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.uk.png differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.my.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.my.jpg
new file mode 100644
index 00000000..4240ac81
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.my.jpg differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.uk.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.uk.jpg
new file mode 100644
index 00000000..af747791
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.uk.jpg differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.my.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.my.png
new file mode 100644
index 00000000..c6d3f364
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.my.png differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.uk.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.uk.png
new file mode 100644
index 00000000..e1dc6750
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.uk.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.my.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.my.png
new file mode 100644
index 00000000..bb74d642
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.my.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.uk.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.uk.png
new file mode 100644
index 00000000..c61888b4
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.uk.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.my.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.my.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.my.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.uk.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.uk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.uk.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.my.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.my.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.my.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.uk.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.uk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.uk.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.my.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.my.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.my.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.uk.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.uk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.uk.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.my.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.my.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.my.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.uk.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.uk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.uk.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.my.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.my.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.my.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.uk.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.uk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.uk.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.my.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.my.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.my.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.uk.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.uk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.uk.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.my.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.my.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.my.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.uk.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.uk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.uk.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.my.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.my.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.my.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.uk.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.uk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.uk.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.my.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.my.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.my.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.uk.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.uk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.uk.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.my.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.my.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.my.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.uk.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.uk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.uk.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.my.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.my.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.my.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.uk.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.uk.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.uk.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.my.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.my.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.my.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.uk.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.uk.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.uk.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.my.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.my.png
new file mode 100644
index 00000000..f410c140
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.my.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.uk.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.uk.png
new file mode 100644
index 00000000..5a374c1b
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.uk.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.my.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.my.png
new file mode 100644
index 00000000..13131ff7
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.my.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png
new file mode 100644
index 00000000..150988b9
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.my.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.my.png
new file mode 100644
index 00000000..87c8e329
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.my.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.uk.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.uk.png
new file mode 100644
index 00000000..fae10677
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.uk.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.my.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.my.png
new file mode 100644
index 00000000..7407374c
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.my.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.uk.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.uk.png
new file mode 100644
index 00000000..ccd1e0a3
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.uk.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.my.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.my.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.my.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.uk.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.uk.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.uk.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.my.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.my.png
new file mode 100644
index 00000000..d321744b
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.my.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.uk.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.uk.png
new file mode 100644
index 00000000..0e7abec5
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.uk.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.my.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.my.png
new file mode 100644
index 00000000..ed6b9a0d
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.my.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.uk.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.uk.png
new file mode 100644
index 00000000..16a54fbf
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.uk.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.my.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.my.png
new file mode 100644
index 00000000..13aeaf25
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.my.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png
new file mode 100644
index 00000000..ebd130d0
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.my.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.my.png
new file mode 100644
index 00000000..5c93cc44
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.my.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.uk.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.uk.png
new file mode 100644
index 00000000..68b30f63
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.uk.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.my.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.my.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.my.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.uk.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.uk.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.uk.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.my.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.my.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.my.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.uk.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.uk.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.uk.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.my.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.my.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.my.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.uk.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.uk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.uk.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.my.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.my.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.my.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.uk.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.uk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.uk.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.my.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.my.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.my.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.uk.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.uk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.uk.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.my.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.my.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.my.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.uk.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.uk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.uk.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.my.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.my.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.my.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.uk.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.uk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.uk.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.my.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.my.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.my.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.uk.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.uk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.uk.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.my.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.my.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.my.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.uk.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.uk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.uk.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.my.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.my.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.my.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.uk.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.uk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.uk.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.my.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.my.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.my.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.uk.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.uk.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.uk.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.my.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.my.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.my.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.uk.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.uk.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.uk.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.my.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.my.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.my.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.uk.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.uk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.uk.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.my.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.my.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.my.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.uk.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.uk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.uk.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.my.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.my.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.my.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.uk.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.uk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.uk.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.my.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.my.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.my.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.uk.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.uk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.uk.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.my.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.my.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.my.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.uk.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.uk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.uk.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.my.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.my.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.my.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.uk.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.uk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.uk.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.my.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.my.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.my.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.uk.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.uk.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.uk.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.my.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.my.png
new file mode 100644
index 00000000..6af0a271
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.my.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.uk.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.uk.png
new file mode 100644
index 00000000..4faac7d4
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.uk.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.my.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.my.png
new file mode 100644
index 00000000..94c4a45b
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.my.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.uk.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.uk.png
new file mode 100644
index 00000000..51df7cff
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.uk.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.my.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.my.png
new file mode 100644
index 00000000..3afc18c6
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.my.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.uk.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.uk.png
new file mode 100644
index 00000000..e8b9e316
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.uk.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.my.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.my.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.my.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.uk.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.uk.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.uk.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.my.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.my.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.my.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.uk.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.uk.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.uk.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.my.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.my.png
new file mode 100644
index 00000000..2b2d8ae3
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.my.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.uk.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.uk.png
new file mode 100644
index 00000000..aa057fba
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.uk.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.my.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.my.png
new file mode 100644
index 00000000..5daef2b0
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.my.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.uk.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.uk.png
new file mode 100644
index 00000000..c72c591e
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.uk.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.my.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.my.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.my.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.uk.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.uk.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.uk.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.my.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.my.png
new file mode 100644
index 00000000..09b8d6e6
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.my.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.uk.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.uk.png
new file mode 100644
index 00000000..bafcefe8
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.uk.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.my.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.my.png
new file mode 100644
index 00000000..a4f4bb16
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.my.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.uk.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.uk.png
new file mode 100644
index 00000000..1be2407e
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.uk.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.my.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.my.png
new file mode 100644
index 00000000..d3d080e4
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.my.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.uk.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.uk.png
new file mode 100644
index 00000000..28e0ff4f
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.uk.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.my.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.my.png
new file mode 100644
index 00000000..86d695a2
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.my.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.uk.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.uk.png
new file mode 100644
index 00000000..10baad57
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.uk.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.my.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.my.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.my.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.uk.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.uk.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.uk.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.my.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.my.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.my.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.uk.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.uk.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.uk.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.my.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.my.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.my.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.uk.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.uk.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.uk.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.my.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.my.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.my.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.uk.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.uk.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.uk.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.my.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.my.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.my.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.uk.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.uk.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.uk.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.my.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.my.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.my.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.uk.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.uk.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.uk.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.my.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.my.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.my.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.uk.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.uk.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.uk.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.my.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.my.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.my.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.uk.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.uk.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.uk.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.my.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.my.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.my.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.uk.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.uk.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.uk.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.my.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.my.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.my.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.uk.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.uk.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.uk.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.my.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.my.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.my.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.uk.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.uk.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.uk.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.my.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.my.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.my.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.uk.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.uk.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.uk.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.my.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.my.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.my.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.uk.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.uk.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.uk.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.my.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.my.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.my.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.uk.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.uk.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.uk.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.my.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.my.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.my.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.uk.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.uk.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.uk.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.my.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.my.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.my.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.uk.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.uk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.uk.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.my.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.my.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.my.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.uk.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.uk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.uk.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.my.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.my.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.my.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.uk.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.uk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.uk.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.my.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.my.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.my.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.uk.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.uk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.uk.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.my.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.my.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.my.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.uk.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.uk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.uk.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.my.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.my.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.my.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.uk.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.uk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.uk.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.my.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.my.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.my.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.uk.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.uk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.uk.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.my.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.my.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.my.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.uk.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.uk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.uk.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.my.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.my.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.my.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.uk.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.uk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.uk.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.my.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.my.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.my.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.uk.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.uk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.uk.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.my.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.my.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.my.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.uk.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.uk.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.uk.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.my.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.my.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.my.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.uk.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.uk.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.uk.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.my.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.my.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.my.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.uk.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.uk.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.uk.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.my.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.my.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.my.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.uk.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.uk.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.uk.png differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.my.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.my.jpg
new file mode 100644
index 00000000..3639898d
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.my.jpg differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.uk.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.uk.jpg
new file mode 100644
index 00000000..ecd97013
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.uk.jpg differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.my.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.my.png
new file mode 100644
index 00000000..d8323e0a
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.my.png differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.uk.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.uk.png
new file mode 100644
index 00000000..9cd75275
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.uk.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.my.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.my.png
new file mode 100644
index 00000000..95dedb69
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.my.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.uk.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.uk.png
new file mode 100644
index 00000000..cef9aa39
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.uk.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.my.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.my.png
new file mode 100644
index 00000000..3313bc2a
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.my.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.uk.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.uk.png
new file mode 100644
index 00000000..b1009962
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.uk.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.my.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.my.png
new file mode 100644
index 00000000..c40ccbc6
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.my.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.uk.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.uk.png
new file mode 100644
index 00000000..1c8e1f7a
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.uk.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.my.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.my.png
new file mode 100644
index 00000000..7773a263
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.my.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.uk.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.uk.png
new file mode 100644
index 00000000..ce9c06b0
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.uk.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.my.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.my.png
new file mode 100644
index 00000000..6743bbf0
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.my.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.uk.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.uk.png
new file mode 100644
index 00000000..7033cd45
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.uk.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.my.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.my.png
new file mode 100644
index 00000000..19b0b381
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.my.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.uk.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.uk.png
new file mode 100644
index 00000000..2913a576
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.uk.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.my.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.my.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.my.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.uk.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.uk.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.uk.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.my.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.my.png
new file mode 100644
index 00000000..fcaf802d
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.my.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.uk.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.uk.png
new file mode 100644
index 00000000..300e7ca8
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.uk.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.my.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.my.png
new file mode 100644
index 00000000..e5832497
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.my.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.uk.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.uk.png
new file mode 100644
index 00000000..0440ba21
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.uk.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.my.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.my.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.my.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.uk.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.uk.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.uk.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.my.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.my.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.my.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.uk.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.uk.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.uk.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.my.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.my.png
new file mode 100644
index 00000000..d85c8c51
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.my.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.uk.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.uk.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.uk.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.my.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.my.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.my.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.uk.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.uk.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.uk.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.my.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.my.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.my.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.uk.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.uk.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.uk.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.my.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.my.png
new file mode 100644
index 00000000..19b0b381
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.my.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.uk.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.uk.png
new file mode 100644
index 00000000..2913a576
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.uk.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.my.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.my.png
new file mode 100644
index 00000000..611b8de1
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.my.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.uk.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.uk.png
new file mode 100644
index 00000000..eec6c048
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.uk.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.my.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.my.png
new file mode 100644
index 00000000..69c1c4c9
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.my.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.uk.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.uk.png
new file mode 100644
index 00000000..248d1abe
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.uk.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.my.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.my.png
new file mode 100644
index 00000000..21c34005
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.my.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.uk.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.uk.png
new file mode 100644
index 00000000..736b0207
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.uk.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.my.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.my.png
new file mode 100644
index 00000000..ab721127
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.my.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.uk.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.uk.png
new file mode 100644
index 00000000..09f12048
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.uk.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.my.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.my.png
new file mode 100644
index 00000000..c399765d
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.my.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.uk.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.uk.png
new file mode 100644
index 00000000..b793eb95
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.uk.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.my.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.my.png
new file mode 100644
index 00000000..0c607de6
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.my.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.uk.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.uk.png
new file mode 100644
index 00000000..474de0a7
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.uk.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.my.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.my.png
new file mode 100644
index 00000000..090cbba0
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.my.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.uk.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.uk.png
new file mode 100644
index 00000000..9aed2977
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.uk.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.my.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.my.png
new file mode 100644
index 00000000..54353554
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.my.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.uk.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.uk.png
new file mode 100644
index 00000000..216c94fd
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.uk.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.my.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.my.png
new file mode 100644
index 00000000..dcdcc6e6
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.my.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.uk.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.uk.png
new file mode 100644
index 00000000..c6461ecb
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.uk.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.my.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.my.png
new file mode 100644
index 00000000..dfe5a608
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.my.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.uk.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.uk.png
new file mode 100644
index 00000000..b63e0cfe
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.uk.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.my.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.my.png
new file mode 100644
index 00000000..42feedc8
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.my.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.uk.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.uk.png
new file mode 100644
index 00000000..e82125de
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.uk.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.my.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.my.png
new file mode 100644
index 00000000..29d4e0fc
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.my.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.uk.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.uk.png
new file mode 100644
index 00000000..2333aaa6
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.uk.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.my.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.my.png
new file mode 100644
index 00000000..1a1e59d1
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.my.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.uk.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.uk.png
new file mode 100644
index 00000000..15d1339c
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.uk.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.my.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.my.png
new file mode 100644
index 00000000..64bd0ab7
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.my.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.uk.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.uk.png
new file mode 100644
index 00000000..eae360a2
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.uk.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.my.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.my.png
new file mode 100644
index 00000000..94eeeff8
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.my.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.uk.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.uk.png
new file mode 100644
index 00000000..8a1552a6
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.uk.png differ
diff --git a/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..b97f9c27
--- /dev/null
+++ b/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c63675cfaf1d223b37bb9fecbfe7c252",
+  "translation_date": "2025-08-27T22:47:06+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "my"
+}
+-->
+# ပရိုဂရမ်မင်းဘာသာစကားများနှင့် အသုံးဝင်သောကိရိယာများ
+
+ဒီသင်ခန်းစာမှာ ပရိုဂရမ်မင်းဘာသာစကားများ၏ အခြေခံအချက်များကို လေ့လာပါမည်။ ဒီမှာဖော်ပြထားတဲ့အကြောင်းအရာတွေဟာ ယနေ့ခေတ်ပရိုဂရမ်မင်းဘာသာစကားများအများစုအတွက် သက်ဆိုင်ပါတယ်။ "အသုံးဝင်သောကိရိယာများ" အပိုင်းမှာတော့ ပရိုဂရမ်မာတစ်ဦးအနေနဲ့ အသုံးဝင်မယ့် ဆော့ဖ်ဝဲလ်များကို လေ့လာနိုင်ပါမည်။
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.my.png)  
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## သင်ခန်းစာမတိုင်မီ စမ်းမေးခွန်း
+[Pre-lecture quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## နိဒါန်း
+
+ဒီသင်ခန်းစာမှာ ကျွန်ုပ်တို့ လေ့လာမည့်အကြောင်းအရာများမှာ -
+
+- ပရိုဂရမ်မင်းဆိုတာဘာလဲ?
+- ပရိုဂရမ်မင်းဘာသာစကားအမျိုးအစားများ
+- ပရိုဂရမ်တစ်ခု၏ အခြေခံအချက်များ
+- ပရိုဂရမ်မာအတွက် အသုံးဝင်သော ဆော့ဖ်ဝဲလ်နှင့် ကိရိယာများ
+
+> ဒီသင်ခန်းစာကို [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) မှာလည်း လေ့လာနိုင်ပါတယ်။
+
+## ပရိုဂရမ်မင်းဆိုတာဘာလဲ?
+
+ပရိုဂရမ်မင်း (coding) ဆိုတာက ကွန်ပျူတာ သို့မဟုတ် မိုဘိုင်းစက်ကိရိယာတစ်ခုအတွက် အညွှန်းများရေးသားခြင်းဖြစ်ပါတယ်။ ဒီအညွှန်းတွေကို ပရိုဂရမ်မင်းဘာသာစကားတစ်ခုနဲ့ရေးပြီး စက်ကိရိယာက အဓိပ္ပါယ်ဖွင့်ဆိုပေးပါတယ်။ ဒီအညွှန်းတွေကို *program*, *computer program*, *application (app)*, *executable* စတဲ့အမည်တွေနဲ့ ခေါ်ဆိုနိုင်ပါတယ်။
+
+*Program* ဆိုတာက ကုဒ်နဲ့ရေးထားတဲ့ အရာတစ်ခုဖြစ်ပါတယ်။ ဥပမာ - ဝဘ်ဆိုဒ်များ, ဂိမ်းများ, ဖုန်းအက်ပ်များစသည်ဖြင့်။ ကုဒ်မရေးဘဲနဲ့လည်း ပရိုဂရမ်တစ်ခုဖန်တီးနိုင်ပေမယ့် အခြေခံလောဂျစ်ကို စက်ကိရိယာက ဖွင့်ဆိုပေးရမှာဖြစ်ပြီး အဲ့ဒီလောဂျစ်ကို ကုဒ်နဲ့ရေးထားတာဖြစ်နိုင်ပါတယ်။ *Running* သို့မဟုတ် *executing* လုပ်နေတဲ့ ပရိုဂရမ်တစ်ခုက အညွှန်းတွေကို လုပ်ဆောင်နေပါတယ်။ သင်ဒီသင်ခန်းစာကို ဖတ်နေတဲ့ စက်ကိရိယာကလည်း ပရိုဂရမ်တစ်ခုကို လည်ပတ်နေပါတယ်။
+
+✅ သုတေသနလုပ်ပါ - ကမ္ဘာ့ပထမဆုံး ကွန်ပျူတာပရိုဂရမ်မာအဖြစ် သတ်မှတ်ခံရသူက ဘယ်သူလဲ?
+
+## ပရိုဂရမ်မင်းဘာသာစကားများ
+
+ပရိုဂရမ်မင်းဘာသာစကားတွေက စက်ကိရိယာအတွက် အညွှန်းရေးဖို့ ပရိုဂရမ်မာတွေကို အခွင့်အလမ်းပေးပါတယ်။ စက်ကိရိယာတွေက binary (1s နှင့် 0s) ကိုသာ နားလည်နိုင်ပြီး အများစုသော ပရိုဂရမ်မာတွေအတွက် အဲ့ဒီနည်းနဲ့ ဆက်သွယ်ဖို့ မထိရောက်ပါဘူး။ ပရိုဂရမ်မင်းဘာသာစကားတွေက လူနဲ့ စက်ကြား ဆက်သွယ်ရေးအတွက် အထောက်အကူပေးပါတယ်။
+
+ပရိုဂရမ်မင်းဘာသာစကားတွေဟာ အမျိုးအစားအမျိုးမျိုးရှိပြီး ရည်ရွယ်ချက်အမျိုးမျိုးအတွက် အသုံးပြုနိုင်ပါတယ်။ ဥပမာ - JavaScript ကို ဝဘ်အက်ပ်လီကေးရှင်းများအတွက် အသုံးပြုပြီး Bash ကို အပရိုပရိုစစ်ဆင်ရေးစနစ်များအတွက် အသုံးပြုပါတယ်။
+
+*Low level languages* တွေဟာ စက်ကိရိယာအတွက် အညွှန်းဖွင့်ဆိုဖို့ အဆင့်နည်းနည်းသာ လိုအပ်ပါတယ်။ ဒါပေမယ့် *high level languages* တွေက ဖတ်ရှုရလွယ်ကူပြီး အထောက်အပံ့များတဲ့အတွက် လူကြိုက်များပါတယ်။ JavaScript ကို *high level language* အဖြစ် သတ်မှတ်နိုင်ပါတယ်။
+
+အောက်ပါကုဒ်က JavaScript နဲ့ ARM assembly code တို့ကို အသုံးပြုပြီး *high level* နဲ့ *low level* ဘာသာစကားကြား ကွာခြားချက်ကို ဖော်ပြထားပါတယ်။
+
+```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
+```
+
+ယုံကြည်ပါ - *သူတို့နှစ်ခုလုံး တူညီတဲ့အရာကို လုပ်ဆောင်နေပါတယ်*: Fibonacci အစီအစဉ်ကို 10 အထိ ပုံနှိပ်ပြနေပါတယ်။
+
+✅ Fibonacci အစီအစဉ်ဆိုတာ [သတ်မှတ်ထားသည်](https://en.wikipedia.org/wiki/Fibonacci_number) - 0 နဲ့ 1 ကနေ စတင်ပြီး နောက်ထပ်နံပါတ်တစ်ခုဟာ အရင်နံပါတ်နှစ်ခုရဲ့ စုစုပေါင်းဖြစ်ပါတယ်။ ပထမဆုံး 10 ခုက 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ဖြစ်ပါတယ်။
+
+## ပရိုဂရမ်တစ်ခု၏ အခြေခံအချက်များ
+
+ပရိုဂရမ်တစ်ခုအတွင်း အညွှန်းတစ်ခုကို *statement* လို့ခေါ်ပြီး အညွှန်းတစ်ခုပြီးဆုံးတဲ့နေရာကို သတ်မှတ်ထားတဲ့ စာလုံး သို့မဟုတ် လိုင်းအကွာအဝေးရှိပါတယ်။ ဘာသာစကားတစ်ခုစီအလိုက် အညွှန်းပြီးဆုံးပုံက မတူနိုင်ပါတယ်။
+
+ပရိုဂရမ်အတွင်းရှိ အညွှန်းတွေဟာ အသုံးပြုသူ သို့မဟုတ် အခြားနေရာကနေ ရရှိတဲ့ ဒေတာကို အခြေခံပြီး လုပ်ဆောင်နိုင်ပါတယ်။ ဒေတာဟာ ပရိုဂရမ်ရဲ့ အပြုအမူကို ပြောင်းလဲနိုင်တဲ့အတွက် ပရိုဂရမ်မင်းဘာသာစကားတွေမှာ ဒေတာကို ယာယီသိမ်းဆည်းဖို့ နည်းလမ်းတစ်ခုပါဝင်ပါတယ်။ ဒါတွေကို *variables* လို့ခေါ်ပါတယ်။ Variables တွေဟာ ဒေတာကို စက်ရဲ့ မှတ်ဉာဏ်ထဲမှာ သိမ်းဆည်းဖို့ အညွှန်းပေးတဲ့ statement တွေဖြစ်ပါတယ်။ Variables တွေဟာ အလျားလိုက်သင်္ချာမှာရှိတဲ့ variables တွေနဲ့ ဆင်တူပြီး အမည်တစ်ခုရှိပြီး တန်ဖိုးက အချိန်အလိုက် ပြောင်းလဲနိုင်ပါတယ်။
+
+တစ်ခါတစ်လေမှာ အညွှန်းတစ်ချို့ကို စက်ကိရိယာက မလုပ်ဆောင်နိုင်ပါဘူး။ ဒါဟာ ပရိုဂရမ်မာရဲ့ ရည်ရွယ်ချက်အတိုင်း ဖြစ်နိုင်သလို မမျှော်လင့်ထားတဲ့ အမှားတစ်ခုကြောင့် ဖြစ်နိုင်ပါတယ်။ ဒီလို application ကို ထိန်းချုပ်နိုင်ခြင်းက ပိုမိုခိုင်မာပြီး ပြုပြင်ထိန်းသိမ်းရလွယ်ကူစေပါတယ်။ အများအားဖြင့် ဒီလို ထိန်းချုပ်မှုတွေဟာ အခြေအနေတစ်ခုဖြစ်ပေါ်တဲ့အခါမှာ ဖြစ်ပါတယ်။ ယနေ့ခေတ်ပရိုဂရမ်မင်းမှာ အများဆုံးအသုံးပြုတဲ့ statement တစ်ခုက `if..else` statement ဖြစ်ပါတယ်။
+
+✅ ဒီလို statement အမျိုးအစားကို နောက်ထပ်သင်ခန်းစာတွေမှာ ပိုမိုလေ့လာနိုင်ပါမည်။
+
+## အသုံးဝင်သောကိရိယာများ
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+> 🎥 အထက်ပါပုံကို နှိပ်ပြီး tooling အကြောင်း ဗီဒီယိုကြည့်ပါ
+
+ဒီအပိုင်းမှာ သင့်ရဲ့ ပရိုဂရမ်မင်းခရီးစတင်ရာမှာ အသုံးဝင်မယ့် ဆော့ဖ်ဝဲလ်တစ်ချို့ကို လေ့လာနိုင်ပါမည်။
+
+**ဖွံ့ဖြိုးရေးပတ်ဝန်းကျင်** ဆိုတာက ပရိုဂရမ်မာတစ်ဦးအနေနဲ့ ဆော့ဖ်ဝဲရေးသားရာမှာ မကြာခဏ အသုံးပြုရတဲ့ ကိရိယာများနှင့် လုပ်ဆောင်ချက်များရဲ့ ပုံစံတစ်ခုဖြစ်ပါတယ်။ ဒီကိရိယာတစ်ချို့ဟာ ပရိုဂရမ်မာရဲ့ လိုအပ်ချက်အရ ပြင်ဆင်ထားပြီး အချိန်အလိုက် ပြောင်းလဲနိုင်ပါတယ်။ 
+
+### Editor များ
+
+ဆော့ဖ်ဝဲရေးသားရာမှာ အရေးကြီးဆုံးကိရိယာတစ်ခုက Editor ဖြစ်ပါတယ်။ Editor တွေမှာ သင့်ရဲ့ကုဒ်ကို ရေးပြီး တစ်ခါတစ်လေမှာတော့ အဲ့ဒီကုဒ်ကို အလုပ်လုပ်စေပါမည်။
+
+Developer တွေဟာ Editor တွေကို အောက်ပါအကြောင်းအရာများအတွက် အားထားကြပါတယ် -
+
+- *Debugging* က ကုဒ်ထဲမှာ Bug နဲ့ အမှားတွေကို ရှာဖွေဖို့ ကူညီပါတယ်။ တချို့ Editor တွေမှာ Debugging လုပ်ဆောင်ချက်ပါဝင်ပြီး သတ်မှတ်ထားတဲ့ ဘာသာစကားအတွက် ပြင်ဆင်နိုင်ပါတယ်။
+- *Syntax highlighting* က ကုဒ်ကို ဖတ်ရလွယ်ကူစေဖို့ အရောင်နဲ့ စာသားဖော်ပြမှုတွေ ထည့်သွင်းပေးပါတယ်။
+- *Extensions and Integrations* တွေက Developer တွေအတွက် အထူးပြုလုပ်ထားတဲ့ ကိရိယာတွေဖြစ်ပါတယ်။
+- *Customization* က Developer တစ်ဦးချင်းစီရဲ့ လိုအပ်ချက်အရ Development Environment ကို ပြင်ဆင်နိုင်စေပါတယ်။
+
+#### လူကြိုက်များတဲ့ Editor များနှင့် 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/)
+
+### Browser များ
+
+Web Developer တွေအတွက် Browser ကလည်း အရေးကြီးတဲ့ ကိရိယာတစ်ခုဖြစ်ပါတယ်။ Browser တွေက Web ပေါ်မှာ ကုဒ်တွေကို ဘယ်လို အလုပ်လုပ်တယ်ဆိုတာ ကြည့်ဖို့ အသုံးဝင်ပါတယ်။
+
+Browser တွေမှာ *Developer Tools* (DevTools) ဆိုတဲ့ Feature တွေပါဝင်ပြီး Application အကြောင်း အရေးကြီးတဲ့ အချက်အလက်တွေကို စုဆောင်းဖို့ ကူညီပါတယ်။
+
+#### လူကြိုက်များတဲ့ Browser များနှင့် 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
+
+တချို့ Developer တွေက ပုံမှန် GUI မျက်နှာပြင်ထက် Command Line ကို ပိုမိုအားထားကြပါတယ်။ Command Line က Developer တွေ Keyboard မှာ အလုပ်လုပ်နေစဉ် Mouse ကို အသုံးမပြုဘဲ အလုပ်လုပ်နိုင်စေပါတယ်။
+
+#### လူကြိုက်များတဲ့ Command Line Tools
+
+- [Git](https://git-scm.com/) (💻 အများစုသော OS တွေမှာ ပါဝင်ပြီးသား)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentation
+
+Developer တစ်ဦးအနေနဲ့ အသစ်တစ်ခုကို လေ့လာချင်တဲ့အခါ Documentation ကို အားထားကြပါတယ်။ Documentation တွေက Tools နဲ့ ဘာသာစကားတွေကို မှန်ကန်စွာ အသုံးပြုဖို့ လမ်းညွှန်ပေးပါတယ်။
+
+#### လူကြိုက်များတဲ့ Web Development Documentation
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev)
+- [Microsoft Developer Docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+
+✅ သုတေသနလုပ်ပါ - Web Developer ရဲ့ ပတ်ဝန်းကျင်နဲ့ Web Designer ရဲ့ ပတ်ဝန်းကျင်ကို နှိုင်းယှဉ်ကြည့်ပါ။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+Programming Language တချို့ကို နှိုင်းယှဉ်ကြည့်ပါ။ JavaScript နဲ့ Java ရဲ့ ထူးခြားချက်တွေက ဘာတွေလဲ? COBOL နဲ့ Go ရဲ့ ကွာခြားချက်တွေက ဘာတွေလဲ?
+
+## သင်ခန်းစာပြီးနောက် စမ်းမေးခွန်း
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+ပရိုဂရမ်မာအနေနဲ့ အသုံးပြုနိုင်တဲ့ ဘာသာစကားအမျိုးမျိုးကို လေ့လာပါ။ ဘာသာစကားတစ်ခုနဲ့ ကုဒ်တစ်ကြောင်းရေးပြီး နောက်ထပ်နှစ်ခုမှာ ပြန်ရေးကြည့်ပါ။ ဘာတွေ သင်ယူရမလဲ?
+
+## အိမ်စာ
+
+[Reading the Docs](assignment.md)
+
+---
+
+**ဝက်ဘ်ဆိုက်မှတ်ချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်ဆိုမှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတည်သောရင်းမြစ်အဖြစ် သတ်မှတ်ရန် လိုအပ်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်ဆောင်ရွက်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားများ သို့မဟုတ် အဓိပ္ပါယ်မှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..278ed1b3
--- /dev/null
+++ b/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "1ce4deaec80130d3a0a3c906568459fc",
+  "translation_date": "2025-08-27T22:48:00+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "my"
+}
+-->
+# စာရွက်များကိုဖတ်ခြင်း
+
+## လမ်းညွှန်ချက်များ
+
+ဝက်ဘ်ဒီဗလော့ပါများအတွက်လိုအပ်နိုင်သောကိရိယာများစွာကို [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) တွင်တွေ့နိုင်ပါသည်။ သင်ခန်းစာတွင်ဖော်ပြထားခြင်းမရှိသည့် ကိရိယာ ၃ ခုကို ရွေးချယ်ပြီး ဝက်ဘ်ဒီဗလော့ပါများအတွက် အဘယ်ကြောင့်အသုံးပြုသင့်သည်ကိုရှင်းပြပါ။ ထို့နောက် အဆိုပါအမျိုးအစားအတွင်းပါဝင်သော ကိရိယာတစ်ခုကို ရှာဖွေပြီး ၎င်း၏စာရွက်များကိုမျှဝေပါ။ MDN စာရွက်များတွင်ဖော်ပြထားသော ကိရိယာနမူနာကို အသုံးမပြုပါနှင့်။
+
+## အဆင့်သတ်မှတ်ချက်
+
+ထူးချွန် | လုံလောက် | တိုးတက်မှုလိုအပ်
+--- | --- | -- |
+| ဝက်ဘ်ဒီဗလော့ပါများအဘို့ ကိရိယာကိုအသုံးပြုသင့်သောအကြောင်းကိုရှင်းပြထားသည် | ကိရိယာကိုဘယ်လိုအသုံးပြုရမည်ကိုရှင်းပြထားသော်လည်း အဘယ်ကြောင့်အသုံးပြုသင့်သည်ကိုမဖော်ပြထား | ဝက်ဘ်ဒီဗလော့ပါများအဘို့ ကိရိယာကိုဘယ်လိုအသုံးပြုရမည်နှင့် အဘယ်ကြောင့်အသုံးပြုသင့်သည်ကိုမဖော်ပြထား |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/1-getting-started-lessons/2-github-basics/README.md b/translations/my/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..e936b152
--- /dev/null
+++ b/translations/my/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,316 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-27T22:52:50+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "my"
+}
+-->
+# GitHub အကြောင်းမိတ်ဆက်
+
+ဒီသင်ခန်းစာမှာ GitHub ရဲ့ အခြေခံအချက်တွေကို လေ့လာပါမယ်။ GitHub က သင့်ရဲ့ ကုဒ်ကို host လုပ်ပြီး ပြောင်းလဲမှုတွေကို စီမံခန့်ခွဲဖို့ platform တစ်ခုဖြစ်ပါတယ်။
+
+![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.my.png)
+> [Tomomi Imura](https://twitter.com/girlie_mac) ရဲ့ Sketchnote
+
+## သင်ခန်းစာမတိုင်မီ စမ်းမေးခွန်း
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## မိတ်ဆက်
+
+ဒီသင်ခန်းစာမှာ အောက်ပါအချက်တွေကို လေ့လာပါမယ်-
+
+- သင့်စက်မှာ လုပ်ဆောင်မှုတွေကို မှတ်တမ်းတင်ခြင်း
+- အခြားသူတွေနဲ့ ပရောဂျက်တွေမှာ အတူတူလုပ်ဆောင်ခြင်း
+- open source software တွေကို ဘယ်လိုပံ့ပိုးပေးနိုင်မလဲ
+
+### ကြိုတင်လိုအပ်ချက်များ
+
+စတင်မလုပ်ခင် Git install လုပ်ထားမထား စစ်ဆေးဖို့လိုပါတယ်။ Terminal မှာ `git --version` လို့ရိုက်ပါ။
+
+Git install မလုပ်ထားရင် [Git ကို ဒေါင်းလုဒ်လုပ်ပါ](https://git-scm.com/downloads)။ ပြီးရင် Terminal မှာ သင့်ရဲ့ Git profile ကို setup လုပ်ပါ:
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+Git configure လုပ်ထားမထား စစ်ဆေးဖို့ `git config --list` လို့ရိုက်ပါ။
+
+GitHub account တစ်ခု၊ code editor (ဥပမာ Visual Studio Code) တစ်ခု၊ Terminal (သို့မဟုတ် command prompt) ကို ဖွင့်ထားဖို့လိုပါတယ်။
+
+[github.com](https://github.com/) ကိုသွားပြီး account တစ်ခုဖန်တီးပါ၊ မဟုတ်ရင် login လုပ်ပြီး profile ကို ဖြည့်ပါ။
+
+✅ GitHub က ကမ္ဘာ့ code repository တစ်ခုသာမဟုတ်ပါဘူး၊ အခြား platform တွေလည်းရှိပါတယ်။ ဒါပေမယ့် GitHub က အများဆုံးလူသိများပါတယ်။
+
+### ပြင်ဆင်မှု
+
+သင့်ရဲ့ local machine (laptop သို့မဟုတ် PC) မှာ code project ပါတဲ့ folder တစ်ခုလိုအပ်ပါတယ်။ GitHub မှာ public repository တစ်ခုလည်းလိုအပ်ပါတယ်။ ဒါက အခြားသူတွေရဲ့ project တွေကို ဘယ်လိုပံ့ပိုးပေးရမလဲဆိုတာကို သင်ခန်းစာအနေနဲ့ အသုံးပြုနိုင်ပါတယ်။
+
+---
+
+## Code စီမံခန့်ခွဲမှု
+
+သင့် local machine မှာ code project ပါတဲ့ folder တစ်ခုရှိပြီး git ကို အသုံးပြုပြီး version control စနစ်နဲ့ progress ကို track လုပ်ချင်တယ်ဆိုပါစို့။ git ကို အသုံးပြုတာကို အချို့လူတွေက "အနာဂတ်မှာ ကိုယ့်ကိုယ်ကိုချစ်တဲ့စာရေးတာ" လို့တင်စားကြပါတယ်။ commit messages တွေကို ရက်ပေါင်းများစွာ၊ လများစွာ၊ နှစ်များစွာအကြာမှာ ပြန်ဖတ်တဲ့အခါ သင့်ရဲ့ဆုံးဖြတ်ချက်ကို ဘာကြောင့်လုပ်ခဲ့တယ်ဆိုတာကို ပြန်လည်သတိရနိုင်ပါတယ်။ ဒါမှမဟုတ် ပြောင်းလဲမှုကို "rollback" လုပ်နိုင်ပါတယ်။ ဒါဟာ သင့်ရဲ့ commit messages တွေကောင်းမွန်တဲ့အခါမှာ ဖြစ်နိုင်ပါတယ်။
+
+### Task: Repository တစ်ခုဖန်တီးပြီး code ကို commit လုပ်ပါ  
+
+> ဗီဒီယိုကို ကြည့်ပါ
+> 
+> [![Git နှင့် GitHub အခြေခံဗီဒီယို](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **GitHub မှာ repository ဖန်တီးပါ**။ GitHub.com မှာ repositories tab မှာ သို့မဟုတ် navigation bar ရဲ့ အပေါ်ယာဘက်မှာ **new repo** button ကို ရှာပါ။
+
+   1. သင့် repository (folder) ကို နာမည်ပေးပါ။
+   1. **create repository** ကို ရွေးပါ။
+
+1. **သင့်ရဲ့ working folder ကို သွားပါ**။ Terminal မှာ သင့်ရဲ့ folder (directory) ကို switch လုပ်ပါ။ Terminal မှာ အောက်ပါအတိုင်း ရိုက်ပါ:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Git repository ကို initialize လုပ်ပါ**။ Project မှာ အောက်ပါအတိုင်း ရိုက်ပါ:
+
+   ```bash
+   git init
+   ```
+
+1. **Status ကို စစ်ဆေးပါ**။ Repository ရဲ့ status ကို စစ်ဆေးဖို့ အောက်ပါအတိုင်း ရိုက်ပါ:
+
+   ```bash
+   git status
+   ```
+
+   output က အောက်ပါအတိုင်း ဖြစ်နိုင်ပါတယ်:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   `git status` command က typically repo မှာ save လုပ်ဖို့အဆင်သင့်ဖြစ်နေတဲ့ file တွေ၊ သို့မဟုတ် ပြောင်းလဲမှုရှိတဲ့ file တွေကို ပြသပေးပါတယ်။
+
+1. **File အားလုံးကို tracking အတွက် add လုပ်ပါ**
+   ဒါကို staging files/ adding files to the staging area လို့လည်းခေါ်ပါတယ်။
+
+   ```bash
+   git add .
+   ```
+
+   `git add` နဲ့ `.` argument က သင့်ရဲ့ file အားလုံးနဲ့ ပြောင်းလဲမှုတွေကို tracking အတွက် add လုပ်ပေးပါတယ်။
+
+1. **ရွေးချယ်ထားတဲ့ file တွေကို tracking အတွက် add လုပ်ပါ**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   ဒီ command က သင့်ရဲ့ next commit မှာ file အားလုံးကို add မလုပ်ချင်တဲ့အခါ ရွေးချယ်ထားတဲ့ file တွေကိုသာ staging area မှာ add လုပ်နိုင်ပါတယ်။
+
+1. **File အားလုံးကို unstaging လုပ်ပါ**
+
+   ```bash
+   git reset
+   ```
+
+   ဒီ command က file အားလုံးကို တစ်ခါတည်း unstaging လုပ်နိုင်ပါတယ်။
+
+1. **File တစ်ခုကို unstaging လုပ်ပါ**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   ဒီ command က next commit မှာ ထည့်မလိုတဲ့ file တစ်ခုကို unstaging လုပ်နိုင်ပါတယ်။
+
+1. **သင့်ရဲ့လုပ်ဆောင်မှုကို permanent လုပ်ပါ**။ ဒီအချိန်မှာ သင့်ရဲ့ file တွေကို staging area မှာ add လုပ်ပြီး Git က tracking လုပ်နေပါပြီ။ ပြောင်းလဲမှုကို permanent လုပ်ဖို့ commit လုပ်ဖို့လိုပါတယ်။ Commit လုပ်ဖို့ `git commit` command ကို အသုံးပြုပါ။ Commit က သင့် repo ရဲ့ history မှာ saving point တစ်ခုကို ကိုယ်စားပြုပါတယ်။ Commit လုပ်ဖို့ အောက်ပါအတိုင်း ရိုက်ပါ:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   ဒီ command က သင့်ရဲ့ file အားလုံးကို commit လုပ်ပြီး "first commit" message ကို ထည့်ပေးပါတယ်။ အနာဂတ် commit messages တွေမှာ သင့်ပြောင်းလဲမှုအမျိုးအစားကို ဖော်ပြနိုင်ဖို့ ပိုမိုဖော်ပြနိုင်တဲ့ description ကို အသုံးပြုပါ။
+
+1. **Local Git repo ကို GitHub နဲ့ ချိတ်ဆက်ပါ**။ Git repo ကို local machine မှာ အသုံးပြုနိုင်ပေမယ့် တစ်ချိန်မှာ file တွေကို backup လုပ်ဖို့ သို့မဟုတ် အခြားသူတွေကို သင့် repo မှာ အတူတူလုပ်ဆောင်ဖို့ ဖိတ်ခေါ်ဖို့လိုပါတယ်။ GitHub က အဲ့ဒီအတွက် အကောင်းဆုံးနေရာတစ်ခုဖြစ်ပါတယ်။ GitHub မှာ repo တစ်ခုဖန်တီးပြီးသားဖြစ်တဲ့အတွက် local Git repo ကို GitHub နဲ့ ချိတ်ဆက်ဖို့သာလိုပါတယ်။ `git remote add` command က အဲ့ဒီအလုပ်ကို လုပ်ပေးပါမယ်။ အောက်ပါ command ကို ရိုက်ပါ:
+
+   > မှတ်ချက်- Command ရိုက်မလုပ်ခင် GitHub repo page ကိုသွားပြီး repository URL ကို ရှာပါ။ အောက်ပါ command မှာ ```https://github.com/username/repository_name.git``` ကို သင့် GitHub URL နဲ့ အစားထိုးပါ။
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   ဒီ command က "origin" လို့ခေါ်တဲ့ remote connection တစ်ခုကို ဖန်တီးပြီး GitHub repository ကို ချိတ်ဆက်ပေးပါတယ်။
+
+1. **Local file တွေကို GitHub ကို ပို့ပါ**။ အခုအချိန်မှာ local repo နဲ့ GitHub repo အကြား connection တစ်ခုဖန်တီးပြီးသားဖြစ်ပါတယ်။ File တွေကို GitHub ကို ပို့ဖို့ `git push` command ကို အသုံးပြုပါ:
+
+   > မှတ်ချက်- သင့် branch name က ```main``` နဲ့ default အနေနဲ့ မတူနိုင်ပါတယ်။
+
+   ```bash
+   git push -u origin main
+   ```
+
+   ဒီ command က သင့်ရဲ့ "main" branch ရဲ့ commit တွေကို GitHub ကို ပို့ပေးပါတယ်။
+
+2. **အခြားပြောင်းလဲမှုတွေကို ထည့်ပါ**။ ပြောင်းလဲမှုတွေကို ဆက်လက်လုပ်ဆောင်ပြီး GitHub ကို push လုပ်ချင်ရင် အောက်ပါ command သုံးခုကို အသုံးပြုရပါမယ်:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Tip- `.gitignore` file တစ်ခုကို အသုံးပြုပြီး GitHub မှာ track လုပ်ချင်မယ့် file တွေကို ဖယ်ရှားနိုင်ပါတယ်။ ဥပမာ- သင့် folder မှာရှိတဲ့ notes file တစ်ခုက public repository မှာ မပါသင့်တဲ့အခါ။ `.gitignore` file template တွေကို [.gitignore templates](https://github.com/github/gitignore) မှာ ရှာနိုင်ပါတယ်။
+
+#### Commit messages
+
+Git commit subject line က အောက်ပါစာကြောင်းကို ပြည့်စုံစေပါမယ်-
+If applied, this commit will <your subject line here>
+
+Subject မှာ imperative, present tense ကို အသုံးပြုပါ- "change" မဟုတ်ရင် "changed" သို့မဟုတ် "changes" မဟုတ်ပါဘူး။  
+Subject အတိုင်း body (optional) မှာလည်း imperative, present tense ကို အသုံးပြုပါ။ Body မှာ ပြောင်းလဲမှုရဲ့ motivation ကို ဖော်ပြပြီး ယခင်အခြေအနေနဲ့ နှိုင်းယှဉ်ပါ။ `why` ကို ရှင်းပြတာဖြစ်ပြီး `how` ကို မဟုတ်ပါ။
+
+✅ GitHub ကို အချိန်အနည်းငယ် သွားလေ့လာပါ။ Commit message ကောင်းကောင်းတစ်ခုကို ရှာနိုင်ပါသလား? အနည်းဆုံး message တစ်ခုကို ရှာနိုင်ပါသလား? Commit message မှာ ဘယ်အချက်တွေက အရေးကြီးပြီး အသုံးဝင်တယ်လို့ သင်ထင်ပါသလဲ?
+
+### Task: အတူတူလုပ်ဆောင်ပါ
+
+GitHub မှာ အရာတွေကို ထည့်သွင်းတာရဲ့ အဓိကရည်ရွယ်ချက်က အခြား developer တွေနဲ့ အတူတူလုပ်ဆောင်နိုင်ဖို့ပါ။
+
+## အခြားသူတွေနဲ့ ပရောဂျက်တွေမှာ အတူတူလုပ်ဆောင်ခြင်း
+
+> ဗီဒီယိုကို ကြည့်ပါ
+>
+> [![Git နှင့် GitHub အခြေခံဗီဒီယို](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+သင့် repository မှာ `Insights > Community` ကို သွားပြီး သင့် project က recommended community standards တွေနဲ့ ဘယ်လိုနှိုင်းယှဉ်နိုင်တယ်ဆိုတာကို ကြည့်ပါ။
+
+   GitHub repo ကို တိုးတက်အောင်လုပ်နိုင်တဲ့ အချက်တွေက:
+   - **Description**. သင့် project အတွက် description ထည့်ထားပါသလား?
+   - **README**. README ထည့်ထားပါသလား? GitHub က [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon) ရေးဖို့ လမ်းညွှန်ချက်ပေးပါတယ်။
+   - **Contributing guideline**. သင့် project မှာ [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon) ရှိပါသလား?
+   - **Code of Conduct**. [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/) ရှိပါသလား?
+   - **License**. အရေးကြီးဆုံးအနေနဲ့ [license](https://docs.github.com/articles/adding-a-license-to-a-repository/) ရှိပါသလား?
+
+ဒီ resource တွေက အသစ် join လုပ်တဲ့ team member တွေကို အကျိုးရှိစေပါမယ်။ Contributor တွေက သင့် code ကို မကြည့်ခင် project က သင့်အချိန်ကို သုံးဖို့ သင့်တော်တဲ့နေရာလားဆိုတာကို သိဖို့ အရင်ဆုံး ဒီအချက်တွေကို ကြည့်ကြပါတယ်။
+
+✅ README file တွေက ပြင်ဆင်ဖို့ အချိန်ယူရတယ်၊ ဒါပေမယ့် 忙နေတဲ့ maintainer တွေက မကြည့်မိတတ်ပါတယ်။ အလွန်ဖော်ပြချက်ကောင်းတဲ့ README file တစ်ခုကို ရှာနိုင်ပါသလား? မှတ်ချက်- [README file ကောင်းကောင်းရေးဖို့ tools](https://www.makeareadme.com/) တွေရှိပါတယ်၊ သင်စမ်းသုံးချင်နိုင်ပါတယ်။
+
+### Task: Code တစ်ချို့ကို Merge လုပ်ပါ
+
+Contributing docs တွေက လူတွေ project ကို contribute လုပ်ဖို့ အကူအညီပေးပါတယ်။ ဘယ်အမျိုးအစားရဲ့ contribution တွေကို ရှာနေတယ်ဆိုတာနဲ့ process ဘယ်လိုလုပ်ရမယ်ဆိုတာကို ရှင်းပြပါတယ်။ Contributor တွေက သင့် GitHub repo ကို contribute လုပ်ဖို့ အောက်ပါအဆင့်တွေကို လိုက်နာရပါမယ်:
+
+1. **Forking your repo** Contributor တွေကို သင့် project ကို _fork_ လုပ်ဖို့ လိုအပ်ပါတယ်။ Forking ဆိုတာ သင့် repository ရဲ့ replica ကို သူတို့ရဲ့ GitHub profile မှာ ဖန်တီးတာဖြစ်ပါတယ်။
+1. **Clone**. သူတို့ project ကို local machine မှာ clone လုပ်ပါ။
+1. **Create a branch**. Contributor တွေကို သူတို့ရဲ့အလုပ်အတွက် _branch_ တစ်ခုဖန်တီးဖို့ တိုက်တွန်းပါ။
+1. **Focus their change on one area**. Contributor တွေကို တစ်ခါ commit မှာ တစ်ခုတည်းသောအရာကို အာရုံစိုက်ဖို့ တိုက်တွန်းပါ- ဒါက သူတို့ရဲ့အလုပ်ကို merge လုပ်နိုင်တဲ့ အခွင့်အလမ်းကို မြှင့်တင်ပေးပါတယ်။ ဥပမာ- bug fix တစ်ခုရေးတာ၊ feature အသစ်တစ်ခုထည့်တာ၊ test အချို့ကို update လုပ်တာ- သင့်အနေနဲ့ ၃ ခုထဲက ၂ ခု သို့မဟုတ် ၁ ခုကိုသာ implement လုပ်ချင်ရင် ဘာဖြစ်မလဲ?
+
+✅ Branch တွေက code ကောင်းကောင်းရေးပြီး ship လုပ်ဖို့ အရေးကြီးတဲ့အခြေအနေတွေကို စဉ်းစားနိုင်ပါသလား?
+
+> မှတ်ချက်- သင်လိုချင်တဲ့ပြောင်းလဲမှုကို အခြားသူတွေကလုပ်ဖို့ မစောင့်ပါနဲ့၊ သင့်အလုပ်အတွက် branch တွေကို ဖန်တီးပါ။ သင့်ရဲ့ commit တွေကို သင့် "checked out" လုပ်ထားတဲ့ branch မှာသာလုပ်ပါမယ်။ `git status` ကို အသုံးပြုပြီး ဘယ် branch မှာရှိတယ်ဆိုတာကို စစ်ဆေးပါ။
+
+Contributor workflow ကို လေ့လာကြပါစို့။ Contributor က repo ကို _fork_ လုပ်ပြီး _clone_ လုပ်ထားပြီး local machine မှာ Git repo တစ်ခုရှိပြီးသားဖြစ်တယ်လို့ ယူဆပါ:
+
+1. **Branch တစ်ခုဖန်တီးပါ**. Contributor ရဲ့ပြောင်းလဲမှုတွေကို ထည့်သွင်းမယ့် branch ကို ဖန်တီးဖို့ `git branch` command ကို အသုံးပြုပါ:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Working branch ကို switch လုပ်ပါ**. သတ်မှတ်ထားတဲ့ branch ကို switch လုပ်ပြီး working directory ကို update လုပ်ဖို့ `git switch` ကို အသုံးပြုပါ:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **အလုပ်လုပ်ပါ**. ဒီအချိန်မှာ သင့်ပြောင်းလဲမှုတွေကို ထည့်သွင်းပါ။ Git ကို အောက်ပါ command တွေကို အသုံးပြုပြီး ပြောပြဖို့ မမေ့ပါနဲ့:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Commit ကို အကောင်းဆုံးနာမည်ပေးပါ၊ သင့်အတွက်သာမက repo maintainer အတွက်လည်း အရေးကြီးပါတယ်။
+
+1. **သင့်အလုပ်ကို `main` branch နဲ့ ပေါင်းစည်းပါ**. တစ်ချိန်မှာ သင့်အလုပ်ပြီးဆုံးပြီး `main` branch နဲ့ ပေါင်းစည်းချင်ပါတယ်။ `main` branch က meantime မှာ ပြောင်းလဲမှုရှိနိုင်ပါတယ်၊ ဒါကြောင့် အောက်ပါ command တွေကို အသုံးပြုပြီး update လုပ်ပါ:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   ဒီအချိန်မှာ conflict ဖြစ်နိုင်တဲ့အခြေအနေတွေကို သင့် working branch မှာဖြစ်စေဖို့လိုပါတယ်။ အောက်ပါ command တွေကို run လုပ်ပါ:
+
+  
+GitHub ရဲ့ fork လုပ်ထားတဲ့ repo ကိုသွားပြီး သင် push လုပ်ထားတဲ့ remote branch ကိုဖျက်ပစ်ပါ။
+
+`Pull request` ဆိုတာ အနည်းငယ်အဓိပ္ပာယ်မမှန်သလိုပဲ။ အကြောင်းကတော့ သင်ဟာ project ကို သင့်ရဲ့ပြောင်းလဲမှုတွေ push လုပ်ချင်တာပါ။ ဒါပေမယ့် maintainer (project ရဲ့ပိုင်ရှင်) သို့မဟုတ် core team က သင့်ပြောင်းလဲမှုတွေကို project ရဲ့ "main" branch နဲ့ပေါင်းစည်းမလားဆိုတာ ဆုံးဖြတ်ဖို့လိုပါတယ်။ ဒါကြောင့် သင်ဟာ maintainer ကို ပြောင်းလဲမှုအပေါ်ဆုံးဖြတ်ချက်တောင်းနေတဲ့အရာပါ။
+
+Pull request က branch တစ်ခုမှာပြုလုပ်ထားတဲ့ အပြောင်းအလဲတွေကို နှိုင်းယှဉ်ပြီး ဆွေးနွေးဖို့နေရာတစ်ခုပါ။ Review, comment, integrated test စတာတွေပါဝင်ပါတယ်။ Pull request ကောင်းတစ်ခုဟာ commit message နဲ့တူတဲ့ စည်းမျဉ်းတွေကိုလိုက်နာပါတယ်။ သင့်အလုပ်က အခက်အခဲတစ်ခုကိုဖြေရှင်းပေးနိုင်တဲ့အခါ issue tracker မှာ issue တစ်ခုကို reference ထည့်နိုင်ပါတယ်။ ဒါကို `#` နဲ့ issue နံပါတ်ကိုထည့်ရပါတယ်။ ဥပမာ `#97` လိုပါ။
+
+🤞 အားလုံးအဆင်ပြေပြီး project owner(s) က သင့်ပြောင်းလဲမှုတွေကို project ထဲမှာပေါင်းစည်းပေးမယ်လို့မျှော်လင့်ပါတယ် 🤞
+
+GitHub ရဲ့ remote branch မှာ commit အသစ်တွေကို သင့်ရဲ့ local working branch နဲ့ update လုပ်ပါ။
+
+`git pull`
+
+## Open Source ကို ဘယ်လိုပံ့ပိုးမလဲ
+
+ပထမဦးစွာ GitHub မှာ သင့်စိတ်ဝင်စားပြီး ပြောင်းလဲမှုတစ်ခုလုပ်ချင်တဲ့ repository (သို့မဟုတ် **repo**) တစ်ခုကိုရှာပါ။ အဲဒီ repo ရဲ့အကြောင်းအရာတွေကို သင့်စက်ထဲကို copy လုပ်ချင်ပါလိမ့်မယ်။
+
+✅ 'Beginner-friendly' repo တွေကို [good-first-issue tag နဲ့ရှာဖွေပါ](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.my.png)
+
+Code ကို copy လုပ်ဖို့နည်းလမ်းအများကြီးရှိပါတယ်။ နည်းလမ်းတစ်ခုကတော့ repository ရဲ့အကြောင်းအရာတွေကို HTTPS, SSH, သို့မဟုတ် GitHub CLI (Command Line Interface) ကိုသုံးပြီး "clone" လုပ်တာပါ။
+
+Terminal ကိုဖွင့်ပြီး repository ကိုအောက်ပါအတိုင်း clone လုပ်ပါ:
+`git clone https://github.com/ProjectURL`
+
+Project ပေါ်မှာအလုပ်လုပ်ဖို့အတွက် မှန်ကန်တဲ့ folder ကိုရွှေ့ပါ:
+`cd ProjectURL`
+
+GitHub ရဲ့ embedded code editor / cloud development environment ဖြစ်တဲ့ [Codespaces](https://github.com/features/codespaces) သို့မဟုတ် [GitHub Desktop](https://desktop.github.com/) ကိုသုံးပြီး project အပြည့်အစုံကိုဖွင့်နိုင်ပါတယ်။
+
+နောက်ဆုံးအနေနဲ့ code ကို zipped folder အနေနဲ့ download လုပ်နိုင်ပါတယ်။
+
+### GitHub အကြောင်း စိတ်ဝင်စားစရာအချက်အချို့
+
+GitHub မှာ public repository မည်သည့်အရာမဆို star, watch, သို့မဟုတ် "fork" လုပ်နိုင်ပါတယ်။ သင့်ရဲ့ starred repositories တွေကို အပေါ်ညာဘက် drop-down menu မှာတွေ့နိုင်ပါတယ်။ Bookmark လုပ်တာနဲ့တူပေမယ့် code အတွက်ပါ။
+
+Projects တွေမှာ issue tracker တစ်ခုရှိပါတယ်၊ အများအားဖြင့် GitHub ရဲ့ "Issues" tab မှာရှိပါတယ်၊ project နဲ့ပတ်သက်တဲ့ပြဿနာတွေကိုဆွေးနွေးဖို့နေရာပါ။ Pull Requests tab မှာတော့ ပြုလုပ်ဆဲပြောင်းလဲမှုတွေကိုဆွေးနွေးပြီး review လုပ်ကြပါတယ်။
+
+Projects တွေမှာ forum, mailing list, သို့မဟုတ် Slack, Discord, IRC လို chat channel တွေမှာလည်း ဆွေးနွေးမှုတွေရှိနိုင်ပါတယ်။
+
+✅ သင့်ရဲ့ GitHub repo အသစ်ကိုကြည့်ပြီး settings edit လုပ်တာ, repo မှာအချက်အလက်ထည့်တာ, project တစ်ခု (Kanban board လို) ဖန်တီးတာလို အရာတွေကိုစမ်းကြည့်ပါ။ လုပ်နိုင်စရာအများကြီးရှိပါတယ်!
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+မိတ်ဆွေတစ်ယောက်နဲ့တွဲဖက်ပြီး တစ်ဦးရဲ့ code ပေါ်မှာအလုပ်လုပ်ပါ။ Project တစ်ခုကိုပူးတွဲဖန်တီးပြီး, code ကို fork လုပ်ပါ, branch တွေဖန်တီးပြီး ပြောင်းလဲမှုတွေကိုပေါင်းစည်းပါ။
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+[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/) ကိုကြည့်ပါ။
+
+လေ့ကျင့်ပါ၊ လေ့ကျင့်ပါ၊ လေ့ကျင့်ပါ။ GitHub မှာ [skills.github.com](https://skills.github.com) မှတဆင့် လေ့လာရေးလမ်းကြောင်းကောင်းများရှိပါတယ်။
+
+- [GitHub မှာပထမဆုံးအပတ်](https://skills.github.com/#first-week-on-github)
+
+ပိုမိုအဆင့်မြင့်သင်တန်းတွေကိုလည်းတွေ့နိုင်ပါတယ်။
+
+## လုပ်ငန်းတာဝန်
+
+[GitHub မှာပထမဆုံးအပတ် သင်တန်း](https://skills.github.com/#first-week-on-github) ကိုပြီးစီးပါ။
+
+---
+
+**ဝက်ဘ်ဆိုက်မှတ်ချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။ မူလဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတည်သော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားများ သို့မဟုတ် အဓိပ္ပာယ်မှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/1-getting-started-lessons/3-accessibility/README.md b/translations/my/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..9cb7008b
--- /dev/null
+++ b/translations/my/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,138 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-27T22:50:36+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "my"
+}
+-->
+# ဝက်ဘ်စာမျက်နှာများကို လွယ်ကူစွာ အသုံးပြုနိုင်အောင် ဖန်တီးခြင်း
+
+![Accessibility အကြောင်းအားလုံး](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.my.png)
+> [Tomomi Imura](https://twitter.com/girlie_mac) မှ Sketchnote
+
+## သင်ခန်းစာမတိုင်မီ မေးခွန်း
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> ဝက်ဘ်၏ အားသာချက်မှာ ၎င်း၏ အထွေထွေသုံးနိုင်မှုတွင် ရှိသည်။ မသန်စွမ်းမှုရှိသူများပါဝင်နိုင်မှုသည် အရေးပါသော အချက်တစ်ခုဖြစ်သည်။
+>
+> \- Sir Timothy Berners-Lee, W3C Director နှင့် World Wide Web ကို တီထွင်သူ
+
+ဤအဆိုသည် ဝက်ဘ်ဆိုက်များကို လွယ်ကူစွာ အသုံးပြုနိုင်အောင် ဖန်တီးရန်၏ အရေးပါမှုကို အလွန်ကောင်းစွာ ဖော်ပြထားသည်။ လူတိုင်း မဝင်ရောက်နိုင်သော အက်ပလီကေးရှင်းသည် အလိုအလျောက် ဖယ်ရှားထားသော အက်ပလီကေးရှင်းဖြစ်သည်။ ဝက်ဘ်ဒီဗယ်လော့ပါများအနေဖြင့် ကျွန်ုပ်တို့သည် အမြဲတမ်း Accessibility ကို စဉ်းစားထားသင့်သည်။ စတင်ချိန်မှစ၍ ဤအချက်ကို အာရုံစိုက်ခြင်းဖြင့် သင်ဖန်တီးသော စာမျက်နှာများကို လူတိုင်း ဝင်ရောက်နိုင်စေရန် အကောင်းဆုံးလမ်းကြောင်းပေါ်ရောက်ရှိနေမည်ဖြစ်သည်။ ဤသင်ခန်းစာတွင် သင်၏ ဝက်ဘ်အရင်းအမြစ်များကို လွယ်ကူစွာ အသုံးပြုနိုင်စေရန် ကူညီနိုင်သော ကိရိယာများနှင့် Accessibility ကို စဉ်းစားပြီး ဖန်တီးနည်းကို သင်ယူမည်ဖြစ်သည်။
+
+> သင်ဤသင်ခန်းစာကို [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) တွင် လေ့လာနိုင်သည်။
+
+## အသုံးပြုရန် ကိရိယာများ
+
+### Screen readers
+
+လူသိများသော Accessibility ကိရိယာများထဲမှ Screen readers သည် အရေးပါသော ကိရိယာတစ်ခုဖြစ်သည်။
+
+[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) သည် မျက်စိမမြင်သူများအတွက် အသုံးပြုသော client များဖြစ်သည်။ ဘရောက်ဇာမှ သင်မျှဝေလိုသော အချက်အလက်ကို သေချာစွာ ဖော်ပြရန် အချိန်ကုန်သလို Screen reader မှလည်း အချက်အလက်ကို သေချာစွာ ဖော်ပြရန် အချိန်ကုန်ရမည်။
+
+အခြေခံအားဖြင့် Screen reader သည် စာမျက်နှာကို အပေါ်မှ အောက်သို့ အသံထွက်ဖတ်ပေးမည်။ သင်၏ စာမျက်နှာသည် စာသားသာပါရှိပါက reader သည် ဘရောက်ဇာနှင့် ဆင်တူသော ပုံစံဖြင့် အချက်အလက်ကို ဖော်ပြမည်။ သို့သော် ဝက်ဘ်စာမျက်နှာများသည် စာသားသာမပါရှိဘဲ လင့်ခ်များ၊ ဓာတ်ပုံများ၊ အရောင်များနှင့် အခြားသော ရှုထောင့်ဆိုင်ရာ အစိတ်အပိုင်းများပါရှိသည်။ ဤအချက်အလက်များကို Screen reader မှ သေချာစွာ ဖတ်နိုင်စေရန် ဂရုစိုက်ရမည်။
+
+ဝက်ဘ်ဒီဗယ်လော့ပါများသည် Screen reader ကို ရင်းနှီးကျွမ်းဝင်ထားသင့်သည်။ အထက်တွင် ဖော်ပြထားသည့်အတိုင်း ၎င်းသည် သင်၏ အသုံးပြုသူများ အသုံးပြုမည့် client ဖြစ်သည်။ ဘရောက်ဇာ၏ လုပ်ဆောင်ပုံကို သင် ရင်းနှီးကျွမ်းဝင်ထားသည့်အတိုင်း Screen reader ၏ လုပ်ဆောင်ပုံကိုလည်း သင်လေ့လာသင့်သည်။ ကံကောင်းစွာဖြင့် Screen readers များသည် အများစုသော Operating systems တွင် built-in ဖြစ်သည်။
+
+ဘရောက်ဇာတချို့တွင်လည်း built-in ကိရိယာများနှင့် extension များပါရှိပြီး စာသားကို အသံထွက်ဖတ်ပေးခြင်း သို့မဟုတ် အခြေခံ navigation လုပ်ဆောင်ချက်များကို ပေးနိုင်သည်။ ဥပမာအားဖြင့် [Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features) များသည် Accessibility အတွက် အရေးပါသော ကိရိယာများဖြစ်သော်လည်း Screen reader စမ်းသပ်မှုကိရိယာများနှင့် မရောထွေးသင့်ပါ။
+
+✅ Screen reader နှင့် browser text reader ကို စမ်းသပ်ပါ။ Windows တွင် [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) သည် default အနေဖြင့် ပါရှိပြီး [JAWS](https://webaim.org/articles/jaws/) နှင့် [NVDA](https://www.nvaccess.org/about-nvda/) ကိုလည်း ထည့်သွင်းနိုင်သည်။ macOS နှင့် iOS တွင် [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) သည် default အနေဖြင့် ပါရှိသည်။
+
+### Zoom
+
+မျက်စိမမြင်သူများအတွက် အသုံးပြုသော အခြားသော ကိရိယာတစ်ခုမှာ Zooming ဖြစ်သည်။ 
+
+အခြေခံ Zooming သည် `Control + plus sign (+)` သို့မဟုတ် Screen resolution ကို လျှော့ချခြင်းဖြင့် စီမံနိုင်သည်။ ဤ Zooming ပုံစံသည် စာမျက်နှာတစ်ခုလုံးကို ပြောင်းလဲစေသောကြောင့် [Responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) ကို အသုံးပြုခြင်းသည် Zooming အဆင့်မြင့်များတွင် အသုံးပြုသူအတွေ့အကြုံကောင်းစေရန် အရေးပါသည်။
+
+အခြားသော Zooming ပုံစံသည် အထူး software ကို အသုံးပြု၍ Screen ၏ တစ်စိတ်တစ်ပိုင်းကို ကြီးမြင့်စေပြီး Pan လုပ်ခြင်းဖြစ်သည်။ Windows တွင် [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) သည် built-in ဖြစ်ပြီး [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) သည် အခြားသော third-party magnification software ဖြစ်သည်။ macOS နှင့် iOS တွင် [Zoom](https://www.apple.com/accessibility/mac/vision/) သည် built-in ဖြစ်သည်။
+
+### Contrast checkers
+
+ဝက်ဘ်ဆိုက်များတွင် အသုံးပြုသော အရောင်များကို အရောင်မမြင်နိုင်သူများ သို့မဟုတ် အနည်းဆုံး contrast အရောင်များကို မြင်ရခက်သူများအတွက် သေချာစွာ ရွေးချယ်ရမည်။
+
+✅ သင်နှစ်သက်သော ဝက်ဘ်ဆိုက်တစ်ခုကို browser extension တစ်ခုဖြစ်သော [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) ဖြင့် စမ်းသပ်ပါ။ သင်ဘာတွေ သင်ယူရမလဲ?
+
+### Lighthouse
+
+သင်၏ ဘရောက်ဇာ၏ developer tool area တွင် Lighthouse tool ကို ရှာနိုင်သည်။ ဤ tool သည် ဝက်ဘ်ဆိုက်၏ Accessibility (အခြားသော analysis များနှင့်အတူ) ကို ပထမဆုံးအမြင်ရရန် အရေးပါသည်။ Lighthouse ကို အပြည့်အဝ အားထားသင့်မည်မဟုတ်သော်လည်း 100% score သည် အခြေခံအနေဖြင့် အထောက်အကူဖြစ်စေသည်။
+
+✅ သင်၏ ဘရောက်ဇာ၏ developer tool panel တွင် Lighthouse ကို ရှာပြီး site တစ်ခုကို analysis လုပ်ပါ။ သင်ဘာတွေ ရှာဖွေတွေ့ရှိရမလဲ?
+
+## Accessibility အတွက် ဒီဇိုင်းဆွဲခြင်း
+
+Accessibility သည် အကြီးမားသော ခေါင်းစဉ်တစ်ခုဖြစ်သည်။ သင်ကို ကူညီရန် အရင်းအမြစ်များစွာ ရရှိနိုင်သည်။
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+ကျွန်ုပ်တို့သည် ဝက်ဘ်ဆိုက်များကို လွယ်ကူစွာ အသုံးပြုနိုင်အောင် ဖန်တီးခြင်း၏ အချက်အားလုံးကို မဖော်ပြနိုင်သော်လည်း အောက်တွင် သင် အကောင်အထည်ဖော်လိုသော အဓိကအချက်များကို ဖော်ပြထားသည်။ စတင်ချိန်မှ စာမျက်နှာကို Accessibility အတွက် ဒီဇိုင်းဆွဲခြင်းသည် ရှိပြီးသား စာမျက်နှာကို ပြန်လည်ပြင်ဆင်ခြင်းထက် **အမြဲတမ်း** လွယ်ကူသည်။
+
+## ကောင်းမွန်သော Display အခြေခံသဘောတရားများ
+
+### Color safe palettes
+
+လူများသည် ကမ္ဘာကို မတူညီသောနည်းလမ်းများဖြင့် မြင်ကြသည်။ ၎င်းတွင် အရောင်များပါဝင်သည်။ သင်၏ site အတွက် အရောင်စနစ်ကို ရွေးချယ်သောအခါ ၎င်းသည် လူတိုင်းအတွက် အသုံးပြုနိုင်စေရန် သေချာစွာ ရွေးချယ်ရမည်။ [Color Safe](http://colorsafe.co/) သည် အရောင် palettes များကို ဖန်တီးရန် ကောင်းမွန်သော tool တစ်ခုဖြစ်သည်။
+
+✅ အရောင်အသုံးပြုမှုအတွက် အလွန်ပြဿနာများစွာရှိသော ဝက်ဘ်ဆိုက်တစ်ခုကို ရှာဖွေပါ။ အဘယ်ကြောင့်?
+
+### မှန်ကန်သော HTML ကို အသုံးပြုပါ
+
+CSS နှင့် JavaScript ကို အသုံးပြု၍ element မည်သည့်အမျိုးအစားကိုမဆို control အမျိုးအစားတစ်ခုလို ပြောင်းလဲနိုင်သည်။ `<span>` ကို `<button>` ဖန်တီးရန် အသုံးပြုနိုင်ပြီး `<b>` ကို hyperlink ဖြစ်စေရန် အသုံးပြုနိုင်သည်။ ဤနည်းလမ်းသည် style လုပ်ရန် လွယ်ကူသည်ဟု ယူဆနိုင်သော်လည်း Screen reader အတွက် ဘာမှ မဖော်ပြနိုင်ပါ။ စာမျက်နှာတွင် control များ ဖန်တီးသောအခါ သင့် HTML ကို မှန်ကန်စွာ အသုံးပြုပါ။ hyperlink တစ်ခုလိုလိုချင်ပါက `<a>` ကို အသုံးပြုပါ။ HTML ကို မှန်ကန်စွာ အသုံးပြုခြင်းကို Semantic HTML ကို အသုံးပြုခြင်းဟု ခေါ်သည်။
+
+✅ ဝက်ဘ်ဆိုက်တစ်ခုသို့ သွားပြီး designer များနှင့် developer များသည် HTML ကို မှန်ကန်စွာ အသုံးပြုထားမထား စစ်ဆေးပါ။ သင့် browser တွင် 'View Page Source' ကို ရွေးချယ်ပြီး underlying code ကို ကြည့်ပါ။
+
+### Heading hierarchy ကို ဖော်ပြရန် ဖော်ပြချက်ကောင်းများ ဖန်တီးပါ
+
+Screen reader အသုံးပြုသူများသည် [heading များကို အလွန်အရေးပါသော](https://webaim.org/projects/screenreadersurvey8/#finding) အချက်အလက်များ ရှာဖွေရန်နှင့် စာမျက်နှာတစ်ခုလုံးကို navigation လုပ်ရန် အားကိုးကြသည်။ heading content ကို ဖော်ပြချက်ကောင်းများရေးသားခြင်းနှင့် semantic heading tags များကို အသုံးပြုခြင်းသည် Screen reader အသုံးပြုသူများအတွက် လွယ်ကူစွာ navigation လုပ်နိုင်သော site တစ်ခု ဖန်တီးရန် အရေးပါသည်။
+
+### Visual clues ကောင်းများကို အသုံးပြုပါ
+
+CSS သည် စာမျက်နှာပေါ်ရှိ element မည်သည့်အမျိုးအစားကိုမဆို ၎င်း၏ ရုပ်ပုံကို အပြည့်အဝ ထိန်းချုပ်နိုင်သည်။ သင် outline မပါသော text box များ သို့မဟုတ် underline မပါသော hyperlink များ ဖန်တီးနိုင်သည်။ သို့သော် ဤ clues များကို ဖယ်ရှားခြင်းသည် ၎င်းတို့ကို အားကိုးရသောသူများအတွက် control အမျိုးအစားကို မှတ်မိရန် ပိုမိုခက်ခဲစေသည်။
+
+## Link text ၏ အရေးပါမှု
+
+Hyperlink များသည် ဝက်ဘ်ကို navigation လုပ်ရန် အဓိကဖြစ်သည်။ ထို့ကြောင့် Screen reader သည် link များကို သေချာစွာ ဖတ်နိုင်စေရန် သေချာစွာ ဖန်တီးရမည်။
+
+### Screen readers နှင့် links
+
+Screen reader များသည် link text ကို စာမျက်နှာပေါ်ရှိ အခြားသော စာသားများကို ဖတ်သည့်ပုံစံအတိုင်း ဖတ်သည်။ ဤအခြေအနေကို သင်မျှော်လင့်ထားသည့်အတိုင်း အောက်တွင် ဖော်ပြထားသော text သည် လုံးဝလက်ခံနိုင်သည်ဟု ခံစားရနိုင်သည်။
+
+> 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** သင်ဖတ်မည့်အတိုင်း သင် **ဘယ်တော့မှ** အထက်ဖော်ပြထားသောပုံစံဖြင့် link မဖန်တီးသင့်ပါ။
+
+Screen reader များသည် browser များနှင့် မတူသော interface ဖြစ်ပြီး feature များကွဲပြားသည်ကို သတိပြုပါ။
+
+### URL ကို အသုံးပြုခြင်း၏ ပြဿနာ
+
+Screen reader များသည် text ကို ဖတ်သည်။ URL တစ်ခု text တွင် ပါရှိပါက Screen reader သည် URL ကို ဖတ်မည်။ အများအားဖြင့် URL သည် အဓိကအချက်အလက်ကို မပေးနိုင်ဘဲ အဆင်မပြေသော အသံထွက်ဖြစ်နိုင်သည်။ သင်၏ ဖုန်းသည် URL ပါရှိသော text message ကို အသံထွက်ဖတ်ပေးသောအခါ ဤအတွေ့အကြုံကို ရရှိဖူးနိုင်သည်။
+
+### "click here" ကို အသုံးပြုခြင်း၏ ပြဿနာ
+
+Screen reader များသည် စာမျက်နှာပေါ်ရှိ hyperlink များကိုသာ ဖတ်နိုင်သည်။ sighted person တစ်ဦးသည် စာမျက်နှာကို link များအတွက် scan လုပ်သည့်ပုံစံအတိုင်းဖြစ်သည်။ link text အားလုံး "click here" ဖြစ်ပါက အသုံးပြုသူသည် "click here, click here, click here, click here, click here, ..." ဟုသာ ကြားရမည်။ link များအားလုံးသည် အတူတူဖြစ်သွားပြီး မည်သည့် link ကိုမဆို ခွဲခြားနိုင်မည်မဟုတ်တော့ပါ။
+
+### Link text ကောင်းများ
+
+Link text ကောင်းများသည် link ၏ အခြားဘက်တွင် ရှိသော အချက်အလက်ကို အတိုချုံးဖော်ပြသည်။ အထက်ဖော်ပြထားသောตัวอย่างတွင် little penguins အကြောင်း Wikipedia စာမျက်နှာကို ဖော်ပြထားသည်။ *little penguins* ဟူသော phrase သည် link text အတွက် အကောင်းဆုံးဖြစ်ပြီး သုံးစွဲသူသည် link ကို click လုပ်ပါက little penguins အကြောင်းကို သင်ယူနိုင်မည်ဟု သေချာစေသည်။
+
+> The [little penguin](https://en.wikipedia.org/wiki/Little_penguin), sometimes known as the fairy penguin, is the smallest penguin in the world.
+
+✅ ဝက်ဘ်ကို မိနစ်အနည်းငယ် surf လုပ်ပြီး obscure linking strategies ကို အသုံးပြုထားသော စာမျက်နှာများကို ရှာပါ။ ၎င်းတို့ကို link ကောင်းများ အသုံးပြုထားသော site များနှင့် နှိုင်းယှဉ်ပါ။ သင်ဘာတွေ သင်ယူရမလဲ?
+
+#### Search engine မှတ်ချက်များ
+
+သင့် site ကို လူတိုင်း အသုံးပြုနိုင်စေရန် သေချာစေရန် သင်လုပ်ဆောင်သောအရာများသည် Search engine များကိုလည်း သင့် site ကို navigation လုပ်ရန် ကူညီမည်ဖြစ်သည်။ Search engine များသည် link text ကို အသုံးပြု၍ စာမျက်နှာများ၏ ခေါင်းစဉ်များကို သင်
+အစိုးရများစွာတွင် ဝင်ရောက်နိုင်မှုအပေါ် သက်ဆိုင်ရာ ဥပဒေများရှိသည်။ သင်၏နိုင်ငံ၏ ဝင်ရောက်နိုင်မှုဆိုင်ရာ ဥပဒေများကို လေ့လာပါ။ ဘာတွေကို ဖုံးအုပ်ထားပြီး ဘာတွေကို မဖုံးအုပ်ထားဘူးလဲ။ ဥပမာအားဖြင့် [ဒီအစိုးရဝက်ဘ်ဆိုဒ်](https://accessibility.blog.gov.uk/) ကို ကြည့်ပါ။
+
+## လုပ်ငန်းတာဝန်
+
+[ဝင်ရောက်နိုင်မှုမရှိသော ဝက်ဘ်ဆိုဒ်တစ်ခုကို ခွဲခြမ်းစိတ်ဖြာပါ](assignment.md)
+
+အရင်းအမြစ်: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့ရှိသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/1-getting-started-lessons/3-accessibility/assignment.md b/translations/my/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..c1f04b69
--- /dev/null
+++ b/translations/my/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,30 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-27T22:51:30+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "my"
+}
+-->
+# ဝင်ရောက်မရသောဆိုဒ်တစ်ခုကို ခွဲခြမ်းစိတ်ဖြာပါ
+
+## လမ်းညွှန်ချက်များ
+
+သင်ထင်ရသလို ဝင်ရောက်မရနိုင်သောဆိုဒ်တစ်ခုကို ရှာဖွေပြီး၊ ၎င်း၏ ဝင်ရောက်နိုင်မှု (accessibility) ကို တိုးတက်စေရန် လုပ်ဆောင်ရန်အစီအစဉ်တစ်ခု ဖန်တီးပါ။  
+သင့်ရဲ့ ပထမအလုပ်မှာ ဒီဆိုဒ်ကို ရှာဖွေပြီး၊ အနည်းဆုံး analytical tools မသုံးဘဲ ဝင်ရောက်မရနိုင်တဲ့နည်းလမ်းတွေကို အသေးစိတ်ဖော်ပြပါ။ ထို့နောက် Lighthouse analysis ကို အသုံးပြု၍ စစ်ဆေးပြီး၊ အဆိုပါ စစ်ဆေးမှုရလဒ်ကို pdf အဖြစ် သိမ်းဆည်းပါ။  
+ထို့နောက် အနည်းဆုံး အချက် ၁၀ ချက်ပါဝင်သော အသေးစိတ်အစီအစဉ်တစ်ခုကို ဖော်ပြပါ၊ ၎င်းအစီအစဉ်တွင် ဆိုဒ်ကို ဘယ်လိုတိုးတက်စေမည်ကို ဖော်ပြပါ။
+
+## ဆိုဒ်ဝင်ရောက်နိုင်မှု စစ်ဆေးရန် အတွက် ဇယား
+
+| စံနှုန်းများ | အထူးကောင်းမွန် | လုံလောက်သော | တိုးတက်ရန်လိုအပ် |
+|--------------|----------------|--------------|------------------|
+|              | လိုအပ်ချက်၏ ၁၀% ထက်နည်းသော အပိုင်းများပျက်ကွက် | လိုအပ်ချက်၏ ၂၀% ပျက်ကွက် | လိုအပ်ချက်၏ ၅၀% ပျက်ကွက် |
+
+----
+ကျောင်းသားအစီရင်ခံစာ - ဆိုဒ်၏ ဝင်ရောက်မရနိုင်မှုအခြေအနေကို ဖော်ပြသော စာပိုဒ်များ၊ Lighthouse report ကို pdf အဖြစ် သိမ်းဆည်းထားမှု၊ တိုးတက်စေရန် အချက် ၁၀ ချက်ပါဝင်သော စာရင်းနှင့် တိုးတက်စေရန် အသေးစိတ်နည်းလမ်းများကို ပါဝင်စေရန်လိုအပ်합니다။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/1-getting-started-lessons/README.md b/translations/my/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..4531b226
--- /dev/null
+++ b/translations/my/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-27T22:46:11+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "my"
+}
+-->
+# ဝဘ်ဖွံ့ဖြိုးမှုနှင့် စတင်ခြင်း
+
+ဒီသင်ခန်းစာအပိုင်းမှာ ပရော်ဖက်ရှင်နယ် Developer ဖြစ်ဖို့အတွက် အရေးကြီးတဲ့ Non Project-based အကြောင်းအရာတွေကို မိတ်ဆက်ပေးမှာ ဖြစ်ပါတယ်။
+
+### ခေါင်းစဉ်များ
+
+1. [Programming Languages နဲ့ Tools of the Trade အကြောင်းမိတ်ဆက်](1-intro-to-programming-languages/README.md)
+2. [GitHub အကြောင်းမိတ်ဆက်](2-github-basics/README.md)
+3. [Accessibility အခြေခံများ](3-accessibility/README.md)
+
+### အကျိုးတူ
+
+Programming Languages နဲ့ Tools of the Trade အကြောင်းမိတ်ဆက်ကို [Jasmine Greenaway](https://twitter.com/paladique) မှ ♥️ နဲ့ရေးသားထားပါတယ်။
+
+GitHub အကြောင်းမိတ်ဆက်ကို [Floor Drees](https://twitter.com/floordrees) မှ ♥️ နဲ့ရေးသားထားပါတယ်။
+
+Accessibility အခြေခံများကို [Christopher Harrison](https://twitter.com/geektrainer) မှ ♥️ နဲ့ရေးသားထားပါတယ်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုယူသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/2-js-basics/1-data-types/README.md b/translations/my/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..ee93a0d2
--- /dev/null
+++ b/translations/my/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-27T22:31:44+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "my"
+}
+-->
+# JavaScript အခြေခံ: ဒေတာအမျိုးအစားများ
+
+![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.my.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## မိန့်ခွန်းမပြောမီ စမ်းမေးခွန်း
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+ဒီသင်ခန်းစာမှာ JavaScript အခြေခံများကို လေ့လာပါမယ်။ JavaScript က ဝဘ်ဆိုဒ်မှာ အပြန်အလှန်လုပ်ဆောင်မှုများကို ပေးစွမ်းတဲ့ programming language ဖြစ်ပါတယ်။
+
+> ဒီသင်ခန်းစာကို [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")
+
+> 🎥 အပေါ်ကပုံများကို နှိပ်ပြီး Variables နဲ့ Data Types အကြောင်း ဗီဒီယိုများကို ကြည့်ပါ
+
+Variables နဲ့ ဒေတာအမျိုးအစားများကို စတင်လေ့လာကြပါစို့!
+
+## Variables
+
+Variables ဆိုတာ သင့်ကုဒ်မှာ တန်ဖိုးများကို သိမ်းဆည်းပြီး ပြောင်းလဲအသုံးပြုနိုင်တဲ့ အရာတွေပါ။
+
+Variable တစ်ခုကို ဖန်တီးပြီး **ကြေညာ**ဖို့အတွက် **[keyword] [name]** ဆိုတဲ့ syntax ကို အသုံးပြုရပါတယ်။ ဒါဟာ အောက်ပါ အပိုင်းနှစ်ခုပါဝင်ပါတယ်။
+
+- **Keyword**. Keywords တွေက `let` သို့မဟုတ် `var` ဖြစ်နိုင်ပါတယ်။
+
+✅ ES6 မှာ `let` ဆိုတဲ့ keyword ကို မိတ်ဆက်ခဲ့ပြီး variable ကို _block scope_ ပေးပါတယ်။ `let` ကို `var` ထက် အသုံးပြုဖို့ အကြံပြုပါတယ်။ block scopes အကြောင်းကို နောက်ပိုင်းမှာ ပိုမိုအသေးစိတ်လေ့လာပါမယ်။
+- **Variable name**. Variable name က သင့်ကိုယ်တိုင်ရွေးချယ်ရတဲ့ နာမည်ပါ။
+
+### Task - Variables နဲ့ လုပ်ဆောင်မှု
+
+1. **Variable ကို ကြေညာပါ**. `let` keyword ကို အသုံးပြုပြီး variable ကို ကြေညာပါ:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` ကို `let` keyword ကို အသုံးပြုပြီး ကြေညာပြီးပါပြီ။ အခုတော့ တန်ဖိုးမရှိသေးပါဘူး။
+
+1. **တန်ဖိုးပေးပါ**. `=` operator နဲ့ variable ထဲမှာ တန်ဖိုးကို သိမ်းဆည်းပါ။
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Note: ဒီသင်ခန်းစာမှာ `=` ကို "assignment operator" အနေနဲ့ အသုံးပြုပါတယ်။ ဒါဟာ variable ကို တန်ဖိုးပေးဖို့အတွက် အသုံးပြုတာဖြစ်ပြီး တန်းတူညီမျှမှုကို မဆိုလိုပါဘူး။
+
+   `myVariable` ကို 123 တန်ဖိုးနဲ့ *initialized* လုပ်ပြီးပါပြီ။
+
+1. **Refactor**. သင့်ကုဒ်ကို အောက်ပါ statement နဲ့ အစားထိုးပါ။
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    အထက်ပါကုဒ်ဟာ _explicit initialization_ လို့ခေါ်ပြီး variable ကို ကြေညာပြီး တန်ဖိုးကို တစ်ချိန်တည်းမှာပဲ ပေးထားတာဖြစ်ပါတယ်။
+
+1. **Variable တန်ဖိုးကို ပြောင်းပါ**. Variable တန်ဖိုးကို အောက်ပါနည်းလမ်းနဲ့ ပြောင်းပါ:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Variable ကို ကြေညာပြီးတဲ့နောက်မှာ `=` operator နဲ့ တန်ဖိုးအသစ်ကို သင့်ကုဒ်မှာ အချိန်မရွေး ပြောင်းလဲနိုင်ပါတယ်။
+
+   ✅ စမ်းကြည့်ပါ! သင့် browser မှာ JavaScript ကို ရေးနိုင်ပါတယ်။ Browser window ကို ဖွင့်ပြီး Developer Tools ကို သွားပါ။ Console မှာ prompt တစ်ခုကို တွေ့ပါလိမ့်မယ်။ `let myVariable = 123` လို့ ရိုက်ထည့်ပြီး return ကို နှိပ်ပါ၊ ပြီးရင် `myVariable` ကို ရိုက်ထည့်ပါ။ ဘာဖြစ်သွားလဲ? ဒီ concepts တွေကို နောက်ထပ်သင်ခန်းစာတွေမှာ ပိုမိုလေ့လာပါမယ်။
+
+## Constants
+
+Constant ကို ကြေညာပြီး initialize လုပ်ဖို့အတွက် variable နဲ့ တူညီတဲ့ concept တွေကို လိုအပ်ပါတယ်၊ `const` keyword ကို အသုံးပြုရတာကို မျှော်လင့်ရပါတယ်။ Constants တွေကို အများအားဖြင့် အားလုံး uppercase letter နဲ့ ကြေညာပါတယ်။
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Constants တွေဟာ variable တွေနဲ့ ဆင်တူပါတယ်၊ ဒါပေမယ့် အောက်ပါ အချက်နှစ်ခုကွာခြားပါတယ်။
+
+- **တန်ဖိုးရှိရမယ်**. Constants တွေကို initialize မလုပ်ရင် error ဖြစ်ပေါ်နိုင်ပါတယ်။
+- **Reference ကို မပြောင်းလဲနိုင်ပါ**. Constant ကို initialize လုပ်ပြီးတဲ့နောက်မှာ reference ကို ပြောင်းလဲမရပါဘူး၊ error ဖြစ်ပေါ်နိုင်ပါတယ်။ အောက်ပါ ဥပမာနှစ်ခုကို ကြည့်ပါ:
+   - **ရိုးရှင်းတဲ့တန်ဖိုး**. အောက်ပါအရာကို မလုပ်နိုင်ပါ:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Object reference ကို ကာကွယ်ထားပါတယ်**. အောက်ပါအရာကို မလုပ်နိုင်ပါ:
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Object value ကို မကာကွယ်ထားပါ**. အောက်ပါအရာကို လုပ်နိုင်ပါတယ်:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      အထက်ပါမှာ object ရဲ့ value ကို ပြောင်းလဲထားတာဖြစ်ပြီး reference ကို မပြောင်းလဲထားတာကြောင့် လုပ်နိုင်ပါတယ်။
+
+   > Note, `const` ဆိုတာ reference ကို ပြောင်းလဲမှုမှ ကာကွယ်ပေးတာဖြစ်ပါတယ်။ ဒါပေမယ့် value ကို _immutable_ မဟုတ်ပါဘူး၊ အထူးသဖြင့် object လိုမျိုး ရှုပ်ထွေးတဲ့ construct တွေမှာ value ကို ပြောင်းလဲနိုင်ပါတယ်။
+
+## ဒေတာအမျိုးအစားများ
+
+Variables တွေဟာ နံပါတ်တွေ၊ စာသားတွေလိုမျိုး အမျိုးမျိုးသော တန်ဖိုးများကို သိမ်းဆည်းနိုင်ပါတယ်။ ဒီတန်ဖိုးအမျိုးအစားတွေကို **data type** လို့ခေါ်ပါတယ်။ ဒေတာအမျိုးအစားတွေဟာ software development မှာ အရေးကြီးပါတယ်၊ အကြောင်းက developer တွေကို ကုဒ်ရေးနည်းနဲ့ software ရှေ့ဆောင်ပုံကို ဆုံးဖြတ်နိုင်စေပါတယ်။ ထို့အပြင် ဒေတာအမျိုးအစားတချို့မှာ တန်ဖိုးထဲက အချက်အလက်တွေကို ပြောင်းလဲဖို့ သို့မဟုတ် ထုတ်ယူဖို့ အထူးလက္ခဏာတွေ ပါဝင်ပါတယ်။
+
+✅ ဒေတာအမျိုးအစားတွေကို JavaScript data primitives လို့လည်း ခေါ်ပါတယ်၊ ဒါဟာ language မှပေးထားတဲ့ အနိမ့်ဆုံးအဆင့် ဒေတာအမျိုးအစားတွေဖြစ်ပါတယ်။ Primitive data types ၇ မျိုးရှိပါတယ်: string, number, bigint, boolean, undefined, null, symbol. ဒီ primitives တစ်ခုချင်းစီက ဘာကို ကိုယ်စားပြုနိုင်မလဲဆိုတာ စဉ်းစားကြည့်ပါ။ `zebra` ဆိုတာဘာလဲ? `0` ကော? `true` ကော?
+
+### Numbers
+
+အရင်ပိုင်းက `myVariable` ရဲ့ value ဟာ number data type ဖြစ်ပါတယ်။
+
+`let myVariable = 123;`
+
+Variables တွေဟာ decimal နဲ့ negative numbers အပါအဝင် နံပါတ်အမျိုးမျိုးကို သိမ်းဆည်းနိုင်ပါတယ်။ Numbers တွေကို arithmetic operators တွေနဲ့လည်း အသုံးပြုနိုင်ပါတယ်၊ [နောက်ပိုင်းအပိုင်း](../../../../2-js-basics/1-data-types) မှာ လေ့လာပါမယ်။
+
+### Arithmetic Operators
+
+Arithmetic function တွေကို လုပ်ဆောင်ဖို့ operator အမျိုးမျိုးရှိပြီး အချို့ကို အောက်မှာ ဖော်ပြထားပါတယ်:
+
+| Symbol | ဖော်ပြချက်                                                               | ဥပမာ                           |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **Addition**: နံပါတ်နှစ်ခုရဲ့ စုစုပေါင်းကို တွက်ချက်သည်                 | `1 + 2 //expected answer is 3`   |
+| `-`    | **Subtraction**: နံပါတ်နှစ်ခုရဲ့ ကွာခြားချက်ကို တွက်ချက်သည်             | `1 - 2 //expected answer is -1`  |
+| `*`    | **Multiplication**: နံပါတ်နှစ်ခုရဲ့ ထုတ်ကုန်ကို တွက်ချက်သည်             | `1 * 2 //expected answer is 2`   |
+| `/`    | **Division**: နံပါတ်နှစ်ခုရဲ့ မျှဝေချက်ကို တွက်ချက်သည်                 | `1 / 2 //expected answer is 0.5` |
+| `%`    | **Remainder**: နံပါတ်နှစ်ခုကို မျှဝေပြီး ကျန်ရှိသော တန်ဖိုးကို တွက်ချက်သည် | `1 % 2 //expected answer is 1`   |
+
+✅ စမ်းကြည့်ပါ! Browser console မှာ arithmetic operation တစ်ခုကို စမ်းကြည့်ပါ။ ရလဒ်တွေက သင့်ကို အံ့ဩစေပါသလား?
+
+### Strings
+
+Strings ဆိုတာ single quotes သို့မဟုတ် double quotes ကြားမှာ ရှိတဲ့ စာလုံးများဖြစ်ပါတယ်။
+
+- `'This is a string'`
+- `"This is also a string"`
+- `let myString = 'This is a string value stored in a variable';`
+
+String ရေးတဲ့အခါ quotes ကို အသုံးပြုဖို့ မမေ့ပါနဲ့၊ မဟုတ်ရင် JavaScript က variable name လို့ ထင်နိုင်ပါတယ်။
+
+### Formatting Strings
+
+Strings တွေဟာ စာသားဖြစ်ပြီး အချိန်အခါတစ်ချို့မှာ format လုပ်ဖို့ လိုအပ်နိုင်ပါတယ်။
+
+Strings နှစ်ခု သို့မဟုတ် အများကြီးကို **concatenate** လုပ်ဖို့ `+` operator ကို အသုံးပြုပါ။
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ ဘာကြောင့် JavaScript မှာ `1 + 1 = 2` ဖြစ်ပြီး `'1' + '1' = 11` ဖြစ်တာလဲ? စဉ်းစားကြည့်ပါ။ `'1' + 1` ကော?
+
+**Template literals** ဆိုတာ strings ကို format လုပ်ဖို့ နောက်ထပ်နည်းလမ်းတစ်ခုဖြစ်ပြီး quotes အစား backtick ကို အသုံးပြုပါတယ်။ Plain text မဟုတ်တဲ့ အရာအားလုံးကို `${ }` placeholder ထဲမှာ ထည့်ရပါမယ်။ ဒါမှာ string ဖြစ်နိုင်တဲ့ variable တွေပါဝင်ပါတယ်။
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+သင့်ရဲ့ formatting ရည်ရွယ်ချက်တွေကို နည်းလမ်းနှစ်ခုလုံးနဲ့ ရနိုင်ပါတယ်၊ ဒါပေမယ့် template literals က spaces နဲ့ line breaks ကို လေးစားပေးပါမယ်။
+
+✅ Template literal ကို ဘယ်အချိန်မှာ အသုံးပြုမလဲ၊ plain string ကို ဘယ်အချိန်မှာ အသုံးပြုမလဲ?
+
+### Booleans
+
+Booleans တွေဟာ `true` သို့မဟုတ် `false` ဆိုတဲ့ တန်ဖိုးနှစ်ခုသာ ရှိနိုင်ပါတယ်။ Booleans တွေက အခြေအနေတစ်ခုခုကို ဖြည့်ဆည်းတဲ့အခါ ဘယ်လိုကုဒ်တွေကို run လုပ်မလဲဆိုတာ ဆုံးဖြတ်နိုင်စေပါတယ်။ အများအားဖြင့် [operators](../../../../2-js-basics/1-data-types) တွေက Boolean တန်ဖိုးကို သတ်မှတ်ဖို့ အကူအညီပေးပြီး variable တွေကို initialize လုပ်တာ သို့မဟုတ် value ကို update လုပ်တာတွေကို မကြာခဏ တွေ့ရပါမယ်။
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Variable တစ်ခုကို boolean `true` အဖြစ် သတ်မှတ်နိုင်ရင် 'truthy' ဖြစ်တယ်လို့ ဆိုနိုင်ပါတယ်။ အံ့ဩစရာက JavaScript မှာ [falsy အဖြစ် သတ်မှတ်ထားတဲ့ value များအပြင် value အားလုံးကို truthy ဖြစ်တယ်](https://developer.mozilla.org/docs/Glossary/Truthy) လို့ သတ်မှတ်ပါတယ်။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+JavaScript ဟာ တစ်ခါတစ်လေ ဒေတာအမျိုးအစားတွေကို handle လုပ်တဲ့နည်းလမ်းတွေကြောင့် အံ့ဩစရာများဖြစ်တတ်ပါတယ်။ ဒီ 'gotchas' တွေကို သုတေသနလုပ်ကြည့်ပါ။ ဥပမာ - case sensitivity က အခက်အခဲဖြစ်နိုင်ပါတယ်! Console မှာ ဒီလိုစမ်းကြည့်ပါ: `let age = 1; let Age = 2; age == Age` (ရလဒ် `false` -- ဘာကြောင့်လဲ?) အခြား gotchas တွေကို ရှာဖွေကြည့်ပါ။
+
+## မိန့်ခွန်းပြီးနောက် စမ်းမေးခွန်း
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+[JavaScript exercises](https://css-tricks.com/snippets/javascript/) စာရင်းကို ကြည့်ပြီး တစ်ခုကို စမ်းကြည့်ပါ။ ဘာတွေ သင်ယူနိုင်ခဲ့လဲ?
+
+## အိမ်စာ
+
+[Data Types Practice](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှုမှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/2-js-basics/1-data-types/assignment.md b/translations/my/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..344fa0bd
--- /dev/null
+++ b/translations/my/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-27T22:32:23+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "my"
+}
+-->
+# ဒေတာအမျိုးအစားများ လေ့ကျင့်မှု
+
+## ညွှန်ကြားချက်များ
+
+သင်သည် စျေးဝယ်လှည်းတစ်ခု တည်ဆောက်နေသည်ဟု စဉ်းစားပါ။ သင့် စျေးဝယ်အတွေ့အကြုံကို ပြည့်စုံစေရန် လိုအပ်မည့် ဒေတာအမျိုးအစားများအကြောင်း စာရွက်စာတမ်းရေးပါ။ သင့်ရွေးချယ်မှုများကို မည်သို့ ရောက်ရှိခဲ့သည်ကို ရှင်းပြပါ။
+
+## အကဲဖြတ်စံနှုန်း
+
+စံနှုန်း | ထူးချွန်မှု | လုံလောက်မှု | တိုးတက်မှု လိုအပ်မှု
+--- | --- | --- | --- |
+||ဒေတာအမျိုးအစားခြောက်မျိုးကို စာရင်းပြုစုပြီး အသုံးပြုမှုကို အသေးစိတ် ရှင်းပြထားသည်|ဒေတာအမျိုးအစားလေးမျိုးကို ရှင်းပြထားသည်|ဒေတာအမျိုးအစားနှစ်မျိုးကိုသာ ရှင်းပြထားသည်|
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/2-js-basics/2-functions-methods/README.md b/translations/my/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..4bda2b33
--- /dev/null
+++ b/translations/my/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,196 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-27T22:28:44+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "my"
+}
+-->
+# JavaScript အခြေခံ: Methods နှင့် Functions
+
+![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.my.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## မိန့်ခွန်းမပြောမီ စမ်းမေးခွန်း
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+ကိုယ်ရေးသားတဲ့ကုဒ်ကို စဉ်ဆက်မပြတ်ဖတ်ရလွယ်အောင်လုပ်ဖို့ Developer တစ်ဦးအနေနဲ့ အမြဲလိုအပ်ပါတယ်။ ကုဒ်ကိုရေးတာထက် ဖတ်တာပိုများတယ်ဆိုတာ အနည်းငယ်ဆန့်ကျင်ဘက်ဖြစ်ပေမယ့် အမှန်တရားပါ။ **Function** ဆိုတာကတော့ Developer တွေရဲ့ ကုဒ်ကို ထိန်းသိမ်းဖို့အတွက် အရေးကြီးတဲ့ Tools တစ်ခုဖြစ်ပါတယ်။
+
+[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
+
+> 🎥 အထက်ကပုံကိုနှိပ်ပြီး methods နဲ့ functions အကြောင်း ဗီဒီယိုကြည့်ပါ။
+
+> ဒီသင်ခန်းစာကို [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) မှာလည်း လေ့လာနိုင်ပါတယ်။
+
+## Functions
+
+Function ဆိုတာက အဓိကအားဖြင့် လိုအပ်တဲ့အချိန်မှာ ပြန်ခေါ်သုံးနိုင်တဲ့ ကုဒ်တစ်ပိုင်းဖြစ်ပါတယ်။ တစ်ခုတည်းသောအလုပ်ကို မကြိမ်ကြိမ်လုပ်ဖို့လိုတဲ့အခါမှာ Function က အလွန်အသုံးဝင်ပါတယ်။ Function ကိုတစ်နေရာတည်းမှာ စုစည်းထားပြီး လိုအပ်တဲ့အချိန်မှာ ခေါ်သုံးနိုင်ပါတယ်။ Function တစ်ခုက Function တစ်ခုကိုပါ ခေါ်သုံးနိုင်ပါတယ်။
+
+Function ကိုအမည်ပေးနိုင်ခြင်းလည်း အရေးကြီးပါတယ်။ Function အမည်က ကုဒ်တစ်ပိုင်းကို အလွယ်တကူ နားလည်နိုင်စေပါတယ်။ ဥပမာ - "Cancel timer" ဆိုတဲ့ Button ကိုနှိပ်လိုက်ရင် Timer ရပ်မယ်ဆိုတာ သိနိုင်ပါတယ်။
+
+## Function တစ်ခုကို ဖန်တီးခြင်းနှင့် ခေါ်သုံးခြင်း
+
+Function ရဲ့ Syntax က အောက်ပါအတိုင်းဖြစ်ပါတယ်-
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Greeting ပြသဖို့ Function တစ်ခု ဖန်တီးချင်တယ်ဆိုရင်-
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Function ကိုခေါ်သုံးချင်တဲ့အခါမှာ Function နာမည်နဲ့ `()` ကိုသုံးရပါတယ်။ Function ကို ဖန်တီးထားတဲ့နေရာက အစဉ်အတိုင်းမဟုတ်ရင်တောင် JavaScript Compiler က Function ကိုရှာပေးပါလိမ့်မယ်။
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Function ရဲ့ အထူးအမျိုးအစားတစ်ခုကို **Method** လို့ခေါ်ပါတယ်။ ဥပမာ - `console.log` ကို သုံးတဲ့အခါမှာ Method ကိုသုံးနေပါတယ်။ Method က Object တစ်ခု (`console`) နဲ့ ပတ်သက်ပြီးရှိတာဖြစ်ပြီး Function ကတော့ လွတ်လပ်ပါတယ်။ Developer အများစုက Method နဲ့ Function ဆိုတာကို အလွယ်တကူ အစားထိုးသုံးတတ်ကြပါတယ်။
+
+### Function ဖန်တီးရာမှာ အကောင်းဆုံးအကြံပြုချက်များ
+
+Function ဖန်တီးရာမှာ အောက်ပါအချက်များကို သတိပြုပါ-
+
+- အမြဲတမ်း ဖော်ပြချက်ပေးတဲ့ နာမည်များကို သုံးပါ။
+- စကားလုံးများကို ပေါင်းစပ်ရာမှာ **camelCasing** ကိုသုံးပါ။
+- Function တစ်ခုကို အထူးအလုပ်တစ်ခုအတွက်သာ အာရုံစိုက်ပါ။
+
+## Function ကို အချက်အလက်များဖြင့် ဖြည့်စွက်ခြင်း
+
+Function တစ်ခုကို ပိုမိုအသုံးဝင်စေဖို့ အချက်အလက်များ (parameters) ကို ဖြည့်စွက်နိုင်ပါတယ်။ ဥပမာ - `displayGreeting` Function က **Hello, world!** ကိုသာ ပြသနိုင်ပါတယ်။ Function ကို ပိုမိုပြောင်းလွယ်ပြုလွယ်စေဖို့ အမည်တစ်ခုကို parameter အနေနဲ့ ထည့်သွင်းနိုင်ပါတယ်။
+
+Parameter တွေကို Function ရဲ့ parenthesis အတွင်းမှာ comma ဖြင့် ခွဲပြီး သတ်မှတ်ရပါတယ်-
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+`displayGreeting` Function ကို အမည်တစ်ခုကို parameter အနေနဲ့ ထည့်သွင်းပြီး ပြောင်းလဲနိုင်ပါတယ်။
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Function ကိုခေါ်သုံးတဲ့အခါမှာ parameter ကို parenthesis အတွင်းမှာ သတ်မှတ်ရပါတယ်။
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Default values
+
+Function ကို ပိုမိုပြောင်းလွယ်ပြုလွယ်စေဖို့ parameter တွေကို ပိုထည့်နိုင်ပါတယ်။ သို့သော် parameter တစ်ခုချင်းစီကို မလိုအပ်လျှင် Default Value ကို သတ်မှတ်နိုင်ပါတယ်။ ဥပမာ - Greeting ကို Default Value အဖြစ် သတ်မှတ်နိုင်ပါတယ်။
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Function ကိုခေါ်သုံးတဲ့အခါမှာ `salutation` ကို သတ်မှတ်မလား မသတ်မှတ်ဘူးဆိုတာ ဆုံးဖြတ်နိုင်ပါတယ်။
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Return values
+
+ယခင် Function တွေက console မှာ output ပြသဖို့သာ ရည်ရွယ်ထားပါတယ်။ သို့သော် Calculation လုပ်ပြီး အဖြေကို ပြန်ပေးစေချင်ရင် **return value** ကို သုံးနိုင်ပါတယ်။
+
+Function တစ်ခုက value တစ်ခုကို return လုပ်မယ်ဆိုရင် `return` keyword ကို သုံးရပါတယ်။
+
+```javascript
+return myVariable;
+```  
+
+Greeting message တစ်ခုကို ဖန်တီးပြီး value ကို ပြန်ပေးတဲ့ Function တစ်ခုကို ဖန်တီးနိုင်ပါတယ်။
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Function ကိုခေါ်သုံးတဲ့အခါမှာ value ကို variable တစ်ခုထဲမှာ သိမ်းဆည်းနိုင်ပါတယ်။
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Functions as parameters for functions
+
+Programming လောကမှာ Function တစ်ခုကို Function တစ်ခုရဲ့ parameter အဖြစ် သုံးရတဲ့အခါတွေ ရှိတတ်ပါတယ်။ ဥပမာ - [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) က Timer တစ်ခုကို စတင်ပြီး အချိန်ကုန်လို့ ပြီးဆုံးတဲ့အခါမှာ Function တစ်ခုကို ခေါ်သုံးစေပါတယ်။
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Anonymous functions
+
+Function တစ်ခုကို တစ်ကြိမ်သာ သုံးမယ်ဆိုရင် အမည်မပေးဘဲ Anonymous Function အဖြစ် ဖန်တီးနိုင်ပါတယ်။
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Fat arrow functions
+
+JavaScript မှာ `=>` ကို သုံးပြီး Fat Arrow Function ကို ဖန်တီးနိုင်ပါတယ်။ 
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### ဘယ်အခါမှာ ဘယ်နည်းကို သုံးမလဲ
+
+Function ကို တစ်ကြိမ်ထက်ပိုသုံးမယ်ဆိုရင် ပုံမှန် Function အဖြစ် ဖန်တီးပါ။ တစ်နေရာတည်းမှာသာ သုံးမယ်ဆိုရင် Anonymous Function သုံးပါ။ Fat Arrow Function သို့မဟုတ် ပုံမှန် Syntax ကို သုံးမယ်ဆိုတာ သင့်ရွေးချယ်မှုပါ။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+Function နဲ့ Method တို့ရဲ့ ကွာခြားချက်ကို စာကြောင်းတစ်ကြောင်းနဲ့ ရှင်းပြနိုင်မလား? ကြိုးစားကြည့်ပါ။
+
+## မိန့်ခွန်းပြီးနောက် စမ်းမေးခွန်း
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+[Arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) အကြောင်း ပိုမိုလေ့လာဖို့ တန်ဖိုးရှိပါတယ်။ Function တစ်ခုကိုရေးပြီး Arrow Function နဲ့ ပြန်ရေးကြည့်ပါ။
+
+## လုပ်ငန်းတာဝန်
+
+[Fun with Functions](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/2-js-basics/2-functions-methods/assignment.md b/translations/my/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..265e436d
--- /dev/null
+++ b/translations/my/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-27T22:29:18+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "my"
+}
+-->
+# အလုပ်လုပ်ဖို့ Functions
+
+## လမ်းညွှန်ချက်များ
+
+အမျိုးမျိုးသော functions များဖန်တီးပါ၊ return ပြန်ပေးသော functions များနှင့် return မပြန်ပေးသော functions များပါဝင်စေပါ။
+
+parameters များနှင့် default values ပါသော parameters များပေါင်းစပ်ထားသော function တစ်ခုဖန်တီးနိုင်မလားစမ်းကြည့်ပါ။
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သောအဆင့်                                                                 | လုံလောက်သောအဆင့်                                              | တိုးတက်မှုလိုအပ်သောအဆင့် |
+| ---------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------- |
+|            | အမျိုးမျိုးသော parameters များပါဝင်သော အလုပ်လုပ်စွမ်းကောင်းသော functions နှစ်ခု သို့မဟုတ် အများကြီးပါဝင်သည် | အလုပ်လုပ်စွမ်းကောင်းသော function တစ်ခုနှင့် parameters အနည်းငယ်ပါဝင်သည် | Solution တွင်အမှားများရှိသည် |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/2-js-basics/3-making-decisions/README.md b/translations/my/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..12545576
--- /dev/null
+++ b/translations/my/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-27T22:29:48+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "my"
+}
+-->
+# JavaScript အခြေခံများ: ဆုံးဖြတ်ချက်များချခြင်း
+
+![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.my.png)
+
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## မိန့်ခွန်းမတင်မီ စမ်းမေးခွန်း
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+ဆုံးဖြတ်ချက်များချခြင်းနှင့် သင့်ကုဒ်ကို အစီအစဉ်တကျ လည်ပတ်စေခြင်းသည် သင့်ကုဒ်ကို ပြန်လည်အသုံးပြုနိုင်စေပြီး ခိုင်မာစေပါသည်။ ဤအပိုင်းတွင် JavaScript တွင် ဒေတာလှည့်ပတ်မှုကို ထိန်းချုပ်ရန် syntax နှင့် Boolean ဒေတာအမျိုးအစားများနှင့် တွဲဖက်အသုံးပြုသောအခါ ၎င်း၏ အရေးပါမှုကို ဖော်ပြထားသည်။
+
+[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
+
+> 🎥 အထက်ပါပုံကို နှိပ်ပြီး ဆုံးဖြတ်ချက်များချခြင်းအကြောင်း ဗီဒီယိုကို ကြည့်ပါ။
+
+> ဤသင်ခန်းစာကို [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) တွင်လည်း လေ့လာနိုင်ပါသည်။
+
+## Boolean များအကြောင်း အကျဉ်းချုပ်
+
+Boolean များတွင် `true` သို့မဟုတ် `false` ဆိုသော တန်ဖိုးနှစ်ခုသာ ရှိနိုင်သည်။ Boolean များသည် အခြေအနေတစ်ခုခုဖြင့် သတ်မှတ်ထားသောအခါ သင့်ကုဒ်၏ ဘယ်လိုလိုင်းများကို လည်ပတ်စေမည်ကို ဆုံးဖြတ်ရန် အထောက်အကူပြုသည်။
+
+သင့် Boolean ကို `true` သို့မဟုတ် `false` အဖြစ် သတ်မှတ်ပါ-
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Boolean များကို အင်္ဂလိပ် သင်္ချာပညာရှင်၊ အတွေးအခေါ်ပညာရှင်နှင့် သီအိုရီပညာရှင် George Boole (1815–1864) ၏ နာမည်မှ ဆောင်ယူထားသည်။
+
+## နှိုင်းယှဉ်မှု Operator များနှင့် Boolean များ
+
+Operator များကို အခြေအနေများကို နှိုင်းယှဉ်ရန် အသုံးပြုပြီး Boolean တန်ဖိုးတစ်ခုကို ဖန်တီးသည်။ အောက်တွင် မကြာခဏ အသုံးပြုသော Operator များစာရင်းကို ဖော်ပြထားသည်။
+
+| သင်္ကေတ | ဖော်ပြချက်                                                                                                                                                   | ဥပမာ               |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **နည်းသော**: တန်ဖိုးနှစ်ခုကို နှိုင်းယှဉ်ပြီး ဘယ်ဘက်တန်ဖိုးသည် ညာဘက်ထက် နည်းသောအခါ `true` Boolean တန်ဖိုးကို ပြန်ပေးသည်                              | `5 < 6 // true`    |
+| `<=`   | **နည်းသော်လည်း ညီမျှသော**: တန်ဖိုးနှစ်ခုကို နှိုင်းယှဉ်ပြီး ဘယ်ဘက်တန်ဖိုးသည် ညာဘက်ထက် နည်းသော်လည်း ညီမျှသောအခါ `true` Boolean တန်ဖိုးကို ပြန်ပေးသည်      | `5 <= 6 // true`   |
+| `>`    | **ကြီးသော**: တန်ဖိုးနှစ်ခုကို နှိုင်းယှဉ်ပြီး ဘယ်ဘက်တန်ဖိုးသည် ညာဘက်ထက် ကြီးသောအခါ `true` Boolean တန်ဖိုးကို ပြန်ပေးသည်                         | `5 > 6 // false`   |
+| `>=`   | **ကြီးသော်လည်း ညီမျှသော**: တန်ဖိုးနှစ်ခုကို နှိုင်းယှဉ်ပြီး ဘယ်ဘက်တန်ဖိုးသည် ညာဘက်ထက် ကြီးသော်လည်း ညီမျှသောအခါ `true` Boolean တန်ဖိုးကို ပြန်ပေးသည် | `5 >= 6 // false`  |
+| `===`  | **တိကျသော ညီမျှမှု**: တန်ဖိုးနှစ်ခုကို နှိုင်းယှဉ်ပြီး ဘယ်ဘက်နှင့် ညာဘက်တန်ဖိုးများသည် တူညီပြီး ဒေတာအမျိုးအစားလည်း တူညီသောအခါ `true` Boolean တန်ဖိုးကို ပြန်ပေးသည် | `5 === 6 // false` |
+| `!==`  | **မညီမျှမှု**: တန်ဖိုးနှစ်ခုကို နှိုင်းယှဉ်ပြီး တိကျသော ညီမျှမှု operator ၏ ဆန့်ကျင်ဘက် Boolean တန်ဖိုးကို ပြန်ပေးသည်                                    | `5 !== 6 // true`  |
+
+✅ သင့် browser ၏ console တွင် နှိုင်းယှဉ်မှုအချို့ကို ရေးသားပြီး သင့်အသိပညာကို စစ်ဆေးပါ။ ပြန်လာသောဒေတာများထဲတွင် အံ့အားသင့်စရာတစ်ခုခု ရှိပါသလား?
+
+## If Statement
+
+`if` statement သည် အခြေအနေတစ်ခု `true` ဖြစ်ပါက ၎င်း၏ block များအတွင်းရှိကုဒ်ကို လည်ပတ်စေပါသည်။
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+အခြေအနေဖွဲ့စည်းရာတွင် Logical operator များကို မကြာခဏ အသုံးပြုသည်။
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+}
+```
+
+## If..Else Statement
+
+`else` statement သည် အခြေအနေတစ်ခု `false` ဖြစ်ပါက ၎င်း၏ block များအတွင်းရှိကုဒ်ကို လည်ပတ်စေပါသည်။ ၎င်းသည် `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!");
+}
+```
+
+✅ ဤကုဒ်နှင့် အောက်ပါကုဒ်ကို browser console တွင် လည်ပတ်စေပြီး သင့်နားလည်မှုကို စမ်းသပ်ပါ။ `currentMoney` နှင့် `laptopPrice` variable များ၏ တန်ဖိုးများကို ပြောင်းလဲပြီး `console.log()` ၏ output ကို ပြောင်းလဲကြည့်ပါ။
+
+## Switch Statement
+
+`switch` statement သည် အခြေအနေအမျိုးမျိုးအပေါ် မူတည်၍ ကွဲပြားသော လုပ်ဆောင်မှုများကို ပြုလုပ်ရန် အသုံးပြုသည်။ `switch` statement ကို အသုံးပြု၍ လည်ပတ်စေလိုသော code block တစ်ခုကို ရွေးချယ်ပါ။
+
+```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}`);
+```
+
+✅ ဤကုဒ်နှင့် အောက်ပါကုဒ်ကို browser console တွင် လည်ပတ်စေပြီး သင့်နားလည်မှုကို စမ်းသပ်ပါ။ `a` variable ၏ တန်ဖိုးကို ပြောင်းလဲပြီး `console.log()` ၏ output ကို ပြောင်းလဲကြည့်ပါ။
+
+## Logical Operator များနှင့် Boolean များ
+
+ဆုံးဖြတ်ချက်များသည် တစ်ခုထက်ပိုသော နှိုင်းယှဉ်မှုများလိုအပ်နိုင်ပြီး Logical operator များဖြင့် string တစ်ခုအဖြစ် ပေါင်းစပ်၍ Boolean တန်ဖိုးတစ်ခုကို ဖန်တီးနိုင်သည်။
+
+| သင်္ကေတ | ဖော်ပြချက်                                                                                     | ဥပမာ                                                                 |
+| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **Logical AND**: Boolean အထုတ်ဖော်ချက်နှစ်ခုကို နှိုင်းယှဉ်သည်။ နှစ်ဖက်လုံး `true` ဖြစ်ပါကသာ `true` ကို ပြန်ပေးသည် | `(5 > 6) && (5 < 6 ) //တစ်ဖက် false, တစ်ဖက် true. false ကို ပြန်ပေးသည်` |
+| `\|\|` | **Logical OR**: Boolean အထုတ်ဖော်ချက်နှစ်ခုကို နှိုင်းယှဉ်သည်။ အနည်းဆုံးတစ်ဖက် `true` ဖြစ်ပါက `true` ကို ပြန်ပေးသည်     | `(5 > 6) \|\| (5 < 6) //တစ်ဖက် false, တစ်ဖက် true. true ကို ပြန်ပေးသည်` |
+| `!`    | **Logical NOT**: Boolean အထုတ်ဖော်ချက်၏ ဆန့်ကျင်ဘက်တန်ဖိုးကို ပြန်ပေးသည်                             | `!(5 > 6) // 5 သည် 6 ထက် ကြီးမဟုတ်သော်လည်း "!" သည် true ကို ပြန်ပေးသည်`         |
+
+## Logical Operator များဖြင့် အခြေအနေများနှင့် ဆုံးဖြတ်ချက်များ
+
+Logical operator များကို `if..else` statement များတွင် အခြေအနေဖွဲ့စည်းရန် အသုံးပြုနိုင်သည်။
+
+```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
+
+ယခင်တွင် သင်သည် `if...else` statement ကို အသုံးပြု၍ conditional logic ဖန်တီးနိုင်ကြောင်း မြင်ခဲ့ပါသည်။ `if` အတွင်းသို့ ဝင်သောအရာအားလုံးသည် `true/false` အဖြစ် အကဲဖြတ်ရမည်ဖြစ်သည်။ `!` operator ကို အသုံးပြု၍ အထုတ်ဖော်ချက်ကို _ဆန့်ကျင်_ ပြုလုပ်နိုင်သည်။ ၎င်းသည် အောက်ပါအတိုင်း ဖြစ်ပါမည်-
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Ternary expressions
+
+`if...else` သည် ဆုံးဖြတ်ချက် logic ကို ဖော်ပြရန် တစ်ခုတည်းသော နည်းလမ်းမဟုတ်ပါ။ သင်သည် ternary operator ဟုခေါ်သော အရာတစ်ခုကိုလည်း အသုံးပြုနိုင်သည်။ ၎င်း၏ syntax သည် အောက်ပါအတိုင်း ဖြစ်ပါသည်-
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+အောက်တွင် ပိုမိုလက်တွေ့ကျသော ဥပမာတစ်ခုကို ဖော်ပြထားသည်-
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ ဤကုဒ်ကို အချိန်ယူဖတ်ပါ။ Operator များသည် ဘယ်လို လည်ပတ်နေသည်ကို နားလည်ပါသလား?
+
+အထက်ပါကုဒ်သည်-
+
+- `firstNumber` သည် `secondNumber` ထက် ကြီးပါက  
+- `firstNumber` ကို `biggestNumber` သို့ သတ်မှတ်ပါ  
+- မဟုတ်ပါက `secondNumber` ကို သတ်မှတ်ပါ။
+
+Ternary expression သည် အောက်ပါကုဒ်ကို ရေးသားရန် အကျဉ်းချုပ်နည်းလမ်းသာဖြစ်သည်-
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+Logical operator များကို အသုံးပြု၍ ရေးသားထားသော အစီအစဉ်တစ်ခုကို ဖန်တီးပါ၊ ထို့နောက် ၎င်းကို ternary expression အသုံးပြု၍ ပြန်ရေးပါ။ သင့်အကြိုက်ဆုံး syntax သည် ဘယ်ဟာလဲ?
+
+---
+
+## မိန့်ခွန်းပြီးနောက် စမ်းမေးခွန်း
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+အသုံးပြုသူအတွက် ရရှိနိုင်သော operator များစွာအကြောင်းကို [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators) တွင် ဖတ်ရှုပါ။
+
+Josh Comeau ၏ အံ့သြဖွယ် [operator lookup](https://joshwcomeau.com/operator-lookup/) ကို လေ့လာပါ!
+
+## လုပ်ငန်းတာဝန်
+
+[Operators](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/2-js-basics/3-making-decisions/assignment.md b/translations/my/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..86bb4cc8
--- /dev/null
+++ b/translations/my/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-27T22:30:36+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "my"
+}
+-->
+# အော်ပရေတာများ
+
+## လမ်းညွှန်ချက်များ
+
+အော်ပရေတာများကို လေ့ကျင့်ကြည့်ပါ။ အောက်ပါအတိုင်း အစီအစဉ်တစ်ခုကို ရေးဆွဲနိုင်ပါတယ်။
+
+သင်တွင် အဆင့်သတ်မှတ်မှုစနစ်နှစ်မျိုးမှ ကျောင်းသားအုပ်စုတစ်ခုရှိသည်။
+
+### ပထမအဆင့်သတ်မှတ်မှုစနစ်
+
+အဆင့်သတ်မှတ်မှုစနစ်တစ်ခုမှာ ၁-၅ အတွင်းရှိပြီး ၃ နှင့်အထက်ဆိုပါက သင်တန်းကို အောင်မြင်သည်ဟု ဆိုနိုင်သည်။
+
+### ဒုတိယအဆင့်သတ်မှတ်မှုစနစ်
+
+အခြားအဆင့်သတ်မှတ်မှုစနစ်မှာ `A, A-, B, B-, C, C-` အဆင့်များဖြစ်ပြီး `A` သည် အမြင့်ဆုံးအဆင့်ဖြစ်ပြီး `C` သည် အောင်မြင်သော အနိမ့်ဆုံးအဆင့်ဖြစ်သည်။
+
+### လုပ်ငန်းတာဝန်
+
+`allStudents` ဟုခေါ်သော ကျောင်းသားများအားလုံးနှင့် သူတို့၏အဆင့်များကို ကိုယ်စားပြုသော အောက်ပါ array ကို ပေးထားသည်။ သင်တန်းအောင်မြင်သော ကျောင်းသားများအားလုံးပါဝင်သည့် `studentsWhoPass` ဟုခေါ်သော array အသစ်တစ်ခုကို ဖန်တီးပါ။
+
+> TIP, for-loop နှင့် if...else နှင့် comparison operators ကို အသုံးပြုပါ:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## အကဲဖြတ်စနစ်
+
+| စံချိန် | ထူးချွန်သောအခြေအနေ         | လုံလောက်သောအခြေအနေ         | တိုးတက်မှုလိုအပ်သောအခြေအနေ   |
+| ------- | ----------------------------- | ----------------------------- | ------------------------------- |
+|         | ပြည့်စုံသောဖြေရှင်းချက်ကို တင်ပြထားသည် | အစိတ်အပိုင်းဖြေရှင်းချက်ကို တင်ပြထားသည် | အမှားများပါဝင်သော ဖြေရှင်းချက်ကို တင်ပြထားသည် |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/2-js-basics/4-arrays-loops/README.md b/translations/my/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..9f80bae7
--- /dev/null
+++ b/translations/my/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-27T22:32:51+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "my"
+}
+-->
+# JavaScript အခြေခံ: Arrays နှင့် Loops
+
+![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.my.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## မိန့်ခွန်းမပြောမီ Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+ဒီသင်ခန်းစာမှာ JavaScript အခြေခံများကို လေ့လာပါမည်။ JavaScript သည် ဝဘ်ပေါ်တွင် အပြန်အလှန်လုပ်ဆောင်မှုများကို ပေးစွမ်းသော ဘာသာစကားဖြစ်သည်။ ဒီသင်ခန်းစာတွင် သင်သည် ဒေတာများကို စီမံခန့်ခွဲရန် အသုံးပြုသော arrays နှင့် loops အကြောင်းကို လေ့လာပါမည်။
+
+[![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")
+
+> 🎥 အထက်ရှိပုံများကို နှိပ်ပြီး arrays နှင့် loops အကြောင်း ဗီဒီယိုများကို ကြည့်ပါ။
+
+> ဒီသင်ခန်းစာကို [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) တွင် လေ့လာနိုင်ပါသည်။
+
+## Arrays
+
+ဒေတာများနှင့် အလုပ်လုပ်ခြင်းသည် ဘာသာစကားတစ်ခုအတွက် အများဆုံးလုပ်ဆောင်ရသောအရာဖြစ်ပြီး ဒေတာများကို စနစ်တကျ စီစဉ်ထားသော ဖွဲ့စည်းမှု (arrays) တွင် သိမ်းဆည်းထားပါက ပိုမိုလွယ်ကူစေပါသည်။ Arrays တွင် ဒေတာများကို စာရင်းတစ်ခုလိုမျိုး ဖွဲ့စည်းထားသော ပုံစံတွင် သိမ်းဆည်းထားသည်။ Arrays ၏ အဓိကအားသာချက်တစ်ခုမှာ array တစ်ခုတွင် ဒေတာအမျိုးအစားများစွာကို သိမ်းဆည်းနိုင်ခြင်းဖြစ်သည်။
+
+✅ Arrays သည် ကျွန်ုပ်တို့၏ နေ့စဉ်ဘဝတွင် တွေ့ရသည်။ Solar panel array ကဲ့သို့ array တစ်ခုကို သင်စဉ်းစားနိုင်ပါသလား?
+
+Array ရေးသားရန် syntax သည် square brackets တစ်စုံဖြစ်သည်။
+
+```javascript
+let myArray = [];
+```
+
+ဤသည်မှာ အလွတ် array ဖြစ်သည်။ သို့သော် arrays များကို ဒေတာများဖြင့် ပြည့်စုံစွာ ကြေညာနိုင်ပါသည်။ Array တွင် ဒေတာများကို comma ဖြင့် ခွဲထားသည်။
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Array တွင်ရှိသော ဒေတာများသည် **index** ဟုခေါ်သော တစ်ခုတည်းသော တန်ဖိုးကို ပေးထားသည်။ Index သည် array ၏အစမှ အကွာအဝေးအပေါ် မူတည်၍ သတ်မှတ်ထားသော ကိန်းဂဏန်းဖြစ်သည်။ အထက်ပါဥပမာတွင် "Chocolate" သည် index 0 ရှိပြီး "Rocky Road" သည် index 4 ရှိသည်။ Square brackets နှင့် index ကို အသုံးပြု၍ array တန်ဖိုးများကို ရယူ၊ ပြောင်းလဲ၊ သို့မဟုတ် ထည့်သွင်းနိုင်သည်။
+
+✅ Arrays သည် 0 index မှ စတင်သည်ဟု သင်အံ့ဩပါသလား? အချို့ programming languages တွင် index များသည် 1 မှ စတင်သည်။ ဤအကြောင်းအရာကို [Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering) တွင် ဖတ်ရှုနိုင်ပါသည်။
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Index ကို အသုံးပြု၍ တန်ဖိုးကို ပြောင်းလဲနိုင်သည်။
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+Index တစ်ခုတွင် တန်ဖိုးအသစ်ကို ထည့်သွင်းနိုင်သည်။
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Array တွင် တန်ဖိုးများကို push လုပ်ရန် array.push() ကဲ့သို့သော array operators ကို အသုံးပြုခြင်းသည် ပိုမိုရိုးရှင်းသည်။
+
+Array တွင်ရှိသော item အရေအတွက်ကို သိရန် `length` property ကို အသုံးပြုပါ။
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ ကိုယ်ပိုင် array တစ်ခုကို ဖန်တီးပြီး browser console တွင် စမ်းသပ်ပါ။
+
+## Loops
+
+Loops များသည် ထပ်တလဲလဲလုပ်ဆောင်မှုများ (repetitive tasks) ကို လုပ်ဆောင်ရန် အချိန်နှင့် ကုဒ်များကို သက်သာစေသည်။ Iteration တစ်ခုစီသည် variable, value, condition များအပေါ် မူတည်၍ ကွဲပြားနိုင်သည်။ JavaScript တွင် loops အမျိုးအစားများစွာရှိပြီး အနည်းငယ်ကွဲပြားသော်လည်း အဓိကအားဖြင့် တူညီသောအရာကို လုပ်ဆောင်သည်။
+
+### For Loop
+
+`for` loop သည် iteration ပြုလုပ်ရန် အချက် ၃ ခုလိုအပ်သည်။
+- `counter` Iteration အရေအတွက်ကို ရေတွက်ရန် သတ်မှတ်ထားသော variable
+- `condition` Comparison operators ကို အသုံးပြု၍ `false` ဖြစ်သောအခါ loop ကို ရပ်တန့်စေသော expression
+- `iteration-expression` Iteration တစ်ခုစီ၏ အဆုံးတွင် run လုပ်ပြီး counter value ကို ပြောင်းလဲရန် အသုံးပြုသည်
+
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ ဤကုဒ်ကို browser console တွင် run လုပ်ပါ။ Counter, condition, iteration expression ကို အနည်းငယ်ပြောင်းလဲပါက ဘာဖြစ်မည်ကို စမ်းသပ်ပါ။ Countdown ပြုလုပ်ရန် နောက်ပြန် run လုပ်နိုင်ပါသလား?
+
+### While loop
+
+`for` loop ၏ syntax နှင့် မတူကွဲပြားပြီး `while` loop သည် condition တစ်ခုသာ လိုအပ်သည်။ Condition သည် `false` ဖြစ်သောအခါ loop ကို ရပ်တန့်စေသည်။ Loop တွင် condition များသည် counter ကဲ့သို့သော တန်ဖိုးများကို အခြေခံပြီး loop အတွင်းတွင် စီမံရမည်။ Counter များကို loop အပြင်တွင် စတင်ဖန်တီးရမည်။
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ For loop နှင့် while loop ကို ဘာကြောင့် ရွေးချယ်ရမည်ဟု သင်ထင်ပါသလဲ? StackOverflow တွင် 17K ကြည့်ရှုသူများ၏ အမြင်များကို [ဖတ်ရှုနိုင်ပါသည်](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)။
+
+## Loops နှင့် Arrays
+
+Loops များသည် arrays နှင့် အတူ အသုံးပြုလေ့ရှိသည်။ အများဆုံး condition များသည် array ၏ length ကို loop ရပ်တန့်ရန် လိုအပ်ပြီး index ကို counter value အဖြစ် အသုံးပြုနိုင်သည်။
+
+```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
+```
+
+✅ ကိုယ်ပိုင် array တစ်ခုကို ဖန်တီးပြီး browser console တွင် loop လုပ်ခြင်းကို စမ်းသပ်ပါ။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+For နှင့် while loops များအပြင် arrays ကို loop လုပ်ရန် နည်းလမ်းများရှိသည်။ [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) ကဲ့သို့သော နည်းလမ်းများကို အသုံးပြု၍ သင်၏ array loop ကို ပြန်ရေးပါ။
+
+## မိန့်ခွန်းပြီးနောက် Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+JavaScript တွင် arrays များသည် ဒေတာများကို စီမံခန့်ခွဲရန် အသုံးဝင်သော method များစွာပါရှိသည်။ [ဤ method များကို ဖတ်ရှုပါ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)။ Push, pop, slice, splice ကဲ့သို့သော method များကို ကိုယ်ပိုင် array တွင် စမ်းသပ်ပါ။
+
+## အလုပ်ပေးစာ
+
+[Loop an Array](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/2-js-basics/4-arrays-loops/assignment.md b/translations/my/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..c7f08d3b
--- /dev/null
+++ b/translations/my/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-27T22:33:20+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "my"
+}
+-->
+# အရေအတွက်များကို Loop လုပ်ခြင်း
+
+## လမ်းညွှန်ချက်များ
+
+1-20 အတွင်းရှိ အရေအတွက်များထဲမှ 3 ခုခြားပြီး အရေအတွက်များကို စာရင်းပြုစုပြီး console တွင် print လုပ်ပေးမည့် program တစ်ခုကို ဖန်တီးပါ။
+
+> TIP: for-loop ကို အသုံးပြုပြီး iteration-expression ကို ပြောင်းလဲပါ။
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော                             | လုံလောက်သော              | တိုးတက်မှုလိုအပ်သော                |
+| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
+|          | Program မှန်ကန်စွာ လည်ပတ်ပြီး မှတ်ချက်ထည့်ထားသည် | Program မှတ်ချက်မပါရှိပါ | Program မပြီးစီးသို့မဟုတ် အမှားများရှိသည် |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတရားရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/2-js-basics/README.md b/translations/my/2-js-basics/README.md
new file mode 100644
index 00000000..521a9c7a
--- /dev/null
+++ b/translations/my/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-27T22:28:09+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "my"
+}
+-->
+# JavaScript အကြောင်းမိတ်ဆက်
+
+JavaScript သည် ဝဘ်၏ programming ဘာသာစကားဖြစ်သည်။ ဒီသင်ခန်းစာလေးခုအတွင်းမှာ၊ ၎င်း၏ အခြေခံများကို သင်လေ့လာနိုင်ပါမည်။
+
+### ခေါင်းစဉ်များ
+
+1. [Variables နှင့် Data Types](1-data-types/README.md)
+2. [Functions နှင့် Methods](2-functions-methods/README.md)
+3. [JavaScript ဖြင့် ဆုံးဖြတ်ချက်များချခြင်း](3-making-decisions/README.md)
+4. [Arrays နှင့် Loops](4-arrays-loops/README.md)
+
+### အားကျေးဇူးတင်စကား
+
+ဒီသင်ခန်းစာများကို [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) နှင့် [Chris Noring](https://twitter.com/chris_noring) တို့မှ ♥️ ဖြင့် ရေးသားထားပါသည်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာရှိသောအရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/3-terrarium/1-intro-to-html/README.md b/translations/my/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..9e22dc09
--- /dev/null
+++ b/translations/my/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,250 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-27T22:35:33+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "my"
+}
+-->
+# Terrarium Project Part 1: HTML ကိုမိတ်ဆက်ခြင်း
+
+![Introduction to HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.my.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## မိန့်ခွန်းမတင်မီ Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+
+> ဗီဒီယိုကိုကြည့်ပါ
+
+> 
+> [![Git and GitHub basics video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### မိတ်ဆက်
+
+HTML, သို့မဟုတ် HyperText Markup Language, သည် ဝက်ဘ်၏ 'အရိုး' ဖြစ်သည်။ CSS သည် HTML ကို 'အလှဆင်' ပြုလုပ်ပေးပြီး JavaScript သည် အသက်သွင်းပေးသည်ဟုဆိုပါက HTML သည် သင့်ဝက်ဘ်အက်ပလီကေးရှင်း၏ ကိုယ်ခန္ဓာဖြစ်သည်။ HTML ၏ syntax သည် "head", "body", နှင့် "footer" တိုက်တန်းများပါဝင်သောကြောင့် အဆိုပါအယူအဆကိုပင် ရှင်းလင်းစွာဖော်ပြသည်။
+
+ဒီသင်ခန်းစာမှာတော့ HTML ကိုအသုံးပြုပြီး သင့် virtual terrarium interface ၏ 'အရိုး' ကို layout ပြုလုပ်သွားမှာဖြစ်ပါတယ်။ အဆိုပါ interface တွင် ခေါင်းစဉ်တစ်ခုနှင့် သုံးခုတန်းရှိမည်ဖြစ်ပြီး- draggable plants တွေရှိတဲ့ ညာဘက်နှင့် ဘယ်ဘက်တန်းနှင့် အလယ်တန်းမှာတော့ အမှန်တကယ်သော ဖန်ပုံစံ terrarium ဖြစ်မည်။ ဒီသင်ခန်းစာအဆုံးမှာတော့ သင်သည် columns တွင် အပင်များကိုမြင်နိုင်မည်ဖြစ်သော်လည်း interface သည် အနည်းငယ်ထူးဆန်းနေမည်။ စိတ်မပူပါနဲ့၊ နောက်ဆုံးပိုင်းမှာ CSS styles တွေကို အသုံးပြုပြီး interface ကို ပိုမိုလှပအောင် ပြုလုပ်သွားမည်။
+
+### လုပ်ဆောင်ရန်
+
+သင့်ကွန်ပျူတာတွင် 'terrarium' ဟုခေါ်သော folder တစ်ခုဖန်တီးပြီး ထို folder အတွင်း 'index.html' ဟုခေါ်သော ဖိုင်တစ်ခုဖန်တီးပါ။ သင်၏ terrarium folder ကို Visual Studio Code တွင်ဖွင့်ပြီး 'open folder' ကိုနှိပ်ကာ ဖိုင်အသစ်ကို Explorer pane တွင် ဖန်တီးနိုင်ပါသည်။
+
+![explorer in VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.my.png)
+
+သို့မဟုတ်
+
+git bash တွင် အောက်ပါ command များကို အသုံးပြုပါ:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` or `nano index.html`
+
+> index.html ဖိုင်များသည် browser ကို folder ၏ default ဖိုင်ဖြစ်ကြောင်းပြောပြသည်။ ဥပမာ `https://anysite.com/test` URL သည် `test` folder နှင့် `index.html` ဖိုင်ကို အသုံးပြု၍ ဖွဲ့စည်းထားနိုင်သည်။ `index.html` သည် URL တွင် မပေါ်လွင်လည်း ရနိုင်သည်။
+
+---
+
+## DocType နှင့် html tags
+
+HTML ဖိုင်၏ ပထမဆုံးလိုင်းသည် DocType ဖြစ်သည်။ အဆိုပါလိုင်းကို ဖိုင်၏ အပေါ်ဆုံးတွင် ထည့်ရန်လိုအပ်သည်။ အဟောင်း browser များကို page ကို လက်ရှိ HTML specification အတိုင်း render ပြုလုပ်ရန် ပြောပြသည်။
+
+> အကြံပြုချက်- VS Code တွင် tag အပေါ်တွင် hover ပြုလုပ်ပါက MDN Reference guide မှ tag ၏ အသုံးအများကို ကြည့်နိုင်သည်။
+
+ဒုတိယလိုင်းတွင် `<html>` tag ၏ ဖွင့်လှစ် tag ကို ထည့်ပြီး `</html>` tag ဖြင့် ပိတ်ထားရမည်။ အဆိုပါ tags များသည် သင့် interface ၏ root elements ဖြစ်သည်။
+
+### လုပ်ဆောင်ရန်
+
+သင့် `index.html` ဖိုင်၏ အပေါ်ဆုံးတွင် အောက်ပါလိုင်းများကို ထည့်ပါ:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ DocType ကို query string ဖြင့် mode များကို သတ်မှတ်နိုင်သည်။ [Quirks Mode and Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) ကို ဖတ်ပါ။ အဟောင်း browser များကို အထောက်အပံ့ပေးရန် mode များကို အသုံးပြုခဲ့သည်။ ယနေ့တွင် Netscape Navigator 4 နှင့် Internet Explorer 5 ကဲ့သို့သော browser များကို မသုံးတော့ပါ။ သင်သည် standard doctype declaration ကို အသုံးပြုနိုင်သည်။
+
+---
+
+## document ၏ 'head'
+
+HTML document ၏ 'head' အပိုင်းတွင် သင့်ဝက်ဘ်ပေ့ဂျ်အကြောင်း အရေးကြီးသော အချက်အလက်များ (metadata) ပါဝင်သည်။ ဥပမာအားဖြင့်:
+
+-   ပေ့ဂျ်၏ ခေါင်းစဉ်
+-   metadata အချက်အလက်များ:
+    -   'character set' သည် page တွင် အသုံးပြုထားသော character encoding ကို ပြောပြသည်။
+    -   browser အချက်အလက်များ၊ `x-ua-compatible` သည် IE=edge browser ကို အထောက်အပံ့ပေးသည်။
+    -   viewport သည် page ကို load လုပ်သောအခါ ဘယ်လိုပြုမည်ကို ပြောပြသည်။ viewport ကို initial scale of 1 သတ်မှတ်ခြင်းသည် ပေ့ဂျ်ကို ပထမဆုံး load လုပ်သောအခါ zoom level ကို ထိန်းချုပ်သည်။
+
+### လုပ်ဆောင်ရန်
+
+ဖွင့်လှစ် `<html>` tag နှင့် ပိတ်ထားသော `</html>` tag အကြားတွင် 'head' block ကို ထည့်ပါ။
+
+```html
+<head>
+	<title>Welcome to my Virtual Terrarium</title>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+```
+
+✅ `<meta name="viewport" content="width=600">` ကဲ့သို့ viewport meta tag ကို သတ်မှတ်ပါက ဘာဖြစ်မည်ကို စဉ်းစားပါ။ [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) ကို ဖတ်ပါ။
+
+---
+
+## document ၏ `body`
+
+### HTML Tags
+
+HTML တွင် tag များကို သင့် .html ဖိုင်တွင် ထည့်ကာ ဝက်ဘ်ပေ့ဂျ်၏ elements များကို ဖန်တီးသည်။ tag တစ်ခုစီတွင် ဖွင့်လှစ် tag နှင့် ပိတ်ထားသော tag ရှိသည်။ ဥပမာ `<p>hello</p>` သည် paragraph ကို ဖော်ပြသည်။ `<body>` tag များကို `<html>` tag pair အတွင်း ထည့်ကာ interface ၏ body ကို ဖန်တီးပါ။
+
+### လုပ်ဆောင်ရန်
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Welcome to my Virtual Terrarium</title>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body></body>
+</html>
+```
+
+ယခု သင်သည် သင့်ပေ့ဂျ်ကို ဖန်တီးနိုင်ပါပြီ။ ပုံမှန်အားဖြင့် `<div>` tag များကို အသုံးပြုကာ ပေ့ဂျ်၏ အပိုင်းများကို ဖန်တီးသည်။ `<div>` element များကို ဖန်တီးပြီး images များကို ထည့်ပါ။
+
+### Images
+
+ပိတ်ထားသော tag မလိုအပ်သော HTML tag တစ်ခုမှာ `<img>` tag ဖြစ်သည်။ အဆိုပါ tag တွင် `src` element ပါဝင်ပြီး page ကို render ပြုလုပ်ရန် လိုအပ်သော အချက်အလက်များကို ပေးသည်။
+
+သင့် app တွင် `images` folder တစ်ခုဖန်တီးပြီး [source code folder](../../../../3-terrarium/solution/images) တွင်ရှိသော အပင်ပုံများ (14 ပုံ) ကို ထည့်ပါ။
+
+### လုပ်ဆောင်ရန်
+
+အပင်ပုံများကို `<body></body>` tag များအတွင်းရှိ columns နှစ်ခုတွင် ထည့်ပါ:
+
+```html
+<div id="page">
+	<div id="left-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+		</div>
+	</div>
+	<div id="right-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+		</div>
+	</div>
+</div>
+```
+
+> မှတ်ချက်- Spans နှင့် Divs. Divs သည် 'block' elements ဖြစ်ပြီး Spans သည် 'inline' ဖြစ်သည်။ Divs များကို Spans သို့ ပြောင်းလဲပါက ဘာဖြစ်မည်ကို စဉ်းစားပါ။
+
+ဤ markup ဖြင့် အပင်များသည် screen ပေါ်တွင် ပြသမည်။ သို့သော် CSS ဖြင့် style မပြုလုပ်သေးသောကြောင့် အလှမရှိသေးပါ။ CSS ကို နောက်ဆုံးပိုင်းတွင် သင်ယူမည်။
+
+image တစ်ခုစီတွင် alt text ပါဝင်ပြီး image ကို မမြင်နိုင်ပါက ထို alt text ကို ပြသမည်။ accessibility အတွက် အရေးကြီး attribute ဖြစ်သည်။ accessibility အကြောင်းကို နောက်ဆုံးပိုင်းတွင် သင်ယူပါမည်။ အခုတော့ alt attribute သည် image ကို မမြင်နိုင်သောအခါ alternative အချက်အလက်ကို ပေးသည်ဟု သိထားပါ။
+
+✅ image တစ်ခုစီတွင် တူညီသော alt tag ရှိသည်ကို သတိပြုပါ။ ဤအလေ့အထသည် ကောင်းပါသလား? အဘယ်ကြောင့်? ဤ code ကို တိုးတက်အောင် ပြုလုပ်နိုင်ပါသလား?
+
+---
+
+## Semantic markup
+
+HTML ရေးသားရာတွင် အဓိပ္ပာယ်ရှိသော 'semantics' ကို အသုံးပြုရန် အကြံပြုသည်။ ၎င်းသည် data သို့မဟုတ် interaction ၏ အမျိုးအစားကို ကိုယ်စားပြုရန် ရည်ရွယ်ထားသော HTML tag များကို အသုံးပြုခြင်းဖြစ်သည်။ ဥပမာအားဖြင့် ပေ့ဂျ်၏ အဓိကခေါင်းစဉ် text သည် `<h1>` tag ကို အသုံးပြုသင့်သည်။
+
+ဖွင့်လှစ် `<body>` tag ၏ အောက်တွင် အောက်ပါလိုင်းကို ထည့်ပါ:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+semantic markup ကို အသုံးပြုခြင်းသည် screen reader များအတွက် ပေ့ဂျ်ကို navigation ပြုလုပ်ရန် အထောက်အပံ့ပေးသည်။ ဥပမာအားဖြင့် button များကို `<button>` နှင့် list များကို `<li>` ဖြင့် ရေးသားသင့်သည်။ specially styled `<span>` element များကို click handler ဖြင့် button အဖြစ် mock ပြုလုပ်နိုင်သော်လည်း disabled user များအတွက် button ရှိရာကို ရှာဖွေရန်နှင့် interaction ပြုလုပ်ရန် ပိုမိုလွယ်ကူသည်။ ထို့ကြောင့် semantic markup ကို အမြဲအသုံးပြုရန် ကြိုးစားပါ။
+
+✅ screen reader [ဘယ်လို ဝက်ဘ်ပေ့ဂျ်နှင့် interaction ပြုလုပ်သည်ကို](https://www.youtube.com/watch?v=OUDV1gqs9GA) ကြည့်ပါ။ semantic markup မရှိပါက user အတွက် အခက်အခဲဖြစ်နိုင်ကြောင်း မြင်နိုင်ပါသလား?
+
+## Terrarium
+
+ဤ interface ၏ နောက်ဆုံးအပိုင်းတွင် terrarium ကို ဖန်တီးရန် style ပြုလုပ်မည့် markup ကို ဖန်တီးပါမည်။
+
+### လုပ်ဆောင်ရန်:
+
+နောက်ဆုံး `</div>` tag အပေါ်တွင် အောက်ပါ markup ကို ထည့်ပါ:
+
+```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>
+```
+
+✅ markup ကို screen ပေါ်တွင် ထည့်ထားသော်လည်း render မဖြစ်သောကြောင့် ဘာဖြစ်မည်ကို စဉ်းစားပါ။
+
+---
+
+## 🚀Challenge
+
+HTML တွင် 'အဟောင်း' tag များရှိပြီး အချို့သည် စိတ်ဝင်စားဖွယ်ကောင်းသည်။ သို့သော် [deprecated tag များ](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) ကို မသုံးသင့်ပါ။ `<marquee>` tag ကို အသုံးပြုပြီး h1 ခေါင်းစဉ်ကို အလျားလိုက် scroll ပြုလုပ်နိုင်ပါသလား? (ပြုလုပ်ပါက နောက်ဆုံးတွင် ဖယ်ရှားရန် မမေ့ပါနှင့်)
+
+## မိန့်ခွန်းပြီး Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+HTML သည် ဝက်ဘ်ကို ယနေ့အထိ တိုးတက်စေခဲ့သော 'စမ်းသပ်ပြီးအောင်မြင်သော' အဆောက်အအုံစနစ်ဖြစ်သည်။ အဟောင်းနှင့် အသစ် tag များကို လေ့လာကာ ၎င်း၏ သမိုင်းကို သိပါ။ အချို့ tag များကို အဘယ်ကြောင့် deprecated ဖြစ်ခဲ့ပြီး အချို့ကို ထည့်သွင်းခဲ့သည်ကို သိနိုင်ပါသလား? အနာဂတ်တွင် tag များကို ထည့်သွင်းနိုင်မည်ကို စဉ်းစားပါ။
+
+ဝက်ဘ်နှင့် မိုဘိုင်း device များအတွက် site များကို ဖန်တီးခြင်းအကြောင်း [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) တွင် လေ့လာပါ။
+
+## လုပ်ငန်း
+
+[သင်၏ HTML ကိုလေ့ကျင့်ပါ: Blog mockup တစ်ခုကို ဖန်တီးပါ](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/3-terrarium/1-intro-to-html/assignment.md b/translations/my/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..dcdb2b3f
--- /dev/null
+++ b/translations/my/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-27T22:36:13+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "my"
+}
+-->
+# HTML ကိုလေ့ကျင့်ပါ: ဘလော့ဂ် mockup တစ်ခုတည်ဆောက်ပါ
+
+## လမ်းညွှန်ချက်များ
+
+သင်၏ကိုယ်ပိုင်ဝက်ဘ်ဆိုဒ်ကိုဒီဇိုင်းဆွဲခြင်း (သို့) ပြန်လည်ဒီဇိုင်းဆွဲခြင်းကိုစဉ်းစားပါ။ သင်၏ဆိုဒ်၏ရုပ်ပိုင်းဆိုင်ရာ mockup တစ်ခုကိုဖန်တီးပြီး၊ ဆိုဒ်၏အမျိုးမျိုးသောအခန်းကဏ္ဍများကိုတည်ဆောက်ရန်သုံးမည့် HTML markup ကိုရေးပါ။ သင်ဤလုပ်ငန်းကိုစာရွက်ပေါ်တွင်ဆောင်ရွက်ပြီး၊ စကင်ဖတ်နိုင်သည့်ပုံစံဖြင့် (သို့) သင်နှစ်သက်သောဆော့ဖ်ဝဲကိုအသုံးပြုနိုင်ပါသည်။ HTML markup ကိုလက်ဖြင့်ရေးသားရန်သေချာပါ။
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော                                                                           | လုံလောက်သော                                                                         | တိုးတက်မှုလိုအပ်သော                                                                 |
+| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|          | ဘလော့ဂ် layout ကိုရုပ်ပိုင်းဆိုင်ရာအနေဖြင့်ဖော်ပြထားပြီး၊ markup အခန်းကဏ္ဍ ၁၀ ခုအနည်းဆုံးပါရှိသည် | ဘလော့ဂ် layout ကိုရုပ်ပိုင်းဆိုင်ရာအနေဖြင့်ဖော်ပြထားပြီး၊ markup အခန်းကဏ္ဍ ၅ ခုခန့်ပါရှိသည် | ဘလော့ဂ် layout ကိုရုပ်ပိုင်းဆိုင်ရာအနေဖြင့်ဖော်ပြထားပြီး၊ markup အခန်းကဏ္ဍ ၃ ခုအများဆုံးပါရှိသည် |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် ရှုလေ့ရှိသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/3-terrarium/2-intro-to-css/README.md b/translations/my/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..28fc1e1a
--- /dev/null
+++ b/translations/my/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-27T22:37:24+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "my"
+}
+-->
+# Terrarium Project Part 2: CSS ကိုမိတ်ဆက်ခြင်း
+
+![Introduction to CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.my.png)
+> [Tomomi Imura](https://twitter.com/girlie_mac) ၏ Sketchnote
+
+## မိန့်ခွန်းမတင်မီ စစ်ဆေးမှု
+
+[မိန့်ခွန်းမတင်မီ စစ်ဆေးမှု](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### မိတ်ဆက်
+
+CSS, သို့မဟုတ် Cascading Style Sheets သည် ဝဘ်ဆိုင်ရာ ဖွံ့ဖြိုးတိုးတက်မှုတွင် အရေးကြီးသော ပြဿနာတစ်ခုဖြစ်သည့် ဝဘ်ဆိုဒ်ကို လှပစေရန် ပြဿနာကို ဖြေရှင်းပေးသည်။ သင့်အက်ပ်များကို အဆင်ပြေစေရန်နှင့် လှပစေရန် CSS ကို အသုံးပြုနိုင်သလို၊ Responsive Web Design (RWD) ကို ဖန်တီးရန်လည်း အသုံးပြုနိုင်သည်။ RWD သည် မည်သည့် မျက်နှာပြင်အရွယ်အစားတွင် မဆို သင့်အက်ပ်များကို သင့်တော်စွာ ပြသနိုင်စေသည်။ CSS သည် သင့်အက်ပ်ကို လှပစေရန်သာမက၊ အလှပြင်များနှင့် ပြောင်းလဲမှုများကိုလည်း ထည့်သွင်းထားပြီး သင့်အက်ပ်များအတွက် ရှုပ်ထွေးသော အပြန်အလှန်ဆက်သွယ်မှုများကို ဖန်တီးနိုင်စေသည်။ CSS Working Group သည် လက်ရှိ CSS သတ်မှတ်ချက်များကို ထိန်းသိမ်းပေးနေပြီး၊ [World Wide Web Consortium's site](https://www.w3.org/Style/CSS/members) တွင် သူတို့၏ အလုပ်များကို လိုက်နာကြည့်ရှုနိုင်သည်။
+
+> မှတ်ချက် - CSS သည် ဝဘ်ပေါ်ရှိ အရာအားလုံးကဲ့သို့ တိုးတက်ပြောင်းလဲနေသော ဘာသာစကားဖြစ်ပြီး၊ ဘရောက်ဇာအားလုံးက သတ်မှတ်ချက်၏ အသစ်သော အပိုင်းများကို မထောက်ပံ့နိုင်ပါ။ သင့်အကောင်အထည်ဖော်မှုများကို [CanIUse.com](https://caniuse.com) ကို ကြည့်ရှုခြင်းဖြင့် အမြဲစစ်ဆေးပါ။
+
+ဒီသင်ခန်းစာတွင်၊ ကျွန်ုပ်တို့သည် CSS ၏ အခြေခံအယူအဆများဖြစ်သည့် cascade, inheritance, selector များ၏ အသုံးပြုမှု၊ positioning နှင့် layout ဖန်တီးမှုတို့ကို လေ့လာပြီး၊ သင့်အွန်လိုင်း terrarium ကို အလှဆင်သွားမည်ဖြစ်သည်။ ဒီလုပ်ငန်းစဉ်အတွင်း ကျွန်ုပ်တို့သည် terrarium ကို layout ပြုလုပ်ပြီး၊ အမှန်တကယ်သော terrarium ကို ဖန်တီးသွားမည်ဖြစ်သည်။
+
+### ကြိုတင်လိုအပ်ချက်
+
+သင့် terrarium အတွက် HTML ကို ဖန်တီးပြီး၊ အလှဆင်ရန် အသင့်ဖြစ်ထားရမည်။
+
+> ဗီဒီယိုကြည့်ရန်
+
+> 
+> [![Git နှင့် GitHub အခြေခံဗီဒီယို](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### လုပ်ငန်း
+
+သင့် terrarium ဖိုလ်ဒါတွင် `style.css` ဟုခေါ်သော ဖိုင်အသစ်တစ်ခု ဖန်တီးပါ။ ထိုဖိုင်ကို `<head>` အပိုင်းတွင် ထည့်သွင်းပါ-
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## The Cascade
+
+Cascading Style Sheets တွင် "cascade" ဆိုသော အယူအဆကို ထည့်သွင်းထားပြီး၊ အလှဆင်မှုတစ်ခု၏ အဓိကကျမှုအလိုက် အလှဆင်မှုကို လိုက်နာသည်။ ဝဘ်ဆိုဒ်ရေးသားသူက သတ်မှတ်ထားသော အလှဆင်မှုများသည် ဘရောက်ဇာက သတ်မှတ်ထားသော အလှဆင်မှုများထက် အဓိကကျသည်။ External style sheet တွင် သတ်မှတ်ထားသော အလှဆင်မှုများထက် inline style များသည် ပိုမိုအဓိကကျသည်။
+
+### လုပ်ငန်း
+
+သင့် `<h1>` tag တွင် "color: red" inline style ကို ထည့်သွင်းပါ-
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+ထို့နောက်၊ သင့် `style.css` ဖိုင်တွင် အောက်ပါကုဒ်ကို ထည့်သွင်းပါ-
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ သင့်ဝဘ်အက်ပ်တွင် မည်သည့်အရောင်ကို ပြသနေသနည်း။ အဘယ်ကြောင့်လဲ။ အလှဆင်မှုများကို override ပြုလုပ်နိုင်မည့် နည်းလမ်းကို ရှာဖွေပါ။ သင်သည် မည်သည့်အချိန်တွင် ဒါကို ပြုလုပ်လိုမည်နည်း၊ သို့မဟုတ် မပြုလုပ်သင့်သည့် အကြောင်းရင်းများကို ရှာဖွေပါ။
+
+---
+
+## Inheritance
+
+Styles များသည် မိဘအလှဆင်မှုမှ သားအလှဆင်မှုသို့ အမွေဆက်ခံပြီး၊ nested elements များသည် မိဘ၏ အလှဆင်မှုများကို အမွေဆက်ခံသည်။
+
+### လုပ်ငန်း
+
+body ၏ font ကို သတ်မှတ်ပြီး၊ nested element ၏ font ကို စစ်ဆေးပါ-
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+သင့်ဘရောက်ဇာ၏ console တွင် 'Elements' tab ကို ဖွင့်ပြီး၊ H1 ၏ font ကို ကြည့်ပါ။ ၎င်းသည် body မှ အမွေဆက်ခံထားသည်ကို ဘရောက်ဇာတွင် ဖော်ပြထားသည်-
+
+![inherited font](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.my.png)
+
+✅ Nested style တစ်ခုကို အခြားသော property ကို အမွေဆက်ခံစေရန် ပြုလုပ်နိုင်ပါသလား။
+
+---
+
+## CSS Selectors
+
+### Tags
+
+ယခုအချိန်ထိ သင့် `style.css` ဖိုင်တွင် tag အနည်းငယ်သာ အလှဆင်ထားပြီး၊ အက်ပ်သည် အနည်းငယ် ထူးဆန်းနေသည်-
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+ဒီလို tag ကို အလှဆင်ခြင်းသည် တစ်ခုတည်းသော element များကို ထိန်းချုပ်နိုင်စေသော်လည်း၊ သင့် terrarium တွင် အပင်များစွာ၏ အလှဆင်မှုကို ထိန်းချုပ်ရန် လိုအပ်သည်။ ဒါကို ပြုလုပ်ရန် CSS selectors ကို အသုံးပြုရမည်။
+
+### Ids
+
+ဘယ်ဘက်နှင့် ညာဘက် containers များကို layout ပြုလုပ်ရန် အလှဆင်မှုကို ထည့်သွင်းပါ။ Markup တွင် တစ်ခုတည်းသော ဘယ်ဘက် container နှင့် တစ်ခုတည်းသော ညာဘက် container ရှိသောကြောင့်၊ ၎င်းတို့ကို ids ဖြင့် သတ်မှတ်ထားသည်။ ၎င်းတို့ကို အလှဆင်ရန် `#` ကို အသုံးပြုပါ-
+
+```CSS
+#left-container {
+	background-color: #eee;
+	width: 15%;
+	left: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+
+#right-container {
+	background-color: #eee;
+	width: 15%;
+	right: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+```
+
+ဒီမှာ၊ သင်သည် ဒီ containers များကို မျက်နှာပြင်၏ အလယ်ဘက်နှင့် ညာဘက်သို့ absolute positioning ဖြင့်ထားပြီး၊ ၎င်းတို့၏ အကျယ်ကို ရာခိုင်နှုန်းများဖြင့် သတ်မှတ်ထားသည်။ ဒါကြောင့် ၎င်းတို့သည် မိုဘိုင်းမျက်နှာပြင်အသေးများအတွက်လည်း အဆင်ပြေစေသည်။
+
+✅ ဒီကုဒ်သည် အတော်လေး ထပ်တလဲလဲဖြစ်နေသည်၊ ထို့ကြောင့် "DRY" (Don't Repeat Yourself) မဟုတ်ပါ။ ဒီ ids များကို အလှဆင်ရန် ပိုမိုကောင်းမွန်သော နည်းလမ်းကို ရှာဖွေပါ၊ ဥပမာ id နှင့် class တစ်ခုကို ပေါင်းစပ်အသုံးပြုခြင်း။ သင်သည် markup ကို ပြောင်းလဲပြီး CSS ကို ပြန်လည်ပြင်ဆင်ရမည်-
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Classes
+
+အထက်ပါ ဥပမာတွင်၊ သင်သည် မျက်နှာပြင်ပေါ်ရှိ တစ်ခုတည်းသော element နှစ်ခုကို အလှဆင်ထားသည်။ မျက်နှာပြင်ပေါ်ရှိ element များစွာကို အလှဆင်မှုများ သက်ရောက်စေရန်၊ CSS classes ကို အသုံးပြုနိုင်သည်။ ဒါကို ဘယ်ဘက်နှင့် ညာ container များတွင် အပင်များကို layout ပြုလုပ်ရန် ပြုလုပ်ပါ။
+
+HTML markup တွင် အပင်တစ်ခုစီတွင် ids နှင့် classes တို့၏ ပေါင်းစပ်ကို သုံးထားသည်ကို သတိပြုပါ။ ဒီမှာ ids များကို နောက်ပိုင်းတွင် JavaScript ဖြင့် terrarium အပင်များ၏ တည်နေရာကို ပြောင်းလဲရန် အသုံးပြုမည်။ Classes များကတော့ အပင်အားလုံးကို သတ်မှတ်ထားသော အလှဆင်မှုကို ပေးသည်။
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+သင့် `style.css` ဖိုင်တွင် အောက်ပါအတိုင်း ထည့်သွင်းပါ-
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+ဒီ snippet တွင် relative နှင့် absolute positioning များ၏ ပေါင်းစပ်ကို သတိပြုပါ၊ ကျွန်ုပ်တို့သည် နောက်ပိုင်းတွင် ၎င်းတို့ကို ဆွေးနွေးမည်။ Heights များကို ရာခိုင်နှုန်းဖြင့် စီမံထားပုံကိုလည်း သတိပြုပါ-
+
+သင်သည် plant holder ၏ အမြင့်ကို 13% သတ်မှတ်ထားသည်၊ ၎င်းသည် vertical container တစ်ခုစီတွင် scrolling မလိုအပ်ဘဲ အပင်အားလုံးကို ပြသနိုင်ရန် သင့်တော်သော အရေအတွက်ဖြစ်သည်။
+
+Plant holder ကို ဘယ်ဘက်သို့ ရွှေ့ထားပြီး၊ container အတွင်းတွင် အပင်များကို ပိုမိုအလယ်တန်းကျစေရန် ပြုလုပ်ထားသည်။ Images များတွင် drag လုပ်နိုင်စေရန် အများကြီးသော transparent background ရှိသောကြောင့်၊ မျက်နှာပြင်ပေါ်တွင် ပိုမိုသင့်တော်စေရန် ဘယ်ဘက်သို့ ရွှေ့ထားရန် လိုအပ်သည်။
+
+ထို့နောက်၊ plant ကို max-width 150% သတ်မှတ်ထားသည်။ ၎င်းသည် ဘရောက်ဇာအရွယ်အစားကို လိုက်လျောညီထွေဖြင့် ကျယ်ပြန့်စေသည်။ သင့်ဘရောက်ဇာကို အရွယ်အစားပြောင်းကြည့်ပါ၊ အပင်များသည် container အတွင်းတွင်သာရှိပြီး၊ အရွယ်အစားကို လိုက်လျောညီထွေဖြင့် ကျယ်ပြန့်နေသည်ကို တွေ့ရမည်။
+
+ထို့အပြင် z-index ကို အသုံးပြုထားသည်ကိုလည်း သတိပြုပါ၊ ၎င်းသည် element တစ်ခု၏ အမြင့်ကို ထိန်းချုပ်ပြီး၊ အပင်များသည် container အပေါ်တွင် ထိုင်နေသကဲ့သို့ ပြသစေသည်။
+
+✅ Plant holder နှင့် plant CSS selector နှစ်ခုလုံးကို ဘာကြောင့် လိုအပ်သနည်း။
+
+## CSS Positioning
+
+Position properties (static, relative, fixed, absolute, sticky) များကို ပေါင်းစပ်အသုံးပြုခြင်းသည် အနည်းငယ်ရှုပ်ထွေးနိုင်သော်လည်း၊ သင့်မျက်နှာပြင်ပေါ်ရှိ element များကို ထိန်းချုပ်ရန် ကောင်းမွန်သော ထိန်းချုပ်မှုကို ပေးသည်။
+
+Absolute positioned elements များသည် ၎င်းတို့၏ အနီးဆုံး positioned ancestor များအပေါ်တွင် တည်နေရာချထားသည်၊ အကယ်၍ positioned ancestor မရှိပါက၊ document body အပေါ်တွင် တည်နေရာချထားသည်။
+
+Relative positioned elements များသည် ၎င်းတို့၏ မူလတည်နေရာမှ CSS ၏ ညွှန်ကြားချက်အတိုင်း တည်နေရာကို ပြောင်းလဲထားသည်။
+
+ကျွန်ုပ်တို့၏ ဥပမာတွင်၊ `plant-holder` သည် relative-positioned element ဖြစ်ပြီး၊ absolute-positioned container အတွင်းတွင် တည်နေရာချထားသည်။ ၎င်း၏ အကျိုးသက်ရောက်မှုမှာ side bar containers များသည် ဘယ်ဘက်နှင့် ညာဘက်တွင် pin လုပ်ထားပြီး၊ plant-holder သည် side bars အတွင်းတွင် nested ဖြစ်ကာ၊ အပင်များကို vertical row အဖြစ်ထားရန် နေရာပေးထားသည်။
+
+> `plant` ကို absolute positioning ဖြင့်ထားထားပြီး၊ ၎င်းကို draggable ဖြစ်စေရန် လိုအပ်သည်၊ ၎င်းကို နောက်သင်ခန်းစာတွင် လေ့လာမည်။
+
+✅ Side containers နှင့် plant-holder ၏ positioning အမျိုးအစားများကို ပြောင်းလဲကြည့်ပါ။ ဘာဖြစ်သနည်း။
+
+## CSS Layouts
+
+ယခု သင်လေ့လာခဲ့သည့် အရာများကို အသုံးပြု၍ CSS ဖြင့်ပဲ terrarium ကို ဖန်တီးပါ။
+
+ပထမဦးစွာ၊ `.terrarium` div ၏ children များကို CSS ဖြင့် 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;
+}
+```
+
+ဒီမှာ ရာခိုင်နှုန်းများကို အသုံးပြုထားပုံကို သတိပြုပါ။ သင့်ဘရောက်ဇာကို အရွယ်အစားကျယ်ပြန့်စေပါက၊ jar သည်လည်း အရွယ်အစားကျယ်ပြန့်နေသည်ကို တွေ့ရမည်။ ထို့အပြင် jar elements များ၏ width နှင့် height ရာခိုင်နှုန်းများနှင့်၊ element တစ်ခုစီကို absolutely positioned ဖြစ်ကာ viewport ၏ အောက်ခြေတွင် pin လုပ်ထားပုံကိုလည်း သတိပြုပါ။
+
+၎င်းတို့၏ border-radius အတွက် `rem` ကို အသုံးပြုထားသည်ကိုလည်း သတိပြုပါ၊ ၎င်းသည် font-relative length ဖြစ်သည်။ ဒီ relative measurement အမျိုးအစားအကြောင်းကို [CSS spec](https://www.w3.org/TR/css-values-3/#font-relative-lengths) တွင် ဖတ်ရှုနိုင်သည်။
+
+✅ Jar ၏ အရောင်များနှင့် opacity ကို dirt ၏ အရောင်များနှင့် opacity နှင့် ပြောင်းလဲကြည့်ပါ။ ဘာဖြစ်သနည်း။ အဘယ်ကြောင့်လဲ။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+Jar ၏ ဘယ်ဘက်အောက်ခြေတွင် 'bubble' shine တစ်ခု ထည့်သွင်းပြီး၊ ၎င်းကို ဖန်မှန်ကဲ့သို့ ပုံစံဖြစ်စေရန် ပြုလုပ်ပါ။ `.jar-glossy-long` နှင့် `.jar-glossy-short` ကို အလှဆင်ပြီး၊ ၎င်းကို အလင်းပြန်သော shine တစ်ခုကဲ့သို့ ပြုလုပ်ပါ။ ၎င်းသည် အောက်ပါပုံကဲ့သို့ ဖြစ်ရမည်-
+
+![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.my.png)
+
+Post-lecture quiz ကို ပြီးမြောက်စေရန်၊ ဒီ 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)
+
+## မိန့်ခွန်းပြီးနောက် စစ်ဆေးမှု
+
+[မိန့်ခွန်းပြီးနောက် စစ်ဆေးမှု](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## ပြန်လည်သုံးသပ်မှုနှင့် ကိုယ်တိုင်လေ့လာမှု
+
+CSS သည် ရိုးရှင်းသည့်အရာတစ်ခုကဲ့သို့ ထင်ရသော်လည်း၊ အက်ပ်ကို ဘရောက်ဇာအားလုံးနှင့် မျက်နှာပြင်အရွယ်အစားအားလုံးအတွက် ပြီးပြည့်စုံစွာ အလှဆင်ရန် အခက်အခဲများစွာ ရှိသည်။ CSS-Grid နှင့် Flexbox သည် အလုပ်ကို ပိုမိုစနစ်တကျဖြစ်စေရန်နှင့် ယုံကြည်စိတ်ချစေရန် ဖန်တီးထားသော ကိရိယာများဖြစ်သည်။ ဒီကိရိယာများကို [Flexbox Froggy](https://flexboxfroggy.com/) နှင့် [Grid Garden](https://codepip.com/games/grid-garden/) တွင် ကစားခြင်းဖြင့် လေ့လာပါ။
+
+## လုပ်ငန်း
+
+[CSS Refactoring](assignment.md)
+
+---
+
+**ဝက်ဘ်ဆိုက်မှတ်ချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်ဆိုမှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတည်သောရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ အတည်ပြုထားသော ဘာသာပြန်ဆိုမှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်ဆိုမှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားများ သို့မဟုတ် အဓိပ္ပာယ်မှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/3-terrarium/2-intro-to-css/assignment.md b/translations/my/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..82c7c457
--- /dev/null
+++ b/translations/my/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-27T22:38:22+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "my"
+}
+-->
+# CSS ပြန်လည်ပြင်ဆင်ခြင်း
+
+## ညွှန်ကြားချက်များ
+
+Flexbox သို့မဟုတ် CSS Grid ကို အသုံးပြု၍ terrarium ကို ပြန်လည်ဒီဇိုင်းဆွဲပါ၊ နှင့် အမျိုးမျိုးသော browser များတွင် စမ်းသပ်ထားကြောင်း ပြသရန် screenshot များကို ရိုက်ယူပါ။ သင်သည် markup ကို ပြောင်းလဲရန် လိုအပ်နိုင်သောကြောင့် သင့်ပြန်လည်ပြင်ဆင်မှုအတွက် အနုပညာအပိုင်းများကို ထည့်သွင်းထားသော app ၏ ဗားရှင်းအသစ်တစ်ခုကို ဖန်တီးပါ။ elements များကို ဆွဲယူနိုင်စေရန် (draggable) ပြုလုပ်ရန် စိတ်ပူစရာမလိုပါဘူး။ ယခုအချိန်တွင် HTML နှင့် CSS ကိုသာ ပြန်လည်ပြင်ဆင်ပါ။
+
+## အဆင့်သတ်မှတ်ချက်
+
+| စံနှုန်းများ | ထူးချွန်သော                                                         | လုံလောက်သော                      | တိုးတက်မှုလိုအပ်သော                    |
+| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
+|          | Flexbox သို့မဟုတ် CSS Grid ကို အသုံးပြု၍ terrarium ကို အပြည့်အဝ ပြန်လည်ဒီဇိုင်းဆွဲထားသည် | elements အချို့ကိုသာ ပြန်လည်ဒီဇိုင်းဆွဲထားသည် | terrarium ကို လုံးဝ ပြန်လည်ဒီဇိုင်းဆွဲထားခြင်း မရှိပါ |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/my/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..18cc209d
--- /dev/null
+++ b/translations/my/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "30f8903a1f290e3d438dc2c70fe60259",
+  "translation_date": "2025-08-27T22:39:14+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "my"
+}
+-->
+# Terrarium Project Part 3: DOM Manipulation and a Closure
+
+![DOM and a closure](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.my.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## မိမိသင်ခန်းစာမတိုင်မီ စမ်းမေးခွန်း
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### အကျဉ်းချုပ်
+
+DOM (Document Object Model) ကိုပြောင်းလဲခြင်းသည် ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုတွင် အရေးပါသောအပိုင်းတစ်ခုဖြစ်သည်။ [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) အဆိုအရ "Document Object Model (DOM) သည် ဝဘ်ပေါ်တွင် စာရွက်တစ်ရွက်၏ ဖွဲ့စည်းပုံနှင့် အကြောင်းအရာကို ဖော်ပြထားသော အရာများ၏ ဒေတာကို ကိုယ်စားပြုခြင်းဖြစ်သည်။" DOM ကို JavaScript frameworks များဖြင့် စီမံခန့်ခွဲရန်အစား သာမန် JavaScript ကို အသုံးပြု၍ စီမံခန့်ခွဲရန် အခက်အခဲများသည် အဓိကအကြောင်းရင်းဖြစ်လာခဲ့သည်။ သို့သော် ကျွန်ုပ်တို့သည် ကိုယ်တိုင် စီမံခန့်ခွဲမည်။
+
+ထို့အပြင်၊ ဒီသင်ခန်းစာတွင် [JavaScript closure](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ၏ အကြောင်းအရာကို မိတ်ဆက်ပေးမည်ဖြစ်ပြီး၊ ၎င်းကို အပြင်ဘက် function ၏ scope ကို အတွင်း function မှ access လုပ်နိုင်ရန် function တစ်ခုကို အခြား function တစ်ခုဖြင့် ပတ်လည်ဖုံးအုပ်ထားသောအဖြစ် စဉ်းစားနိုင်သည်။
+
+> JavaScript closures သည် ကျယ်ပြန့်ပြီး ရှုပ်ထွေးသောအကြောင်းအရာဖြစ်သည်။ ဒီသင်ခန်းစာသည် terrarium ၏ code တွင် closure တစ်ခုကို တွေ့နိုင်မည့် အခြေခံအကြောင်းအရာကိုသာ ထိတွေ့သည်။ ၎င်းသည် အတွင်း function နှင့် အပြင် function တစ်ခုကို အတွင်း function သည် အပြင် function ၏ scope ကို access လုပ်နိုင်ရန် ဖွဲ့စည်းထားသောပုံစံဖြစ်သည်။ ၎င်းအကြောင်းအရာကို နားလည်ရန် [ကျယ်ကျယ်ပြန့်ပြန့်သော documentation](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ကို သွားရောက်လေ့လာပါ။
+
+ကျွန်ုပ်တို့သည် DOM ကို ပြောင်းလဲရန် closure ကို အသုံးပြုမည်။
+
+DOM ကို ဝဘ်စာရွက်စာတမ်းကို ပြောင်းလဲနိုင်သော နည်းလမ်းများကို ကိုယ်စားပြုသော သစ်ပင်တစ်ပင်အဖြစ် စဉ်းစားပါ။ ဝဘ်စာရွက်စာတမ်းကို access လုပ်ပြီး ပြင်ဆင်၊ ပြောင်းလဲ၊ ပြန်လည်စီစဉ်ခြင်းနှင့် အခြားစီမံခန့်ခွဲမှုများကို ပြုလုပ်နိုင်ရန် အမျိုးမျိုးသော API (Application Program Interfaces) များကို ရေးသားထားသည်။
+
+![DOM tree representation](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.my.png)
+
+> DOM နှင့် ၎င်းကို ကိုးကားထားသော HTML markup ၏ ကိုယ်စားပြုမှု။ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) မှ
+
+ဒီသင်ခန်းစာတွင် ကျွန်ုပ်တို့၏ interactive terrarium project ကို ပြီးစီးရန် JavaScript ကို ဖန်တီးပြီး ဝဘ်စာမျက်နှာပေါ်တွင် အပင်များကို ပြောင်းလဲနိုင်ရန် အသုံးပြုမည်။
+
+### ကြိုတင်လိုအပ်ချက်
+
+သင်၏ terrarium အတွက် HTML နှင့် CSS ကို ဖန်တီးပြီးဖြစ်ရမည်။ ဒီသင်ခန်းစာအဆုံးတွင် သင်သည် အပင်များကို drag လုပ်၍ terrarium ထဲသို့ ထည့်ခြင်းနှင့် ထုတ်ခြင်းကို ပြုလုပ်နိုင်မည်ဖြစ်သည်။
+
+### လုပ်ဆောင်ရန်
+
+သင်၏ terrarium folder တွင် `script.js` ဟုခေါ်သော ဖိုင်အသစ်တစ်ခု ဖန်တီးပါ။ ၎င်းကို `<head>` အပိုင်းတွင် import လုပ်ပါ။
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Note: HTML ဖိုင်ကို အပြည့်အစုံ load ပြီးနောက်မှ JavaScript ကို run ဖို့ `defer` ကို အသုံးပြုပါ။ `async` attribute ကိုလည်း အသုံးပြုနိုင်ပြီး၊ ၎င်းသည် HTML ဖိုင်ကို parsing လုပ်နေစဉ် script ကို run လုပ်နိုင်စေသည်။ သို့သော် ကျွန်ုပ်တို့၏အခြေအနေတွင် drag script ကို run လုပ်မီ HTML elements အားလုံးကို ပြည့်စုံစွာ အသုံးပြုနိုင်ရန်လိုအပ်သည်။
+---
+
+## DOM elements
+
+DOM တွင် ပြောင်းလဲလိုသော elements များကို reference ဖန်တီးရန် အရေးကြီးသည်။ ကျွန်ုပ်တို့၏အခြေအနေတွင်၊ ၎င်းတို့သည် side bars တွင်ရှိသော 14 ခုသော အပင်များဖြစ်သည်။
+
+### လုပ်ဆောင်ရန်
+
+```html
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+ဒီမှာ ဘာဖြစ်နေလဲ? သင်သည် document ကို reference လုပ်ပြီး DOM တွင် Id တစ်ခုရှိသော element ကို ရှာဖွေနေသည်။ HTML သင်ခန်းစာပထမပိုင်းတွင် အပင်ပုံရိပ်တစ်ခုစီကို individual Ids (`id="plant1"`) ပေးခဲ့သည်ကို သတိရပါ။ အခုတော့ ၎င်းကို အသုံးပြုမည်။ Element တစ်ခုကို identify ပြီးနောက်၊ ၎င်းကို `dragElement` ဟုခေါ်သော function သို့ pass လုပ်သည်။ သင်မကြာမီ ဖန်တီးမည့် function ဖြစ်သည်။ ထို့ကြောင့် HTML ၏ element သည် drag-enabled ဖြစ်လာသည်။
+
+✅ အဘယ်ကြောင့် elements များကို Id ဖြင့် reference လုပ်သနည်း? CSS class ဖြင့် reference မလုပ်ဘဲ အဘယ်ကြောင့်?
+
+---
+
+## Closure
+
+အခုတော့ သင်သည် dragElement closure ကို ဖန်တီးရန် ပြင်ဆင်ပြီးဖြစ်သည်။ ၎င်းသည် အတွင်း function (သို့) functions များကို ပတ်လည်ဖုံးအုပ်ထားသော အပြင် function တစ်ခုဖြစ်သည်။ (ကျွန်ုပ်တို့၏အခြေအနေတွင် သုံးခုရှိမည်)
+
+Closures သည် function တစ်ခု (သို့) function များသည် အပြင် function ၏ scope ကို access လုပ်ရန် အသုံးဝင်သည်။ ဥပမာအားဖြင့်:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+ဒီဥပမာတွင် `displayCandy` function သည် candy အမျိုးအစားအသစ်ကို array ထဲသို့ push လုပ်သော function ကို ပတ်လည်ဖုံးအုပ်ထားသည်။ ဒီ code ကို run လုပ်ပါက `candy` array သည် undefined ဖြစ်မည်။ ၎င်းသည် closure ၏ local variable ဖြစ်သောကြောင့်ဖြစ်သည်။
+
+✅ `candy` array ကို accessible ဖြစ်စေရန် ဘာလုပ်ရမလဲ? ၎င်းကို closure အပြင်ဘက်သို့ ရွှေ့ပါ။ ဒီနည်းဖြင့် array သည် global ဖြစ်ပြီး closure ၏ local scope တွင်သာ ရှိနေမည်မဟုတ်တော့။
+
+### လုပ်ဆောင်ရန်
+
+`script.js` တွင် element declarations အောက်တွင် 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` သည် ၎င်း၏ `terrariumElement` object ကို script အပေါ်ပိုင်းတွင်ရှိ declarations မှရရှိသည်။ ထို့နောက်၊ object ကို function ထဲသို့ pass လုပ်ပြီး local positions ကို `0` သတ်မှတ်သည်။ ၎င်းသည် drag နှင့် drop functionality ကို element တစ်ခုစီတွင် ထည့်သွင်းသောအခါ ပြောင်းလဲရန် local variables ဖြစ်သည်။ Terrarium သည် drag လုပ်ထားသော elements များဖြင့် ပြည့်စုံမည်ဖြစ်သောကြောင့် application သည် ၎င်းတို့ကိုထားရှိထားသောနေရာကို စောင့်ကြည့်ရန်လိုအပ်သည်။
+
+ထို့အပြင်၊ function သို့ pass လုပ်ထားသော terrariumElement သည် `pointerdown` event ကို assign လုပ်ထားသည်။ ၎င်းသည် DOM management အတွက် [web APIs](https://developer.mozilla.org/docs/Web/API) ၏ အစိတ်အပိုင်းဖြစ်သည်။ `onpointerdown` သည် button ကို push လုပ်သောအခါ (သို့) draggable element ကို touch လုပ်သောအခါ fired ဖြစ်သည်။ ဒီ event handler သည် [web နှင့် mobile browsers](https://caniuse.com/?search=onpointerdown) နှစ်ခုစလုံးတွင် အလုပ်လုပ်သည်။
+
+✅ [event handler `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) သည် browser များတွင် support ပိုများသည်။ ဒီနေရာတွင် မသုံးသင့်သောအကြောင်းရင်းကို စဉ်းစားပါ။
+
+---
+
+## Pointerdrag function
+
+`terrariumElement` သည် drag လုပ်ရန် ပြင်ဆင်ပြီးဖြစ်သည်။ `onpointerdown` event fired ဖြစ်သောအခါ `pointerDrag` function ကို invoke လုပ်သည်။ ဒီလိုင်းအောက်တွင် function ကို ထည့်ပါ။ `terrariumElement.onpointerdown = pointerDrag;`:
+
+### လုပ်ဆောင်ရန်
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+အရာများစွာဖြစ်ပျက်သည်။ ပထမဦးစွာ၊ `e.preventDefault();` ကို အသုံးပြု၍ pointerdown တွင် ဖြစ်ပျက်သည့် default events များကို မဖြစ်အောင်တားဆီးသည်။ ဒီနည်းဖြင့် interface ၏ အပြုအမူကို ပိုမိုထိန်းချုပ်နိုင်သည်။
+
+> script ဖိုင်ကို အပြည့်အစုံဖန်တီးပြီးနောက် `e.preventDefault()` မပါဘဲ run လုပ်ကြည့်ပါ။ ဘာဖြစ်သနည်း?
+
+ဒုတိယအနေနှင့် `index.html` ကို browser window တွင်ဖွင့်ပြီး interface ကို inspect လုပ်ပါ။ အပင်ကို click လုပ်သောအခါ၊ 'e' event ကို capture လုပ်ပုံကို မြင်နိုင်သည်။ event ကို အနက်ရှိုင်းစွာကြည့်ပြီး pointer down event တစ်ခုမှ အချက်အလက်များကို ဘယ်လောက်များစုဆောင်းထားသည်ကို ကြည့်ပါ။
+
+ထို့နောက်၊ local variables `pos3` နှင့် `pos4` ကို e.clientX သို့ set လုပ်ထားပုံကို သတိပြုပါ။ inspection pane တွင် `e` values ကို တွေ့နိုင်သည်။ ဒီ values များသည် အပင်ကို click (သို့) touch လုပ်သောအချိန်တွင် ၎င်း၏ x နှင့် y coordinates ကို capture လုပ်သည်။ အပင်များကို click နှင့် drag လုပ်သောအခါ၎င်းတို့၏အပြုအမူကို စိတ်ကြိုက်ထိန်းချုပ်ရန် ၎င်းတို့၏ coordinates ကို စောင့်ကြည့်ထားသည်။
+
+✅ ဒီ app ကို closure တစ်ခုဖြင့် ဖန်တီးထားရသည့်အကြောင်းရင်း ပိုမိုရှင်းလင်းလာပါသလား? မဟုတ်ပါက၊ draggable plants 14 ခုစီ၏ scope ကို ဘယ်လိုထိန်းသိမ်းမလဲ?
+
+`pos4 = e.clientY` အောက်တွင် pointer event manipulations နှစ်ခုကို ထည့်ပါ။
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+
+အခုတော့ pointer နှင့် plant ကို drag လုပ်သောအခါ၊ drag လုပ်မှု gesture ကို deselect လုပ်သောအခါ ရပ်တန့်ရန် သတ်မှတ်ထားသည်။ `onpointermove` နှင့် `onpointerup` သည် `onpointerdown` API ၏ အစိတ်အပိုင်းများဖြစ်သည်။ interface သည် error များကို throw လုပ်မည်။ ၎င်းသည် `elementDrag` နှင့် `stopElementDrag` functions များကို မသတ်မှတ်ရသေးသောကြောင့်ဖြစ်သည်။ function များကို နောက်တစ်ဆင့်တွင် ဖန်တီးပါ။
+
+## elementDrag နှင့် stopElementDrag functions
+
+သင်၏ closure ကို ပြီးစီးရန် အပင်ကို drag လုပ်သောအခါနှင့် drag လုပ်မှုကို ရပ်တန့်သောအခါ ဖြစ်ပျက်မည့်အရာများကို စီမံခန့်ခွဲမည့် internal functions နှစ်ခုကို ထည့်သွင်းမည်။ သင်လိုချင်သော behavior သည် အပင်တစ်ခုစီကို မည်သည့်အချိန်တွင်မဆို drag လုပ်နိုင်ပြီး screen ပေါ်တွင် မည်သည့်နေရာတွင်မဆိုထားနိုင်ရန်ဖြစ်သည်။ ဒီ interface သည် drop zone မပါသော un-opinionated ဖြစ်သည်။ သင်၏ terrarium ကို စိတ်ကြိုက်ဒီဇိုင်းဆွဲနိုင်ရန် အပင်များကို ထည့်သွင်း၊ ဖယ်ရှား၊ ပြန်လည်ထားရှိနိုင်သည်။
+
+### လုပ်ဆောင်ရန်
+
+`pointerDrag` ၏ closing curly bracket အောက်တွင် `elementDrag` function ကို ထည့်ပါ။
+
+```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';
+}
+```
+
+ဒီ function တွင် သင်သည် အစပိုင်းတွင် local variables 1-4 ကို ပြင်ဆင်ထားသည်။ ဒီမှာ ဘာဖြစ်နေလဲ?
+
+Drag လုပ်သောအခါ၊ `pos1` ကို `pos3` (အရင်က `e.clientX` အဖြစ် set လုပ်ထားသည်) နှင့် လက်ရှိ `e.clientX` တန်ဖိုးကို လျှော့ချခြင်းဖြင့် ပြန်လည် assign လုပ်သည်။ `pos2` ကိုလည်း အတူတူလုပ်ဆောင်သည်။ ထို့နောက်၊ `pos3` နှင့် `pos4` ကို element ၏ X နှင့် Y coordinates အသစ်များသို့ ပြန်လည် reset လုပ်သည်။ drag လုပ်နေစဉ်၊ console တွင် ဒီပြောင်းလဲမှုများကို ကြည့်နိုင်သည်။ ထို့နောက်၊ plant ၏ css style ကို ပြောင်းလဲပြီး၊ `pos1` နှင့် `pos2` ၏ တန်ဖိုးအသစ်များအပေါ်မူတည်၍ top နှင့် left X နှင့် Y coordinates ကို သတ်မှတ်သည်။
+
+> `offsetTop` နှင့် `offsetLeft` သည် element ၏ parent ၏ position အပေါ်မူတည်၍ position ကို သတ်မှတ်သော CSS properties ဖြစ်သည်။ parent သည် `static` မဟုတ်သော position ဖြစ်နိုင်သည်။
+
+ဒီ position များကို ပြန်လည်တွက်ချက်ခြင်းသည် terrarium နှင့် ၎င်း၏ plants ၏ behavior ကို စိတ်ကြိုက်ပြုလုပ်ရန် ခွင့်ပြုသည်။
+
+### လုပ်ဆောင်ရန်
+
+interface ကို ပြီးစီးရန် နောက်ဆုံးလုပ်ဆောင်ရန်မှာ `elementDrag` ၏ closing curly bracket အောက်တွင် `stopElementDrag` function ကို ထည့်သွင်းပါ။
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+ဒီ function သေးငယ်သည် `onpointerup` နှင့် `onpointermove` events များကို reset လုပ်သည်။ ၎င်းသည် သင်၏ plant ၏ progress ကို ပြန်လည်စတင်ရန် (သို့) အပင်အသစ်ကို drag လုပ်ရန် ခွင့်ပြုသည်။
+
+✅ ဒီ events များကို null သို့ set မလုပ်ပါက ဘာဖြစ်မည်?
+
+အခုတော့ သင်၏ project ကို ပြီးစီးပါပြီ!
+
+🥇ဂုဏ်ယူပါတယ်! သင်၏လှပသော terrarium ကို ပြီးစီးပါပြီ။ ![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.my.png)
+
+---
+
+## 🚀စိန်ခေါ်မှု
+
+သင်၏ closure တွင် event handler အသစ်ထည့်သွင်းပြီး အပင်များအပေါ် အခြားအရာများပြုလုပ်ပါ။ ဥပမာအားဖြင့်၊ အပင်ကို double-click လုပ်ပြီး အပင်ကို အရှေ့ဘက်သို့ ရောက်စေပါ။ စိတ်ဖန်တီးမှုရှိပါစေ!
+
+## မိမိသင်ခန်းစာပြီးနောက် စမ်းမေးခွန်း
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+Element များကို screen ပေါ်တွင် drag လုပ်ခြင်းသည် ရိုးရှင်းသည့်အရာဖြစ်သော်လည်း၊ ၎င်းကို ပြုလုပ်ရန် နည်းလမ်းများစွာရှိပြီး၊ သင်လိုချင်သော effect အပေါ်မူတည်၍ အခက်အခဲများစွာရှိနိုင်သည်။ အမှန်တကယ် [drag and drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) တစ်ခုလုံးရှိသည်။ ဒီ module တွင် ကျွန်ုပ်တို့မသုံးခဲ့သောကြောင့်၊ ကျွန်ုပ်တို့လိုချင်သော effect သည် ကွဲပြားနေသည်။ သို့သော်၊ သင်၏ project တွင် ဒီ API ကို စမ်းသုံးပြီး ဘာတွေပြုလုပ်နိုင်သည်ကို ကြည့်ပါ။
+
+Pointer events အကြောင်းကို [W3C docs](https://www.w3.org/TR/pointerevents1/) နှင့် [MDN web docs](https://developer.mozilla.org/docs/Web/API/Pointer_events) တွင် ပိုမိုလေ့လာပါ။
+
+Browser capabilities ကို [CanIUse.com](https://caniuse.com/) တွင် အမြဲစစ်ဆေးပါ။
+
+
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/my/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..db460c32
--- /dev/null
+++ b/translations/my/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "22fb6c3cb570c47f1ac65048393941fa",
+  "translation_date": "2025-08-27T22:40:03+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "my"
+}
+-->
+# DOM နှင့် ပိုမိုလုပ်ဆောင်ခြင်း
+
+## လမ်းညွှန်ချက်များ
+
+DOM ကိုနည်းနည်းပိုမိုလေ့လာရန် DOM element တစ်ခုကို 'သိမ်းယူ' လုပ်ပါ။ MDN ရဲ့ [DOM interfaces စာရင်း](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) ကိုသွားရောက်ကြည့်ရှုပြီး တစ်ခုကိုရွေးပါ။ အဲဒီ element ကို ဝဘ်ဆိုဒ်တစ်ခုမှာ အသုံးပြုထားတာကိုရှာဖွေပြီး၊ အဲဒီ element ကို ဘယ်လိုအသုံးပြုထားတယ်ဆိုတာ ရှင်းလင်းချက်ရေးပါ။
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော                                     | လုံလောက်သော                                         | တိုးတက်မှုလိုအပ်သော       |
+| ----------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|             | ဥပမာနှင့်အတူ စာပိုဒ်ရေးသားချက်ကိုတင်ပြထားသည် | ဥပမာမပါဘဲ စာပိုဒ်ရေးသားချက်ကိုတင်ပြထားသည်         | စာပိုဒ်ရေးသားချက်မတင်ပြထားပါ |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/3-terrarium/README.md b/translations/my/3-terrarium/README.md
new file mode 100644
index 00000000..53c0cb65
--- /dev/null
+++ b/translations/my/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-27T22:34:42+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "my"
+}
+-->
+# ကျွန်ုပ်၏ Terrarium: HTML, CSS နှင့် DOM ကို JavaScript အသုံးပြု၍ လေ့လာရန် Project 🌵🌱
+
+အနည်းငယ် HTML, JS နှင့် CSS ကို အသုံးပြု၍ drag and drop လုပ်နိုင်သော code-meditation တစ်ခုဖြစ်သည်။ သင်သည် web interface တစ်ခုကို တည်ဆောက်နိုင်ပြီး၊ အလှဆင်နိုင်သည့်အပြင် သင်နှစ်သက်သော အမျိုးမျိုးသော အပြန်အလှန်လုပ်ဆောင်မှုများကို ထည့်သွင်းနိုင်ပါသည်။
+
+![my terrarium](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.my.png)
+
+# သင်ခန်းစာများ
+
+1. [HTML အကြောင်းမိတ်ဆက်](./1-intro-to-html/README.md)
+2. [CSS အကြောင်းမိတ်ဆက်](./2-intro-to-css/README.md)
+3. [DOM နှင့် JS Closures အကြောင်းမိတ်ဆက်](./3-intro-to-DOM-and-closures/README.md)
+
+## အကျေးဇူးတင်စကား
+
+♥️ ဖြင့် ရေးသားထားသည် [Jen Looper](https://www.twitter.com/jenlooper)
+
+CSS အသုံးပြု၍ ဖန်တီးထားသော terrarium သည် Jakub Mandra ၏ glass jar [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) မှ အားကိုးဖွယ်ရာဖြစ်သည်။
+
+အနုပညာလက်ရာများကို [Jen Looper](http://jenlooper.com) မှ Procreate အကူအညီဖြင့် လက်ဖြင့်ရေးဆွဲထားသည်။
+
+## သင့် Terrarium ကို Deploy လုပ်ပါ
+
+Azure Static Web Apps ကို အသုံးပြု၍ သင့် terrarium ကို အင်တာနက်ပေါ်တွင် deploy (သို့မဟုတ်) publish လုပ်နိုင်ပါသည်။
+
+1. ဒီ repo ကို fork လုပ်ပါ
+
+2. ဒီ 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. သင့် app ကို ဖန်တီးရန် wizard ကို လိုက်နာပါ။ သင့် app root ကို `/solution` သို့မဟုတ် သင့် codebase ရဲ့ root အဖြစ် သတ်မှတ်ပါ။ ဒီ app မှာ API မပါဝင်သဖြင့် API ထည့်ရန် စိတ်ပူစရာမလိုပါ။ သင့် fork လုပ်ထားသော repository တွင် github folder တစ်ခု ဖန်တီးမည်ဖြစ်ပြီး၊ Azure Static Web Apps ၏ build services သုံးပြီး သင့် app ကို build လုပ်ပြီး URL အသစ်တစ်ခုတွင် publish လုပ်ပေးမည်ဖြစ်သည်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတရ အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/3-terrarium/solution/README.md b/translations/my/3-terrarium/solution/README.md
new file mode 100644
index 00000000..ace9e20a
--- /dev/null
+++ b/translations/my/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-27T22:36:30+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "my"
+}
+-->
+# ကျွန်ုပ်၏ Terrarium: HTML, CSS နှင့် DOM ကို JavaScript အသုံးပြု၍ လေ့လာရန် Project 🌵🌱
+
+အနည်းငယ်သော drag and drop code-meditation ဖြစ်ပါတယ်။ HTML, JS နှင့် CSS အနည်းငယ်ကို အသုံးပြုပြီး web interface တစ်ခုကို တည်ဆောက်၊ အလှဆင်ပြီး အပြန်အလှန်လုပ်ဆောင်မှုများ ထည့်သွင်းနိုင်ပါတယ်။
+
+![my terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.my.png)
+
+## အကျေးဇူးတင်စကား
+
+♥️ ဖြင့်ရေးသားထားသော [Jen Looper](https://www.twitter.com/jenlooper)
+
+CSS အသုံးပြု၍ ဖန်တီးထားသော terrarium သည် Jakub Mandra ၏ glass jar [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) မှ အကြောင်းရင်းဖြစ်ပါတယ်။
+
+အနုပညာလက်ရာများကို [Jen Looper](http://jenlooper.com) မှ Procreate အသုံးပြု၍ လက်ဖြင့်ရေးဆွဲထားပါတယ်။
+
+## သင့် Terrarium ကို Deploy လုပ်ပါ
+
+Azure Static Web Apps ကို အသုံးပြု၍ သင့် terrarium ကို web ပေါ်တွင် deploy (သို့မဟုတ် publish) လုပ်နိုင်ပါတယ်။
+
+1. ဒီ repo ကို fork လုပ်ပါ
+
+2. ဒီ 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. သင့် app ကို ဖန်တီးရန် wizard ကို လိုက်နာပါ။ သင့် codebase ရဲ့ root ကို `/solution` သို့မဟုတ် root အဖြစ် သတ်မှတ်ထားရန် သေချာပါ။ ဒီ app မှာ API မပါဝင်သဖြင့် API ထည့်ရန် စိတ်ပူစရာမလိုပါဘူး။ သင့် fork လုပ်ထားသော repo မှာ .github folder တစ်ခု ဖန်တီးထားမည်ဖြစ်ပြီး Azure Static Web Apps' build service က သင့် app ကို build လုပ်ပြီး URL အသစ်တစ်ခုတွင် publish လုပ်ပေးပါမည်။
+
+---
+
+**ဝက်ဘ်ဆိုက်မှတ်ချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်ဆိုမှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတည်သော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူပညာရှင်များမှ ဘာသာပြန်ဆိုမှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်ဆိုမှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားများ သို့မဟုတ် အဓိပ္ပာယ်မှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/4-typing-game/README.md b/translations/my/4-typing-game/README.md
new file mode 100644
index 00000000..1127ea0a
--- /dev/null
+++ b/translations/my/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-27T22:43:19+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "my"
+}
+-->
+# အဖြစ်အပျက်အခြေခံ Programming - Typing Game တစ်ခု တည်ဆောက်ခြင်း
+
+## မိတ်ဆက်
+
+Typing က developer တွေအတွက် အရေးမကြီးတဲ့ ကျွမ်းကျင်မှုတစ်ခုလို ထင်ရတတ်ပါတယ်။ သို့သော် စိတ်ထဲမှာရှိတဲ့ အတွေးတွေကို editor ထဲကို အလျင်အမြန် ရေးသားနိုင်ခြင်းက စိတ်ကူးစိတ်သန်းတွေ လွတ်လပ်စွာ စီးဆင်းနိုင်စေပါတယ်။ သင်ယူဖို့ အကောင်းဆုံးနည်းလမ်းတစ်ခုကတော့ အပြုသဘောဆောင်တဲ့ ဂိမ်းတစ်ခုကို ကစားခြင်းပဲ ဖြစ်ပါတယ်။
+
+> ဒါကြောင့် Typing Game တစ်ခုကို တည်ဆောက်ကြမယ်!
+
+သင်ရဲ့ JavaScript, HTML နဲ့ CSS ကျွမ်းကျင်မှုတွေကို အသုံးပြုပြီး Typing Game တစ်ခုကို တည်ဆောက်မှာ ဖြစ်ပါတယ်။ ဂိမ်းက ကစားသူကို အမှတ်တစ်မထင် စကားစုတစ်ခု (ကျွန်တော်တို့ [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) ရဲ့ စကားစုတွေကို အသုံးပြုထားပါတယ်) ပေးပြီး၊ ကစားသူက အဲဒီ စကားစုကို မှန်ကန်စွာ ရေးသားဖို့ အချိန်ယူရမယ်။ သင်ရဲ့ JavaScript, HTML နဲ့ CSS ကျွမ်းကျင်မှုတွေကို အသုံးပြုပြီး Typing Game တစ်ခုကို တည်ဆောက်မှာ ဖြစ်ပါတယ်။
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## ကြိုတင်လိုအပ်ချက်များ
+
+ဒီသင်ခန်းစာက အောက်ပါ အကြောင်းအရာတွေကို နားလည်ပြီးသား ဖြစ်ရမယ်လို့ ခန့်မှန်းထားပါတယ်-
+
+- Text input နဲ့ button control တွေ ဖန်တီးခြင်း
+- CSS နဲ့ class တွေကို အသုံးပြုပြီး style တွေ သတ်မှတ်ခြင်း
+- JavaScript အခြေခံများ
+  - Array တစ်ခု ဖန်တီးခြင်း
+  - အမှတ်တစ်မထင် နံပါတ်တစ်ခု ဖန်တီးခြင်း
+  - လက်ရှိအချိန်ကို ရယူခြင်း
+
+## သင်ခန်းစာ
+
+[Event-driven programming ကို အသုံးပြုပြီး Typing Game တစ်ခု ဖန်တီးခြင်း](./typing-game/README.md)
+
+## အားလုံးကို ကျေးဇူးတင်ပါတယ်
+
+♥️ နဲ့ရေးသားထားသူ - [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+**ဝက်ဘ်ဆိုက်မှတ်ချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတည်သောရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ အတည်ပြုထားသော ဘာသာပြန်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားများ သို့မဟုတ် အဓိပ္ပာယ်မှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/4-typing-game/solution/README.md b/translations/my/4-typing-game/solution/README.md
new file mode 100644
index 00000000..57d67d74
--- /dev/null
+++ b/translations/my/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:45:49+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "my"
+}
+-->
+
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် ရှုယူသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/4-typing-game/typing-game/README.md b/translations/my/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..70512ce1
--- /dev/null
+++ b/translations/my/4-typing-game/typing-game/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-27T22:45:02+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "my"
+}
+-->
+# အဖြစ်အပျက်များကို အသုံးပြု၍ ဂိမ်းတစ်ခု ဖန်တီးခြင်း
+
+## မိန့်ခွန်းမပြောမီ စစ်ဆေးမေးခွန်း
+
+[မိန့်ခွန်းမပြောမီ စစ်ဆေးမေးခွန်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## အဖြစ်အပျက်အခြေပြု ပရိုဂရမ်ရေးသားမှု
+
+Browser အခြေပြု အက်ပ်လီကေးရှင်းတစ်ခု ဖန်တီးရာတွင် အသုံးပြုသူများအတွက် ဂရပ်ဖစ်အသုံးပြုသူအင်တာဖေ့စ် (GUI) တစ်ခုကို ပံ့ပိုးပေးရမည်ဖြစ်သည်။ Browser နှင့် အပြန်အလှန်ဆက်သွယ်ရာတွင် အများဆုံးအသုံးပြုသောနည်းလမ်းမှာ အမျိုးမျိုးသောအရာများကို နှိပ်ခြင်းနှင့် ရိုက်ထည့်ခြင်းဖြစ်သည်။ Developer အနေဖြင့် ကျွန်ုပ်တို့ကြုံရသော စိန်ခေါ်မှုမှာ သူတို့သည် အချိန်မရွေး အဲဒီလုပ်ဆောင်မှုများကို ပြုလုပ်မည်ကို မသိနိုင်ခြင်းဖြစ်သည်။
+
+[အဖြစ်အပျက်အခြေပြု ပရိုဂရမ်ရေးသားမှု](https://en.wikipedia.org/wiki/Event-driven_programming) သည် ကျွန်ုပ်တို့၏ GUI ကို ဖန်တီးရန် လိုအပ်သော ပရိုဂရမ်ရေးသားမှုအမျိုးအစားအတွက် အမည်ဖြစ်သည်။ ဒီစကားစုကို နည်းနည်းခွဲစိတ်ကြည့်ပါက အဓိကစကားလုံးမှာ **အဖြစ်အပျက်** ဖြစ်သည်ကို တွေ့ရမည်။ Merriam-Webster အဆိုအရ [အဖြစ်အပျက်](https://www.merriam-webster.com/dictionary/event) ကို "တစ်ခုခုဖြစ်ပျက်ခြင်း" ဟု အဓိပ္ပါယ်ဖွင့်ဆိုထားသည်။ ဒါက ကျွန်ုပ်တို့ရဲ့ အခြေအနေကို အတိအကျ ဖော်ပြထားတာဖြစ်ပါတယ်။ ကျွန်ုပ်တို့သည် တစ်ခုခုဖြစ်ပျက်မည်ကို သိပြီး၊ အဲဒီအတွက် ကုဒ်တစ်ခုကို တုံ့ပြန်အကောင်အထည်ဖော်လိုသော်လည်း၊ အဲဒါ ဘယ်အချိန်မှာ ဖြစ်မည်ကို မသိနိုင်ပါ။
+
+ကျွန်ုပ်တို့ အကောင်အထည်ဖော်လိုသည့် ကုဒ်ပိုင်းကို သတ်မှတ်ရန် နည်းလမ်းမှာ function တစ်ခု ဖန်တီးခြင်းဖြစ်သည်။ [Procedural programming](https://en.wikipedia.org/wiki/Procedural_programming) အတွင်း function များကို အတိအကျ အစဉ်လိုက် ခေါ်သုံးရသည်ဟု တွေးပါ။ အဖြစ်အပျက်အခြေပြု ပရိုဂရမ်ရေးသားမှုတွင်လည်း အဲဒီအရာတူညီပါသည်။ ကွာခြားချက်မှာ function များကို **ဘယ်လို** ခေါ်သုံးမည်ဆိုတာပဲ ဖြစ်သည်။
+
+အဖြစ်အပျက်များ (button နှိပ်ခြင်း၊ ရိုက်ထည့်ခြင်း စသည်) ကို ကိုင်တွယ်ရန် ကျွန်ုပ်တို့သည် **အဖြစ်အပျက်နားထောင်သူများ** (event listeners) ကို မှတ်ပုံတင်ရမည်။ အဖြစ်အပျက်နားထောင်သူသည် အဖြစ်အပျက်တစ်ခု ဖြစ်ပေါ်လာသည်ကို နားထောင်ပြီး၊ အဲဒီအတွက် တုံ့ပြန်မှုအနေဖြင့် လုပ်ဆောင်မှုတစ်ခုကို အကောင်အထည်ဖော်သည်။ အဖြစ်အပျက်နားထောင်သူများသည် UI ကို အပ်ဒိတ်လုပ်ခြင်း၊ server ကို ခေါ်ဆိုခြင်း သို့မဟုတ် အသုံးပြုသူ၏ လုပ်ဆောင်မှုအတွက် လိုအပ်သော အခြားအရာများကို ပြုလုပ်နိုင်သည်။ ကျွန်ုပ်တို့သည် [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) ကို အသုံးပြု၍ အဖြစ်အပျက်နားထောင်သူကို ထည့်သွင်းပြီး၊ လုပ်ဆောင်ရန် function ကို ပံ့ပိုးပေးသည်။
+
+> **NOTE:** အဖြစ်အပျက်နားထောင်သူများကို ဖန်တီးရန် နည်းလမ်းများစွာ ရှိသည်ကို သတိပြုပါ။ သင်သည် anonymous functions ကို အသုံးပြုနိုင်သလို၊ အမည်ပေးထားသော function များကိုလည်း ဖန်တီးနိုင်သည်။ `click` property ကို သတ်မှတ်ခြင်း၊ သို့မဟုတ် `addEventListener` ကို အသုံးပြုခြင်းကဲ့သို့သော shortcut များကိုလည်း အသုံးပြုနိုင်သည်။ ကျွန်ုပ်တို့၏ လေ့ကျင့်ခန်းတွင် `addEventListener` နှင့် anonymous functions ကို အဓိကထားမည်ဖြစ်သည်၊ အကြောင်းမှာ ဒါဟာ web developers များအကြား အများဆုံးအသုံးပြုသော နည်းလမ်းဖြစ်ပြီး၊ အလွန်ပြောင်းလွယ်ပြင်လွယ်သော နည်းလမ်းဖြစ်သည်။ `addEventListener` သည် အဖြစ်အပျက်အားလုံးအတွက် အလုပ်လုပ်နိုင်ပြီး၊ အဖြစ်အပျက်အမည်ကို parameter အဖြစ် ပံ့ပိုးပေးနိုင်သည်။
+
+### ရိုးရိုးတွေ့ရသော အဖြစ်အပျက်များ
+
+[အဖြစ်အပျက်များ](https://developer.mozilla.org/docs/Web/Events) အများအပြားကို သင်၏ အက်ပ်လီကေးရှင်း ဖန်တီးရာတွင် နားထောင်နိုင်သည်။ စာမျက်နှာပေါ်တွင် အသုံးပြုသူတစ်ဦး ပြုလုပ်သည့် အရာတိုင်းသည် အဖြစ်အပျက်တစ်ခုကို ဖြစ်ပေါ်စေပြီး၊ သင်၏ အသုံးပြုသူများအတွက် လိုအပ်သော အတွေ့အကြုံကို ပံ့ပိုးပေးရန် အလွန်အာဏာရှိသည်။ ကံကောင်းစွာ၊ သင်သည် အဖြစ်အပျက်အနည်းငယ်သာ လိုအပ်လိမ့်မည်။ ဂိမ်းဖန်တီးရာတွင် အသုံးပြုမည့် အဖြစ်အပျက်များအနက် အချို့ကို အောက်တွင် ဖော်ပြထားသည်-
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): အသုံးပြုသူသည် button သို့မဟုတ် hyperlink တစ်ခုကို နှိပ်ခြင်း
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): အသုံးပြုသူသည် ညာဘက်မောက်စ်ခလုတ်ကို နှိပ်ခြင်း
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): အသုံးပြုသူသည် စာသားတစ်ခုကို highlight ပြုလုပ်ခြင်း
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): အသုံးပြုသူသည် စာသားတစ်ခုကို ရိုက်ထည့်ခြင်း
+
+## ဂိမ်းဖန်တီးခြင်း
+
+ကျွန်ုပ်တို့သည် JavaScript တွင် အဖြစ်အပျက်များ အလုပ်လုပ်ပုံကို လေ့လာရန် ဂိမ်းတစ်ခု ဖန်တီးမည်။ ဂိမ်းသည် developer များအတွက် အရေးကြီးသော typing ကျွမ်းကျင်မှုကို စမ်းသပ်မည်ဖြစ်သည်။ Developer အားလုံးသည် typing ကျွမ်းကျင်မှုကို လေ့ကျင့်ထားသင့်သည်။ ဂိမ်း၏ အခြေခံစီးဆင်းမှုမှာ အောက်ပါအတိုင်းဖြစ်သည်-
+
+- Player သည် start button ကို နှိပ်ပြီး ရိုက်ရန် စာပိုဒ်တစ်ခုကို ကြည့်ရှုရမည်
+- Player သည် စာပိုဒ်ကို အမြန်ဆုံး ရိုက်ရမည်
+  - စကားလုံးတစ်လုံးပြီးတိုင်း နောက်တစ်လုံးကို highlight ပြုလုပ်မည်
+  - Player တွင် စာလုံးပေါင်းအမှားရှိပါက textbox ကို အနီရောင်ပြောင်းမည်
+  - Player သည် စာပိုဒ်ကို ပြီးမြောက်ပါက အောင်မြင်မှုစာသားနှင့် ကြာချိန်ကို ပြသမည်
+
+အခု ကျွန်ုပ်တို့၏ ဂိမ်းကို ဖန်တီးပြီး၊ အဖြစ်အပျက်များကို လေ့လာကြစို့!
+- [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ကို အသုံးပြုပြီး အမြင့်ဆုံးအမှတ်များကို သိမ်းဆည်းပါ။
+
+## မိန့်ခွန်းပြီးနောက် မေးခွန်းများ
+
+[မိန့်ခွန်းပြီးနောက် မေးခွန်းများ](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+[ဝဘ်ဘရောက်ဆာမှတဆင့်](https://developer.mozilla.org/docs/Web/Events) ဖွင့်နိုင်သော အဖြစ်အပျက်များအားလုံးကို ဖတ်ရှုပါ၊ သင့်အနေဖြင့် တစ်ခုချင်းစီကို မည်သည့်အခြေအနေတွင် အသုံးပြုမည်ကို စဉ်းစားပါ။
+
+## အိမ်စာ
+
+[ကီးဘုတ်ဂိမ်းအသစ်တစ်ခု ဖန်တီးပါ](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/4-typing-game/typing-game/assignment.md b/translations/my/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..97c0a7f9
--- /dev/null
+++ b/translations/my/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-27T22:45:37+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "my"
+}
+-->
+# ကီးဘုတ်ဂိမ်းအသစ်တစ်ခုဖန်တီးပါ
+
+## လမ်းညွှန်ချက်များ
+
+ကီးဘုတ်ဖြင့်လုပ်ဆောင်မှုများကိုအသုံးပြုသောဂိမ်းသေးသေးလေးတစ်ခုဖန်တီးပါ။ ၎င်းသည်အခြားအမျိုးအစားဖြစ်နိုင်သည်၊ ဥပမာအားဖြင့်ရိုက်နှိပ်မှုဂိမ်းတစ်ခု၊ သို့မဟုတ်ကီးဘုတ်နှိပ်မှုများဖြင့်ဖန်တီးမှုအနုပညာပုံစံဂိမ်းတစ်ခုဖြစ်နိုင်သည်။ ဖန်တီးမှုစိတ်ကူးများကိုအသုံးပြုပါ!
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော | လုံလောက်သော | တိုးတက်မှုလိုအပ်သည် |
+| -------- | ------------------------ | ------------------------ | ----------------- |
+|          | ပြည့်စုံသောဂိမ်းတစ်ခုဖန်တီးထားသည် | ဂိမ်းသည်အလွန်ရိုးရှင်းသည် | ဂိမ်းတွင်အမှားများရှိသည် |
+|          |                          |                          |                   |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှု ဝန်ဆောင်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/1-about-browsers/README.md b/translations/my/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..a165df10
--- /dev/null
+++ b/translations/my/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-27T22:10:05+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "my"
+}
+-->
+# Browser Extension Project Part 1: Browser များအကြောင်း
+
+![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.my.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](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### အကျဉ်းချုပ်
+
+Browser Extension များသည် Browser တွင်အပိုလုပ်ဆောင်ချက်များထည့်သွင်းပေးနိုင်သည်။ Browser Extension တစ်ခုကိုတည်ဆောက်မည်ဆိုပါက Browser များအလုပ်လုပ်ပုံကိုအရင်လေ့လာသင့်သည်။
+
+### Browser အကြောင်း
+
+ဒီသင်ခန်းစာများတွင် Chrome, Firefox, Edge Browser များတွင်အလုပ်လုပ်နိုင်သော Browser Extension တစ်ခုကိုတည်ဆောက်ပုံကိုလေ့လာမည်ဖြစ်သည်။ ဒီအပိုင်းတွင် Browser များအလုပ်လုပ်ပုံနှင့် Browser Extension ၏အခြေခံဖွဲ့စည်းမှုများကိုလေ့လာမည်ဖြစ်သည်။
+
+Browser ဆိုတာဘာလဲ? ဒါဟာ End User တစ်ဦးက Server မှအကြောင်းအရာများကိုရယူပြီး Web Page များပေါ်တွင်ပြသနိုင်စေသော Software Application တစ်ခုဖြစ်သည်။
+
+✅ သမိုင်းအနည်းငယ်: ပထမဆုံး Browser ကို 'WorldWideWeb' ဟုခေါ်ပြီး Sir Timothy Berners-Lee က 1990 ခုနှစ်တွင်ဖန်တီးခဲ့သည်။
+
+![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.my.jpg)
+> Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+User တစ်ဦးက URL (Uniform Resource Locator) လိပ်စာကိုအသုံးပြု၍ အင်တာနက်နှင့်ချိတ်ဆက်သောအခါ၊ `http` သို့မဟုတ် `https` လိပ်စာကိုအသုံးပြု၍ Hypertext Transfer Protocol ဖြင့် Web Server နှင့်ဆက်သွယ်ပြီး Web Page ကိုရယူသည်။
+
+ဒီအချိန်တွင် Browser ၏ Rendering Engine က User ၏ Device (မိုဘိုင်းဖုန်း, Desktop, Laptop စသည်တို့) ပေါ်တွင် Web Page ကိုပြသပေးသည်။
+
+Browser များတွင် Content ကို Cache လုပ်ထားနိုင်သောစွမ်းရည်ရှိပြီး Server မှအကြောင်းအရာများကိုအကြိမ်တိုင်းရယူရန်မလိုအပ်စေပါ။ User ၏ Browsing Activity ကိုမှတ်တမ်းတင်ထားနိုင်ပြီး 'Cookies' ဟုခေါ်သော Data အနည်းငယ်ကိုသိမ်းဆည်းထားနိုင်သည်။ Cookies တွင် User ၏လုပ်ဆောင်မှုများနှင့်ပတ်သက်သောအချက်အလက်များပါဝင်သည်။
+
+Browser များသည်တစ်ခုနှင့်တစ်ခုမတူကြောင်းသတိထားပါ။ Browser တစ်ခုစီတွင်အားသာချက်နှင့်အားနည်းချက်များရှိပြီး Professional Web Developer တစ်ဦးအနေဖြင့် Web Page များကို Cross-Browser တွင်အကောင်းဆုံးအလုပ်လုပ်စေရန်နားလည်ထားရန်လိုအပ်သည်။ ဒါတွင် မိုဘိုင်းဖုန်းကဲ့သို့သော Viewport သေးငယ်များကို Handle လုပ်ခြင်းနှင့် Offline ဖြစ်နေသော User များကို Handle လုပ်ခြင်းတို့ပါဝင်သည်။
+
+သင့်အကြိုက် Browser ကိုအသုံးပြု၍ Bookmark လုပ်ထားသင့်သော Website တစ်ခုက [caniuse.com](https://www.caniuse.com) ဖြစ်သည်။ Web Page များကိုတည်ဆောက်နေစဉ်တွင် caniuse ၏ Supported Technologies စာရင်းများကိုအသုံးပြုခြင်းသည် User များကိုအကောင်းဆုံး Support ပေးနိုင်ရန်အထောက်အကူဖြစ်သည်။
+
+✅ သင့် Website ၏ User Base တွင်အများဆုံးအသုံးပြုသော Browser များကိုဘယ်လိုသိနိုင်မလဲ? Analytics ကိုစစ်ဆေးပါ - Web Development Process ၏အစိတ်အပိုင်းအဖြစ် Analytics Package များကိုတပ်ဆင်နိုင်ပြီး Popular Browser များအားလုံးတွင်အများဆုံးအသုံးပြုသော Browser များကိုပြသပေးပါမည်။
+
+## Browser Extension များ
+
+Browser Extension တစ်ခုကိုဘယ်လိုတည်ဆောက်ချင်ရတာလဲ? သင်မကြာခဏလုပ်ဆောင်ရသော Tasks များကိုလွယ်ကူစွာရယူရန် Browser တွင်တပ်ဆင်ထားသောအရာတစ်ခုဖြစ်သည်။ ဥပမာအားဖြင့် Web Page များတွင်အရောင်များကိုစစ်ဆေးရန်လိုအပ်လျှင် Color-picker Browser Extension တစ်ခုကိုတပ်ဆင်နိုင်သည်။ Password များကိုမှတ်မိရန်အခက်အခဲရှိလျှင် Password-management Browser Extension ကိုအသုံးပြုနိုင်သည်။
+
+Browser Extension များကိုတည်ဆောက်ခြင်းသည်ပျော်စရာကောင်းသည်။ အကန့်အသတ်ရှိသော Tasks များကိုအကောင်းဆုံးလုပ်ဆောင်ပေးနိုင်သည်။
+
+✅ သင့်အကြိုက် Browser Extension များကဘာလဲ? သူတို့ဘယ်လို Tasks များကိုလုပ်ဆောင်ပေးသလဲ?
+
+### Extension များတပ်ဆင်ခြင်း
+
+Browser Extension တစ်ခုကိုတည်ဆောက်ပြီး Deploy လုပ်ပုံကိုကြည့်ရှုပါ။ Browser တစ်ခုစီတွင်ဒီလုပ်ငန်းစဉ်ကို Handle လုပ်ပုံကွဲပြားနိုင်သော်လည်း Chrome နှင့် Firefox တွင် Edge Browser တွင်လုပ်ဆောင်ပုံနှင့်ဆင်တူသည်။
+
+![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.my.png)
+
+> Note: Developer Mode ကိုဖွင့်ထားပြီး Other Stores မှ Extension များကို Allow လုပ်ထားရန်သေချာပါ။
+
+အခြေခံအားဖြင့်လုပ်ငန်းစဉ်မှာ -
+
+- `npm run build` ကိုအသုံးပြု၍ Extension ကို Build လုပ်ပါ
+- Browser တွင် "Settings and more" Button (အပေါ်ယံညာဘက်ရှိ `...` icon) ကိုအသုံးပြု၍ Extension Pane သို့သွားပါ
+- Installation အသစ်ဖြစ်လျှင် `load unpacked` ကိုရွေးချယ်ပြီး Build Folder (ဤကိစ္စတွင် `/dist`) မှ Fresh Extension ကို Upload လုပ်ပါ
+- သို့မဟုတ်, ရှိပြီးသား Installed Extension ကို Reload လုပ်ပါ
+
+✅ ဒီအညွှန်းများသည် သင်တိုင်တည်ဆောက်သော Extension များအတွက်ဖြစ်သည်။ Browser Extension Store တွင် Release လုပ်ထားသော Extension များကိုတပ်ဆင်ရန် Browser တစ်ခုစီနှင့်ဆက်စပ်သော [Stores](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) သို့သွားပြီး သင့်အကြိုက် Extension ကိုတပ်ဆင်ပါ။
+
+### စတင်လုပ်ဆောင်ပါ
+
+သင့်ဒေသ၏ Carbon Footprint ကိုပြသသော Browser Extension တစ်ခုကိုတည်ဆောက်မည်ဖြစ်သည်။ ဒေသ၏ Energy Usage နှင့် Energy Source ကိုပြသမည်။ Extension တွင် API Key ကိုရယူရန် Form တစ်ခုပါဝင်မည်။
+
+**လိုအပ်သောအရာများ:**
+
+- [API key](https://www.co2signal.com/) - ဒီ Page တွင် Email ကိုထည့်ပြီး API Key ရယူပါ
+- [Region Code](http://api.electricitymap.org/v3/zones) - [Electricity Map](https://www.electricitymap.org/map) တွင်သင့်ဒေသ၏ Code ကိုရယူပါ (ဥပမာ Boston တွင် 'US-NEISO' ကိုအသုံးပြုသည်)
+- [Starter Code](../../../../5-browser-extension/start) - `start` Folder ကို Download လုပ်ပါ; ဒီ Folder တွင် Code ကိုပြီးစီးပါမည်။
+- [NPM](https://www.npmjs.com) - NPM သည် Package Management Tool ဖြစ်သည်; သင့် Local Computer တွင် Install လုပ်ပြီး `package.json` File တွင်ဖော်ပြထားသော Packages များကို Install လုပ်ပါ
+
+✅ Package Management အကြောင်းကို [Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) မှာပိုမိုလေ့လာပါ
+
+Codebase ကိုကြည့်ရှုရန်အချိန်ယူပါ:
+
+dist
+    -|manifest.json (defaults set here)
+    -|index.html (front-end HTML markup here)
+    -|background.js (background JS here)
+    -|main.js (built JS)
+src
+    -|index.js (your JS code goes here)
+
+✅ API Key နှင့် Region Code ကိုရယူပြီးနောက် Note တစ်ခုတွင်သိမ်းဆည်းထားပါ။
+
+### Extension ၏ HTML ကိုတည်ဆောက်ပါ
+
+ဒီ Extension တွင် Views နှစ်ခုပါဝင်သည်။ API Key နှင့် Region Code ကိုရယူရန် View တစ်ခု:
+
+![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.my.png)
+
+နှင့် Region ၏ Carbon Usage ကိုပြသရန် View တစ်ခု:
+
+![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.my.png)
+
+Form ကိုတည်ဆောက်ပြီး CSS ဖြင့် Style လုပ်ခြင်းမှစတင်ပါ။
+
+`/dist` Folder တွင် Form နှင့် Result Area တစ်ခုကိုတည်ဆောက်ပါ။ `index.html` File တွင် Form Area ကို Populate လုပ်ပါ:
+
+```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>	
+```
+ဒီ Form သည်သင့် Save လုပ်ထားသောအချက်အလက်များကို Input လုပ်ပြီး Local Storage တွင်သိမ်းဆည်းရန်ဖြစ်သည်။
+
+နောက်တစ်ဆင့် Result Area ကိုတည်ဆောက်ပါ; Form Tag ၏အောက်တွင် Div များကိုထည့်ပါ:
+
+```HTML
+<div class="result">
+	<div class="loading">loading...</div>
+	<div class="errors"></div>
+	<div class="data"></div>
+	<div class="result-container">
+		<p><strong>Region: </strong><span class="my-region"></span></p>
+		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+	</div>
+	<button class="clear-btn">Change region</button>
+</div>
+```
+ဒီအချိန်တွင် Build လုပ်နိုင်ပါပြီ။ Extension ၏ Package Dependencies များကို Install လုပ်ရန်သေချာပါ:
+
+```
+npm install
+```
+
+ဒီ Command သည် npm, Node Package Manager ကိုအသုံးပြု၍ Extension ၏ Build Process အတွက် webpack ကို Install လုပ်ပါမည်။ ဒီ Process ၏ Output ကို `/dist/main.js` တွင်ကြည့်နိုင်သည် - Code ကို Bundled လုပ်ထားသည်ကိုတွေ့ရမည်။
+
+အခုအချိန်တွင် Extension ကို Build လုပ်ပြီး Edge Browser တွင် Extension အဖြစ် Deploy လုပ်ပါက Form တစ်ခုကိုတိကျစွာပြသထားသည်ကိုတွေ့ရမည်။
+
+အောင်မြင်ပါပြီ၊ Browser Extension တစ်ခုကိုတည်ဆောက်ရန်ပထမဆုံးအဆင့်များကိုအောင်မြင်စွာလုပ်ဆောင်ပြီးပါပြီ။ နောက်ထပ်သင်ခန်းစာများတွင် Functionality ပိုမိုကောင်းမွန်ပြီးအသုံးဝင်သော Extension တစ်ခုကိုတည်ဆောက်မည်ဖြစ်သည်။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+Browser Extension Store တစ်ခုကိုကြည့်ရှုပြီး Browser တွင် Extension တစ်ခုကိုတပ်ဆင်ပါ။ Files များကိုစူးစမ်းကြည့်ပါ။ ဘာတွေတွေ့ရလဲ?
+
+## မိမိကိုယ်ကိုစစ်မေးရန်မေးခွန်းများ
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့်ကိုယ်တိုင်လေ့လာခြင်း
+
+ဒီသင်ခန်းစာတွင် Web Browser ၏သမိုင်းအနည်းငယ်ကိုလေ့လာခဲ့သည်။ World Wide Web ၏တီထွင်သူများက Web ကိုဘယ်လိုအသုံးပြုရန်ရည်ရွယ်ခဲ့သည်ကိုပိုမိုလေ့လာရန်အခွင့်အရေးယူပါ။ အသုံးဝင်သော Website များမှာ -
+
+[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)
+
+## လုပ်ငန်းတာဝန်
+
+[Restyle your extension](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/1-about-browsers/assignment.md b/translations/my/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..d1a90dba
--- /dev/null
+++ b/translations/my/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-27T22:10:47+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "my"
+}
+-->
+# သင့် Extension ကို ပြန်လည်ဒီဇိုင်းပြင်ဆင်ပါ
+
+## လမ်းညွှန်ချက်များ
+
+ဤ extension ၏ codebase တွင် styles များပါဝင်ပြီးပြီးစီးထားပါသည်၊ သို့သော် သင့် extension ကို သင့်ပုံစံအတိုင်း ပြန်လည်ဒီဇိုင်းပြင်ဆင်နိုင်ပါသည်။ ၎င်း၏ css ဖိုင်ကို တည်းဖြတ်ခြင်းဖြင့် ပြင်ဆင်ပါ။
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော                                    | လုံလောက်သော              | တိုးတက်မှုလိုအပ်သော |
+| -------- | -------------------------------------------- | --------------------- | ----------------- |
+|          | အသစ်ထည့်သွင်းထားသော styles များ အလုပ်လုပ်စွမ်းရှိသည် | Styling မပြီးစီးသေးပါ | Styles တွင် အမှားများရှိသည် |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှု ဝန်ဆောင်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/my/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..8874b271
--- /dev/null
+++ b/translations/my/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -0,0 +1,240 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e10f168beac4e7b05e30e0eb5c92bf11",
+  "translation_date": "2025-08-27T22:18:08+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "my"
+}
+-->
+# Browser Extension Project Part 2: API ကိုခေါ်ရန်၊ Local Storage ကိုအသုံးပြုရန်
+
+## မိန့်ခွန်းမတင်မီ စစ်ဆေးမှု
+
+[မိန့်ခွန်းမတင်မီ စစ်ဆေးမှု](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### နိဒါန်း
+
+ဒီသင်ခန်းစာမှာ သင့် browser extension ရဲ့ form ကို submit လုပ်ပြီး API ကိုခေါ်သုံးကာ ရလဒ်တွေကို browser extension မှာ ပြသပေးမှာဖြစ်ပါတယ်။ ထို့အပြင်၊ browser ရဲ့ local storage မှာ ဒေတာတွေကို သိမ်းဆည်းပြီး နောက်ပိုင်းအတွက် အသုံးပြုနိုင်မယ့်နည်းလမ်းကိုလည်း သင်ယူပါမယ်။
+
+✅ သင့်ရဲ့ code ကိုဘယ်နေရာမှာထည့်ရမယ်ဆိုတာ သိရန် အမှတ်အသားနံပါတ်များကို သင့်ဖိုင်များတွင်လိုက်နာပါ။
+
+### Extension ထဲမှာ ပြောင်းလဲနိုင်မယ့် elements တွေကို set up လုပ်ပါ:
+
+ဒီအချိန်မှာ သင့် browser extension အတွက် form နဲ့ results `<div>` ရဲ့ HTML ကို တည်ဆောက်ပြီးဖြစ်ပါပြီ။ အခုကစပြီး `/src/index.js` ဖိုင်မှာ အလုပ်လုပ်ရမှာဖြစ်ပြီး extension ကို အပိုင်းလိုက် တည်ဆောက်ရမှာဖြစ်ပါတယ်။ သင့်ရဲ့ project ကို set up လုပ်နည်းနဲ့ build လုပ်နည်းကို သိရန် [ယခင်သင်ခန်းစာ](../1-about-browsers/README.md) ကို ပြန်လည်ကြည့်ပါ။
+
+`index.js` ဖိုင်မှာ အလုပ်လုပ်ပြီးနောက်၊ အမျိုးမျိုးသော fields တွေနဲ့ ဆက်စပ်နေတဲ့ တန်ဖိုးတွေကို သိမ်းဆည်းဖို့ `const` variables တစ်ချို့ကို စတင်ဖန်တီးပါ:
+
+```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');
+```
+
+ဒီ fields တွေကို HTML မှာ သင်တည်ဆောက်ထားတဲ့ css class နဲ့ ရည်ညွှန်းထားပါတယ်။
+
+### Listeners ထည့်ပါ
+
+နောက်တစ်ဆင့်မှာတော့ form နဲ့ reset button အတွက် event listeners တွေထည့်ပါ။ ဒါကြောင့် user က form ကို submit လုပ်တဲ့အခါ သို့မဟုတ် reset button ကိုနှိပ်တဲ့အခါ တစ်ခုခုဖြစ်ပေါ်မှာဖြစ်ပါတယ်။ ဖိုင်ရဲ့ အောက်ဆုံးမှာ app ကို initialize လုပ်ဖို့ call ထည့်ပါ:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ submit event သို့မဟုတ် click event ကို နားထောင်ဖို့ shorthand ကို သတိပြုပါ၊ event ကို handleSubmit သို့မဟုတ် reset functions ကို ပေးပို့ပုံကိုလည်း သတိပြုပါ။ ဒီ shorthand ကို ပိုရှည်တဲ့ format နဲ့ရေးနိုင်မလား? သင်ဘယ်ဖော်မတ်ကို ပိုကြိုက်ပါသလဲ?
+
+### init() function နဲ့ reset() function ကို တည်ဆောက်ပါ:
+
+အခုတော့ extension ကို initialize လုပ်မယ့် function ကို တည်ဆောက်ပါ၊ ဒါက 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();
+}
+
+```
+
+ဒီ function ထဲမှာ စိတ်ဝင်စားစရာ logic တစ်ချို့ရှိပါတယ်။ ဖတ်ကြည့်ပြီး ဘာဖြစ်နေလဲဆိုတာ မြင်နိုင်ပါသလား?
+
+- `const` နှစ်ခုကို local storage ထဲမှာ user ရဲ့ APIKey နဲ့ region code ရှိမရှိ စစ်ဆေးဖို့ သတ်မှတ်ထားပါတယ်။
+- အဲဒီနှစ်ခုထဲက တစ်ခုခု null ဖြစ်ရင် form ကို 'block' အဖြစ်ပြောင်းပြီး ပြသပါ။
+- results, loading, နဲ့ clearBtn ကို ဖျောက်ပြီး error text ကို အလွတ် string အဖြစ် သတ်မှတ်ပါ။
+- key နဲ့ region ရှိနေခဲ့ရင်တော့ အောက်ပါအတိုင်းလုပ်ဆောင်ပါ:
+  - API ကိုခေါ်ပြီး carbon usage data ကိုရယူပါ။
+  - results area ကို ဖျောက်ပါ။
+  - form ကို ဖျောက်ပါ။
+  - reset button ကို ပြပါ။
+
+ရှေ့ဆက်မလုပ်မီ browser တွေမှာ ရရှိနိုင်တဲ့ အရေးကြီးသော concept တစ်ခုကို သင်ယူရမှာဖြစ်ပါတယ် - [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)။ LocalStorage က browser ထဲမှာ string တွေကို `key-value` pair အနေနဲ့ သိမ်းဆည်းဖို့ အသုံးဝင်ပါတယ်။ ဒီလို web storage ကို JavaScript နဲ့ manipulate လုပ်ပြီး browser ထဲမှာ ဒေတာကို စီမံနိုင်ပါတယ်။ LocalStorage က မသက်တမ်းကုန်သလို SessionStorage က browser ပိတ်လိုက်တာနဲ့ ဖျက်သိမ်းသွားပါတယ်။ storage အမျိုးအစားတွေမှာ အသုံးပြုမှုအပေါ် မတူညီတဲ့ အားသာချက်နဲ့ အားနည်းချက်တွေရှိပါတယ်။
+
+> မှတ်ချက် - သင့် browser extension ရဲ့ local storage က main browser window ရဲ့ instance နဲ့ မတူပါဘူး၊ သီးခြားစွာ လုပ်ဆောင်ပါတယ်။
+
+APIKey ကို string တန်ဖိုးတစ်ခုအဖြစ် သတ်မှတ်ပြီး၊ Edge မှာ "inspect" လုပ်ပြီး storage ကို Applications tab မှာကြည့်နိုင်ပါတယ်။
+
+![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.my.png)
+
+✅ LocalStorage မှာ ဒေတာတစ်ချို့ကို မသိမ်းသင့်တဲ့ အခြေအနေတွေကို စဉ်းစားကြည့်ပါ။ အထွေထွေအားဖြင့် API Keys ကို LocalStorage မှာ သိမ်းတာက အဆင်မပြေတဲ့အကြောင်းကို မြင်နိုင်ပါသလား? ကျွန်တော်တို့ရဲ့ app က သင်ယူရေးအတွက်သာဖြစ်ပြီး app store မှာ မတင်မီအတွက် ဒီနည်းကို အသုံးပြုမှာဖြစ်ပါတယ်။
+
+Web API ကို အသုံးပြုပြီး LocalStorage ကို manipulate လုပ်နိုင်ပါတယ်၊ `getItem()`, `setItem()`, သို့မဟုတ် `removeItem()` ကို အသုံးပြုနိုင်ပါတယ်။ ဒါဟာ browser အားလုံးမှာ ကျယ်ကျယ်ပြန့်ပြန့် support လုပ်ထားပါတယ်။
+
+`displayCarbonUsage()` function ကို တည်ဆောက်မတိုင်မီ၊ initial form submission ကို handle လုပ်မယ့် functionality ကို တည်ဆောက်ပါ။
+
+### Form submission ကို handle လုပ်ပါ
+
+`handleSubmit` လို့ခေါ်တဲ့ function တစ်ခုကို ဖန်တီးပြီး event argument `(e)` ကို လက်ခံပါ။ event ကို propagate မဖြစ်အောင် (ဒီအခါမှာ browser ကို refresh မလုပ်စေချင်တာ) ရပ်တန့်ပြီး၊ `setUpUser` လို့ခေါ်တဲ့ function ကို `apiKey.value` နဲ့ `region.value` arguments တွေကို ပေးပို့ပါ။ ဒီနည်းနဲ့ initial form ကနေ appropriate fields တွေကို populate လုပ်ပြီးရတဲ့ values နှစ်ခုကို အသုံးပြုနိုင်ပါတယ်။
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ သင့်ရဲ့မှတ်ဉာဏ်ကို ပြန်လည်တက်ကြွစေပါ - ယခင်သင်ခန်းစာမှာ သင်တည်ဆောက်ထားတဲ့ HTML မှာ `values` တွေကို capture လုပ်မယ့် input fields နှစ်ခုရှိပြီး၊ အဲဒီ fields နှစ်ခုလုံးကို `required` လို့ သတ်မှတ်ထားပါတယ်။ ဒါကြောင့် browser က user တွေကို null values ထည့်မရအောင် တားဆီးပါတယ်။
+
+### User ကို set up လုပ်ပါ
+
+`setUpUser` function ကို ဆက်လုပ်ပါ၊ ဒီမှာတော့ apiKey နဲ့ regionName အတွက် local storage values တွေကို set လုပ်ပါမယ်။ 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);
+}
+```
+
+ဒီ function က API ကိုခေါ်မယ့်အချိန် loading message ကို ပြသဖို့ သတ်မှတ်ထားပါတယ်။ ဒီအချိန်မှာ သင့် browser extension ရဲ့ အရေးကြီးဆုံး function ကို တည်ဆောက်ဖို့ ရောက်ရှိလာပါပြီ!
+
+### Carbon Usage ကို ပြသပါ
+
+အခုတော့ API ကို query လုပ်ဖို့ အချိန်ရောက်ပါပြီ!
+
+ရှေ့ဆက်မလုပ်မီ API တွေကို ဆွေးနွေးရမယ်။ API တွေဟာ [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html) လို့ခေါ်ပြီး web developer တွေရဲ့ toolbox မှာ အရေးကြီးတဲ့ အစိတ်အပိုင်းတစ်ခုဖြစ်ပါတယ်။ API တွေက programs တွေကို အချင်းချင်း ဆက်သွယ်ဖို့ standard နည်းလမ်းတွေ ပေးပါတယ်။ ဥပမာအားဖြင့် သင် database ကို query လုပ်ဖို့လိုတဲ့ web site တစ်ခု တည်ဆောက်နေရင်၊ တစ်ယောက်ယောက်က API တစ်ခုကို သင့်အတွက် ဖန်တီးထားနိုင်ပါတယ်။ API အမျိုးအစားတွေ များစွာရှိပေမယ့် [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/) က အများဆုံး အသုံးပြုတဲ့ API အမျိုးအစားတစ်ခုဖြစ်ပါတယ်။
+
+✅ 'REST' ဆိုတာ 'Representational State Transfer' ကို ရည်ညွှန်းပြီး၊ data ကို ရယူဖို့ အမျိုးမျိုးဖွဲ့စည်းထားတဲ့ URLs တွေကို အသုံးပြုပါတယ်။ Developer တွေအတွက် ရရှိနိုင်တဲ့ API အမျိုးအစားတွေကို သုတေသနလုပ်ပါ။ ဘယ် format က သင့်ကို ဆွဲဆောင်ပါသလဲ?
+
+ဒီ function အကြောင်း အရေးကြီးတဲ့ အချက်တွေကို သတိပြုပါ။ ပထမဦးစွာ [`async` keyword](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) ကို သတိပြုပါ။ သင့် function တွေကို asynchronous ဖြစ်အောင်ရေးခြင်းက data ပြန်လာတဲ့အချိန်အထိ စောင့်နေပြီးမှ ဆက်လုပ်ဆောင်စေပါတယ်။
+
+ဒီမှာ `async` အကြောင်း video တစ်ခုရှိပါတယ်:
+
+[![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")
+
+> 🎥 အထက်ပါပုံကိုနှိပ်ပြီး async/await အကြောင်း video ကိုကြည့်ပါ။
+
+C02Signal API ကို query လုပ်ဖို့ function အသစ်တစ်ခု ဖန်တီးပါ:
+
+```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.';
+	}
+}
+```
+
+ဒီ function က ကြီးမားပါတယ်။ ဘာဖြစ်နေလဲဆိုတာ ကြည့်ပါ:
+
+- best practices အတိုင်း `async` keyword ကို အသုံးပြုပြီး function ကို asynchronous ဖြစ်အောင်လုပ်ထားပါတယ်။ function ထဲမှာ `try/catch` block ပါဝင်ပြီး API က data ပြန်လာတဲ့အခါ promise တစ်ခု return လုပ်ပါမယ်။ API က data ပြန်လာမယ့်အမြန်နှုန်းကို သင်ထိန်းချုပ်လို့မရတဲ့အတွက် (တစ်ခါတစ်လေတော့ response မရနိုင်ပါဘူး) asynchronous ဖြစ်အောင်ရေးထားတာပါ။
+- co2signal API ကို သင့် region ရဲ့ data ကိုရယူဖို့ query လုပ်ပါတယ်၊ သင့် API Key ကို အသုံးပြုဖို့ header parameters ထဲမှာ authentication အမျိုးအစားတစ်ခုလိုအပ်ပါတယ်။
+- API က response ပြန်လာတဲ့အခါ၊ response data ရဲ့ အစိတ်အပိုင်းတွေကို သင့် screen ရဲ့ data ပြသဖို့ သတ်မှတ်ထားတဲ့နေရာတွေမှာ assign လုပ်ပါတယ်။
+- error ဖြစ်ခဲ့ရင် သို့မဟုတ် ရလဒ်မရှိခဲ့ရင် error message ကို ပြသပါတယ်။
+
+✅ asynchronous programming patterns ကို သင့် toolbox ထဲမှာ ထည့်သွင်းထားဖို့ အရေးကြီးပါတယ်။ ဒီလို code ကို configure လုပ်နိုင်တဲ့ နည်းလမ်းမျိုးစုံကို [ဖတ်ရှုပါ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)။
+
+ဂုဏ်ယူပါတယ်! သင့် extension ကို build (`npm run build`) လုပ်ပြီး၊ extensions pane မှာ refresh လုပ်ပါက သင့် extension အလုပ်လုပ်နေပါပြီ! icon ကတော့ အလုပ်မလုပ်သေးပါဘူး၊ နောက်သင်ခန်းစာမှာ ပြင်ဆင်ပါမယ်။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+ဒီသင်ခန်းစာတွေမှာ API အမျိုးအစားအတော်များများကို ဆွေးနွေးခဲ့ပါတယ်။ web API တစ်ခုကို ရွေးပြီး အနက်ရှိုင်းဆုံး သုတေသနလုပ်ပါ။ ဥပမာအားဖြင့် browser တွေထဲမှာ ရရှိနိုင်တဲ့ [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) ကိုကြည့်ပါ။ သင့်အမြင်မှာ API တစ်ခုက ဘယ်လိုဖြစ်ရင် အကောင်းဆုံးဖြစ်မလဲ?
+
+## မိန့်ခွန်းပြီးနောက် စစ်ဆေးမှု
+
+[မိန့်ခွန်းပြီးနောက် စစ်ဆေးမှု](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+ဒီသင်ခန်းစာမှာ LocalStorage နဲ့ APIs အကြောင်း သင်ယူခဲ့ပါတယ်၊ professional web developer အတွက် အလွန်အသုံးဝင်ပါတယ်။ ဒီနှစ်ခုက ဘယ်လိုပေါင်းစပ်လုပ်ဆောင်နိုင်မလဲဆိုတာ စဉ်းစားကြည့်ပါ။ API ကို အသုံးပြုဖို့အတွက် items တွေကို သိမ်းဆည်းမယ့် web site တစ်ခုကို ဘယ်လို architect လုပ်မလဲဆိုတာ စဉ်းစားပါ။
+
+## လုပ်ငန်း
+
+[Adopt an API](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/my/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..843a0121
--- /dev/null
+++ b/translations/my/5-browser-extension/2-forms-browsers-local-storage/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a0c78d1dd9d1acdbf7f52e7cc3ebe1a7",
+  "translation_date": "2025-08-27T22:18:57+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "my"
+}
+-->
+# API တစ်ခုကို ရွေးချယ်အသုံးပြုပါ
+
+## လမ်းညွှန်ချက်များ
+
+API တွေကို အသုံးပြုရတာ အရမ်းပျော်စရာကောင်းပါတယ်။ ဒီမှာ [အခမဲ့ API များစွာ](https://github.com/public-apis/public-apis) ရှိတဲ့ စာရင်းတစ်ခုရှိပါတယ်။ API တစ်ခုကို ရွေးပြီး၊ ပြဿနာတစ်ခုကို ဖြေရှင်းပေးနိုင်တဲ့ browser extension တစ်ခု တည်ဆောက်ပါ။ အိမ်မွေးတိရစ္ဆာန်ပုံတွေ မလုံလောက်တဲ့ ပြဿနာလေးတစ်ခုဖြစ်စေ ([dog CEO API](https://dog.ceo/dog-api/) ကို စမ်းကြည့်ပါ)၊ ဒါမှမဟုတ် ပိုကြီးတဲ့ ပြဿနာတစ်ခုဖြစ်စေ - ပျော်ရွှင်စွာ လုပ်ဆောင်ပါ!
+
+## အကဲဖြတ်စံနှုန်း
+
+| စံနှုန်း | ထူးချွန်သောအခြေအနေ                                                      | လုံလောက်သောအခြေအနေ                   | တိုးတက်မှုလိုအပ်သောအခြေအနေ |
+| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
+|          | အထက်ပါစာရင်းမှ API တစ်ခုကို အသုံးပြုပြီး ပြည့်စုံသော browser extension တစ်ခု တင်သွင်းထားသည် | အစိတ်အပိုင်းတစ်ခုသာ ပြုလုပ်ပြီး browser extension တစ်ခု တင်သွင်းထားသည် | တင်သွင်းမှုတွင် အမှားများရှိသည် |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်အချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/my/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..40272a7a
--- /dev/null
+++ b/translations/my/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -0,0 +1,176 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f198c6b817b4b2a99749f4662e7cae98",
+  "translation_date": "2025-08-27T22:12:33+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "my"
+}
+-->
+# Browser Extension Project Part 3: Background Tasks နှင့် Performance ကိုလေ့လာပါ
+
+## မိန့်ခွန်းမတိုင်မီ Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### အကျဉ်းချုပ်
+
+ဒီ module ရဲ့ နောက်ဆုံးသင်ခန်းစာနှစ်ခုမှာ API ကနေ fetch လုပ်ထားတဲ့ data ကို ဖော်ပြဖို့ form တစ်ခုနဲ့ display area တစ်ခုကို ဘယ်လိုတည်ဆောက်ရမယ်ဆိုတာကို သင်လေ့လာခဲ့ပါတယ်။ ဒါဟာ web presence တစ်ခုကို ဖန်တီးတဲ့အခါမှာ အလွန်ပုံမှန်တဲ့နည်းလမ်းတစ်ခုဖြစ်ပါတယ်။ သင် asynchronous data fetching ကို handle လုပ်ပုံကိုပါ သင်ယူခဲ့ပါတယ်။ Browser extension ကို အခုဆိုရင် အလွန်နီးကပ်ပြီး ပြီးမြောက်သွားပါပြီ။
+
+အခုတော့ background tasks တချို့ကို စီမံခန့်ခွဲဖို့လိုအပ်ပါတယ်၊ အထူးသဖြင့် extension ရဲ့ icon ရဲ့ အရောင်ကို refresh လုပ်ပုံကိုပါ။ ဒါကြောင့် browser က ဒီလို tasks တွေကို ဘယ်လို handle လုပ်သလဲဆိုတာကို ဆွေးနွေးဖို့ အချိန်ကောင်းတစ်ခုဖြစ်ပါတယ်။ သင်တည်ဆောက်နေတဲ့ web assets တွေ performance ရဲ့ context မှာ browser tasks တွေကို စဉ်းစားကြည့်ရအောင်။
+
+## Web Performance အခြေခံ
+
+> "Website performance ဆိုတာ နှစ်ခုအကြောင်းပါပဲ - စာမျက်နှာ load လုပ်တာ ဘယ်လောက်မြန်တယ်၊ code run လုပ်တာ ဘယ်လောက်မြန်တယ်။" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Website တွေကို အမျိုးမျိုးသော devices, users, နဲ့ situations တွေမှာ အလွန်မြန်ဆန်အောင် ဖန်တီးပုံကို လေ့လာတဲ့အခါမှာ အလွန်ကျယ်ပြန့်တဲ့အကြောင်းအရာတစ်ခုဖြစ်ပါတယ်။ သင် browser extension တစ်ခုတည်ဆောက်နေစဉ်မှာ သတိထားရမယ့်အချက်အချို့ကို အောက်မှာဖော်ပြထားပါတယ်။
+
+သင့် site ကို ထိရောက်စွာ run လုပ်နေကြောင်း သေချာစေဖို့ ပထမဆုံး လိုအပ်တာက performance data ကို စုဆောင်းရပါမယ်။ ဒီအချက်ကို သင့် web browser ရဲ့ developer tools မှာ စတင်လေ့လာနိုင်ပါတယ်။ Edge browser မှာ "Settings and more" button (browser ရဲ့ အပေါ်ယံညာဘက်မှာရှိတဲ့ သုံးခုတိုင် icon) ကိုရွေးပြီး More Tools > Developer Tools ကိုသွားပါ၊ ပြီးရင် Performance tab ကိုဖွင့်ပါ။ Windows မှာ `Ctrl` + `Shift` + `I` သို့မဟုတ် Mac မှာ `Option` + `Command` + `I` ကို အသုံးပြုပြီး developer tools ကိုဖွင့်နိုင်ပါတယ်။
+
+Performance tab မှာ Profiling tool ပါဝင်ပါတယ်။ Website တစ်ခုကိုဖွင့်ပါ (ဥပမာ [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon))၊ 'Record' button ကို click လုပ်ပြီး site ကို refresh လုပ်ပါ။ Record ကို မည်သည့်အချိန်မှာမဆို ရပ်နိုင်ပြီး site ကို 'script', 'render', နဲ့ 'paint' လုပ်တဲ့ routines တွေကို ကြည့်နိုင်ပါမယ်။
+
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.my.png)
+
+✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) မှာ Edge ရဲ့ Performance panel ကိုလေ့လာပါ။
+
+> အကြံပြုချက်: သင့် website ရဲ့ startup time ကို တိကျစွာသိဖို့ browser ရဲ့ cache ကို ရှင်းလင်းပါ။
+
+Profile timeline ရဲ့ elements တွေကိုရွေးပြီး page load လုပ်နေစဉ်ဖြစ်ပျက်တဲ့ events တွေကို zoom လုပ်ကြည့်ပါ။
+
+Profile timeline ရဲ့ အပိုင်းတစ်ခုကိုရွေးပြီး summary pane မှာ page performance ရဲ့ snapshot ကိုကြည့်ပါ:
+
+![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.my.png)
+
+Event Log pane ကိုစစ်ဆေးပြီး event တစ်ခုခု 15 ms ထက်ပိုကြာနေမလားကြည့်ပါ:
+
+![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.my.png)
+
+✅ Profiler ကိုနားလည်ပါ! ဒီ site ရဲ့ developer tools ကိုဖွင့်ပြီး bottlenecks ရှိမရှိစစ်ဆေးပါ။ ဘာ asset က အလွန်နှေးနေသလဲ? ဘာ asset က အမြန်ဆုံး load လုပ်သွားသလဲ?
+
+## Profiling checks
+
+အထွေထွေအားဖြင့် production မှာ deploy လုပ်တဲ့အခါမှာ အဆင်မပြေတဲ့အရာတွေမဖြစ်စေရန် web developer တစ်ဦးအနေနဲ့ သတိထားရမယ့် "ပြဿနာရှိနိုင်တဲ့နေရာ" အချို့ရှိပါတယ်။
+
+**Asset sizes**: အခုနှစ်တွေမှာ web ဟာ "ပိုလေး"လာပြီး "ပိုနှေး"လာပါတယ်။ ဒီအလေးချိန်တစ်ချို့ဟာ images တွေကို အသုံးပြုမှုနဲ့ဆက်စပ်ပါတယ်။
+
+✅ [Internet Archive](https://httparchive.org/reports/page-weight) ကိုကြည့်ပြီး page weight ရဲ့ သမိုင်းကြောင်းနဲ့ အခြားအချက်အလက်တွေကိုလေ့လာပါ။
+
+သင့် images တွေကို optimize လုပ်ပြီး သုံးစွဲသူတွေအတွက် size နဲ့ resolution ကိုသင့်တော်အောင်ပေးသင့်ပါတယ်။
+
+**DOM traversals**: Browser ဟာ သင့်ရေးထားတဲ့ code အပေါ်မူတည်ပြီး Document Object Model ကို build လုပ်ရပါတယ်၊ ဒါကြောင့် page performance ကိုကောင်းမွန်စေဖို့ tags တွေကို လိုအပ်သလောက်သာအသုံးပြုပါ။ အဓိက style sheet မှာ မလိုအပ်တဲ့ CSS တွေကို optimize လုပ်ပါ။
+
+**JavaScript**: JavaScript developer တစ်ဦးအနေနဲ့ 'render-blocking' scripts တွေကို သတိထားရပါမယ်၊ အဲဒီ scripts တွေကို DOM ကို traverse နဲ့ paint လုပ်မတိုင်မီ load လုပ်ဖို့လိုအပ်ပါတယ်။ `defer` ကို inline scripts တွေမှာ အသုံးပြုပါ။
+
+✅ [Site Speed Test website](https://www.webpagetest.org/) မှာ sites တွေကိုစမ်းကြည့်ပြီး site performance ကိုသတ်မှတ်တဲ့ common checks တွေကိုလေ့လာပါ။
+
+Browser က သင့် assets တွေကို render လုပ်ပုံကို နားလည်ပြီးရင် extension ကိုပြီးမြောက်အောင်လုပ်ဖို့ လိုအပ်တဲ့အရာတွေကိုကြည့်ရအောင်:
+
+### အရောင်ကိုတွက်ချက်ဖို့ function တစ်ခုဖန်တီးပါ
+
+`/src/index.js` မှာ `calculateColor()` ဆိုတဲ့ function ကို DOM ကို access လုပ်ဖို့ const variables တွေကို set လုပ်ပြီးနောက်ထည့်ပါ:
+
+```JavaScript
+function calculateColor(value) {
+	let co2Scale = [0, 150, 600, 750, 800];
+	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	let closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	console.log(value + ' is closest to ' + closestNum);
+	let num = (element) => element > closestNum;
+	let scaleIndex = co2Scale.findIndex(num);
+
+	let closestColor = colors[scaleIndex];
+	console.log(scaleIndex, closestColor);
+
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+ဒီမှာ ဘာဖြစ်နေလဲ? API call ကနေ carbon intensity value ကို pass လုပ်ပြီး colors array မှာရှိတဲ့ index နဲ့ value ရဲ့နီးကပ်မှုကိုတွက်ချက်ပါတယ်။ ပြီးရင် chrome runtime ကို အနီးဆုံး color value ကိုပို့ပါတယ်။
+
+chrome.runtime မှာ [API](https://developer.chrome.com/extensions/runtime) တစ်ခုရှိပြီး background tasks အမျိုးမျိုးကို handle လုပ်ပါတယ်၊ သင့် extension က ဒီ tools တွေကိုအသုံးပြုနေပါတယ်:
+
+> "chrome.runtime API ကို အသုံးပြုပြီး background page ကို retrieve လုပ်ပါ၊ manifest ရဲ့ details တွေကို return လုပ်ပါ၊ app သို့မဟုတ် extension lifecycle မှာဖြစ်ပျက်တဲ့ events တွေကို နားထောင်ပြီး တုံ့ပြန်ပါ။ URL တွေကို fully-qualified URLs အဖြစ်ပြောင်းဖို့လည်း API ကိုအသုံးပြုနိုင်ပါတယ်။"
+
+✅ Edge browser အတွက် extension ကို develop လုပ်နေတဲ့အခါ chrome API ကိုအသုံးပြုနေရတာ အံ့ဩစရာဖြစ်နိုင်ပါတယ်။ Edge ရဲ့ နောက်ဆုံး browser versions တွေဟာ Chromium browser engine ပေါ်မှာ run လုပ်နေတဲ့အတွက် ဒီ tools တွေကိုအသုံးပြုနိုင်ပါတယ်။
+
+> သတိပြုပါ၊ browser extension ကို profile လုပ်ချင်ရင် extension ကိုယ်တိုင်ရဲ့ dev tools ကိုဖွင့်ပါ၊ အဲဒါဟာ browser instance သီးသန့်တစ်ခုဖြစ်ပါတယ်။
+
+### Default icon color ကို set လုပ်ပါ
+
+အခုတော့ `init()` function မှာ chrome ရဲ့ `updateIcon` action ကိုအသုံးပြုပြီး generic green color ကို default အဖြစ် set လုပ်ပါ:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Function ကိုခေါ်ပြီး call ကို execute လုပ်ပါ
+
+နောက်ဆုံးမှာ သင်ဖန်တီးထားတဲ့ function ကို C02Signal API က promise မှာထည့်ပြီးခေါ်ပါ:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+နောက်ဆုံးမှာ `/dist/background.js` မှာ background action calls တွေကိုနားထောင်ဖို့ listener ကိုထည့်ပါ:
+
+```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);
+}
+```
+
+ဒီ code မှာ backend task manager ကို message တစ်ခုခုရောက်လာတဲ့အခါ listener ကိုထည့်ထားပါတယ်။ Message က 'updateIcon' ဆိုရင်တော့ Canvas API ကိုအသုံးပြုပြီး အရောင်မှန်တဲ့ icon ကို draw လုပ်ဖို့နောက် code ကို run လုပ်ပါတယ်။
+
+✅ [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md) မှာ Canvas API ကိုပိုမိုလေ့လာပါ။
+
+အခုတော့ extension ကိုပြန် build (`npm run build`) လုပ်ပြီး refresh နဲ့ launch လုပ်ပါ၊ အရောင်ပြောင်းတာကိုကြည့်ပါ။ အခုတော့ errands သွားလုပ်ဖို့ သို့မဟုတ် ပန်းကန်ဆေးဖို့အချိန်ကောင်းလား? အခုတော့သိပါပြီ!
+
+အောင်မြင်ပါတယ်၊ သင်အသုံးဝင်တဲ့ browser extension တစ်ခုကိုတည်ဆောက်ပြီး browser ရဲ့လုပ်ပုံနဲ့ performance ကို profile လုပ်ပုံကိုလေ့လာပြီးပါပြီ။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+အရင်ကတည်ဆောက်ထားတဲ့ open source websites တွေကိုစစ်ဆေးပြီး၊ GitHub history အပေါ်မူတည်ပြီး performance အတွက် optimization လုပ်ပုံကိုသတ်မှတ်နိုင်ပါသလား? အများဆုံး pain point ဘာဖြစ်ပါသလဲ?
+
+## မိန့်ခွန်းပြီးနောက် Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+[performance newsletter](https://perf.email/) မှာ sign up လုပ်ဖို့စဉ်းစားပါ။
+
+Browser တွေက web performance ကိုဘယ်လိုသတ်မှတ်တယ်ဆိုတာကို web tools ရဲ့ performance tabs တွေကိုကြည့်ပြီးလေ့လာပါ။ အဓိကကွာခြားချက်တွေရှိပါသလား?
+
+## လုပ်ငန်း
+
+[Analyze a site for performance](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/my/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..321fac0e
--- /dev/null
+++ b/translations/my/5-browser-extension/3-background-tasks-and-performance/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc09b0fb314a5ab0507ba99216e6a843",
+  "translation_date": "2025-08-27T22:13:09+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "my"
+}
+-->
+# ဝက်ဘ်ဆိုဒ်၏ လုပ်ဆောင်မှုကို ချိန်ခွင့်ပြုခြင်း
+
+ဝက်ဘ်ဆိုဒ်၏ လုပ်ဆောင်မှုနှင့်ပတ်သက်သော အချက်အလက်များကို အသေးစိတ်ဖော်ပြပါ။ လုပ်ဆောင်မှုအခက်အခဲရှိသောနေရာများကို ဖော်ထုတ်ပြီး၊ ဝက်ဘ်ဆိုဒ်၏ အမြန်နှုန်းကို တိုးတက်စေရန် ဘာတွေပြုလုပ်နိုင်မလဲဆိုတာကို ခွဲခြမ်းစိတ်ဖြာပါ။ ဘရောက်ဆာကိရိယာများပေါ်မှာသာမူတည်မနေဘဲ၊ သင့်ရဲ့အစီရင်ခံစာကို အကူအညီပေးနိုင်မယ့် အခြားကိရိယာများကိုလည်း ရှာဖွေပါ။
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော                                                                                                  | လုံလောက်သော                    | တိုးတက်မှုလိုအပ်သော             |
+| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|          | အစီရင်ခံစာကို ဘရောက်ဆာကိရိယာများမှသာမက၊ ရရှိနိုင်ပါက 3rd party ကိရိယာများမှ အသေးစိတ်အချက်အလက်များနှင့်တကွ ဖော်ပြထားသည် | အခြေခံအစီရင်ခံစာကို ဖော်ပြထားသည် | အနည်းဆုံးအစီရင်ခံစာကို ဖော်ပြထားသည် |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/README.md b/translations/my/5-browser-extension/README.md
new file mode 100644
index 00000000..613fee7f
--- /dev/null
+++ b/translations/my/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-27T22:09:21+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "my"
+}
+-->
+# ဘရောက်ဇာ အက်စတင်ရှင်း တည်ဆောက်ခြင်း
+
+ဘရောက်ဇာ အက်စတင်ရှင်းများကို တည်ဆောက်ခြင်းသည် သင့်အက်ပ်များ၏ စွမ်းဆောင်ရည်ကို စဉ်းစားရင်း၊ အခြားအမျိုးအစားရှိ ဝက်ဘ်အဆင့်တစ်ခုကို တည်ဆောက်ရမည့် စိတ်ဝင်စားဖွယ် အတွေ့အကြုံတစ်ခုဖြစ်ပါသည်။ ဒီမော်ဂျူးတွင် ဘရောက်ဇာများအလုပ်လုပ်ပုံနှင့် ဘရောက်ဇာ အက်စတင်ရှင်းတစ်ခုကို မည်သို့ တင်သွင်းရမည်၊ ဖောင်တစ်ခုကို မည်သို့ တည်ဆောက်ရမည်၊ API ကို မည်သို့ ခေါ်ယူရမည်၊ ဒေသခံသိုလှောင်မှုကို မည်သို့ အသုံးပြုရမည်၊ သင့်ဝက်ဘ်ဆိုက်၏ စွမ်းဆောင်ရည်ကို မည်သို့ တိုင်းတာပြီး တိုးတက်အောင် မည်သို့ ပြုလုပ်ရမည်ဆိုသည်တို့ကို သင်ခန်းစာများဖြင့် ပါဝင်ပါသည်။
+
+သင်သည် Edge, Chrome, Firefox တို့တွင် အလုပ်လုပ်နိုင်သော ဘရောက်ဇာ အက်စတင်ရှင်းတစ်ခုကို တည်ဆောက်မည်ဖြစ်သည်။ ဒီအက်စတင်ရှင်းသည် အထူးသီးသန့် တာဝန်တစ်ခုအတွက် အထူးပြုထားသော ဝက်ဘ်ဆိုက်သေးသေးလေးတစ်ခုလိုမျိုးဖြစ်ပြီး [C02 Signal API](https://www.co2signal.com) ကို အသုံးပြုကာ သတ်မှတ်ဒေသ၏ လျှပ်စစ်စွမ်းအင်အသုံးပြုမှုနှင့် ကာဗွန်ထုတ်လွှတ်မှု တိကျမှုကို စစ်ဆေးကာ ဒေသ၏ ကာဗွန်လက်ရာကို ပြန်လည်ဖော်ပြပေးပါသည်။
+
+ဒီအက်စတင်ရှင်းကို အသုံးပြုသူတစ်ဦးက API key နှင့် region code ကို ဖောင်ထဲတွင် ထည့်သွင်းပြီး ဒေသခံ လျှပ်စစ်စွမ်းအင်အသုံးပြုမှုကို သတ်မှတ်ရန် ခေါ်ယူနိုင်ပြီး၊ ထိုအချက်အလက်များအပေါ် မူတည်ကာ အသုံးပြုသူ၏ လျှပ်စစ်စွမ်းအင် ဆုံးဖြတ်ချက်များကို သက်ရောက်စေပါသည်။ ဥပမာအားဖြင့်၊ သင့်ဒေသတွင် လျှပ်စစ်စွမ်းအင်အသုံးပြုမှု မြင့်မားနေသော အချိန်ကာလအတွင်း အဝတ်လျှော်စက် (ကာဗွန်ထုတ်လွှတ်မှုများသော လုပ်ငန်းစဉ်) ကို အသုံးမပြုဘဲ နောက်ကျစွာ ပြုလုပ်ရန် သင့်တော်နိုင်ပါသည်။
+
+### ခေါင်းစဉ်များ
+
+1. [ဘရောက်ဇာအကြောင်း](1-about-browsers/README.md)
+2. [ဖောင်များနှင့် ဒေသခံသိုလှောင်မှု](2-forms-browsers-local-storage/README.md)
+3. [နောက်ခံလုပ်ငန်းများနှင့် စွမ်းဆောင်ရည်](3-background-tasks-and-performance/README.md)
+
+### အားကျမှုများ
+
+![အစိမ်းရောင် ဘရောက်ဇာ အက်စတင်ရှင်း](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.my.png)
+
+## အားကျမှုများ
+
+ဒီဝက်ဘ် ကာဗွန် trigger အတွက် အကြံဉာဏ်ကို Microsoft ၏ Green Cloud Advocacy အဖွဲ့ခေါင်းဆောင် Asim Hussain မှ ပေးခဲ့ပြီး၊ [Green Principles](https://principles.green/) ၏ စာရေးသူလည်း ဖြစ်ပါသည်။ ဒါဟာ မူလအားဖြင့် [ဝက်ဘ်ဆိုက်ပရောဂျက်](https://github.com/jlooper/green) တစ်ခုဖြစ်ခဲ့သည်။
+
+ဘရောက်ဇာ အက်စတင်ရှင်း၏ ဖွဲ့စည်းပုံကို [Adebola Adeniran's COVID extension](https://github.com/onedebos/covtension) မှ အကျိုးသက်ရောက်မှု ရရှိခဲ့သည်။
+
+‘dot’ အိုင်ကွန်စနစ်၏ အကြံဉာဏ်ကို [Energy Lollipop](https://energylollipop.com/) ဘရောက်ဇာ အက်စတင်ရှင်း၏ အိုင်ကွန်ဖွဲ့စည်းပုံမှ ရယူခဲ့သည်။
+
+ဒီသင်ခန်းစာများကို [Jen Looper](https://www.twitter.com/jenlooper) မှ ♥️ ဖြင့် ရေးသားခဲ့ပါသည်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရ အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/solution/README.md b/translations/my/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..18f5b87d
--- /dev/null
+++ b/translations/my/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-27T22:13:52+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "my"
+}
+-->
+# Carbon Trigger Browser Extension: အပြီးသတ်ထားသော ကုဒ်
+
+tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို စောင့်ကြည့်နိုင်ရန် browser extension တစ်ခု တည်ဆောက်ပါ။ ဒါက region ရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှု အလေးအနက်ကို သတိပေးချက်အဖြစ် browser ထဲမှာ ရှိနေစေမှာဖြစ်ပါတယ်။ ဒီ extension ကို အခါအားလျော်စွာ အသုံးပြုခြင်းက သင့်ရဲ့ လုပ်ဆောင်မှုများအပေါ် အချက်အလက်အခြေခံပြီး ဆုံးဖြတ်ချက်များ ချမှတ်နိုင်ရန် အထောက်အကူဖြစ်စေပါမယ်။
+
+![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.my.png)
+
+## စတင်အသုံးပြုခြင်း
+
+သင့်မှာ [npm](https://npmjs.com) ကို install လုပ်ထားဖို့ လိုအပ်ပါမယ်။ ဒီကုဒ်ကို သင့်ကွန်ပျူတာထဲမှာ ဖိုလ်ဒါတစ်ခုကို download လုပ်ပါ။
+
+လိုအပ်သော packages အားလုံးကို install လုပ်ပါ:
+
+```
+npm install
+```
+
+extension ကို webpack မှတစ်ဆင့် build လုပ်ပါ:
+
+```
+npm run build
+```
+
+Edge browser မှာ install လုပ်ရန်အတွက် browser ရဲ့ အပေါ်ဘက်ညာထောင့်မှာရှိတဲ့ 'three dot' menu ကို အသုံးပြုပြီး Extensions panel ကို ရှာပါ။ 'Load Unpacked' ကို ရွေးချယ်ပြီး extension အသစ်တစ်ခုကို load လုပ်ပါ။ prompt မှာ 'dist' folder ကို ဖွင့်ပြီး extension ကို load လုပ်ပါ။ အသုံးပြုရန်အတွက် CO2 Signal ရဲ့ API key ([ဒီမှာ email ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီ page မှာ သင့် email ကို box ထဲမှာ ထည့်ပါ) နှင့် [Electricity Map](https://www.electricitymap.org/map) ရဲ့ [region code](http://api.electricitymap.org/v3/zones) ကို ထည့်ရန် လိုအပ်ပါမယ်။ ဥပမာအားဖြင့် Boston မှာ 'US-NEISO' ကို အသုံးပြုပါတယ်။
+
+![installing](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.my.png)
+
+API key နှင့် region code ကို extension interface ထဲမှာ input လုပ်ပြီးနောက် browser extension bar ရဲ့ အရောင် dot က region ရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ပြသပြီး သင့်အတွက် လျှပ်စစ်ဓာတ်အားများအသုံးပြုရမည့် လုပ်ဆောင်မှုများအပေါ် pointer တစ်ခု ပေးပါမယ်။ ဒီ 'dot' system ရဲ့ concept ကို [Energy Lollipop extension](https://energylollipop.com/) မှ California emissions အတွက် ရရှိခဲ့ပါတယ်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/solution/translation/README.es.md b/translations/my/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..f9fb1f9a
--- /dev/null
+++ b/translations/my/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-27T22:15:26+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "my"
+}
+-->
+# Carbon Trigger Browser Extension: အပြည့်အစုံသောကုဒ်
+
+tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ခြေရာခံနိုင်တဲ့ browser extension တစ်ခုကို ဖန်တီးပါ။ ဒီ extension ကို သင့် browser မှတစ်ဆင့် တိုက်ရိုက်အသုံးပြုနိုင်မယ့် reminder အနေနဲ့ ရရှိမှာဖြစ်ပါတယ်။ ဒီ extension ကို အသုံးပြုခြင်းက သင့်ရဲ့ လုပ်ဆောင်မှုများအပေါ် အချက်အလက်အခြေခံပြီး ဆုံးဖြတ်ချက်များကို ချမှတ်နိုင်စေမှာဖြစ်ပါတယ်။
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.my.png)
+
+## စတင်ခြင်း
+
+[npm](https://npmjs.com) ကို install လုပ်ထားဖို့ လိုအပ်ပါတယ်။ ဒီကုဒ်ကို သင့်ကွန်ပျူတာထဲမှာ ဖိုလ်ဒါတစ်ခုကို download လုပ်ပါ။
+
+လိုအပ်တဲ့ packages အားလုံးကို install လုပ်ပါ:
+
+```
+npm install
+```
+
+Webpack ကို အသုံးပြုပြီး extension ကို build လုပ်ပါ:
+
+```
+npm run build
+```
+
+Edge မှာ install လုပ်ဖို့အတွက် browser ရဲ့ အပေါ်ဘက်ညာထောင့်မှာရှိတဲ့ 'သုံးချက်' menu ကို အသုံးပြုပြီး Extensions panel ကို ရှာပါ။ အဲဒီနေရာက 'Load unpacked' ကို ရွေးချယ်ပြီး extension အသစ်တစ်ခုကို load လုပ်ပါ။ ဖိုလ်ဒါ 'dist' ကို ဖွင့်ပြီး extension ကို load လုပ်ပါ။ အသုံးပြုဖို့အတွက် CO2 Signal API အတွက် API key ([ဒီမှာ email ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီစာမျက်နှာမှာ email ကို ထည့်ပါ) နဲ့ [Electricity Map](https://www.electricitymap.org/map) ရဲ့ [region code](http://api.electricitymap.org/v3/zones) ကို ရယူဖို့ လိုအပ်ပါတယ်။ ဥပမာ Boston မှာ 'US-NEISO' ကို အသုံးပြုပါတယ်။
+
+![installing](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.my.png)
+
+API key နဲ့ region ကို extension interface မှာ ထည့်ပြီးနောက် browser extension bar ရဲ့ အရောင်အမှတ်တစ်ခုက သင့် region ရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ပြသပြီး သင့်အတွက် အမြင့်မားတဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှု လုပ်ဆောင်မှုများအတွက် သင့်တော်မှုကို အညွှန်းပေးပါလိမ့်မယ်။ ဒီ "အမှတ်" စနစ်ရဲ့ အကြံအတင်ကို [Energy Lollipop extension](https://energylollipop.com/) မှ California emissions အတွက် ရရှိခဲ့ပါတယ်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/solution/translation/README.fr.md b/translations/my/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..e0f1ce4c
--- /dev/null
+++ b/translations/my/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-27T22:16:09+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "my"
+}
+-->
+# Carbon Trigger Browser Extension: အပြီးသတ်ထားသော ကုဒ်
+
+tmrow ၏ C02 Signal API ကို အသုံးပြု၍ လျှပ်စစ်စွမ်းအင်သုံးစွဲမှုကို ချက်ချင်းစောင့်ကြည့်နိုင်ရန် သင့်ဘရောက်ဇာတွင် သတိပေးချက်တစ်ခုရရှိစေရန် ဘရောက်ဇာအတွက် Extension တစ်ခု ဖန်တီးပါ။ ဒီအထူး Extension ကို အသုံးပြုခြင်းဖြင့် သင့်ဒေသရှိ လျှပ်စစ်စွမ်းအင်သုံးစွဲမှုအခြေအနေအပေါ် မူတည်ပြီး သင့်လုပ်ဆောင်မှုများအတွက် ပိုမိုသင့်တော်သော ဆုံးဖြတ်ချက်များ ချမှတ်နိုင်စေပါမည်။
+
+![Extension Screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.my.png)
+
+## စတင်ရန်
+
+[npm](https://npmjs.com) ကို သင့်စက်တွင် ထည့်သွင်းထားရန် လိုအပ်ပါသည်။ ဒီကုဒ်ကို သင့်ကွန်ပျူတာရှိ ဖိုလ်ဒါတစ်ခုထဲသို့ ဒေါင်းလုပ်ဆွဲပါ။
+
+လိုအပ်သော package အားလုံးကို ထည့်သွင်းပါ -
+
+```
+npm install
+```
+
+Webpack ကို အသုံးပြု၍ Extension ကို Build လုပ်ပါ။
+
+```
+npm run build
+```
+
+Edge တွင် ထည့်သွင်းရန်အတွက် ဘရောက်ဇာ၏ အပေါ်ယံညာဘက်ရှိ 'သုံးချက်' မီနူးကို အသုံးပြု၍ Extensions ပန်းနယ်ကို ရှာပါ။ အဲဒီနေရာမှ 'Unpacked Extension ကို Load လုပ်ရန်' ကို ရွေးချယ်ပြီး Extension အသစ်တစ်ခုကို ထည့်သွင်းပါ။ Prompt တွင် 'dist' ဖိုလ်ဒါကို ဖွင့်ပြီး Extension ကို Load လုပ်ပါ။ အသုံးပြုရန်အတွက် CO2 Signal API အတွက် API Key တစ်ခုလိုအပ်ပါမည် ([ဒီမှာ အီးမေးလ်ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီစာမျက်နှာရှိ အကွက်ထဲတွင် သင့်အီးမေးလ်ကို ထည့်သွင်းပါ) နှင့် [Electricity Map](https://www.electricitymap.org/map) တွင် သင့်ဒေသအတွက် [Zone Code](http://api.electricitymap.org/v3/zones) ကို ရယူပါ။ (ဥပမာ - Boston အတွက် 'US-NEISO' ကို အသုံးပြုပါ။)
+
+![Installation](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.my.png)
+
+API Key နှင့် ဒေသကုဒ်ကို Extension Interface ထဲတွင် ထည့်သွင်းပြီးပါက ဘရောက်ဇာ၏ Extension Bar တွင် ရောင်စုံအမှတ်တစ်ခုသည် သင့်ဒေသရှိ လျှပ်စစ်စွမ်းအင်သုံးစွဲမှုအခြေအနေကို ပြသရန် ပြောင်းလဲသွားပါမည်။ ထို့အပြင် သင့်အတွက် သင့်တော်သော စွမ်းအင်သုံးစွဲမှုဆိုင်ရာ လုပ်ဆောင်မှုများကို အကြံပြုနိုင်မည်ဖြစ်သည်။ ဒီ 'အမှတ်' စနစ်၏ အကြံကို [Energy Lollipop Extension](https://energylollipop.com/) မှ ကယ်လီဖိုးနီးယားရှိ အထူးထုတ်လွှင့်မှုများအတွက် ရယူထားပါသည်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှု ဝန်ဆောင်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/solution/translation/README.hi.md b/translations/my/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..3f2cea7b
--- /dev/null
+++ b/translations/my/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-27T22:14:15+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "my"
+}
+-->
+# ကာဗွန်ထရစ်ဂါး ဘရောက်ဇာ အက်စ်တင်ရှင်း: ပြီးစီးထားသောကုဒ်
+
+မီးစက်သုံးစွဲမှုကို ထိန်းချုပ်ရန် tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး၊ သင့်ဘရောက်ဇာမှာ သင့်ဒေသရဲ့ မီးစက်သုံးစွဲမှုအခြေအနေကို သတိပေးနိုင်တဲ့ ဘရောက်ဇာအက်စ်တင်ရှင်းတစ်ခုကို တည်ဆောက်ခြင်း။ ဒီအက်စ်တင်ရှင်းကို သုံးခြင်းက သင့်လုပ်ဆောင်မှုတွေကို ဒီအချက်အလက်အပေါ်အခြေခံပြီး ဆုံးဖြတ်နိုင်ဖို့ အထောက်အကူပြုပါလိမ့်မယ်။
+
+![အက်စ်တင်ရှင်း စကရင်ရှော့ ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.my.png)
+
+## စတင်ခြင်း
+
+သင့်မှာ [npm](https://npmjs.com) ကို ထည့်သွင်းထားဖို့ လိုအပ်ပါတယ်။ သင့်ကွန်ပျူတာမှာ ဖိုလ်ဒါတစ်ခုဖွင့်ပြီး ဒီကုဒ်ကို ကူးယူထားပါ။
+
+လိုအပ်တဲ့ package တွေကို ထည့်သွင်းပါ:
+
+```
+npm install
+```
+
+Webpack ကို အသုံးပြုပြီး အက်စ်တင်ရှင်းကို တည်ဆောက်ပါ:
+
+```
+npm run build
+```
+
+Edge မှာ ထည့်သွင်းဖို့အတွက်၊ ဘရောက်ဇာရဲ့ အပေါ်ယာဘက်ထောင့်မှာရှိတဲ့ 'သုံးချက်' မီနူးကို အသုံးပြုပြီး အက်စ်တင်ရှင်း panel ကို ရှာပါ။ အဲဒီနေရာက 'Load Unpacked' ကို ရွေးပြီး အသစ်ထည့်သွင်းပါ။ Prompt မှာ 'dist' ဖိုလ်ဒါကို ဖွင့်ပြီး အက်စ်တင်ရှင်းကို ထည့်သွင်းပါ။ အသုံးပြုဖို့အတွက် သင့်မှာ CO2 Signal ရဲ့ API ([ဒီမှာ အီးမေးလ်နဲ့ ရယူပါ](https://www.co2snal.com/)) API key တစ်ခုလိုအပ်ပါမယ်။ [သင့်ဒေသရဲ့ code](http://api.electricitymap.org/v3/zones) ကို [Electricity Map](https://www.electricitymap.org/map) မှာ ရှာပါ (ဥပမာ၊ Boston မှာဆိုရင် 'US-NEISO' ကို အသုံးပြုပါတယ်)။
+
+![ထည့်သွင်းခြင်း](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.my.png)
+
+API key နဲ့ ဒေသ code ကို အက်စ်တင်ရှင်း interface မှာ ထည့်သွင်းပြီးသွားရင်၊ ဘရောက်ဇာအက်စ်တင်ရှင်း bar မှာရှိတဲ့ အရောင်ပွင့်လုံးက သင့်ဒေသရဲ့ မီးစက်သုံးစွဲမှုအခြေအနေကို ပြသဖို့ ပြောင်းလဲသင့်ပြီး၊ မီးစက်သုံးစွဲမှုများတဲ့ လုပ်ဆောင်မှုတွေကို သင့်အတွက် သင့်တော်မယ်ဆိုတာကို သတိပေးပါလိမ့်မယ်။ ဒီ 'dot' စနစ်ရဲ့ အကြောင်းအရင်းကို ကယ်လီဖိုးနီးယားရဲ့ ထုတ်လွှတ်မှုအတွက် [Energy Lollipop Extension](https://energylollipop.com/) မှာ အကြံဉာဏ်ရခဲ့တာပါ။
+
+---
+
+**ဝက်ဘ်ဆိုက်မှတ်ချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်ဆိုမှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတည်သော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူပညာရှင်များမှ ဘာသာပြန်ဆိုမှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်ဆိုမှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားများ သို့မဟုတ် အဓိပ္ပာယ်မှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/solution/translation/README.it.md b/translations/my/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..6ea8a3df
--- /dev/null
+++ b/translations/my/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-27T22:14:40+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "my"
+}
+-->
+# Carbon Trigger Browser Extension: စတင်ရန်ကုဒ်
+
+tmrow ရဲ့ Signal CO2 API ကို အသုံးပြုပြီး လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို စောင့်ကြည့်ကာ သင့်ရဲ့ ဘရောက်ဇာတွင် တိုက်ရိုက် သတိပေးချက်ရနိုင်ရန် ဘရောက်ဇာအတွက် extension တစ်ခု ဖန်တီးပါမည်။ ဒီ extension ကို အသုံးပြုခြင်းအားဖြင့် သင့်ရဲ့ လုပ်ဆောင်မှုများကို အချက်အလက်များအပေါ် အခြေခံပြီး အကဲဖြတ်နိုင်ပါမည်။
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.my.png)
+
+## စတင်ရန်
+
+[npm](https://npmjs.com) ကို install လုပ်ထားရန် လိုအပ်ပါသည်။ ဒီကုဒ်ကို သင့်ကွန်ပျူတာထဲရှိ ဖိုလ်ဒါတစ်ခုတွင် download လုပ်ပါ။
+
+လိုအပ်သော packages အားလုံးကို install လုပ်ပါ:
+
+```
+npm install
+```
+
+webpack ကို အသုံးပြု၍ extension ကို ဖန်တီးပါ:
+
+```
+npm run build
+```
+
+Edge တွင် install လုပ်ရန်အတွက် ဘရောက်ဇာ၏ အပေါ်ယံညာဘက်ရှိ "သုံးချက်" menu ကို အသုံးပြု၍ Extensions panel ကို ရှာပါ။ Developer Mode ကို (ဘရောက်ဇာ၏ ဘေးဘက်အောက်ခြေတွင်) ဖွင့်ထားရန် လိုအပ်ပါသည်။ "Load unpacked" ကို ရွေးချယ်ပြီး extension အသစ်တစ်ခုကို load လုပ်ပါ။ Prompt တွင် "dist" ဖိုလ်ဒါကို ဖွင့်ပြီး extension ကို load လုပ်ပါမည်။ အသုံးပြုရန် CO2 Signal API အတွက် API key တစ်ခုလိုအပ်ပါမည် ([ဒီမှာ e-mail ဖြင့် ရယူနိုင်ပါသည်](https://www.co2signal.com/) - ဒီစာမျက်နှာတွင် သင့် e-mail ကို box ထဲတွင် ထည့်ပါ) နှင့် [electricity map](https://www.electricitymap.org/map) တွင် သင့်ဒေသနှင့် ကိုက်ညီသော [region code](http://api.electricitymap.org/v3/zones) (ဥပမာ Boston တွင် "US-NEISO")။
+
+![installation](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.my.png)
+
+API key နှင့် region ကို extension interface တွင် ထည့်ပြီးနောက် ဘရောက်ဇာ၏ extension bar တွင်ရှိသော အရောင်အမှတ်အသားသည် ဒေသ၏ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ပြသရန် ပြောင်းလဲသင့်ပါမည်။ ထို့အပြင် အမြင့်မားသော စွမ်းအင်အသုံးပြုမှု လုပ်ဆောင်မှုများကို မည်သို့လုပ်ဆောင်ရမည်ကို အညွှန်းပေးပါမည်။ ဒီ "အမှတ်" စနစ်၏ အခြေခံแนวคิดကို [Energy Lollipop extension](https://energylollipop.com/) မှ California emissions အတွက် ပံ့ပိုးပေးထားပါသည်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/solution/translation/README.ja.md b/translations/my/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..46fd942b
--- /dev/null
+++ b/translations/my/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-27T22:15:03+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "my"
+}
+-->
+# ကာဗွန်ထရစ်ဂါ ဘရောက်ဇာ အက်စ်တင်ရှင်း: ပြီးစီးထားသောကုဒ်
+
+tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ဘရောက်ဇာပေါ်မှာ သတိပေးချက်အဖြစ် ပြသနိုင်ရန် အက်စ်တင်ရှင်းတစ်ခုကို တည်ဆောက်ပါ။ ဒီအက်စ်တင်ရှင်းကို အလွတ်သုံးနိုင်ပြီး ဒီအချက်အလက်အပေါ် အခြေခံပြီး သင့်လုပ်ဆောင်မှုများကို ဆုံးဖြတ်နိုင်ပါသည်။
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.my.png)
+
+## စတင်ရန်
+
+[npm](https://npmjs.com) ကို သင့်ကွန်ပျူတာမှာ ထည့်သွင်းထားဖို့ လိုအပ်ပါတယ်။ ဒီကုဒ်ကို သင့်ကွန်ပျူတာရဲ့ ဖိုလ်ဒါတစ်ခုထဲကို ဒေါင်းလုဒ်လုပ်ပါ။
+
+လိုအပ်တဲ့ package တွေကို အားလုံးထည့်သွင်းပါ။
+
+```
+npm install
+```
+
+webpack ကို အသုံးပြုပြီး အက်စ်တင်ရှင်းကို build လုပ်ပါ။
+
+```
+npm run build
+```
+
+Edge မှာ ထည့်သွင်းဖို့အတွက် ဘရောက်ဇာရဲ့ အပေါ်ဘက်ညာဖက်မှာရှိတဲ့ "၃ ခုတိုင်" menu ကို နှိပ်ပြီး "Extensions" panel ကို ရှာပါ။ အဲဒီနေရာက "Load Unpacked" ကို ရွေးပြီး အက်စ်တင်ရှင်းအသစ်ကို load လုပ်ပါ။ prompt မှာ "dist" ဖိုလ်ဒါကို ဖွင့်ပါ။ အက်စ်တင်ရှင်းကို load လုပ်ပြီးပါပြီ။ အသုံးပြုဖို့ CO2 Signal API ရဲ့ API key ([ဒီမှာ email နဲ့ ရယူပါ](https://www.co2signal.com/) - ဒီစာမျက်နှာမှာ email ကို box ထဲထည့်ပါ) နဲ့ [Electricity Map](https://www.electricitymap.org/map) ရဲ့ သင့်ဒေသအတွက် [code](http://api.electricitymap.org/v3/zones) လိုအပ်ပါတယ် (ဥပမာ - Boston မှာ 'US-NEISO' ကို အသုံးပြုပါတယ်)။
+
+![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.my.png)
+
+API key နဲ့ ဒေသ code ကို အက်စ်တင်ရှင်း interface မှာ ထည့်သွင်းပြီးရင် ဘရောက်ဇာရဲ့ extension bar မှာ ပြသတဲ့ အရောင်အမှတ်လေးက သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို အခြေခံပြီး သင့်လုပ်ဆောင်မှုအတွက် သင့်တော်တဲ့ အချက်အလက်ကို ပြသပေးပါမယ်။ ဒီ "dot" system ရဲ့ အကြံဉာဏ်ကို ကယ်လီဖိုးနီးယားပြည်နယ်ရဲ့ [Energy Lollipop extension](https://energylollipop.com/) ကပေးခဲ့တာဖြစ်ပါတယ်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် ရှုယူသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/solution/translation/README.ms.md b/translations/my/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..4ec1350e
--- /dev/null
+++ b/translations/my/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-27T22:15:46+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "my"
+}
+-->
+# Carbon Trigger Browser Extension: အပြည့်အစုံသော ကုဒ်
+
+CO2 Signal API ကို အသုံးပြု၍ လျှပ်စစ်ဓာတ်အား အသုံးပြုမှုကို စစ်ဆေးပြီး၊ သင့်ဒေသ၏ လျှပ်စစ်ဓာတ်အား အသုံးပြုမှု အခြေအနေကို သတိပေးချက်အဖြစ် သင့် browser မှာ ရရှိနိုင်အောင် browser extension တစ်ခုကို တည်ဆောက်ပါ။ ဒီ extension ကို အသုံးပြုခြင်းက သင့်လုပ်ဆောင်မှုများကို ဒီအချက်အလက်အပေါ် အခြေခံပြီး စဉ်းစားနိုင်ရန် အထောက်အကူဖြစ်စေပါမည်။
+
+![browser extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.my.png)
+
+## စတင်ရန်
+
+သင့်မှာ [npm](https://npmjs.com) ကို install လုပ်ထားဖို့ လိုအပ်ပါတယ်။ ဒီကုဒ်ကို သင့်ကွန်ပျူတာထဲမှာ folder တစ်ခုကို download လုပ်ပါ။
+
+လိုအပ်သော packages အားလုံးကို install လုပ်ပါ။
+
+```
+npm install
+```
+
+Webpack ကို အသုံးပြု၍ extension ကို build လုပ်ပါ။
+
+```
+npm run build
+```
+
+Edge မှာ install လုပ်ရန်အတွက် browser ရဲ့ ညာဘက်အပေါ်ထောင့်မှာရှိတဲ့ 'သုံးခုတိုင်' menu ကို အသုံးပြု၍ Extensions panel ကို ရှာပါ။ 'Load Unpacked' ကို ရွေးပြီး extension အသစ်ကို load လုပ်ပါ။ 'dist' folder ကို ဖွင့်ပြီး extension ကို load လုပ်ပါ။ အသုံးပြုရန်အတွက် CO2 Signal API အတွက် API key ([ဒီမှာ email ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီ page ရဲ့ box ထဲမှာ သင့် email ကို ထည့်ပါ) နှင့် [သင့်ဒေသအတွက် code](http://api.electricitymap.org/v3/zones) ကို [Electricity Map](https://www.electricitymap.org/map) မှာ ရှာပါ။ (ဥပမာ Boston မှာ 'US-NEISO' ကို အသုံးပြုပါ။)
+
+![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.my.png)
+
+API key နှင့် region code ကို extension interface မှာ ထည့်ပြီးနောက် browser extension bar ရဲ့ အရောင် dot က သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အား အသုံးပြုမှုကို ပြသပြီး သင့်လုပ်ဆောင်မှုများအတွက် အကြံပေးချက်များကို ပေးပါမည်။ ဒီ 'dot' စနစ်ရဲ့ အကြောင်းအရင်းကို [Energy Lollipop browser extension](https://energylollipop.com/) မှ California အတွက် concept အဖြစ် ရရှိခဲ့ပါသည်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှု ဝန်ဆောင်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/5-browser-extension/start/README.md b/translations/my/5-browser-extension/start/README.md
new file mode 100644
index 00000000..7e0c4a3f
--- /dev/null
+++ b/translations/my/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-27T22:13:28+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "my"
+}
+-->
+# Carbon Trigger Browser Extension: စတင်ရေးသားထားသော ကုဒ်
+
+tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို စောင့်ကြည့်နိုင်ရန် browser extension တစ်ခု တည်ဆောက်ပါ။ ဒါကို သင့် browser မှာ တိုက်ရိုက် သတိပေးအဖြစ် အသုံးပြုနိုင်ပါတယ်။ ဒီ extension ကို အခါအားလျော်စွာ အသုံးပြုခြင်းက သင့်ရဲ့ လုပ်ဆောင်မှုတွေကို ဒီအချက်အလက်အပေါ် အခြေခံပြီး ဆုံးဖြတ်နိုင်ဖို့ အထောက်အကူဖြစ်စေပါလိမ့်မယ်။
+
+![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.my.png)
+
+## စတင်အသုံးပြုခြင်း
+
+သင့်မှာ [npm](https://npmjs.com) ကို install လုပ်ထားဖို့ လိုအပ်ပါမယ်။ ဒီကုဒ်ကို သင့်ကွန်ပျူတာမှာ ဖိုလ်ဒါတစ်ခုထဲကို ဒေါင်းလုဒ်လုပ်ပါ။
+
+လိုအပ်တဲ့ packages တွေကို install လုပ်ပါ:
+
+```
+npm install
+```
+
+extension ကို webpack မှတစ်ဆင့် build လုပ်ပါ:
+
+```
+npm run build
+```
+
+Edge browser မှာ install လုပ်ဖို့အတွက် browser ရဲ့ အပေါ်ဘက်ညာထောင့်မှာရှိတဲ့ 'three dot' menu ကို အသုံးပြုပြီး Extensions panel ကို ရှာပါ။ 'Load Unpacked' ကို ရွေးချယ်ပြီး extension အသစ်တစ်ခုကို load လုပ်ပါ။ prompt မှာ 'dist' folder ကို ဖွင့်ပြီး extension ကို load လုပ်ပါ။ အသုံးပြုဖို့အတွက် CO2 Signal ရဲ့ API key ([ဒီမှာ email ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီစာမျက်နှာမှာ သင့် email ကို box ထဲမှာ ထည့်ပါ) နဲ့ [Electricity Map](https://www.electricitymap.org/map) ရဲ့ သင့်ဒေသကို ကိုယ်စားပြုတဲ့ [region code](http://api.electricitymap.org/v3/zones) ကို ထည့်သွင်းဖို့ လိုအပ်ပါမယ်။ ဥပမာအားဖြင့် Boston မှာ 'US-NEISO' ကို အသုံးပြုပါတယ်။
+
+![installing](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.my.png)
+
+API key နဲ့ region ကို extension interface မှာ input လုပ်ပြီးရင် browser extension bar ရဲ့ အရောင် dot က သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ပြောင်းလဲပြသပေးပါလိမ့်မယ်။ ဒါက သင့်အတွက် လျှပ်စစ်ဓာတ်အားများစွာ အသုံးပြုရမယ့် လုပ်ဆောင်မှုတွေကို ဘယ်လိုလုပ်ဆောင်ရမလဲဆိုတာ အညွှန်းပေးပါလိမ့်မယ်။ ဒီ 'dot' စနစ်ရဲ့ အကြံဉာဏ်ကို [Energy Lollipop extension](https://energylollipop.com/) က California emissions အတွက် ပေးခဲ့တာဖြစ်ပါတယ်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/1-introduction/README.md b/translations/my/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..34dc1309
--- /dev/null
+++ b/translations/my/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-27T22:27:07+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "my"
+}
+-->
+# အာကာသဂိမ်းတစ်ခု တည်ဆောက်ခြင်း အပိုင်း ၁: နိဒါန်း
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## မိန့်ခွန်းမတိုင်မီ စမ်းမေးခွန်း
+
+[မိန့်ခွန်းမတိုင်မီ စမ်းမေးခွန်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### ဂိမ်းဖွံ့ဖြိုးရေးအတွက် Inheritance နှင့် Composition
+
+ယခင်သင်ခန်းစာများတွင် သင်တည်ဆောက်ခဲ့သော app များသည် အတိုချုပ်သော ပရောဂျက်များဖြစ်သောကြောင့် ဒီဇိုင်းအဆောက်အအုံကို မသိပ်စဉ်းစားရန်လိုအပ်ခဲ့ပါ။ သို့သော် သင့် application များသည် အရွယ်အစားနှင့် အကျယ်အဝန်းကြီးလာသည်နှင့်အမျှ ဒီဇိုင်းဆိုင်ရာ ဆုံးဖြတ်ချက်များသည် ပိုမိုအရေးကြီးလာပါသည်။ JavaScript တွင် application များကို ကြီးမားစွာ ဖန်တီးရန်အတွက် နည်းလမ်းနှစ်ခုရှိပါသည် - *composition* သို့မဟုတ် *inheritance* ဖြစ်ပါသည်။ နှစ်ခုစလုံးတွင် အားသာချက်နှင့် အားနည်းချက်များရှိသော်လည်း ဂိမ်း၏အခြေခံအနေအထားမှ ရှင်းပြကြပါစို့။
+
+✅ အတော်လေးကျော်ကြားသော programming စာအုပ်တစ်အုပ်မှာ [design patterns](https://en.wikipedia.org/wiki/Design_Patterns) အကြောင်းကို ရေးသားထားခြင်းဖြစ်ပါသည်။
+
+ဂိမ်းတစ်ခုတွင် `game objects` ဆိုသည်မှာ မျက်နှာပြင်ပေါ်တွင် ရှိနေသော objects များဖြစ်ပါသည်။ ၎င်းတို့သည် cartesian coordinate system ပေါ်တွင် တည်ရှိနေသော `x` နှင့် `y` coordinate တို့ဖြင့် သတ်မှတ်ထားသော တည်နေရာရှိသည်။ ဂိမ်းတစ်ခု ဖန်တီးနေစဉ် သင်တွေ့ရှိမည်မှာ သင့် game objects များအားလုံးတွင် သင်ဖန်တီးသည့် ဂိမ်းတိုင်းအတွက် အခြေခံ property တစ်ခုရှိသည်။ ၎င်းတို့မှာ -
+
+- **တည်နေရာအခြေခံ** - ဂိမ်းအရာဝတ္ထုများအများစုသည် တည်နေရာအခြေခံဖြစ်သည်။ ၎င်းတို့တွင် `x` နှင့် `y` တည်နေရာရှိသည်။
+- **ရွေ့လျားနိုင်သော** - ဤအရာဝတ္ထုများသည် တည်နေရာအသစ်သို့ ရွေ့လျားနိုင်သည်။ ဤအရာဝတ္ထုများသည် များသောအားဖြင့် သူရဲကောင်း၊ အလွှာသတ္တဝါ သို့မဟုတ် NPC (ကစားသမားမဟုတ်သော ဇာတ်ကောင်) ဖြစ်သည်။ သို့သော် သစ်ပင်ကဲ့သို့ static object များမဟုတ်ပါ။
+- **ကိုယ်တိုင်ဖျက်ဆီးနိုင်သော** - ဤအရာဝတ္ထုများသည် သတ်မှတ်ထားသော အချိန်ကာလအတွင်းသာ ရှိနေပြီး ၎င်းတို့ကို ဖျက်သိမ်းရန် ပြင်ဆင်ထားသည်။ ယေဘူယျအားဖြင့် ဤအရာဝတ္ထုများကို `dead` သို့မဟုတ် `destroyed` boolean ဖြင့် ဖော်ပြပြီး ဂိမ်း engine သို့ ၎င်းကို render မလုပ်ရန် အချက်ပြသည်။
+- **cool-down** - 'Cool-down' သည် အချိန်တိုအတွင်းသာ ရှိနေသော အရာဝတ္ထုများအတွက် အထူး property တစ်ခုဖြစ်သည်။ ဥပမာအားဖြင့် မိနစ်ပိုင်းသာ မြင်ရမည့် စာသားတစ်ခု သို့မဟုတ် ပေါက်ကွဲမှုကဲ့သို့သော ဂရပ်ဖစ်အကျိုးသက်ရောက်မှုတစ်ခု။
+
+✅ Pac-Man ကဲ့သို့သော ဂိမ်းတစ်ခုကို စဉ်းစားကြည့်ပါ။ ဤအရာဝတ္ထုအမျိုးအစားလေးမျိုးကို ဂိမ်းတွင် ရှာဖွေနိုင်ပါသလား?
+
+### အပြုအမူကို ဖော်ပြခြင်း
+
+အထက်တွင် ဖော်ပြထားသည့်အတိုင်း ဂိမ်းအရာဝတ္ထုများတွင် ရှိနိုင်သည့် အပြုအမူများကို ဖော်ပြထားပါသည်။ ဒါကို ဘယ်လို encode လုပ်မလဲ? ဤအပြုအမူများကို class များ သို့မဟုတ် object များနှင့် ဆက်စပ်ထားသော method များအဖြစ် ဖော်ပြနိုင်ပါသည်။
+
+**Classes**
+
+`Classes` ကို `inheritance` နှင့် တွဲဖက်ပြီး class တစ်ခုတွင် အပြုအမူတစ်ခုကို ထည့်သွင်းရန် အသုံးပြုနိုင်ပါသည်။
+
+✅ Inheritance သည် နားလည်ရန် အရေးကြီးသော အယူအဆတစ်ခုဖြစ်သည်။ [MDN ၏ inheritance ဆောင်းပါး](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) ကို ဖတ်ရှုပါ။
+
+Code ဖြင့် ဖော်ပြပါက ဂိမ်းအရာဝတ္ထုသည် အောက်ပါအတိုင်း ဖြစ်နိုင်ပါသည် -
+
+```javascript
+
+//set up the class GameObject
+class GameObject {
+  constructor(x, y, type) {
+    this.x = x;
+    this.y = y;
+    this.type = type;
+  }
+}
+
+//this class will extend the GameObject's inherent class properties
+class Movable extends GameObject {
+  constructor(x,y, type) {
+    super(x,y, type)
+  }
+
+//this movable object can be moved on the screen
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
+class Hero extends Movable {
+  constructor(x,y) {
+    super(x,y, 'Hero')
+  }
+}
+
+//this class, on the other hand, only inherits the GameObject properties
+class Tree extends GameObject {
+  constructor(x,y) {
+    super(x,y, 'Tree')
+  }
+}
+
+//a hero can move...
+const hero = new Hero();
+hero.moveTo(5,5);
+
+//but a tree cannot
+const tree = new Tree();
+```
+
+✅ Pac-Man ၏ သူရဲကောင်း (ဥပမာ - Inky, Pinky, Blinky) ကို JavaScript ဖြင့် ဘယ်လိုရေးမလဲဆိုတာ စဉ်းစားကြည့်ပါ။
+
+**Composition**
+
+Object inheritance ကို ကိုင်တွယ်ရန် နည်းလမ်းကွဲတစ်ခုမှာ *Composition* ကို အသုံးပြုခြင်းဖြစ်သည်။ ထို့နောက် object များသည် ၎င်းတို့၏ အပြုအမူကို အောက်ပါအတိုင်း ဖော်ပြပါသည် -
+
+```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'); 
+```
+
+**ဘယ် pattern ကို သုံးမလဲ?**
+
+ဘယ် pattern ကို သုံးမည်ဆိုတာ သင့်အပေါ်မူတည်ပါသည်။ JavaScript သည် ဤ paradigm နှစ်ခုစလုံးကို ပံ့ပိုးပေးပါသည်။
+
+--
+
+ဂိမ်းဖွံ့ဖြိုးရေးတွင် ကျယ်ကျယ်ပြန့်ပြန့် အသုံးပြုသော pattern တစ်ခုမှာ ဂိမ်း၏ အသုံးပြုသူအတွေ့အကြုံနှင့် စွမ်းဆောင်ရည်ကို ကိုင်တွယ်ရန်ဖြစ်သည်။
+
+## Pub/sub pattern
+
+✅ Pub/Sub ဆိုသည်မှာ 'publish-subscribe' ကို ရည်ညွှန်းပါသည်။
+
+ဤ pattern သည် သင့် application ၏ အစိတ်အပိုင်းများသည် တစ်ခုနှင့်တစ်ခု မသိစေခြင်း၏ အယူအဆကို ကိုင်တွယ်ပါသည်။ အဘယ်ကြောင့်လဲဆိုတော့ အစိတ်အပိုင်းများကို ခွဲခြားထားခြင်းဖြင့် အခြေအနေကို ပိုမိုလွယ်ကူစွာ နားလည်နိုင်စေပါသည်။ ထို့အပြင် လိုအပ်ပါက အပြုအမူကို ရုတ်တရက် ပြောင်းလဲနိုင်စေပါသည်။ ဤအရာကို ဘယ်လိုလုပ်ဆောင်မလဲ? ၎င်းကို အောက်ပါအယူအဆများကို တည်ဆောက်ခြင်းဖြင့် ပြုလုပ်ပါသည် -
+
+- **message**: message သည် ယေဘူယျအားဖြင့် စာသား string တစ်ခုဖြစ်ပြီး အချို့သော payload (message ၏ အဓိပ္ပါယ်ကို ရှင်းလင်းပေးသော data တစ်ခု) ပါဝင်နိုင်ပါသည်။ ဂိမ်းတစ်ခုတွင် message တစ်ခုမှာ `KEY_PRESSED_ENTER` ဖြစ်နိုင်ပါသည်။
+- **publisher**: ဤ element သည် message တစ်ခုကို *publish* လုပ်ပြီး subscriber များအားလုံးသို့ ပေးပို့ပါသည်။
+- **subscriber**: ဤ element သည် သတ်မှတ်ထားသော message များကို *listen* လုပ်ပြီး message ရရှိသည်နှင့်တပြိုင်နက် တစ်စုံတစ်ရာလုပ်ဆောင်ပါသည်။ ဥပမာအားဖြင့် လေဆာပစ်ခြင်း။
+
+ဤ pattern ၏ အကောင်အထည်ဖော်မှုသည် အရွယ်အစားသေးငယ်သော်လည်း အလွန်အစွမ်းထက်ပါသည်။ ၎င်းကို အောက်ပါအတိုင်း အကောင်အထည်ဖော်နိုင်ပါသည် -
+
+```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))
+    }
+  }
+}
+
+```
+
+အထက်ပါ code ကို အသုံးပြုရန်အတွက် အလွန်သေးငယ်သော အကောင်အထည်ဖော်မှုတစ်ခုကို ဖန်တီးနိုင်ပါသည် -
+
+```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)
+  }
+});
+```
+
+အထက်တွင် keyboard event `ArrowLeft` ကို ချိတ်ဆက်ပြီး `HERO_MOVE_LEFT` message ကို ပေးပို့ပါသည်။ ဤ message ကို နားထောင်ပြီး `hero` ကို ရွေ့လျားစေပါသည်။ ဤ pattern ၏ အားသာချက်မှာ event listener နှင့် hero တို့သည် တစ်ခုနှင့်တစ်ခု မသိစေခြင်းဖြစ်သည်။ `ArrowLeft` ကို `A` key သို့ ပြောင်းလဲနိုင်ပါသည်။ ထို့အပြင် `ArrowLeft` တွင် အခြားအရာတစ်ခုကို ပြုလုပ်စေလိုပါက eventEmitter ၏ `on` function တွင် အနည်းငယ် ပြင်ဆင်ခြင်းဖြင့် ပြုလုပ်နိုင်ပါသည် -
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+သင့်ဂိမ်းကြီးလာသည်နှင့်အမျှ အရာများ ပိုမိုရှုပ်ထွေးလာသော်လည်း ဤ pattern သည် အလွန်ရိုးရှင်းနေပြီး သင့် code သန့်ရှင်းစွာ ရှိနေပါသည်။ ဤ pattern ကို အသုံးပြုရန် အလွန်အကြံပြုပါသည်။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+Pub-sub pattern သည် ဂိမ်းတစ်ခုကို ဘယ်လိုတိုးတက်စေမည်ကို စဉ်းစားကြည့်ပါ။ ဘယ်အစိတ်အပိုင်းများက event များကို ထုတ်လွှင့်သင့်ပြီး ဂိမ်းသည် ၎င်းတို့ကို ဘယ်လိုတုံ့ပြန်သင့်သလဲ? ဂိမ်းအသစ်တစ်ခုကို စဉ်းစားပြီး ၎င်း၏ အစိတ်အပိုင်းများ ဘယ်လိုအပြုအမူရှိမည်ကို ဖန်တီးစဉ်းစားပါ။
+
+## မိန့်ခွန်းပြီးနောက် စမ်းမေးခွန်း
+
+[မိန့်ခွန်းပြီးနောက် စမ်းမေးခွန်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+Pub/Sub အကြောင်းကို [ဖတ်ရှုခြင်း](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon) ဖြင့် ပိုမိုလေ့လာပါ။
+
+## လုပ်ငန်း
+
+[ဂိမ်းတစ်ခုကို Mock up ပြုလုပ်ပါ](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှု ဝန်ဆောင်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/1-introduction/assignment.md b/translations/my/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..b9bd9e6a
--- /dev/null
+++ b/translations/my/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-27T22:27:54+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "my"
+}
+-->
+# အားကစားပုံစံတစ်ခု ဖန်တီးပါ
+
+## လမ်းညွှန်ချက်များ
+
+သင်ခန်းစာထဲမှာပါတဲ့ ကုဒ်နမူနာတွေကို အသုံးပြုပြီး သင်နှစ်သက်တဲ့ အားကစားပုံစံတစ်ခုကို ဖန်တီးပါ။ အားကစားပုံစံဟာ ရိုးရှင်းတဲ့ ပုံစံတစ်ခုဖြစ်ရမယ်၊ ဒါပေမယ့် ရည်ရွယ်ချက်ကတော့ class pattern သို့မဟုတ် composition pattern နဲ့ pub/sub pattern ကို အသုံးပြုပြီး အားကစားပုံစံတစ်ခု ဘယ်လို စတင်နိုင်မလဲဆိုတာ ပြသဖို့ ဖြစ်ပါတယ်။ ဖန်တီးမှုအပြည့်အဝ အသုံးပြုပါ!
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော                                             | လုံလောက်သော                                          | တိုးတက်မှုလိုအပ်သော                                |
+| ----------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
+|             | အရာဝတ္ထု သုံးခုကို မျက်နှာပြင်ပေါ်မှာထားပြီး ပြောင်းလဲနိုင်သည် | အရာဝတ္ထု နှစ်ခုကို မျက်နှာပြင်ပေါ်မှာထားပြီး ပြောင်းလဲနိုင်သည် | အရာဝတ္ထု တစ်ခုကို မျက်နှာပြင်ပေါ်မှာထားပြီး ပြောင်းလဲနိုင်သည် |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/2-drawing-to-canvas/README.md b/translations/my/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..87bb6f8a
--- /dev/null
+++ b/translations/my/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-27T22:24:34+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "my"
+}
+-->
+# အာကာသဂိမ်းတည်ဆောက်ခြင်း အပိုင်း ၂: ဟီးရိုနှင့် မုဆိုးများကို Canvas တွင် ရေးဆွဲခြင်း
+
+## မိန့်ခွန်းမတိုင်မီ မေးခွန်း
+
+[မိန့်ခွန်းမတိုင်မီ မေးခွန်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Canvas
+
+Canvas သည် HTML element တစ်ခုဖြစ်ပြီး မူရင်းအားဖြင့် အကြောင်းအရာမပါရှိပါ။ ၎င်းသည် အလွတ်ဖြစ်ပြီး သင်ရေးဆွဲရန်လိုအပ်သည်။
+
+✅ [Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) ကို MDN တွင် ဖတ်ရှုပါ။
+
+ဤသည်ကို မူလအားဖြင့် စာမျက်နှာ၏ body အစိတ်အပိုင်းအဖြစ် ကြေညာထားသည်။
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+အထက်တွင် `id`, `width` နှင့် `height` ကို သတ်မှတ်ထားသည်။
+
+- `id`: ၎င်းကို သတ်မှတ်ထားသည့်အခါ interaction လုပ်ရန် reference ရယူနိုင်ရန်။
+- `width`: element ၏ အကျယ်။
+- `height`: element ၏ အမြင့်။
+
+## ရိုးရှင်းသော ဂျီဩမေတြီရေးဆွဲခြင်း
+
+Canvas သည် cartesian coordinate system ကို အသုံးပြု၍ အရာများကို ရေးဆွဲသည်။ ထို့ကြောင့် x-axis နှင့် y-axis ကို အသုံးပြု၍ တည်နေရာကို ဖော်ပြသည်။ `0,0` တည်နေရာသည် အပေါ်ဘက် ဘယ်ဖက်ဖြစ်ပြီး အောက်ဘက် ညာဖက်သည် သင်သတ်မှတ်ထားသော Canvas ၏ WIDTH နှင့် HEIGHT ဖြစ်သည်။
+
+![Canvas ၏ grid](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.my.png)
+> [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) မှရရှိသော ပုံ
+
+Canvas element တွင် ရေးဆွဲရန် အောက်ပါအဆင့်များကို လိုက်နာရမည်။
+
+1. **Reference ရယူပါ** Canvas element ကို ရယူပါ။
+2. **Reference ရယူပါ** Canvas element အတွင်းရှိ Context element ကို ရယူပါ။
+3. **ရေးဆွဲမှုလုပ်ဆောင်ပါ** Context element ကို အသုံးပြုပါ။
+
+အထက်ပါအဆင့်များအတွက် ကုဒ်သည် အောက်ပါအတိုင်းဖြစ်သည်။
+
+```javascript
+// draws a red rectangle
+//1. get the canvas reference
+canvas = document.getElementById("myCanvas");
+
+//2. set the context to 2D to draw basic shapes
+ctx = canvas.getContext("2d");
+
+//3. fill it with the color red
+ctx.fillStyle = 'red';
+
+//4. and draw a rectangle with these parameters, setting location and size
+ctx.fillRect(0,0, 200, 200) // x,y,width, height
+```
+
+✅ Canvas API သည် အဓိကအားဖြင့် 2D shapes ကို အခြေခံထားပြီး 3D element များကိုလည်း ရေးဆွဲနိုင်သည်။ ၎င်းအတွက် [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ကို အသုံးပြုနိုင်သည်။
+
+Canvas API ဖြင့် ရေးဆွဲနိုင်သော အရာများမှာ -
+
+- **ဂျီဩမေတြီပုံသဏ္ဍာန်များ** - Rectangle ရေးဆွဲပုံကို ပြထားပြီး အခြားပုံသဏ္ဍာန်များကိုလည်း ရေးဆွဲနိုင်သည်။
+- **စာသား** - မည်သည့် font နှင့် အရောင်ဖြင့်မဆို စာသားကို ရေးဆွဲနိုင်သည်။
+- **ပုံများ** - .jpg သို့မဟုတ် .png ကဲ့သို့သော ပုံ asset ကို အသုံးပြု၍ ပုံကို ရေးဆွဲနိုင်သည်။
+
+✅ စမ်းကြည့်ပါ! Rectangle ရေးဆွဲပုံကို သိပြီး Circle ကို စမ်းရေးဆွဲနိုင်ပါသလား။ CodePen တွင် Canvas ရေးဆွဲမှုများကို စိတ်ဝင်စားစွာ ကြည့်ပါ။ [အလွန်အံ့ဩဖွယ်ကောင်းသော ဥပမာ](https://codepen.io/dissimulate/pen/KrAwx) တစ်ခုကို ကြည့်ပါ။
+
+## ပုံ asset တစ်ခုကို Load လုပ်ပြီး ရေးဆွဲခြင်း
+
+ပုံ asset ကို `Image` object တစ်ခုဖန်တီးပြီး ၎င်း၏ `src` property ကို သတ်မှတ်ခြင်းဖြင့် Load လုပ်သည်။ ထို့နောက် `load` event ကို နားထောင်ပြီး အသုံးပြုရန် အဆင်သင့်ဖြစ်သောအခါ သိရှိနိုင်သည်။ ကုဒ်သည် အောက်ပါအတိုင်းဖြစ်သည်။
+
+### Asset Load လုပ်ခြင်း
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Asset Load လုပ်ပုံစံ
+
+အထက်ပါကို အောက်ပါပုံစံအတိုင်း wrap လုပ်ရန် အကြံပြုသည်။ ၎င်းသည် အသုံးပြုရန် လွယ်ကူပြီး အဆင်သင့်ဖြစ်သောအခါမှသာ Manipulate လုပ်ရန် ဖြစ်သည်။
+
+```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')
+}
+
+```
+
+Game asset များကို Screen တွင် ရေးဆွဲရန် သင့်ကုဒ်သည် အောက်ပါအတိုင်းဖြစ်သည်။
+
+```javascript
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+
+  canvas = document.getElementById("myCanvas");
+  ctx = canvas.getContext("2d");
+  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
+  ctx.drawImage(monsterImg, 0,0);
+}
+```
+
+## အခုတော့ သင့်ဂိမ်းကို တည်ဆောက်ရန် အချိန်ရောက်ပြီ
+
+### ဘာကို တည်ဆောက်မလဲ
+
+Canvas element ပါရှိသော Web page တစ်ခုကို တည်ဆောက်ပါ။ ၎င်းသည် `1024*768` အနက်ရောင် Screen ကို Render လုပ်သင့်သည်။ သင့်အား ပေးထားသော ပုံနှစ်ခုမှာ -
+
+- ဟီးရိုသင်္ဘော
+
+   ![ဟီးရိုသင်္ဘော](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.my.png)
+
+- 5*5 မုဆိုး
+
+   ![မုဆိုးသင်္ဘော](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.my.png)
+
+### တည်ဆောက်မှုကို စတင်ရန် အကြံပြုသော အဆင့်များ
+
+`your-work` sub folder တွင် ဖန်တီးထားသော ဖိုင်များကို ရှာပါ။ ၎င်းတွင် အောက်ပါအရာများ ပါဝင်သင့်သည် -
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+ဤ folder ၏ copy ကို Visual Studio Code တွင် ဖွင့်ပါ။ သင့်တွင် Visual Studio Code, NPM နှင့် Node တပ်ဆင်ထားသော Local Development Environment ရှိသင့်သည်။ သင့်ကွန်ပျူတာတွင် `npm` မရှိပါက [ဤနေရာတွင်](https://www.npmjs.com/get-npm) တပ်ဆင်ရန် လမ်းညွှန်ချက်ကို ကြည့်ပါ။
+
+သင့် Project ကို `your_work` folder တွင် စတင်ပါ -
+
+```bash
+cd your-work
+npm start
+```
+
+အထက်ပါသည် `http://localhost:5000` တွင် HTTP Server တစ်ခုကို စတင်မည်။ Browser တစ်ခုဖွင့်ပြီး အဆိုပါလိပ်စာကို ထည့်ပါ။ ယခုအချိန်တွင် Blank Page ဖြစ်နေသော်လည်း အနည်းငယ်ကြာပြီး ပြောင်းလဲလာမည်။
+
+> မှတ်ချက် - Screen ပေါ်တွင် ပြောင်းလဲမှုများကို ကြည့်ရန် Browser ကို Refresh လုပ်ပါ။
+
+### ကုဒ်ထည့်ပါ
+
+`your-work/app.js` တွင် အောက်ပါအရာများကို ဖြေရှင်းရန် လိုအပ်သော ကုဒ်ကို ထည့်ပါ။
+
+1. **Canvas** ကို အနက်ရောင်နောက်ခံဖြင့် ရေးဆွဲပါ
+   > အကြံပြုချက် - `/app.js` တွင် သင့် `ctx` element ကို အနက်ရောင်သတ်မှတ်ပြီး Top/Left coordinates ကို 0,0 သတ်မှတ်ပါ။ Canvas ၏ အမြင့်နှင့် အကျယ်ကို သတ်မှတ်ပါ။
+2. **Textures** ကို Load လုပ်ပါ
+   > အကြံပြုချက် - Player နှင့် Enemy ပုံများကို `await loadTexture` ဖြင့် Load လုပ်ပါ။ ပုံများကို Screen ပေါ်တွင် မမြင်ရသေးပါ။
+3. **ဟီးရို** ကို Screen ၏ အောက်ခြေ အလယ်တွင် ရေးဆွဲပါ
+   > အကြံပြုချက် - `drawImage` API ကို အသုံးပြု၍ `heroImg` ကို Screen ပေါ်တွင် ရေးဆွဲပါ။ `canvas.width / 2 - 45` နှင့် `canvas.height - canvas.height / 4)` ကို သတ်မှတ်ပါ။
+4. **5*5 မုဆိုးများ** ကို ရေးဆွဲပါ
+   > အကြံပြုချက် - Enemy များကို Screen ပေါ်တွင် ရေးဆွဲရန် Code ကို Uncomment လုပ်ပါ။ ထို့နောက် `createEnemies` function သို့သွားပြီး ၎င်းကို တည်ဆောက်ပါ။
+
+   အရင်ဆုံး 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;
+    ```
+
+    ထို့နောက် မုဆိုး array ကို Screen ပေါ်တွင် ရေးဆွဲရန် Loop တစ်ခုကို ဖန်တီးပါ -
+
+    ```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);
+        }
+      }
+    ```
+
+## ရလဒ်
+
+ပြီးစီးသော ရလဒ်သည် အောက်ပါအတိုင်းဖြစ်သင့်သည် -
+
+![အနက်ရောင် Screen, ဟီးရိုနှင့် 5*5 မုဆိုးများ](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.my.png)
+
+## ဖြေရှင်းချက်
+
+အရင်ဆုံး သင်ကိုယ်တိုင် ဖြေရှင်းရန် ကြိုးစားပါ။ သို့သော် အကူအညီလိုအပ်ပါက [ဖြေရှင်းချက်](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) ကို ကြည့်ပါ။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+သင်သည် 2D Canvas API ဖြင့် ရေးဆွဲခြင်းကို သင်ယူပြီးပါပြီ။ [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ကို ကြည့်ပြီး 3D object တစ်ခုကို ရေးဆွဲကြည့်ပါ။
+
+## မိန့်ခွန်းပြီးနောက် မေးခွန်း
+
+[မိန့်ခွန်းပြီးနောက် မေးခွန်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+Canvas API အကြောင်း [ဖတ်ရှုခြင်း](https://developer.mozilla.org/docs/Web/API/Canvas_API) ဖြင့် ပိုမိုလေ့လာပါ။
+
+## လုပ်ငန်းတာဝန်
+
+[Canvas API ဖြင့် စမ်းသပ်ပါ](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/2-drawing-to-canvas/assignment.md b/translations/my/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..e6c08901
--- /dev/null
+++ b/translations/my/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-27T22:25:17+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "my"
+}
+-->
+# Canvas API ကို စမ်းကြည့်ပါ
+
+## လမ်းညွှန်ချက်များ
+
+Canvas API ရဲ့ အစိတ်အပိုင်းတစ်ခုကို ရွေးပြီး၊ အဲဒီအပေါ်မှာ စိတ်ဝင်စားဖွယ်ရာ တစ်ခုခု ဖန်တီးကြည့်ပါ။ ကြယ်တွေကို ထပ်ခါထပ်ခါ ထုတ်လုပ်ပြီး ဂလက်ဆီလေး တစ်ခု ဖန်တီးနိုင်မလား? အရောင်လိုင်းတွေကို အသုံးပြုပြီး စိတ်ဝင်စားဖွယ်ရာ အထည်ဖော်မှု တစ်ခု ဖန်တီးနိုင်မလား? CodePen ကို ကြည့်ပြီး အကြံဉာဏ်ရနိုင်ပါတယ် (ဒါပေမယ့် မကူးယူပါနဲ့)။
+
+## အကဲဖြတ်စံနှုန်း
+
+| စံနှုန်း  | ထူးချွန်သောအခြေအနေ                                   | လုံလောက်သောအခြေအနေ             | တိုးတက်မှုလိုအပ်သောအခြေအနေ |
+| --------- | ------------------------------------------------------- | --------------------------------- | ------------------------- |
+|           | စိတ်ဝင်စားဖွယ်ရာ အထည်ဖော်မှု သို့မဟုတ် ပုံသဏ္ဍာန်ကို ဖန်တီးထားသည် | Code ကို တင်ထားပြီး၊ သို့သော် မအောင်မြင်စွာ မပြေးနိုင်ပါ | Code ကို မတင်ထားပါ |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/3-moving-elements-around/README.md b/translations/my/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..b2e93624
--- /dev/null
+++ b/translations/my/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,402 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-27T22:19:58+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "my"
+}
+-->
+# အာကာသဂိမ်း တည်ဆောက်ခြင်း အပိုင်း ၃: လှုပ်ရှားမှု ထည့်သွင်းခြင်း
+
+## မိန့်ခွန်းမတိုင်မီ မေးခွန်း
+
+[မိန့်ခွန်းမတိုင်မီ မေးခွန်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+ဂိမ်းတွေဟာ အာလီယန်တွေ မျက်နှာပြင်ပေါ်မှာ လှုပ်ရှားနေမှ ပိုမိုပျော်ရွှင်စရာဖြစ်ပါတယ်! ဒီဂိမ်းမှာတော့ လှုပ်ရှားမှုအမျိုးအစားနှစ်မျိုးကို အသုံးပြုပါမယ်။
+
+- **ကီးဘုတ်/မောက်စ် လှုပ်ရှားမှု**: အသုံးပြုသူက ကီးဘုတ် သို့မဟုတ် မောက်စ်ကို အသုံးပြုပြီး မျက်နှာပြင်ပေါ်မှာ အရာဝတ္ထုကို ရွှေ့လို့ရတဲ့အခါ။
+- **ဂိမ်းကနေ ဖြစ်ပေါ်လာတဲ့ လှုပ်ရှားမှု**: ဂိမ်းက အချိန်အကွာအဝေးတစ်ခုအတွင်းမှာ အရာဝတ္ထုကို ရွှေ့လှုပ်ပေးတဲ့အခါ။
+
+မျက်နှာပြင်ပေါ်မှာ အရာဝတ္ထုတွေကို ဘယ်လို ရွှေ့လှုပ်မလဲ? ဒါဟာ ကာတီရှီယန် ကိုဩဒိနိတ် (cartesian coordinates) ပေါ်မှာ အခြေခံထားပါတယ်။ အရာဝတ္ထုရဲ့ တည်နေရာ (x, y) ကို ပြောင်းပြီး မျက်နှာပြင်ကို ပြန်လည်ရေးဆွဲရပါတယ်။
+
+မျက်နှာပြင်ပေါ်မှာ *လှုပ်ရှားမှု* ကို အောင်မြင်စေဖို့ 通常 အောက်ပါအဆင့်တွေ လိုအပ်ပါတယ်။
+
+1. **တည်နေရာအသစ် သတ်မှတ်ပါ**: အရာဝတ္ထုကို ရွှေ့လို့ရတယ်လို့ ခံစားနိုင်ဖို့ လိုအပ်ပါတယ်။
+2. **မျက်နှာပြင်ကို ရှင်းလင်းပါ**: မျက်နှာပြင်ကို ပြန်လည်ရေးဆွဲမည့်အခါ ရှင်းလင်းထားဖို့ လိုအပ်ပါတယ်။ ဒါကို နောက်ခံအရောင်ဖြင့် rectangle တစ်ခုကို ရေးဆွဲခြင်းဖြင့် ရှင်းလင်းနိုင်ပါတယ်။
+3. **အရာဝတ္ထုကို တည်နေရာအသစ်မှာ ပြန်လည်ရေးဆွဲပါ**: ဒါကို လုပ်ဆောင်ခြင်းဖြင့် အရာဝတ္ထုကို တစ်နေရာမှ တစ်နေရာသို့ ရွှေ့လှုပ်ခြင်းကို အောင်မြင်စေပါတယ်။
+
+ဒီလိုပုံစံနဲ့ ကုဒ်ထဲမှာ ရေးဆွဲနိုင်ပါတယ်။
+
+```javascript
+//set the hero's location
+hero.x += 5;
+// clear the rectangle that hosts the hero
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+// redraw the game background and hero
+ctx.fillRect(0, 0, canvas.width, canvas.height)
+ctx.fillStyle = "black";
+ctx.drawImage(heroImg, hero.x, hero.y);
+```
+
+✅ သင်ရဲ့ ဟီးရိုကို frame တစ်ခုစီမှာ ပြန်လည်ရေးဆွဲရင် performance cost တက်လာနိုင်တဲ့ အကြောင်းရင်းကို တွေးမြင်နိုင်ပါသလား? [ဒီ pattern ရဲ့ အခြားရွေးချယ်စရာ](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) အကြောင်းကို ဖတ်ရှုပါ။
+
+## ကီးဘုတ် event ကို ကိုင်တွယ်ခြင်း
+
+Event တွေကို ကိုင်တွယ်ဖို့အတွက် အထူးသတ်မှတ်ထားတဲ့ event တွေကို ကုဒ်နဲ့ ချိတ်ဆက်ရပါတယ်။ ကီးဘုတ် event တွေဟာ တစ်ခုလုံး window ပေါ်မှာ ဖြစ်ပေါ်ပြီး မောက်စ် event တွေက `click` ကဲ့သို့ element တစ်ခုကို click လုပ်ခြင်းနဲ့ ချိတ်ဆက်နိုင်ပါတယ်။ ဒီ project တစ်ခုလုံးမှာ ကီးဘုတ် event တွေကို အသုံးပြုပါမယ်။
+
+Event ကို ကိုင်တွယ်ဖို့အတွက် window ရဲ့ `addEventListener()` method ကို အသုံးပြုပြီး input parameter နှစ်ခုကို ပေးရပါမယ်။ ပထမ parameter က event ရဲ့ နာမည်ဖြစ်ပြီး ဥပမာ `keyup` ဖြစ်ပါတယ်။ ဒုတိယ parameter က event ဖြစ်ပေါ်တဲ့အခါ အလုပ်လုပ်သင့်တဲ့ function ဖြစ်ပါတယ်။
+
+ဥပမာအနေနဲ့:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+Key event တွေအတွက် event ရဲ့ property နှစ်ခုကို အသုံးပြုပြီး ဘယ် key ကို နှိပ်ထားတယ်ဆိုတာ သိနိုင်ပါတယ်။
+
+- `key`: နှိပ်ထားတဲ့ key ရဲ့ string ကိုယ်စားပြုမှုဖြစ်ပြီး ဥပမာ `ArrowUp`
+- `keyCode`: number ကိုယ်စားပြုမှုဖြစ်ပြီး ဥပမာ `37`, `ArrowLeft` ကို ကိုယ်စားပြုပါတယ်။
+
+✅ Key event manipulation ဟာ ဂိမ်းတိုးတက်မှုအပြင် အခြားအရာတွေမှာလည်း အသုံးဝင်ပါတယ်။ ဒီနည်းလမ်းကို ဘယ်လိုအသုံးချနိုင်မလဲဆိုတာ တွေးကြည့်ပါ။
+
+### အထူး key များ: သတိထားရမည့်အချက်
+
+အချို့ *အထူး* key တွေဟာ window ကို အကျိုးသက်ရောက်စေပါတယ်။ ဒါဟာ သင် `keyup` event ကို နားထောင်ပြီး သင့်ဟီးရိုကို အထူး key တွေကို အသုံးပြု၍ ရွှေ့လျှောက်တဲ့အခါ horizontal scrolling ကိုလည်း လုပ်ဆောင်နိုင်ပါတယ်။ ဒီအကြောင်းကြောင့် သင့်ဂိမ်းကို တည်ဆောက်တဲ့အခါ browser ရဲ့ built-in behavior ကို *ပိတ်ထား* လိုတယ်။ ဒီလိုလုပ်ဖို့အတွက် သင့်မှာ ဒီလိုကုဒ်လိုအပ်ပါတယ်။
+
+```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);
+```
+
+အထက်ပါကုဒ်ဟာ arrow-key တွေ နဲ့ space key ရဲ့ *default* behavior ကို ပိတ်ထားပါမယ်။ *ပိတ်ထား* mechanism ဟာ `e.preventDefault()` ကို ခေါ်တဲ့အခါ ဖြစ်ပေါ်ပါတယ်။
+
+## ဂိမ်းကနေ ဖြစ်ပေါ်လာတဲ့ လှုပ်ရှားမှု
+
+Timer တွေကို အသုံးပြုခြင်းဖြင့် အရာဝတ္ထုတွေကို ကိုယ်တိုင် ရွှေ့လှုပ်စေနိုင်ပါတယ်။ ဥပမာ `setTimeout()` သို့မဟုတ် `setInterval()` function တွေကို အသုံးပြုပြီး အချိန်တစ်ခုစီမှာ အရာဝတ္ထုရဲ့ တည်နေရာကို update လုပ်နိုင်ပါတယ်။ ဒီလိုပုံစံနဲ့ ရေးနိုင်ပါတယ်:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## ဂိမ်း loop
+
+ဂိမ်း loop ဟာ အကြမ်းအားဖြင့် အချိန်အကွာအဝေးတစ်ခုစီမှာ ခေါ်ဆောင်ခံရတဲ့ function ဖြစ်ပါတယ်။ ဂိမ်း loop ဟာ အသုံးပြုသူအတွက် မြင်နိုင်တဲ့ အရာအားလုံးကို loop ထဲမှာ ရေးဆွဲပါတယ်။ ဂိမ်း loop ဟာ ဂိမ်းရဲ့ အစိတ်အပိုင်းဖြစ်တဲ့ game object တွေကို အသုံးပြုပြီး အရာအားလုံးကို ရေးဆွဲပေးပါတယ်။ ဥပမာ laser နဲ့ အာလီယန်ကို ထိမှန်ပြီး ပေါက်ကွဲသွားတဲ့အခါ အဲ့ဒီ object ဟာ လက်ရှိဂိမ်း loop ရဲ့ အစိတ်အပိုင်းမဖြစ်တော့ပါဘူး (ဒီအကြောင်းကို နောက်ပိုင်း သင်ခန်းစာတွေမှာ သင်ယူပါမယ်)။
+
+ဂိမ်း loop ဟာ 通常 ကုဒ်အနေနဲ့ ဒီလိုပုံစံရှိပါတယ်:
+
+```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);
+```
+
+အထက်ပါ loop ဟာ canvas ကို ပြန်လည်ရေးဆွဲဖို့ `200` milliseconds တစ်ကြိမ်စီ ခေါ်ဆောင်ခံရပါတယ်။ သင့်ဂိမ်းအတွက် make sense ဖြစ်တဲ့ interval ကို ရွေးချယ်နိုင်ပါတယ်။
+
+## အာကာသဂိမ်းကို ဆက်လက်တိုးတက်အောင်လုပ်ခြင်း
+
+သင့်ရဲ့ ရှိပြီးသားကုဒ်ကို ယူပြီး တိုးချဲ့ပါမယ်။ အပိုင်း I မှာ ပြီးစီးထားတဲ့ကုဒ်ကို သို့မဟုတ် [အပိုင်း II- starter](../../../../6-space-game/3-moving-elements-around/your-work) မှာရှိတဲ့ကုဒ်ကို အသုံးပြုပါ။
+
+- **ဟီးရိုကို ရွှေ့လျှောက်ခြင်း**: arrow key တွေကို အသုံးပြုပြီး ဟီးရိုကို ရွှေ့လျှောက်နိုင်ဖို့ ကုဒ်ထည့်ပါမယ်။
+- **အာလီယန်တွေကို ရွှေ့လျှောက်ခြင်း**: အာလီယန်တွေကို အပေါ်မှ အောက်သို့ သတ်မှတ်ထားတဲ့အမြန်နှုန်းနဲ့ ရွှေ့လျှောက်နိုင်ဖို့ ကုဒ်ထည့်ပါမယ်။
+
+## အကြံပြုအဆင့်များ
+
+`your-work` sub folder ထဲမှာ ဖန်တီးထားတဲ့ ဖိုင်တွေကို ရှာပါ။ အောက်ပါအတိုင်း ပါဝင်ထားသင့်ပါတယ်။
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+သင့် project ကို `your_work` folder မှာ စတင်ဖို့အတွက်:
+
+```bash
+cd your-work
+npm start
+```
+
+အထက်ပါအတိုင်း HTTP Server ကို `http://localhost:5000` လိပ်စာမှာ စတင်ပါမယ်။ Browser ကို ဖွင့်ပြီး အဲ့ဒီလိပ်စာကို ထည့်ပါ။ အခုအချိန်မှာ ဟီးရိုနဲ့ အာလီယန်တွေကို ပြသထားသင့်ပါတယ်။ ဒါပေမယ့် - အခုထိ ဘာမှ မရွှေ့လျှောက်သေးပါဘူး!
+
+### ကုဒ်ထည့်ပါ
+
+1. **`hero` နဲ့ `enemy` အတွက် အထူး object တွေ ထည့်ပါ**: `x` နဲ့ `y` property တွေပါဝင်သင့်ပါတယ်။ ([Inheritance or composition](../README.md) အပိုင်းကို သတိရပါ။)
+
+   *အကြံပြုချက်*: `game object` ဟာ `x` နဲ့ `y` နဲ့ canvas ပေါ်မှာ ကိုယ်တိုင်ကို ရေးဆွဲနိုင်တဲ့ စွမ်းရည်ရှိသင့်ပါတယ်။
+
+   >အကြံပြုချက်: အောက်ပါအတိုင်း GameObject class ကို ဖန်တီးပြီး 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);
+      }
+    }
+    ```
+
+    အခုတော့ ဒီ GameObject ကို Hero နဲ့ Enemy ဖန်တီးဖို့ တိုးချဲ့ပါ။
+
+    ```javascript
+    class Hero extends GameObject {
+      constructor(x, y) {
+        ...it needs an x, y, type, and speed
+      }
+    }
+    ```
+
+    ```javascript
+    class Enemy extends GameObject {
+      constructor(x, y) {
+        super(x, y);
+        (this.width = 98), (this.height = 50);
+        this.type = "Enemy";
+        let id = setInterval(() => {
+          if (this.y < canvas.height - this.height) {
+            this.y += 5;
+          } else {
+            console.log('Stopped at', this.y)
+            clearInterval(id);
+          }
+        }, 300)
+      }
+    }
+    ```
+
+2. **Key-event handler တွေ ထည့်ပါ**: ဟီးရိုကို အပေါ်/အောက်/ဘယ်/ညာ ရွှေ့လျှောက်နိုင်ဖို့ ကီး navigation ကို handle လုပ်ပါ။
+
+   *သတိရပါ*: ကာတီရှီယန်စနစ်မှာ အပေါ်-ဘယ်က `0,0` ဖြစ်ပါတယ်။ Default behavior ကို ပိတ်ထားဖို့ ကုဒ်ထည့်ဖို့လည်း သတိရပါ။
+
+   >အကြံပြုချက်: သင့်ရဲ့ onKeyDown function ကို ဖန်တီးပြီး 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);
+   ```
+    
+   ဒီအချိန်မှာ သင့် browser console ကို စစ်ဆေးပြီး keystroke တွေ log ဖြစ်နေတဲ့အခြေအနေကို ကြည့်ပါ။
+
+3. **[Pub sub pattern](../README.md) ကို အကောင်အထည်ဖော်ပါ**: သင့်ကုဒ်ကို သန့်ရှင်းစေဖို့ အပိုင်းတွေကို ဆက်လက်လုပ်ဆောင်ပါ။
+
+   ဒီနောက်ဆုံးအပိုင်းကို လုပ်ဆောင်ဖို့:
+
+   1. **Event listener တစ်ခု ထည့်ပါ** 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);
+          }
+        });
+        ```
+
+    1. **EventEmitter class တစ်ခု ဖန်တီးပါ**: message တွေကို publish နဲ့ subscribe လုပ်နိုင်ဖို့:
+
+        ```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. **Constants တွေ ထည့်ပြီး 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. **ဂိမ်းကို initialize လုပ်ပါ**
+
+    ```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. **ဂိမ်း loop ကို စတင်ပါ**
+
+   window.onload function ကို refactor လုပ်ပြီး ဂိမ်းကို initialize လုပ်ပါ။ အကောင်းဆုံး interval တစ်ခုမှာ game loop ကို စတင်ပါ။ 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. **အာလီယန်တွေကို ရွှေ့လျှောက်ဖို့ ကုဒ်ထည့်ပါ**
+
+    `createEnemies()` function ကို refactor လုပ်ပြီး အာလီယန်တွေကို ဖန်တီးပြီး gameObjects class ထဲ push လုပ်ပါ:
+
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
+    
+    နောက်ပြီး `createHero()` function ကို ဟီးရိုအတွက် အတူတူလုပ်ဆောင်ပါ။
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    နောက်ဆုံးမှာ `drawGameObjects()` function ကို ထည့်ပြီး ရေးဆွဲစတင်ပါ:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    သင့်အာလီယန်တွေဟာ သင့်ဟီးရို spaceship ကို တိုက်ခိုက်ဖို့ စတင်ရောက်လာပါပြီ!
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+သင့်ကုဒ်ဟာ function တွေ၊ variable တွေ၊ class တွေကို ထည့်သွင်းတဲ့အခါ 'spaghetti code' ဖြစ်လာနိုင်ပါတယ်။ သင့်ကုဒ်ကို ပိုမိုဖတ်ရှုရလွယ်ကူစေဖို့ ဘယ်လိုစနစ်တစ်ခုကို အကောင်းဆုံး စီမံနိုင်မလဲ? Sketch တစ်ခုရေးဆွဲပြီး သင့်ကုဒ်ကို စနစ်တကျ စီမံပါ။
+
+## မိန့်ခွန်းပြီးနောက် မေးခွန်း
+
+[မိန့်ခွန်းပြီးနောက် မေးခွန်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## ပြန်လည်သုံးသပ်ခြင်း & ကိုယ်တိုင်လေ့လာခြင်း
+
+Framework များမသုံးဘဲ ဂိမ်းကိုရေးသားနေစဉ်မှာ JavaScript-based canvas framework တွေ အများကြီးရှိပါတယ်။ [ဒီ framework တွေ](https://github.com/collections/javascript-game-engines) အကြောင်းကို ဖတ်ရှုဖို့ အချိန်ယူပါ။
+
+## လုပ်ငန်းတာဝန်
+
+[သင့်ကုဒ်ကို မှတ်ချက်ထည့်ပါ](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/3-moving-elements-around/assignment.md b/translations/my/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..a4d46ebb
--- /dev/null
+++ b/translations/my/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-27T22:20:38+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "my"
+}
+-->
+# သင့်ရဲ့ Code ကို မှတ်ချက်ထည့်ပါ
+
+## လမ်းညွှန်ချက်များ
+
+သင့်ရဲ့ဂိမ်းဖိုလ်ဒါထဲမှာရှိတဲ့ /app.js ဖိုင်ကို ပြန်လည်ကြည့်ရှုပြီး မှတ်ချက်ထည့်နိုင်တဲ့နည်းလမ်းတွေကို ရှာဖွေပါ။ Code တွေကို ထိန်းချုပ်ဖို့ အလွန်လွယ်ကူပြီး အခုကတော့ မှတ်ချက်တွေထည့်ဖို့ အချိန်ကောင်းတစ်ခုဖြစ်ပါတယ်။ ဒါက သင့်ရဲ့ Code ကို နောက်ပိုင်းမှာ အသုံးပြုနိုင်ဖို့ ဖတ်ရှင်းလွယ်ကူအောင်လုပ်ပေးမှာဖြစ်ပါတယ်။
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော                                                          | လုံလောက်သော                              | တိုးတက်မှုလိုအပ်သော                                              |
+| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
+|          | `app.js` Code ကို မှတ်ချက်အပြည့်အစုံထည့်ပြီး သင်္ကေတပိုင်းများအလိုက် စနစ်တကျ စီစဉ်ထားသည် | `app.js` Code ကို လုံလောက်စွာ မှတ်ချက်ထည့်ထားသည် | `app.js` Code ကို အနည်းငယ် စနစ်မရှိဘဲ မှတ်ချက်ကောင်းများ မပါရှိသေးပါ |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် ရှုယူသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/4-collision-detection/README.md b/translations/my/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..833f5a91
--- /dev/null
+++ b/translations/my/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-27T22:22:49+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "my"
+}
+-->
+# အာကာသဂိမ်း တည်ဆောက်ခြင်း အပိုင်း ၄: လေဆာထည့်သွင်းခြင်းနှင့် တိုက်မိမှုများကို စစ်ဆေးခြင်း
+
+## မိန့်ခွန်းမတိုင်မီ စစ်တမ်း
+
+[မိန့်ခွန်းမတိုင်မီ စစ်တမ်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+ဒီသင်ခန်းစာမှာ JavaScript ကို အသုံးပြုပြီး လေဆာပစ်ပေါက်နည်းကို သင်ယူပါမည်။ ဂိမ်းမှာ အောက်ပါအရာ ၂ ခုကို ထည့်သွင်းပါမည်-
+
+- **လေဆာ**: ဒီလေဆာကို သင်၏သူရဲကောင်းရဲ့ သင်္ဘောမှ အပေါ်ဘက်သို့ ပစ်ပေါက်ပါမည်။
+- **တိုက်မိမှု စစ်ဆေးခြင်း**: *ပစ်ပေါက်ခြင်း* စနစ်ကို အကောင်အထည်ဖော်ရာတွင် ဂိမ်းစည်းကမ်းများကို ထည့်သွင်းပါမည်။
+   - **လေဆာသည် ရန်သူကို ထိမိခြင်း**: ရန်သူသည် လေဆာထိမိပါက သေဆုံးမည်။
+   - **လေဆာသည် မျက်နှာပြင်အပေါ်ဘက်ကို ထိမိခြင်း**: လေဆာသည် မျက်နှာပြင်အပေါ်ဘက်ကို ထိမိပါက ဖျက်သိမ်းမည်။
+   - **ရန်သူနှင့် သူရဲကောင်း တိုက်မိခြင်း**: ရန်သူနှင့် သူရဲကောင်း တိုက်မိပါက နှစ်ဦးလုံး ဖျက်သိမ်းမည်။
+   - **ရန်သူသည် မျက်နှာပြင်အောက်ဘက်ကို ထိမိခြင်း**: ရန်သူသည် မျက်နှာပြင်အောက်ဘက်ကို ထိမိပါက ရန်သူနှင့် သူရဲကောင်း ဖျက်သိမ်းမည်။
+
+အတိုချုံး来说၊ သင် -- *သူရဲကောင်း* -- သည် ရန်သူများကို မျက်နှာပြင်အောက်ဘက်သို့ ရောက်မီ လေဆာဖြင့် ထိမိစေရန် လိုအပ်ပါသည်။
+
+✅ ကွန်ပျူတာဂိမ်းပထမဆုံးရေးသားခဲ့သော ဂိမ်းအကြောင်းကို သုတေသနလုပ်ပါ။ ၎င်း၏ လုပ်ဆောင်ချက်များက ဘာတွေလဲ?
+
+အတူတူ သူရဲကောင်းဖြစ်ကြစို့!
+
+## တိုက်မိမှု စစ်ဆေးခြင်း
+
+တိုက်မိမှုကို ဘယ်လိုလုပ်မလဲ? ဂိမ်းအရာဝတ္ထုများကို ရှုထောင့်များအဖြစ် သတ်မှတ်ပြီး ရွေ့လျားနေသည်ဟု စဉ်းစားရမည်။ ဘာကြောင့်လဲဆိုတော့ ဂိမ်းအရာဝတ္ထုကို ရေးဆွဲရန် အသုံးပြုသော ပုံရိပ်သည် ရှုထောင့်ပုံစံဖြစ်သည်။ ၎င်းတွင် `x`, `y`, `width` နှင့် `height` ရှိသည်။
+
+ရှုထောင့် ၂ ခု (ဥပမာ သူရဲကောင်းနှင့် ရန်သူ) *ထိတွေ့*ပါက တိုက်မိမှုဖြစ်ပေါ်သည်။ ထိုအခါ ဘာဖြစ်ရမည်ဆိုသည်မှာ ဂိမ်းစည်းကမ်းများအပေါ် မူတည်သည်။ ထို့ကြောင့် တိုက်မိမှု စစ်ဆေးခြင်းကို အကောင်အထည်ဖော်ရန် အောက်ပါအရာများလိုအပ်သည်-
+
+1. ဂိမ်းအရာဝတ္ထု၏ ရှုထောင့်ကို ကိုယ်စားပြုနိုင်သော နည်းလမ်းတစ်ခု:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. နှိုင်းယှဉ်မှုလုပ်ဆောင်ချက်တစ်ခု၊ ၎င်းလုပ်ဆောင်ချက်သည် အောက်ပါအတိုင်းဖြစ်နိုင်သည်-
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## အရာဝတ္ထုများကို ဘယ်လိုဖျက်မလဲ
+
+ဂိမ်းတွင် အရာဝတ္ထုများကို ဖျက်ရန် ဂိမ်းကို ၎င်းအရာဝတ္ထုကို မျက်နှာပြင်ပေါ်တွင် ထပ်မပုံဖော်ရန် သတိပေးရမည်။ ၎င်းကို အရာဝတ္ထုကို *သေဆုံး*ဟု သတ်မှတ်ခြင်းဖြင့် ပြုလုပ်နိုင်သည်-
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+ထို့နောက် *သေဆုံး*သော အရာဝတ္ထုများကို မျက်နှာပြင်ပေါ်တွင် ထပ်မပုံဖော်မီ စီစစ်နိုင်သည်-
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## လေဆာကို ဘယ်လိုပစ်မလဲ
+
+လေဆာပစ်ခြင်းသည် key-event ကို တုံ့ပြန်ခြင်းနှင့် အပေါ်ဘက်သို့ ရွေ့လျားသော အရာဝတ္ထုတစ်ခုကို ဖန်တီးခြင်းဖြစ်သည်။ ထို့ကြောင့် အောက်ပါအဆင့်များကို လုပ်ဆောင်ရမည်-
+
+1. **လေဆာအရာဝတ္ထုတစ်ခု ဖန်တီးပါ**: သူရဲကောင်းရဲ့ သင်္ဘောအပေါ်ဘက်မှ ဖန်တီးပြီး မျက်နှာပြင်အပေါ်ဘက်သို့ ရွေ့လျားစတင်ပါမည်။
+2. **Key event ကို code ဖြင့် ချိတ်ဆက်ပါ**: ကီးဘုတ်ပေါ်ရှိ key တစ်ခုကို ရွေးချယ်ပြီး လေဆာပစ်ခြင်းကို ကိုယ်စားပြုရမည်။
+3. **လေဆာပုံစံရှိသော ဂိမ်းအရာဝတ္ထုတစ်ခု ဖန်တီးပါ**: key ကို နှိပ်သောအခါ။
+
+## လေဆာပစ်ခြင်းအတွက် Cooldown
+
+လေဆာသည် သင် key ကို နှိပ်တိုင်း ပစ်ရမည်။ ဥပမာ *space* key ကို အသုံးပြုပါ။ ဂိမ်းသည် အလွန်တိုတောင်းသောအချိန်အတွင်း လေဆာများ အလွန်များစွာ ဖန်တီးခြင်းကို ကာကွယ်ရန် လိုအပ်သည်။ ၎င်းကို *cooldown* ဟုခေါ်သော timer ကို အသုံးပြုခြင်းဖြင့် ပြုလုပ်နိုင်သည်။ ၎င်းကို အောက်ပါနည်းဖြင့် အကောင်အထည်ဖော်နိုင်သည်-
+
+```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.
+    }
+  }
+}
+```
+
+✅ *Cooldowns* အကြောင်းကို သင်၏ အာကာသဂိမ်း စီးရီး၏ ပထမဆုံးသင်ခန်းစာမှ ပြန်လည်သတိရပါ။
+
+## ဘာကို တည်ဆောက်မလဲ
+
+သင်သည် ယခင်သင်ခန်းစာမှ ရှိပြီးသား code ကို (သင်သည် သန့်စင်ပြီး ပြန်လည်ဖွဲ့စည်းထားသင့်သည်) ယူပြီး တိုးချဲ့ပါမည်။ အပိုင်း II မှ code ကို စတင်အသုံးပြုပါ၊ သို့မဟုတ် [အပိုင်း III- starter](../../../../../../../../../your-work) တွင် code ကို အသုံးပြုပါ။
+
+> tip: သင်လုပ်ဆောင်ရမည့် လေဆာသည် assets folder တွင် ရှိပြီး သင်၏ code မှ ရည်ညွှန်းထားပြီးဖြစ်သည်။
+
+- **တိုက်မိမှု စစ်ဆေးမှုကို ထည့်သွင်းပါ**၊ လေဆာသည် အရာဝတ္ထုတစ်ခုနှင့် တိုက်မိသောအခါ အောက်ပါစည်းကမ်းများကို လိုက်နာရမည်-
+   1. **လေဆာသည် ရန်သူကို ထိမိခြင်း**: ရန်သူသည် လေဆာထိမိပါက သေဆုံးမည်။
+   2. **လေဆာသည် မျက်နှာပြင်အပေါ်ဘက်ကို ထိမိခြင်း**: လေဆာသည် မျက်နှာပြင်အပေါ်ဘက်ကို ထိမိပါက ဖျက်သိမ်းမည်။
+   3. **ရန်သူနှင့် သူရဲကောင်း တိုက်မိခြင်း**: ရန်သူနှင့် သူရဲကောင်း တိုက်မိပါက နှစ်ဦးလုံး ဖျက်သိမ်းမည်။
+   4. **ရန်သူသည် မျက်နှာပြင်အောက်ဘက်ကို ထိမိခြင်း**: ရန်သူသည် မျက်နှာပြင်အောက်ဘက်ကို ထိမိပါက ရန်သူနှင့် သူရဲကောင်း ဖျက်သိမ်းမည်။
+
+## အကြံပြုထားသော အဆင့်များ
+
+`your-work` sub folder တွင် ဖန်တီးထားသော ဖိုင်များကို ရှာပါ။ ၎င်းတွင် အောက်ပါအရာများ ပါဝင်သင့်သည်-
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+သင်၏ project ကို `your_work` folder မှ စတင်ရန် အောက်ပါ command ကို ရိုက်ပါ-
+
+```bash
+cd your-work
+npm start
+```
+
+အထက်ပါ command သည် HTTP Server ကို `http://localhost:5000` လိပ်စာတွင် စတင်ပါမည်။ Browser ကို ဖွင့်ပြီး ထိုလိပ်စာကို ထည့်သွင်းပါ။ ယခုအချိန်တွင် သူရဲကောင်းနှင့် ရန်သူများကို ဖော်ပြထားပြီး မည်သည့်အရာမျှ မရွေ့လျားသေးပါ။
+
+### Code ထည့်သွင်းပါ
+
+1. **ဂိမ်းအရာဝတ္ထု၏ ရှုထောင့်ကို ကိုယ်စားပြုရန် code ကို စတင်ပါ** အောက်ပါ code သည် `GameObject` ၏ ရှုထောင့်ကို ကိုယ်စားပြုနိုင်သည်။ သင်၏ GameObject class ကို ပြင်ဆင်ပါ-
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **တိုက်မိမှု စစ်ဆေးမှု code ကို ထည့်သွင်းပါ** ရှုထောင့် ၂ ခု တိုက်မိမိမိစစ်ဆေးသော လုပ်ဆောင်ချက်အသစ်တစ်ခုကို ဖန်တီးပါ-
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **လေဆာပစ်ခြင်းစွမ်းရည်ကို ထည့်သွင်းပါ**
+   1. **Key-event message ကို ထည့်သွင်းပါ** *space* key သည် သူရဲကောင်းရဲ့ သင်္ဘောအပေါ်တွင် လေဆာတစ်ခု ဖန်တီးရမည်။ Messages object တွင် constants ၃ ခုကို ထည့်သွင်းပါ-
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Space key ကို ကိုင်တွယ်ပါ** `window.addEventListener` keyup function ကို ပြင်ဆင်ပြီး space key ကို ကိုင်တွယ်ပါ-
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Listeners ကို ထည့်သွင်းပါ** `initGame()` function ကို ပြင်ဆင်ပြီး space bar ကို နှိပ်သောအခါ သူရဲကောင်းသည် လေဆာပစ်နိုင်ရန် သေချာပါစေ-
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       နှင့် ရန်သူသည် လေဆာနှင့် တိုက်မိသောအခါ လိုက်နာရမည့် အပြုအမူကို သေချာစေရန် `eventEmitter.on()` function အသစ်တစ်ခုကို ထည့်သွင်းပါ-
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Object ကို ရွေ့လျားပါ** လေဆာသည် မျက်နှာပြင်အပေါ်ဘက်သို့ တဖြည်းဖြည်း ရွေ့လျားရမည်။ သင်သည် `GameObject` ကို extend လုပ်ထားသည့်အတိုင်း Laser class အသစ်တစ်ခုကို ဖန်တီးပါ-
+
+      ```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. **တိုက်မိမှုကို ကိုင်တွယ်ပါ** လေဆာအတွက် တိုက်မိမှုစည်းကမ်းများကို အကောင်အထည်ဖော်ပါ။ တိုက်မိသော objects များကို စစ်ဆေးသော `updateGameObjects()` function ကို ထည့်သွင်းပါ-
+
+      ```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);
+      }  
+      ```
+
+      `window.onload` တွင် သင်၏ game loop ထဲသို့ `updateGameObjects()` ကို ထည့်သွင်းပါ။
+
+   4. **လေဆာအတွက် cooldown ကို အကောင်အထည်ဖော်ပါ** လေဆာသည် အလွန်တိုတောင်းသောအချိန်အတွင်း ပစ်မရနိုင်ရန် သေချာစေရန်။
+
+      နောက်ဆုံးတွင် Hero class ကို ပြင်ဆင်ပြီး cooldown လုပ်နိုင်စေရန်-
+
+       ```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;
+        }
+      }
+      ```
+
+ယခုအချိန်တွင် သင်၏ဂိမ်းတွင် functionality ရှိပါပြီ! Arrow keys ဖြင့် navigation ပြုလုပ်နိုင်ပြီး space bar ဖြင့် လေဆာပစ်နိုင်သည်။ ရန်သူများသည် လေဆာထိမိသောအခါ ပျောက်ကွယ်သွားသည်။ ကောင်းမွန်ပါတယ်!
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+ပေါက်ကွဲမှုကို ထည့်သွင်းပါ! [Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) တွင် ရှိသော game assets ကို ကြည့်ပြီး ရန်သူကို လေဆာထိသောအခါ ပေါက်ကွဲမှုကို ထည့်သွင်းရန် ကြိုးစားပါ။
+
+## မိန့်ခွန်းပြီးနောက် စစ်တမ်း
+
+[မိန့်ခွန်းပြီးနောက် စစ်တမ်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+သင်၏ဂိမ်းတွင် interval များကို စမ်းသပ်ပါ။ ၎င်းကို ပြောင်းလဲသောအခါ ဘာဖြစ်မလဲ? [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) အကြောင်းပိုမိုဖတ်ရှုပါ။
+
+## လုပ်ငန်းတာဝန်
+
+[တိုက်မိမှုများကို စူးစမ်းပါ](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/4-collision-detection/assignment.md b/translations/my/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..bcee4e84
--- /dev/null
+++ b/translations/my/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-27T22:23:40+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "my"
+}
+-->
+# တိုက်မှုများကို လေ့လာပါ
+
+## လမ်းညွှန်ချက်များ
+
+တိုက်မှုများအလုပ်လုပ်ပုံကို ပိုမိုနားလည်ရန်၊ တိုက်မှုဖြစ်နိုင်သော အရာအချို့ပါဝင်သော အလွန်သေးငယ်သောဂိမ်းတစ်ခုကို တည်ဆောက်ပါ။ Keypresses သို့မဟုတ် mouse clicks အသုံးပြု၍ အရာများကို ရွေ့လျားစေပြီး၊ တစ်ခုခုတိုက်မိသောအခါ အရာတစ်ခုခုတွင် အတုအပြုဖြစ်စေပါ။ ဥပမာအားဖြင့် မိုးလုံးက မြေကြီးကို တိုက်မိခြင်း၊ သို့မဟုတ် bumper-cars တိုက်မိခြင်းဖြစ်နိုင်သည်။ ဖန်တီးမှုစိတ်ကူးများကို အသုံးပြုပါ!
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော                                                                                                                | လုံလောက်သော                       | တိုးတက်မှုလိုအပ်သည် |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
+|          | အပြည့်အစုံအလုပ်လုပ်သော code နမူနာကို ထုတ်လုပ်ပြီး၊ canvas ပေါ်တွင် အရာများကို ရေးဆွဲခြင်း၊ အခြေခံတိုက်မှုဖြစ်ပေါ်ခြင်းနှင့် တုံ့ပြန်မှုများဖြစ်ပေါ်ခြင်း | Code သည် အချို့သောနည်းလမ်းဖြင့် မပြီးစီးသေးပါ | Code သည် အလုပ်မလုပ်ပါ |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလို့ရပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/4-collision-detection/solution/README.md b/translations/my/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..5781c59d
--- /dev/null
+++ b/translations/my/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:23:53+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "my"
+}
+-->
+
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် ရှုလေ့ရှိသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/4-collision-detection/your-work/README.md b/translations/my/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..f96de460
--- /dev/null
+++ b/translations/my/6-space-game/4-collision-detection/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:24:03+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "my"
+}
+-->
+
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်အချော်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/5-keeping-score/README.md b/translations/my/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..b7f5492b
--- /dev/null
+++ b/translations/my/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-27T22:21:04+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "my"
+}
+-->
+# အာကာသဂိမ်းတည်ဆောက်ခြင်း အပိုင်း ၅: အမှတ်ပေးခြင်းနှင့် အသက်များ
+
+## မိန့်ခွန်းမတင်မီ မေးခွန်းများ
+
+[မိန့်ခွန်းမတင်မီ မေးခွန်းများ](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+ဒီသင်ခန်းစာမှာ သင်ဂိမ်းအတွက် အမှတ်ပေးခြင်းနှင့် အသက်တွက်ခြင်းကို ဘယ်လိုလုပ်ရမယ်ဆိုတာကို သင်ယူပါမယ်။
+
+## မျက်နှာပြင်ပေါ်မှာ စာသားရေးခြင်း
+
+ဂိမ်းအမှတ်ကို မျက်နှာပြင်ပေါ်မှာ ပြသနိုင်ဖို့အတွက် စာသားကို မျက်နှာပြင်ပေါ်မှာ ဘယ်လိုထားရမယ်ဆိုတာကို သိထားရပါမယ်။ အဖြေကတော့ canvas object ရဲ့ `fillText()` method ကို အသုံးပြုခြင်းဖြစ်ပါတယ်။ သင် font ဘယ်လိုသုံးမယ်၊ စာသားရဲ့ အရောင်၊ alignment (left, right, center) စတဲ့ အခြားသောအချက်တွေကိုလည်း ထိန်းချုပ်နိုင်ပါတယ်။ အောက်မှာ မျက်နှာပြင်ပေါ်မှာ စာသားရေးထားတဲ့ code ရှိပါတယ်။
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ [Canvas မှာ စာသားထည့်သွင်းပုံ](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) အကြောင်းကို ပိုမိုလေ့လာပါ၊ သင့်အတွက် ပိုမိုလှပတဲ့ပုံစံတစ်ခုကို ဖန်တီးနိုင်ပါတယ်။
+
+## အသက် - ဂိမ်းအတွင်း အယူအဆ
+
+ဂိမ်းအတွင်း အသက်ဆိုတာက ရေတွက်ချက်တစ်ခုသာဖြစ်ပါတယ်။ အာကာသဂိမ်းရဲ့ အကြောင်းအရာအနေနဲ့ သင့်ရဲ့ သင်္ဘောပျက်စီးတိုင်း အသက်တစ်ခုလျော့သွားမယ့် အသက်သတ်မှတ်ချက်ကို သတ်မှတ်ထားတာများပါတယ်။ ရေတွက်ချက်အစား သင်္ဘောငယ်များ သို့မဟုတ် နှလုံးပုံစံများကို အသက်အဖြစ် ပြသနိုင်ရင် ပိုမိုကောင်းမွန်ပါတယ်။
+
+## ဘာတွေတည်ဆောက်မလဲ
+
+သင့်ဂိမ်းမှာ အောက်ပါအချက်တွေကို ထည့်သွင်းပါ။
+
+- **ဂိမ်းအမှတ်**: ရန်သူသင်္ဘောတစ်စင်းကို ဖျက်ဆီးတိုင်း သင်္ဘောပိုင်ရှင်ကို အမှတ်ပေးပါမယ်။ သင်္ဘောတစ်စင်းကို ၁၀၀ အမှတ်ပေးဖို့ အကြံပြုပါတယ်။ ဂိမ်းအမှတ်ကို အောက်ဘက်ဘယ်ဖက်မှာ ပြသပါမယ်။
+- **အသက်**: သင့်သင်္ဘောမှာ အသက်သုံးခုရှိပါတယ်။ ရန်သူသင်္ဘောနဲ့ တိုက်မိတိုင်း အသက်တစ်ခုလျော့သွားပါမယ်။ အသက်အမှတ်ကို အောက်ဘက်ညာဖက်မှာ ပြသပြီး အောက်ပါပုံစံဖြစ်တဲ့ ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.my.png) ကို အသုံးပြုပါမယ်။
+
+## အကြံပြုထားသော လုပ်ဆောင်မှုများ
+
+`your-work` sub folder ထဲမှာ ဖန်တီးထားတဲ့ ဖိုင်တွေကို ရှာပါ။ အောက်ပါအချက်တွေပါဝင်ထားရပါမယ်။
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+သင့် project ကို `your_work` folder ထဲမှာ စတင်ဖို့အတွက် အောက်ပါ command ကို ရိုက်ပါ:
+
+```bash
+cd your-work
+npm start
+```
+
+အထက်ပါ command က HTTP Server ကို `http://localhost:5000` မှာ စတင်ပါမယ်။ Browser ကို ဖွင့်ပြီး အဲဒီလိပ်စာကို ထည့်သွင်းပါ။ အခုအချိန်မှာ သင်္ဘောပိုင်ရှင်နဲ့ ရန်သူတွေကို ပြသထားပြီး သင့်ရဲ့ left နှင့် right arrow keys ကို နှိပ်လိုက်ရင် သင်္ဘောပိုင်ရှင်ကို ရွှေ့နိုင်ပြီး ရန်သူတွေကို ပစ်ခတ်နိုင်ပါတယ်။
+
+### Code ထည့်သွင်းခြင်း
+
+1. **လိုအပ်သော assets များကို ကူးယူပါ**။ `solution/assets/` folder ထဲက `your-work` folder ထဲကို `life.png` asset ကို ထည့်သွင်းပါ။ `lifeImg` ကို window.onload function ထဲမှာ ထည့်သွင်းပါ:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. `lifeImg` ကို assets စာရင်းထဲမှာ ထည့်သွင်းပါ:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Variables ထည့်သွင်းပါ**။ အမှတ်စုစုပေါင်း (0) နှင့် အသက်ကျန် (3) ကို ကိုယ်စားပြု code ထည့်သွင်းပြီး မျက်နှာပြင်ပေါ်မှာ ပြသပါ။
+
+3. **`updateGameObjects()` function ကို တိုးချဲ့ပါ**။ ရန်သူနဲ့ တိုက်မိမှုကို ကိုင်တွယ်နိုင်ဖို့ `updateGameObjects()` function ကို တိုးချဲ့ပါ:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **အသက်နှင့် အမှတ်များ ထည့်သွင်းပါ**။ 
+   1. **Variables ကို Initialize လုပ်ပါ**။ `Hero` class ရဲ့ `this.cooldown = 0` အောက်မှာ အသက်နှင့် အမှတ်များကို သတ်မှတ်ပါ:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Variables များကို မျက်နှာပြင်ပေါ်မှာ ရေးပါ**။ အဲဒီ value တွေကို မျက်နှာပြင်ပေါ်မှာ ရေးပါ:
+
+        ```javascript
+        function drawLife() {
+          // TODO, 35, 27
+          const START_POS = canvas.width - 180;
+          for(let i=0; i < hero.life; i++ ) {
+            ctx.drawImage(
+              lifeImg, 
+              START_POS + (45 * (i+1) ), 
+              canvas.height - 37);
+          }
+        }
+        
+        function drawPoints() {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = "red";
+          ctx.textAlign = "left";
+          drawText("Points: " + hero.points, 10, canvas.height-20);
+        }
+        
+        function drawText(message, x, y) {
+          ctx.fillText(message, x, y);
+        }
+
+        ```
+
+   1. **Game loop မှာ Methods ထည့်သွင်းပါ**။ `updateGameObjects()` အောက်မှာ ဒီ function တွေကို window.onload function ထဲမှာ ထည့်သွင်းပါ:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **ဂိမ်းစည်းကမ်းများကို အကောင်အထည်ဖော်ပါ**။ အောက်ပါဂိမ်းစည်းကမ်းများကို အကောင်အထည်ဖော်ပါ:
+
+   1. **Hero နဲ့ ရန်သူတိုက်မိမှုတိုင်း** အသက်တစ်ခုလျော့ပါ။
+   
+      `Hero` class ကို တိုးချဲ့ပြီး အသက်လျော့ခြင်းကို လုပ်ဆောင်ပါ:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Laser တစ်ခု ရန်သူကို ထိတိုင်း** ဂိမ်းအမှတ်ကို ၁၀၀ အမှတ်တိုးပါ။
+
+      Hero class ကို တိုးချဲ့ပြီး အမှတ်တိုးခြင်းကို လုပ်ဆောင်ပါ:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Collision Event Emitters ထဲမှာ ဒီ function တွေကို ထည့်သွင်းပါ:
+
+        ```javascript
+        eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+           first.dead = true;
+           second.dead = true;
+           hero.incrementPoints();
+        })
+
+        eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+           enemy.dead = true;
+           hero.decrementLife();
+        });
+        ```
+
+✅ JavaScript/Canvas ကို အသုံးပြုပြီး ဖန်တီးထားတဲ့ အခြားဂိမ်းတွေကို ရှာဖွေပါ။ အဲဒီဂိမ်းတွေမှာ ဘာတွေကို ပုံမှန်တွေ့ရလဲ?
+
+ဒီအလုပ်အပြီးမှာ သင့်ရဲ့ ဂိမ်းမှာ အောက်ဘက်ညာဖက်မှာ သင်္ဘောငယ်တွေကို အသက်အဖြစ် ပြသထားပြီး အမှတ်တွေကို အောက်ဘက်ဘယ်ဖက်မှာ ပြသထားရမယ်။ ရန်သူနဲ့ တိုက်မိတိုင်း အသက်ကျန်အရေအတွက် လျော့သွားပြီး ရန်သူကို ပစ်တိုင်း အမှတ်တိုးသွားရမယ်။ ကောင်းပြီ! သင့်ဂိမ်းက အပြီးသတ်နီးပါးဖြစ်နေပါပြီ။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+သင့် code က အပြီးသတ်နီးပါးဖြစ်နေပါပြီ။ နောက်တစ်ဆင့်မှာ ဘာတွေလုပ်ဆောင်မလဲဆိုတာ စဉ်းစားနိုင်ပါသလား?
+
+## မိန့်ခွန်းပြီးနောက် မေးခွန်းများ
+
+[မိန့်ခွန်းပြီးနောက် မေးခွန်းများ](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+ဂိမ်းအမှတ်နှင့် အသက်များကို တိုးခြင်းနှင့် လျော့ခြင်းလုပ်ဆောင်ပုံကို ရှာဖွေပါ။ [PlayFab](https://playfab.com) ကဲ့သို့သော စိတ်ဝင်စားဖွယ်ဂိမ်း engine တွေရှိပါတယ်။ ဒီအရာတွေကို သင့်ဂိမ်းမှာ အသုံးပြုရင် ဘယ်လိုတိုးတက်မှုတွေ ရနိုင်မလဲ?
+
+## လုပ်ငန်းတာဝန်
+
+[အမှတ်ပေးဂိမ်းတည်ဆောက်ပါ](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/5-keeping-score/assignment.md b/translations/my/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..3d94e20a
--- /dev/null
+++ b/translations/my/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-27T22:21:37+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "my"
+}
+-->
+# အမှတ်ပေးဂိမ်းတစ်ခု တည်ဆောက်ပါ
+
+## လမ်းညွှန်ချက်များ
+
+အသက်နှင့်အမှတ်များကို ဖန်တီးမှုအမျိုးမျိုးဖြင့် ပြသထားသော ဂိမ်းတစ်ခု ဖန်တီးပါ။ အကြံပြုချက်တစ်ခုမှာ အသက်ကို နှလုံးပုံစံဖြင့် ပြသပြီး အမှတ်များကို မျက်နှာပြင်၏ အောက်ခြေဗဟိုပိုင်းတွင် အကြီးမားသော နံပါတ်ပုံစံဖြင့် ပြသရန် ဖြစ်ပါသည်။ [အခမဲ့ဂိမ်းအရင်းအမြစ်များ](https://www.kenney.nl/) ကို ဒီမှာ ကြည့်ပါ။
+
+# အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော | လုံလောက်သော | တိုးတက်မှုလိုအပ်သော |
+| ----------- | ------------- | -------------- | -------------------- |
+|             | အပြည့်အစုံသော ဂိမ်းကို တင်ပြထားသည် | ဂိမ်းကို အစိတ်အပိုင်းတစ်ချို့သာ တင်ပြထားသည် | အစိတ်အပိုင်းတစ်ချို့ bugs ပါရှိသော ဂိမ်း |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/5-keeping-score/solution/README.md b/translations/my/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..d2bc5f60
--- /dev/null
+++ b/translations/my/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:21:51+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "my"
+}
+-->
+
+
+---
+
+**ဝက်ဘ်ဆိုက်မှတ်ချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်ဆိုမှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတည်သော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပြန်ဆိုမှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားများ သို့မဟုတ် အဓိပ္ပာယ်မှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/5-keeping-score/your-work/README.md b/translations/my/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..916f69d2
--- /dev/null
+++ b/translations/my/6-space-game/5-keeping-score/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:22:00+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "my"
+}
+-->
+
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် ရှုယူသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/6-end-condition/README.md b/translations/my/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..1de2a50a
--- /dev/null
+++ b/translations/my/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-27T22:25:48+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "my"
+}
+-->
+# အာကာသဂိမ်း တည်ဆောက်ခြင်း အပိုင်း ၆: အဆုံးသတ်ခြင်းနှင့် ပြန်စတင်ခြင်း
+
+## မိန့်ခွန်းမတိုင်မီ စမ်းမေးခွန်း
+
+[မိန့်ခွန်းမတိုင်မီ စမ်းမေးခွန်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+ဂိမ်းတစ်ခုမှာ *အဆုံးသတ်အခြေအနေ* ကို ဖော်ပြဖို့ နည်းလမ်းအမျိုးမျိုးရှိပါတယ်။ ဂိမ်းကို ဖန်တီးသူအနေနဲ့ ဂိမ်းအဆုံးသတ်ရတဲ့ အကြောင်းရင်းကို သတ်မှတ်ရမယ်။ အခုအထိ သင်တည်ဆောက်နေတဲ့ အာကာသဂိမ်းကို အခြေခံပြီး အောက်ပါအကြောင်းရင်းတွေကို တွေးဆနိုင်ပါတယ်-
+
+- **`N` ရန်သူသင်္ဘောတွေ ဖျက်ဆီးပြီး**: ဂိမ်းကို အဆင့်အလိုက် ခွဲခြားထားတဲ့အခါမှာ `N` ရန်သူသင်္ဘောတွေ ဖျက်ဆီးရမယ်ဆိုတာ အတော်လေး ရိုးရိုးတွေ့ရပါတယ်။
+- **သင့်သင်္ဘော ဖျက်ဆီးခံရပြီး**: သင့်သင်္ဘော ဖျက်ဆီးခံရရင် ဂိမ်းရှုံးရတဲ့ ဂိမ်းတွေ ရှိပါတယ်။ နောက်ထပ် ရိုးရိုးတွေ့ရတာကတော့ အသက်အရေအတွက်ကို သတ်မှတ်ထားတာပါ။ သင့်သင်္ဘော ဖျက်ဆီးခံရတိုင်း အသက်တစ်ခု လျော့သွားပါတယ်။ အသက်အားလုံးဆုံးသွားရင် ဂိမ်းရှုံးရပါတယ်။
+- **`N` အမှတ်စုဆောင်းပြီး**: အမှတ်စုဆောင်းတာကို အဆုံးသတ်အခြေအနေအနေနဲ့ သတ်မှတ်ထားတဲ့ ဂိမ်းတွေ ရှိပါတယ်။ အမှတ်တွေကို ဘယ်လိုရမလဲဆိုတာ သင့်အပေါ်မှာ မူတည်ပါတယ်။ ရန်သူသင်္ဘော ဖျက်ဆီးတာ၊ သို့မဟုတ် ဖျက်ဆီးခံရတဲ့အခါမှာ *ကျန်ရှိတဲ့ပစ္စည်းတွေ* စုဆောင်းတာကို အမှတ်ပေးတာတွေ ရှိပါတယ်။
+- **အဆင့်တစ်ခု ပြီးမြောက်ခြင်း**: ဒါဟာ `X` ရန်သူသင်္ဘော ဖျက်ဆီးပြီး၊ `Y` အမှတ်စုဆောင်းပြီး၊ သို့မဟုတ် သတ်မှတ်ထားတဲ့ ပစ္စည်းတစ်ခုကို စုဆောင်းပြီးဖြစ်နိုင်ပါတယ်။
+
+## ပြန်စတင်ခြင်း
+
+လူတွေ သင့်ဂိမ်းကို နှစ်သက်ရင် ပြန်ကစားချင်နိုင်ပါတယ်။ ဂိမ်းအဆုံးသတ်သွားတဲ့အခါမှာ ပြန်စတင်ဖို့ ရွေးချယ်စရာပေးသင့်ပါတယ်။
+
+✅ ဂိမ်းအဆုံးသတ်ရတဲ့ အခြေအနေတွေကို တွေးကြည့်ပြီး ပြန်စတင်ဖို့ ဘယ်လို အကြောင်းပြချက်တွေ ရှိနိုင်မလဲ တွေးကြည့်ပါ။
+
+## ဘာကို တည်ဆောက်မလဲ
+
+သင့်ဂိမ်းမှာ အောက်ပါ စည်းကမ်းတွေ ထည့်သွင်းပါမယ်-
+
+1. **ဂိမ်းအနိုင်ရခြင်း**: ရန်သူသင်္ဘောအားလုံး ဖျက်ဆီးပြီးရင် ဂိမ်းအနိုင်ရပါတယ်။ ထို့အပြင် အနိုင်ရတဲ့ မက်ဆေ့ဂျ်တစ်ခုကို ဖော်ပြပါ။
+1. **ပြန်စတင်ခြင်း**: သင့်အသက်အားလုံးဆုံးသွားတဲ့အခါ သို့မဟုတ် ဂိမ်းအနိုင်ရတဲ့အခါ ပြန်စတင်ဖို့ ရွေးချယ်စရာပေးပါ။ သတိထားပါ! ဂိမ်းကို ပြန်စတင်ဖို့ အစအဆင့်တွေကို ပြန်စတင်ပြီး ယခင်ဂိမ်းအခြေအနေကို ရှင်းလင်းထားရပါမယ်။
+
+## အကြံပြုအဆင့်များ
+
+`your-work` sub folder ထဲမှာ ဖန်တီးထားတဲ့ ဖိုင်တွေကို ရှာပါ။ အောက်ပါအတိုင်း ပါဝင်ထားရပါမယ်-
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+သင့်ပရောဂျက်ကို `your_work` folder ထဲမှာ စတင်ဖို့ အောက်ပါ command ကို ရိုက်ပါ-
+
+```bash
+cd your-work
+npm start
+```
+
+အထက်ပါ command က `http://localhost:5000` လိပ်စာမှာ HTTP Server ကို စတင်ပါမယ်။ Browser ကို ဖွင့်ပြီး အဲ့ဒီလိပ်စာကို ထည့်ပါ။ သင့်ဂိမ်းကို ကစားနိုင်တဲ့အခြေအနေမှာ ရှိရပါမယ်။
+
+> tip: Visual Studio Code မှာ warning မရဖို့ `window.onload` function ကို `gameLoopId` ကို `let` မပါဘဲ ခေါ်ဖို့ ပြင်ဆင်ပါ၊ နောက်ဆုံးမှာ `let gameLoopId;` ကို ဖိုင်အပေါ်ဆုံးမှာ သီးသန့်ကြေညာပါ။
+
+### Code ထည့်သွင်းပါ
+
+1. **အဆုံးသတ်အခြေအနေကို ထိန်းသိမ်းပါ**: ရန်သူအရေအတွက်ကို သို့မဟုတ် သင့်သင်္ဘော ဖျက်ဆီးခံရတာကို ထိန်းသိမ်းဖို့ အောက်ပါ function နှစ်ခုကို ထည့်ပါ-
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Message handler တွေကို logic ထည့်ပါ**: `eventEmitter` ကို အောက်ပါအခြေအနေတွေကို handle လုပ်ဖို့ ပြင်ဆင်ပါ-
+
+    ```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. **Message အမျိုးအစားအသစ်တွေ ထည့်ပါ**: အောက်ပါ Messages တွေကို constants object ထဲမှာ ထည့်ပါ-
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **ပြန်စတင်ဖို့ code ထည့်ပါ**: သတ်မှတ်ထားတဲ့ button ကို နှိပ်ပြီး ဂိမ်းကို ပြန်စတင်နိုင်အောင် code ထည့်ပါ။
+
+   1. **Key press `Enter` ကို နားထောင်ပါ**: window ရဲ့ eventListener ကို ပြင်ဆင်ပြီး key press ကို နားထောင်ပါ-
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **ပြန်စတင်မက်ဆေ့ဂျ် ထည့်ပါ**: Messages constant ထဲမှာ အောက်ပါ Message ကို ထည့်ပါ-
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **ဂိမ်းစည်းကမ်းတွေကို အကောင်အထည်ဖော်ပါ**: အောက်ပါဂိမ်းစည်းကမ်းတွေကို အကောင်အထည်ဖော်ပါ-
+
+   1. **Player အနိုင်ရအခြေအနေ**: ရန်သူသင်္ဘောအားလုံး ဖျက်ဆီးပြီးရင် အနိုင်ရတဲ့ မက်ဆေ့ဂျ်ကို ဖော်ပြပါ။
+
+      1. ပထမဆုံး `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);
+        }
+        ```
+
+      1. `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)  
+        }
+        ```
+
+   1. **ပြန်စတင် logic**: အသက်အားလုံးဆုံးသွားတဲ့အခါ သို့မဟုတ် player အနိုင်ရတဲ့အခါ ပြန်စတင်နိုင်ကြောင်း ဖော်ပြပါ။ ထို့အပြင် *ပြန်စတင်* key ကို နှိပ်တဲ့အခါ ဂိမ်းကို ပြန်စတင်ပါ (ဘယ် key ကို ပြန်စတင်ဖို့ သတ်မှတ်မလဲ သင်ဆုံးဖြတ်နိုင်ပါတယ်)။
+
+      1. `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);
+          }
+        }
+        ```
+
+     1. `initGame()` function ထဲမှာ `eventEmitter` ကို ခေါ်ဖို့ code ထည့်ပါ-
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. EventEmitter ထဲမှာ `clear()` function ကို ထည့်ပါ-
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 ဂိမ်းပြီးမြောက်ပါပြီ၊ Captain! အလုပ်ကောင်းပါတယ်! 🚀 💥 👽
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+အသံထည့်ပါ! Laser hit ဖြစ်တဲ့အခါ၊ hero သေဆုံးတဲ့အခါ သို့မဟုတ် အနိုင်ရတဲ့အခါ အသံထည့်နိုင်မလား? JavaScript ကို အသုံးပြုပြီး အသံဖွင့်နည်းကို သင်ယူဖို့ [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) ကို ကြည့်ပါ။
+
+## မိန့်ခွန်းပြီးနောက် စမ်းမေးခွန်း
+
+[မိန့်ခွန်းပြီးနောက် စမ်းမေးခွန်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+သင့်တာဝန်က နမူနာဂိမ်းအသစ်တစ်ခု ဖန်တီးဖို့ ဖြစ်ပါတယ်။ ဘယ်လိုဂိမ်းမျိုးကို တည်ဆောက်နိုင်မလဲဆိုတာ သိဖို့ စိတ်ဝင်စားဖွယ် ဂိမ်းတွေကို စူးစမ်းကြည့်ပါ။
+
+## တာဝန်
+
+[နမူနာဂိမ်းတစ်ခု တည်ဆောက်ပါ](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/6-end-condition/assignment.md b/translations/my/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..926e4377
--- /dev/null
+++ b/translations/my/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-27T22:26:21+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "my"
+}
+-->
+# နမူနာဂိမ်းတစ်ခု တည်ဆောက်ပါ
+
+## လမ်းညွှန်ချက်များ
+
+အဆုံးအခြေအနေမျိုးစုံကို လေ့ကျင့်နိုင်ရန် ဂိမ်းအသေးစားတစ်ခု တည်ဆောက်ကြည့်ပါ။ အမှတ်အရေအတွက်တစ်ခုရရှိခြင်း၊ သူရဲကောင်း၏အသက်အားလုံးဆုံးရှုံးခြင်း သို့မဟုတ် အလုံးစုံသော မုဆိုးများကို အနိုင်ယူခြင်းတို့အကြား မျိုးစုံပြောင်းလဲပါ။ Console အခြေပြု စွန့်စားမှုဂိမ်းတစ်ခုလို ရိုးရှင်းတဲ့အရာတစ်ခုကို တည်ဆောက်ပါ။ အောက်ပါဂိမ်းလည်ပတ်မှုစဉ်ကို အကြံဉာဏ်အဖြစ် အသုံးပြုပါ-
+
+```
+Hero> Strikes with broadsword - orc takes 3p damage
+Orc> Hits with club - hero takes 2p damage
+Hero> Kicks - orc takes 1p damage
+Game> Orc is defeated - Hero collects 2 coins
+Game> ****No more monsters, you have conquered the evil fortress****
+```
+
+## အကဲဖြတ်စံနှုန်း
+
+| စံနှုန်း  | ထူးချွန်သောအခြေအနေ       | လုံလောက်သောအခြေအနေ         | တိုးတက်မှုလိုအပ်သောအခြေအနေ |
+| --------- | -------------------------- | ----------------------------- | ---------------------------- |
+|           | ဂိမ်းတစ်ခုလုံးကို တင်ပြထားသည် | ဂိမ်းတစ်စိတ်တစ်ပိုင်းကို တင်ပြထားသည် | ဂိမ်းတစ်စိတ်တစ်ပိုင်းတွင် အမှားများပါရှိသည် |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/6-end-condition/solution/README.md b/translations/my/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..7bb9c6e4
--- /dev/null
+++ b/translations/my/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:26:35+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "my"
+}
+-->
+
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/6-end-condition/your-work/README.md b/translations/my/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..5cdc1530
--- /dev/null
+++ b/translations/my/6-space-game/6-end-condition/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:26:44+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "my"
+}
+-->
+
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှု ဝန်ဆောင်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/README.md b/translations/my/6-space-game/README.md
new file mode 100644
index 00000000..dfe8e6ba
--- /dev/null
+++ b/translations/my/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-27T22:19:15+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "my"
+}
+-->
+# အာကာသဂိမ်းတစ်ခု တည်ဆောက်ခြင်း
+
+JavaScript အခြေခံများကို ပိုမိုရှုထောင့်စေမည့် အာကာသဂိမ်းတစ်ခု
+
+ဒီသင်ခန်းစာမှာ သင့်ကိုယ်ပိုင် အာကာသဂိမ်းတစ်ခုကို ဘယ်လိုတည်ဆောက်ရမယ်ဆိုတာ သင်ယူနိုင်ပါမယ်။ "Space Invaders" ဆိုတဲ့ဂိမ်းကို ကစားဖူးတယ်ဆိုရင် ဒီဂိမ်းကလည်း အတူတူပဲ။ အာကာသယာဉ်ကို ထိန်းချုပ်ပြီး အပေါ်ကနေ ဆင်းလာတဲ့ မုဆိုးတွေကို ပစ်ခတ်ဖျက်ဆီးရမှာပါ။ အပြီးသတ်ဂိမ်းက ဒီလိုပုံစံဖြစ်မှာပါ:
+
+![Finished game](../../../6-space-game/images/pewpew.gif)
+
+ဒီသင်ခန်းစာခြောက်ခုအတွင်းမှာ သင်အောက်ပါအရာတွေကို သင်ယူနိုင်ပါမယ်-
+
+- **Canvas element** ကို အသုံးပြုပြီး မျက်နှာပြင်ပေါ်မှာ ပုံတွေ ဆွဲခြင်း
+- **ကာတီရှီယန် ကိုဩဒိနိတ်စနစ်** ကို နားလည်ခြင်း
+- **Pub-Sub pattern** ကို သုံးပြီး ထိန်းသိမ်းရလွယ်ကူပြီး တိုးချဲ့နိုင်တဲ့ ဂိမ်းအဆောက်အအုံတစ်ခု ဖန်တီးခြင်း
+- **Async/Await** ကို အသုံးပြုပြီး ဂိမ်းရဲ့ အရင်းအမြစ်တွေကို လုပ်ဆောင်ခြင်း
+- **ကီးဘုတ်ဖြင့် ထိန်းချုပ်မှု** ကို ကိုင်တွယ်ခြင်း
+
+## အကျဉ်းချုပ်
+
+- သီအိုရီ
+   - [JavaScript နဲ့ ဂိမ်းတည်ဆောက်ခြင်းကို မိတ်ဆက်ခြင်း](1-introduction/README.md)
+- လက်တွေ့
+   - [Canvas ပေါ်မှာ ပုံဆွဲခြင်း](2-drawing-to-canvas/README.md)
+   - [မျက်နှာပြင်ပေါ်မှာ အရာဝတ္ထုတွေ ရွှေ့လျားခြင်း](3-moving-elements-around/README.md)
+   - [တိုက်မိမှု ရှာဖွေခြင်း](4-collision-detection/README.md)
+   - [အမှတ်ပေါင်းခြင်း](5-keeping-score/README.md)
+   - [ဂိမ်းအဆုံးသတ်ခြင်းနှင့် ပြန်စခြင်း](6-end-condition/README.md)
+
+## အားကျေးဇူးတင်စကား
+
+ဒီဂိမ်းမှာ အသုံးပြုထားတဲ့ အရင်းအမြစ်တွေကို https://www.kenney.nl/ မှာ ရယူထားတာဖြစ်ပါတယ်။  
+ဂိမ်းတည်ဆောက်တာကို စိတ်ဝင်စားတယ်ဆိုရင် ဒီမှာ အရမ်းကောင်းတဲ့ အရင်းအမြစ်တွေ ရှိပါတယ်။ အခမဲ့တွေ အများကြီးရှိသလို အချို့ကတော့ ဝယ်ယူရတဲ့အရာတွေပါ။
+
+---
+
+**ဝက်ဘ်ဆိုက်မှတ်ချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတည်သောရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ အတည်ပြုထားသော ဘာသာပြန်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားများ သို့မဟုတ် အဓိပ္ပာယ်မှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/6-space-game/solution/README.md b/translations/my/6-space-game/solution/README.md
new file mode 100644
index 00000000..ff516c48
--- /dev/null
+++ b/translations/my/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:22:11+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "my"
+}
+-->
+
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှု ဝန်ဆောင်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/7-bank-project/1-template-route/README.md b/translations/my/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..d00468e2
--- /dev/null
+++ b/translations/my/7-bank-project/1-template-route/README.md
@@ -0,0 +1,300 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-27T22:07:57+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "my"
+}
+-->
+# ဘဏ်အက်ပ်တည်ဆောက်ခြင်း အပိုင်း ၁: Web App တွင် HTML Templates နှင့် Routes
+
+## မိန့်ခွန်းမတင်မီ စမ်းမေးခွန်း
+
+[မိန့်ခွန်းမတင်မီ စမ်းမေးခွန်း](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### နိဒါန်း
+
+JavaScript ကို browser တွင် အသုံးပြုလာပြီးနောက်ပိုင်းကစ၍ ဝဘ်ဆိုဒ်များသည် ယခင်ထက် ပိုမိုအကျိုးရှိပြီး ရှုပ်ထွေးလာသည်။ ယနေ့ခေတ်တွင် ဝဘ်နည်းပညာများကို browser အတွင်းမှ တိုက်ရိုက်လည်ပတ်နိုင်သော [ဝဘ်အက်ပ်](https://en.wikipedia.org/wiki/Web_application) များ ဖန်တီးရန် အသုံးပြုလေ့ရှိသည်။ ဝဘ်အက်ပ်များသည် အလွန်အကျိုးရှိသောကြောင့် အသုံးပြုသူများသည် လုပ်ဆောင်ချက်တစ်ခုစီအတွက် စာမျက်နှာတစ်ခုလုံး ပြန်လည်တင်ရန် စောင့်ဆိုင်းလိုကြခြင်းမရှိပါ။ ထို့ကြောင့် JavaScript ကို DOM ကို အသုံးပြု၍ HTML ကို တိုက်ရိုက် ပြောင်းလဲရန် အသုံးပြုပြီး အသုံးပြုသူအတွေ့အကြုံကို ပိုမိုချောမွေ့စေသည်။
+
+ဒီသင်ခန်းစာတွင် HTML templates ကို အသုံးပြု၍ စာမျက်နှာတစ်ခုလုံး ပြန်လည်တင်ရန် မလိုဘဲ မျက်နှာပြင်များစွာ ဖန်တီးနိုင်ရန် အခြေခံအဆောက်အအုံများကို တည်ဆောက်သွားမည်ဖြစ်သည်။
+
+### ကြိုတင်လိုအပ်ချက်
+
+ဒီသင်ခန်းစာတွင် ဖန်တီးမည့် ဝဘ်အက်ပ်ကို စမ်းသပ်ရန် သင့်တွင် ဒေသခံ web server တစ်ခု လိုအပ်ပါသည်။ သင့်တွင် မရှိသေးပါက [Node.js](https://nodejs.org) ကို ထည့်သွင်းပြီး သင့်ပရောဂျက်ဖိုလ်ဒါမှ `npx lite-server` command ကို အသုံးပြုနိုင်ပါသည်။ ၎င်းသည် ဒေသခံ web server တစ်ခု ဖန်တီးပြီး သင့်အက်ပ်ကို browser တွင် ဖွင့်ပေးမည်ဖြစ်သည်။
+
+### ပြင်ဆင်မှု
+
+သင့်ကွန်ပျူတာတွင် `bank` ဟုအမည်ပေးထားသော ဖိုလ်ဒါတစ်ခု ဖန်တီးပြီး `index.html` ဟုအမည်ပေးထားသော ဖိုင်တစ်ခု ထည့်ပါ။ ကျွန်ုပ်တို့သည် ဒီ 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
+
+ဝဘ်စာမျက်နှာအတွက် မျက်နှာပြင်များစွာ ဖန်တီးလိုပါက၊ မျက်နှာပြင်တစ်ခုစီအတွက် HTML ဖိုင်တစ်ခုစီ ဖန်တီးရန် သင်္ကေတတစ်ခုဖြစ်နိုင်သည်။ သို့သော်၊ ဒီနည်းလမ်းတွင် အခက်အခဲအချို့ရှိသည်-
+
+- မျက်နှာပြင်ပြောင်းလဲသည့်အခါ HTML အပြည့်အစုံကို ပြန်လည်တင်ရမည်ဖြစ်ပြီး၊ ၎င်းသည် နှေးကွေးနိုင်သည်။
+- မတူညီသော မျက်နှာပြင်များအကြား ဒေတာမျှဝေရန် ခက်ခဲသည်။
+
+အခြားနည်းလမ်းတစ်ခုမှာ HTML ဖိုင်တစ်ခုသာရှိပြီး `<template>` element ကို အသုံးပြု၍ [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) များစွာ သတ်မှတ်ခြင်းဖြစ်သည်။ Template သည် browser မှ မမြင်ရသော HTML block တစ်ခုဖြစ်ပြီး JavaScript ကို အသုံးပြု၍ runtime တွင် instantiate လုပ်ရန် လိုအပ်သည်။
+
+### တာဝန်
+
+ကျွန်ုပ်တို့သည် login စာမျက်နှာနှင့် dashboard စာမျက်နှာတို့ပါဝင်သည့် ဘဏ်အက်ပ်တစ်ခု ဖန်တီးမည်ဖြစ်သည်။ ပထမဦးစွာ၊ HTML body အတွင်း app ၏ မျက်နှာပြင်များကို instantiate လုပ်ရန် အသုံးပြုမည့် placeholder element တစ်ခု ထည့်ပါ-
+
+```html
+<div id="app">Loading...</div>
+```
+
+JavaScript ဖြင့် နောက်ပိုင်းတွင် ရှာဖွေရန် လွယ်ကူစေရန် `id` တစ်ခု ပေးထားပါသည်။
+
+> အကြံပြုချက်- ဒီ element ၏ အကြောင်းအရာကို အစားထိုးမည်ဖြစ်သောကြောင့်၊ အက်ပ်တင်နေစဉ် ပြသမည့် loading message သို့မဟုတ် indicator တစ်ခု ထည့်နိုင်ပါသည်။
+
+ထို့နောက် login စာမျက်နှာအတွက် HTML template ကို ထည့်ပါ။ ယာယီအားဖြင့် title တစ်ခုနှင့် navigation ပြုလုပ်ရန် အသုံးပြုမည့် link ပါဝင်သည့် section တစ်ခု ထည့်ပါမည်။
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+ထို့နောက် dashboard စာမျက်နှာအတွက် HTML template တစ်ခု ထည့်ပါမည်။ ဒီစာမျက်နှာတွင် အောက်ပါ section များပါဝင်မည်-
+
+- title နှင့် logout link ပါဝင်သည့် header
+- ဘဏ်အကောင့်၏ လက်ရှိလက်ကျန်ငွေ
+- အပြောင်းအလဲများကို 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>
+```
+
+> အကြံပြုချက်- HTML templates ဖန်တီးစဉ်၊ ၎င်း၏ ပုံစံကို ကြည့်လိုပါက `<template>` နှင့် `</template>` ကို `<!-- -->` ဖြင့် comment ထားနိုင်သည်။
+
+✅ Template များတွင် `id` attributes ကို အသုံးပြုရသည့်အကြောင်းကို သင်ထင်သလဲ။ classes တို့ကဲ့သို့ အခြားအရာများကို အသုံးပြုနိုင်မည်လား။
+
+## JavaScript ဖြင့် Templates ပြသခြင်း
+
+သင့် HTML ဖိုင်ကို browser တွင် စမ်းကြည့်ပါက `Loading...` သာ ပြသနေမည်ဖြစ်သည်။ ၎င်းသည် HTML templates များကို instantiate လုပ်ပြီး ပြသရန် JavaScript code ထည့်ရန် လိုအပ်သည့်အတွက်ဖြစ်သည်။
+
+Template တစ်ခုကို instantiate လုပ်ရန် 通常 ၃ ချက်လိုအပ်သည်-
+
+1. DOM အတွင်းမှ template element ကို ရှာဖွေပါ၊ ဥပမာ [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) ကို အသုံးပြုပါ။
+2. Template element ကို [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) ဖြင့် ကူးယူပါ။
+3. ၎င်းကို DOM အတွင်း မြင်နိုင်သော element တစ်ခုအောက်တွင် [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) ဖြင့် ထည့်ပါ။
+
+✅ Template ကို DOM တွင် ထည့်မီ ကူးယူရန် လိုအပ်သည့်အကြောင်းကို သင်ထင်သလဲ။ ဒီအဆင့်ကို ကျော်လွှားပါက ဘာဖြစ်မည်လဲ။
+
+### တာဝန်
+
+သင့် project ဖိုလ်ဒါတွင် `app.js` ဟုအမည်ပေးထားသော ဖိုင်အသစ်တစ်ခု ဖန်တီးပြီး HTML ၏ `<head>` အပိုင်းတွင် ၎င်းကို import လုပ်ပါ-
+
+```html
+<script src="app.js" defer></script>
+```
+
+ထို့နောက် `app.js` တွင် `updateRoute` ဟုအမည်ပေးထားသော function အသစ်တစ်ခု ဖန်တီးပါ-
+
+```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);
+}
+```
+
+ဒီနေရာတွင် ကျွန်ုပ်တို့သည် အထက်ဖော်ပြထားသော ၃ ချက်ကို အတိအကျ လုပ်ဆောင်ပါသည်။ `templateId` ဖြင့် id ရှိသော template ကို instantiate လုပ်ပြီး၊ ၎င်း၏ cloned content ကို app placeholder အတွင်း ထည့်ပါသည်။ `cloneNode(true)` ကို အသုံးပြု၍ template ၏ subtree အပြည့်အစုံကို ကူးယူရန် လိုအပ်သည်။
+
+ယခု function ကို template တစ်ခုနှင့်အတူ ခေါ်ပြီး ရလဒ်ကို ကြည့်ပါ-
+
+```js
+updateRoute('login');
+```
+
+✅ `app.innerHTML = '';` ဟုရေးထားသော code ၏ ရည်ရွယ်ချက်ကဘာလဲ။ ၎င်းမပါဘဲဖြစ်ပါက ဘာဖြစ်မည်လဲ။
+
+## Routes ဖန်တီးခြင်း
+
+ဝဘ်အက်ပ်နှင့်ပတ်သက်၍ Routes ဆိုသည်မှာ **URLs** ကို ပြသရန် မျက်နှာပြင်များနှင့် ဆက်စပ်ရန် ရည်ရွယ်ချက်ဖြစ်သည်။ HTML ဖိုင်များစွာပါဝင်သော ဝဘ်ဆိုဒ်တွင်၊ ၎င်းကို အလိုအလျောက် ပြုလုပ်နိုင်သည်။ ဥပမာ၊ သင့် project ဖိုလ်ဒါတွင် အောက်ပါဖိုင်များရှိပါက-
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+`mywebsite` ကို root အဖြစ် သတ်မှတ်ထားသော web server တစ်ခု ဖန်တီးပါက၊ URL mapping သည်-
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+သို့သော်၊ ကျွန်ုပ်တို့၏ ဝဘ်အက်ပ်သည် မျက်နှာပြင်အားလုံးပါဝင်သော HTML ဖိုင်တစ်ခုသာ အသုံးပြုနေသောကြောင့် ဒီ default အပြုအမူသည် အကျိုးမရှိပါ။ ကျွန်ုပ်တို့သည် ဒီ mapping ကို ကိုယ်တိုင် ဖန်တီးပြီး JavaScript ကို အသုံးပြု၍ ပြသမည့် template ကို ပြောင်းလဲရမည်ဖြစ်သည်။
+
+### တာဝန်
+
+URL paths နှင့် templates များကို [map](https://en.wikipedia.org/wiki/Associative_array) တစ်ခုဖြင့် ဆက်စပ်ရန် ရိုးရှင်းသော object တစ်ခုကို `app.js` ဖိုင်၏ အပေါ်ဆုံးတွင် ထည့်ပါ။
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+ထို့နောက် `updateRoute` function ကို အနည်းငယ် ပြောင်းလဲပါ။ `templateId` ကို တိုက်ရိုက် argument အဖြစ် ပေးပို့ခြင်းမပြုဘဲ၊ လက်ရှိ URL ကို ကြည့်ပြီး၊ map ကို အသုံးပြု၍ သက်ဆိုင်ရာ template ID ကို ရယူလိုပါသည်။ [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) ကို အသုံးပြု၍ URL ၏ path အပိုင်းကိုသာ ရယူနိုင်သည်။
+
+```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);
+}
+```
+
+ဒီနေရာတွင် ကျွန်ုပ်တို့ သတ်မှတ်ထားသော routes များကို သက်ဆိုင်ရာ template နှင့် mapping ပြုလုပ်ထားသည်။ Browser တွင် URL ကို လက်ဖြင့် ပြောင်းလဲပြီး စမ်းကြည့်ပါ။
+
+✅ URL တွင် မသိသော path တစ်ခု ထည့်ပါက ဘာဖြစ်မည်လဲ။ ၎င်းကို ဘယ်လို ဖြေရှင်းနိုင်မည်လဲ။
+
+## Navigation ထည့်သွင်းခြင်း
+
+ကျွန်ုပ်တို့၏ app ၏ နောက်တစ်ဆင့်မှာ URL ကို လက်ဖြင့် ပြောင်းလဲရန် မလိုဘဲ စာမျက်နှာများအကြား navigation ပြုလုပ်နိုင်စေရန်ဖြစ်သည်။ ၎င်းသည် အောက်ပါ ၂ ချက်ကို အဓိကပါဝင်သည်-
+
+1. လက်ရှိ URL ကို ပြောင်းလဲခြင်း
+2. Template ကို အသစ်ပြောင်းလဲထားသော URL အပေါ် မူတည်၍ ပြသခြင်း
+
+`updateRoute` function ဖြင့် ဒုတိယအပိုင်းကို ပြုလုပ်ပြီးဖြစ်သောကြောင့်၊ လက်ရှိ URL ကို ပြောင်းလဲရန်သာ လိုအပ်ပါသည်။
+
+JavaScript ကို အသုံးပြုရမည်ဖြစ်ပြီး၊ HTML ကို ပြန်လည်တင်ခြင်းမပြုဘဲ URL ကို ပြောင်းလဲပြီး browsing history တွင် entry အသစ်တစ်ခု ဖန်တီးရန် [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) ကို အသုံးပြုရမည်ဖြစ်သည်။
+
+> မှတ်ချက်- HTML anchor element [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) ကို အသုံးပြု၍ URL များသို့ hyperlink ဖန်တီးနိုင်သော်လည်း၊ default အနေဖြင့် browser သည် HTML ကို ပြန်လည်တင်မည်ဖြစ်သည်။ preventDefault() function ကို click event တွင် အသုံးပြု၍ ဒီအပြုအမူကို တားဆီးရန် လိုအပ်သည်။
+
+### တာဝန်
+
+App အတွင်း navigation ပြုလုပ်ရန် အသုံးပြုနိုင်သော function အသစ်တစ်ခု ဖန်တီးပါ-
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+ဒီ method သည် ပေးထားသော path အပေါ်မူတည်၍ လက်ရှိ URL ကို update ပြုလုပ်ပြီး၊ template ကို update ပြုလုပ်သည်။ `window.location.origin` သည် URL root ကို ပြန်ပေးပြီး၊ ပေးထားသော path မှ URL အပြည့်အစုံကို ပြန်လည်တည်ဆောက်ရန် ခွင့်ပြုသည်။
+
+ယခု function ရှိပြီးနောက်၊ path တစ်ခုသည် သတ်မှတ်ထားသော route များနှင့် မကိုက်ညီပါက ဖြစ်ပေါ်သော ပြဿနာကို ဖြေရှင်းနိုင်ပါသည်။ `updateRoute` function ကို ပြောင်းလဲပြီး၊ မကိုက်ညီသောအခါ ရှိပြီးသား route တစ်ခုသို့ fallback ပြုလုပ်ပါမည်။
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Route တစ်ခုကို ရှာမတွေ့ပါက ယခုတွင် `login` စာမျက်နှာသို့ redirect ပြုလုပ်မည်ဖြစ်သည်။
+
+Link တစ်ခုကို click ပြုလုပ်သောအခါ URL ကို ရယူပြီး browser ၏ default link အပြုအမူကို တားဆီးရန် function တစ်ခု ဖန်တီးပါ-
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Login နှင့် Logout links များကို HTML တွင် binding ပြုလုပ်၍ navigation system ကို ပြည့်စုံစေပါမည်။
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+အထက်ပါ `event` object သည် `click` event ကို ဖမ်းယူပြီး ၎င်းကို `onLinkClick` function သို့ ပေးပို့သည်။
+
+[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) attribute ကို အသုံးပြု၍ `click` event ကို JavaScript code (ဤနေရာတွင် `navigate()` function ကို ခေါ်ခြင်း) နှင့် bind ပြုလုပ်ပါ။
+
+ဒီ links များကို click ပြုလုပ်ကြည့်ပါ၊ app ၏ မျက်နှာပြင်များအကြား navigation ပြုလုပ်နိုင်ရမည်ဖြစ်သည်။
+
+✅ `history.pushState` method သည် HTML5 စံနှင့်အညီဖြစ်ပြီး [ခေတ်မီ browser များအားလုံး](https://caniuse.com/?search=pushState) တွင် အကောင်အထည်ဖော်ထားသည်။ သို့သော်၊ သင်ဟောင်းနောက်ကျသော browser များအတွက် ဝဘ်အက်ပ်တစ်ခု တည်ဆောက်နေပါက၊ ဒီ API အစား အသုံးပြုနိုင်သော နည်းလမ်းတစ်ခုရှိသည်- path မတိုင်မီ [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) ကို အသုံးပြု၍ regular anchor navigation ဖြင့် ပြုလုပ်နိုင်ပြီး စာမျက်နှာကို ပြန်လည်တင်မည်မဟုတ်ပါ၊ ၎င်း၏ ရည်ရွယ်ချက်မှာ စာမျက်နှာအတွင်း internal links ဖန်တီးရန်ဖြစ်သည်။
+
+## Browser ၏ Back နှင့် Forward Buttons ကို ကိုင်တွယ်ခြင်း
+
+`history.pushState` ကို အသုံးပြုခြင်းဖြင့် browser ၏ navigation history တွင် entry အသစ်များ ဖန်တီးသည်။ Browser ၏ *back button* ကို ဖိထားကြည့်ပါက အောက်ပါအတိုင်း ပြသမည်ဖြစ်သည်-
+
+![Navigation history ၏ Screenshot](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.my.png)
+
+Back button ကို အကြိမ်အများကြိမ် click ပြုလုပ်ကြည့်ပါက၊ လက်ရှိ URL သည် ပြောင်းလဲပြီး history ကို update ပြုလုပ်မည်ဖြစ်သော်လည်း၊ template တူညီသည်ကိုသာ ပြသနေမည်ဖြစ်သည်။
+
+၎င်းသည် state ပြောင်းလဲမှု - URL တစ်ခုမှ တစ်ခုသို့ ရွှေ့ပြောင်းမှု - ဖြစ်ပေါ်ပါက [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) event ကို trigger ပြုလုပ်သည်ဟု [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState) တွင် ဖော်ပြထားသည်။ ဒီပြဿနာကို ဖြေရှင်းရန် ၎င်းကို အသုံးပြုမည်ဖြစ်သည်။
+
+### တာဝန်
+
+Browser history ပြောင်းလဲမှုအခါတွင် ပြသထားသော template ကို update ပြုလုပ်ရန် `updateRoute()` ကို ခေါ်သည့် function အသစ်တစ်ခုကို `app.js` ဖိုင်၏ အောက်ဆုံးတွင် ထည့်ပါ-
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> မှတ်ချက်- ဒီနေရာတွင် `popstate` event handler ကို ရှင်းလင်းစွာ ဖော်ပြရန် [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ကို အသုံးပြုထားသော်လည်း၊ ပုံမှန် function တစ်ခုလည်း အလားတူအလုပ်လုပ်မည်ဖြစ်သည်။
+
+Arrow functions အကြောင်း refresher video-
+
+[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှု ဝန်ဆောင်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/7-bank-project/1-template-route/assignment.md b/translations/my/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..278926f7
--- /dev/null
+++ b/translations/my/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-27T22:08:59+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "my"
+}
+-->
+# လမ်းကြောင်းများကို တိုးတက်အောင်လုပ်ပါ
+
+## လမ်းညွှန်ချက်များ
+
+လမ်းကြောင်းများကို သတ်မှတ်ထားသောအခါမှာ လက်ရှိတွင် template ID ကိုသာ အသုံးပြုထားပါသည်။ သို့သော် စာမျက်နှာအသစ်ကို ပြသတဲ့အခါမှာ အချို့အရာများကို ထပ်မံလိုအပ်တတ်ပါသည်။ အောက်ပါအင်္ဂါရပ်နှစ်ခုကို ထည့်သွင်းပြီး လမ်းကြောင်းများကို ပိုမိုကောင်းမွန်အောင် ပြုပြင်ပါ။
+
+- Template တစ်ခုစီအတွက် ခေါင်းစဉ်များပေးပြီး template ပြောင်းလဲသည့်အခါမှာ window title ကို အဆိုပါခေါင်းစဉ်အသစ်ဖြင့် update လုပ်ပါ။
+- Template ပြောင်းလဲပြီးနောက်မှာ code တစ်ခုကို run လုပ်နိုင်တဲ့ option ကို ထည့်သွင်းပါ။ Dashboard စာမျက်နှာကို ပြသတဲ့အခါ Developer Console မှာ `'Dashboard is shown'` ကို print လုပ်ချင်ပါတယ်။
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော                                                                                                                          | လုံလောက်သော                                                                                                                                                                                  | တိုးတက်မှုလိုအပ်သော                                       |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+|          | အင်္ဂါရပ်နှစ်ခုကို အကောင်းဆုံးအတိုင်း အကောင်အထည်ဖော်ထားပြီး လုပ်ဆောင်နိုင်သည်။ Title နှင့် code ထည့်သွင်းမှုသည် `routes` သတ်မှတ်ချက်တွင် route အသစ်တစ်ခုထည့်သွင်းပါကလည်း အလုပ်လုပ်နိုင်သည်။ | အင်္ဂါရပ်နှစ်ခု အလုပ်လုပ်ပေမယ့် အပြုအမူများကို hardcoded လုပ်ထားပြီး `routes` သတ်မှတ်ချက်မှတဆင့် configure လုပ်နိုင်မှုမရှိပါ။ Title နှင့် code ထည့်သွင်းမှုဖြင့် route တစ်ခုထပ်မံထည့်သွင်းပါက အလုပ်မလုပ်နိုင်ခြင်း သို့မဟုတ် အစိတ်အပိုင်းအချို့သာ အလုပ်လုပ်နိုင်ခြင်း။ | အင်္ဂါရပ်တစ်ခုမပါဝင်ခြင်း သို့မဟုတ် အလုပ်မလုပ်နိုင်ခြင်း။ |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှု ဝန်ဆောင်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/7-bank-project/2-forms/README.md b/translations/my/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..d9c371db
--- /dev/null
+++ b/translations/my/7-bank-project/2-forms/README.md
@@ -0,0 +1,307 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-27T22:03:25+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "my"
+}
+-->
+# ဘဏ်အက်ပ်တည်ဆောက်ခြင်း အပိုင်း ၂: Login နှင့် Registration Form တည်ဆောက်ခြင်း
+
+## မိန့်ခွန်းမတင်မီ မေးခွန်းများ
+
+[မိန့်ခွန်းမတင်မီ မေးခွန်းများ](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### အကျဉ်းချုပ်
+
+ခေတ်မီ ဝက်ဘ်အက်ပ်များအများစုတွင် သင့်ကိုယ်ပိုင် အကောင့်တစ်ခုဖွင့်နိုင်ပြီး ကိုယ်ပိုင်နေရာတစ်ခုရရှိနိုင်သည်။ ဝက်ဘ်အက်ပ်ကို အသုံးပြုသူများစွာ တစ်ချိန်တည်းတွင် ဝင်ရောက်အသုံးပြုနိုင်သောကြောင့် အသုံးပြုသူတစ်ဦးချင်းစီ၏ ကိုယ်ရေးအချက်အလက်များကို သီးခြားသိမ်းဆည်းရန်နှင့် ပြသရန်အချက်အလက်များကို ရွေးချယ်ရန် စနစ်တစ်ခုလိုအပ်သည်။ [အသုံးပြုသူအတိအကျမှတ်ပုံတင်မှု](https://en.wikipedia.org/wiki/Authentication) ကို လုံခြုံစွာ စီမံခန့်ခွဲပုံကို မလေ့လာသေးပါ၊ ဒါပေမယ့် သုံးစွဲသူတစ်ဦး (သို့) အကောင့်များစွာ ဖွင့်နိုင်ရန် သေချာစေပါမည်။
+
+ဒီအပိုင်းမှာ HTML forms ကို အသုံးပြုပြီး ဝက်ဘ်အက်ပ်မှာ login နှင့် registration ပေါင်းထည့်ပါမည်။ ဒေတာကို server API သို့ programmatically ပို့ပေးပုံနှင့် အသုံးပြုသူ input များအတွက် အခြေခံအတိအကျစစ်ဆေးမှု စည်းမျဉ်းများ သတ်မှတ်ပုံကိုလည်း လေ့လာပါမည်။
+
+### ကြိုတင်လိုအပ်ချက်
+
+ဒီသင်ခန်းစာအတွက် [HTML templates နှင့် routing](../1-template-route/README.md) ကိုပြီးစီးထားရမည်။ [Node.js](https://nodejs.org) ကို install လုပ်ပြီး [server API](../api/README.md) ကို locally run လုပ်ထားရမည်။ ဒါမှသာ အကောင့်ဖွင့်ရန် ဒေတာပို့နိုင်မည်။
+
+**သတိပြုရန်**
+သင်မှာ တစ်ချိန်တည်းတွင် terminal နှစ်ခု run လုပ်ထားရမည်။
+1. [HTML templates နှင့် routing](../1-template-route/README.md) သင်ခန်းစာတွင် တည်ဆောက်ထားသော အဓိကဘဏ်အက်ပ်အတွက်
+2. အထက်တွင် setup လုပ်ထားသော [Bank APP server API](../api/README.md) အတွက်
+
+Server နှစ်ခုလုံး run လုပ်ထားရမည်။ Port `3000` နှင့် port `5000` တွင် နားထောင်နေသောကြောင့် အားလုံးအဆင်ပြေပါမည်။
+
+Server run လုပ်နေမှုကို စစ်ဆေးရန် terminal တွင် အောက်ပါ command ကို run လုပ်ပါ။
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Form နှင့် controls
+
+`<form>` element သည် HTML document တစ်ခုတွင် အသုံးပြုသူ input နှင့် interactive controls ဖြင့် ဒေတာပေးပို့နိုင်သော အပိုင်းကို encapsulate လုပ်ပေးသည်။ Form အတွင်း အသုံးပြုနိုင်သော user interface (UI) controls များစွာရှိပြီး `<input>` နှင့် `<button>` element များသည် အများဆုံးအသုံးပြုသော control ဖြစ်သည်။
+
+ဥပမာအားဖြင့် အသုံးပြုသူ၏ username ထည့်ရန် field တစ်ခုဖန်တီးလိုပါက အောက်ပါအတိုင်းရေးနိုင်သည်-
+
+```html
+<input id="username" name="username" type="text">
+```
+
+`name` attribute သည် form data ပေးပို့သောအခါ property name အဖြစ်အသုံးပြုမည်။ `id` attribute သည် `<label>` ကို form control နှင့် ဆက်စပ်ရန်အသုံးပြုသည်။
+
+> [`<input>` types](https://developer.mozilla.org/docs/Web/HTML/Element/input) နှင့် [form controls](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) များ၏ စာရင်းကိုကြည့်ပြီး သင့် UI တည်ဆောက်ရာတွင် အသုံးပြုနိုင်သော native UI elements များကို သိရှိပါ။
+
+✅ `<input>` သည် [empty element](https://developer.mozilla.org/docs/Glossary/Empty_element) ဖြစ်ပြီး closing tag မထည့်သင့်ပါ။ Self-closing `<input/>` notation ကို အသုံးပြုနိုင်သော်လည်း မလိုအပ်ပါ။
+
+Form အတွင်းရှိ `<button>` element သည် အနည်းငယ်ထူးခြားသည်။ `type` attribute ကို သတ်မှတ်မထားပါက button ကိုနှိပ်သောအခါ form data ကို server သို့ ပေးပို့မည်။ အောက်ပါ `type` values များရှိသည်-
+
+- `submit`: Form အတွင်း default ဖြစ်ပြီး button ကိုနှိပ်သောအခါ form submit action ကို trigger လုပ်သည်။
+- `reset`: Form control များအားလုံးကို original value သို့ ပြန်လည်ပြောင်းသည်။
+- `button`: Button ကိုနှိပ်သောအခါ default behavior မပေးပါ။ JavaScript အသုံးပြု၍ custom actions သတ်မှတ်နိုင်သည်။
+
+### လုပ်ဆောင်ရန်
+
+`login` template တွင် form တစ်ခုထည့်ပါ။ *username* field နှင့် *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>
+```
+
+အနည်းငယ်သေချာကြည့်ပါက `<label>` element ကိုလည်း ထည့်ထားသည်ကို တွေ့နိုင်ပါသည်။ `<label>` element များသည် username field ကဲ့သို့ UI controls များကို အမည်ပေးရန်အသုံးပြုသည်။ Labels သည် form များကို ဖတ်ရှုနိုင်စေရန် အရေးကြီးသည့်အပြင် အောက်ပါ အကျိုးကျေးဇူးများလည်းရှိသည်-
+
+- Label ကို form control နှင့် ဆက်စပ်ထားခြင်းအားဖြင့် assistive technologies (screen reader ကဲ့သို့) အသုံးပြုသူများအတွက် ထည့်ရန်အချက်အလက်ကို နားလည်စေရန် အထောက်အကူပြုသည်။
+- Label ကို click လုပ်ခြင်းအားဖြင့် touch-screen devices တွင် input ကိုရောက်ရန် လွယ်ကူစေသည်။
+
+> [ဝက်ဘ်ပေါ်တွင် Accessibility](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) သည် အရေးကြီးသည့်အကြောင်းအရာဖြစ်ပြီး မျက်နှာမူမကျသောအကြောင်းအရာတစ်ခုဖြစ်သည်။ [semantic HTML elements](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) ကို သေချာအသုံးပြုပါက accessible content တည်ဆောက်ရန် မခက်ခဲပါ။ [Accessibility](https://developer.mozilla.org/docs/Web/Accessibility) အကြောင်းကို ဖတ်ရှုပြီး common mistakes မဖြစ်စေရန် developer တစ်ဦးအဖြစ် တာဝန်ယူပါ။
+
+အခုတော့ registration အတွက် form တစ်ခုကို အပေါ်ရှိ 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>
+```
+
+`value` attribute ကို အသုံးပြု၍ input တစ်ခုအတွက် default value ကို သတ်မှတ်နိုင်သည်။
+`balance` input သည် `number` type ဖြစ်သည်ကို သတိပြုပါ။ အခြား input များနှင့် မတူဘဲ ကြည့်ရုံဖြင့် ကွဲပြားမှုရှိပါသလား။ Try interacting with it.
+
+✅ Keyboard ကိုသာ အသုံးပြု၍ form များကို navigate နှင့် interact လုပ်နိုင်ပါသလား? ဘယ်လိုလုပ်မလဲ?
+
+## Server သို့ ဒေတာပေးပို့ခြင်း
+
+UI ကို functional ဖြစ်ပြီးနောက် ဒေတာကို server သို့ ပေးပို့ရန် လိုအပ်သည်။ လက်ရှိ code ကို အသုံးပြု၍ *Login* သို့မဟုတ် *Register* button ကို click လုပ်ပါက ဘာဖြစ်မည်ကို စမ်းကြည့်ပါ။
+
+Browser URL section တွင် ပြောင်းလဲမှုကို သတိထားမိပါသလား?
+
+![Register button ကို click လုပ်ပြီးနောက် browser URL ပြောင်းလဲမှု screenshot](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.my.png)
+
+`<form>` ၏ default action သည် form data ကို current server URL သို့ [GET method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3) ကို အသုံးပြု၍ URL တွင် data ကို append လုပ်ပေးသည်။ ဒီနည်းလမ်းတွင် အောက်ပါ အားနည်းချက်များရှိသည်-
+
+- ပေးပို့သော data သည် အရွယ်အစားကန့်သတ်ထားသည် (2000 characters ခန့်)
+- Data သည် URL တွင် တိုက်ရိုက်မြင်နိုင်သည် (password များအတွက် မသင့်တော်)
+- File upload များနှင့် အလုပ်မလုပ်နိုင်
+
+ဒါကြောင့် [POST method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) ကို အသုံးပြု၍ form data ကို HTTP request body တွင် server သို့ ပေးပို့နိုင်သည်။ အထက်ပါ အားနည်းချက်များမရှိပါ။
+
+> POST သည် data ပေးပို့ရန် အများဆုံးအသုံးပြုသော method ဖြစ်သော်လည်း [အချို့သောအခြေအနေများတွင်](https://www.w3.org/2001/tag/doc/whenToUseGet.html) GET method ကို အသုံးပြုသင့်သည်။ ဥပမာအားဖြင့် search field တစ်ခုတည်ဆောက်သောအခါ။
+
+### လုပ်ဆောင်ရန်
+
+Registration form တွင် `action` နှင့် `method` properties ထည့်ပါ-
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+အခုတော့ သင့်နာမည်ဖြင့် အကောင့်အသစ်တစ်ခု register လုပ်ပါ။ *Register* button ကို click လုပ်ပြီးနောက် အောက်ပါအတိုင်းမြင်ရမည်-
+
+![localhost:5000/api/accounts URL တွင် JSON string ပြသမှု browser screenshot](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.my.png)
+
+အဆင်ပြေပါက server သည် request ကို [JSON](https://www.json.org/json-en.html) response ဖြင့် ပြန်လည်ဖြေကြားပြီး ဖန်တီးထားသော account data ကို ပြသမည်။
+
+✅ တူညီသောနာမည်ဖြင့် ထပ်မံ register လုပ်ပါ။ ဘာဖြစ်မည်?
+
+## Page reload မရှိဘဲ data ပေးပို့ခြင်း
+
+အခုလိုနည်းလမ်းတွင် အနည်းငယ်ပြဿနာရှိသည်ကို သတိထားမိပါသလား- form ကို submit လုပ်သောအခါ app မှထွက်ပြီး browser သည် server URL သို့ redirect လုပ်သည်။ Single-page application (SPA) တစ်ခုတည်ဆောက်နေသောကြောင့် page reload မရှိစေရန် ကြိုးစားနေပါသည်။
+
+Page reload မရှိဘဲ data ကို server သို့ ပေးပို့ရန် JavaScript code ကို အသုံးပြုရမည်။ `<form>` element ၏ `action` property တွင် URL ထည့်ခြင်းအစား `javascript:` string ဖြင့် custom action ကို JavaScript code ဖြင့် ပြုလုပ်နိုင်သည်။ ဒါကို အသုံးပြုခြင်းအားဖြင့် browser အလိုအလျောက်လုပ်ဆောင်သောအလုပ်များကို ကိုယ်တိုင်လုပ်ဆောင်ရမည်-
+
+- Form data ကို retrieve လုပ်ခြင်း
+- Form data ကို သင့်တော်သော format သို့ convert နှင့် encode လုပ်ခြင်း
+- HTTP request တစ်ခုဖန်တီးပြီး server သို့ ပေးပို့ခြင်း
+
+### လုပ်ဆောင်ရန်
+
+Registration form ၏ `action` ကို အောက်ပါအတိုင်း ပြောင်းပါ-
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+`app.js` ကိုဖွင့်ပြီး `register` ဟုခေါ်သော function အသစ်တစ်ခုထည့်ပါ-
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+ဒီမှာ form element ကို `getElementById()` ဖြင့် retrieve လုပ်ပြီး [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) helper ကို အသုံးပြု၍ form control များမှ key/value pairs အနေနှင့် data ကို extract လုပ်သည်။ ထို့နောက် data ကို [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) ဖြင့် regular object သို့ ပြောင်းပြီး [JSON](https://www.json.org/json-en.html) သို့ serialize လုပ်သည်။ JSON သည် ဝက်ဘ်ပေါ်တွင် data ပေးပို့ရန် အများဆုံးအသုံးပြုသော format ဖြစ်သည်။
+
+Data သည် server သို့ ပေးပို့ရန်အဆင်သင့်ဖြစ်ပါပြီ။ `createAccount` ဟုခေါ်သော function အသစ်တစ်ခုဖန်တီးပါ-
+
+```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' };
+  }
+}
+```
+
+ဒီ function ဘာလုပ်နေပါသလဲ? အရင်ဆုံး `async` keyword ကို သတိပြုပါ။ ဒီ function တွင် [**asynchronous**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) code ပါဝင်သည်။ `await` keyword ကို အသုံးပြုသောအခါ asynchronous code ကို run လုပ်ပြီး server response ကိုစောင့်နေသည်။
+
+`fetch()` API ကို အသုံးပြု၍ JSON data ကို server သို့ ပေးပို့သည်။ ဒီ method သည် parameters ၂ ခုယူသည်-
+
+- Server URL, ဒီမှာ `//localhost:5000/api/accounts` ကို ထည့်ပါ။
+- Request settings, method ကို `POST` သတ်မှတ်ပြီး request body ကို provide လုပ်သည်။ JSON data ကို server သို့ ပေးပို့နေသောကြောင့် `Content-Type` header ကို `application/json` သတ်မှတ်ရန်လိုအပ်သည်။
+
+Server သည် JSON ဖြင့် request ကို response ပြန်လည်ပေးမည်ဖြစ်သောကြောင့် `await response.json()` ကို အသုံးပြု၍ JSON content ကို parse လုပ်ပြီး resulting object ကို return ပြန်သည်။ ဒီ method သည် asynchronous ဖြစ်သောကြောင့် parsing အတွင်း error များကို catch လုပ်ရန် `await` keyword ကို အသုံးပြုပါ။
+
+အခုတော့ `register` function တွင် `createAccount()` ကို call လုပ်ရန် code ထည့်ပါ-
+
+```js
+const result = await createAccount(jsonData);
+```
+
+`await` keyword ကို အသုံးပြုသောကြောင့် `register` function အရှေ့တွင် `async` keyword ထည့်ရန်လိုအပ်သည်-
+
+```js
+async function register() {
+```
+
+နောက်ဆုံးတွင် result ကို စစ်ဆေးရန် log များထည့်ပါ။ Final function သည် အောက်ပါအတိုင်းဖြစ်ရမည်-
+
+```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);
+}
+```
+
+အခုတော့ အတော်လေးရှည်လျားသွားခဲ့ပေမယ့် အဆင့်သို့ရောက်ပါပြီ! [browser developer tools](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) ကိုဖွင့်ပြီး အကောင့်အသစ် register လုပ်ပါ။ Web page တွင် ဘာမှမပြောင်းလဲသော်လည်း console တွင် message တစ်ခုပေါ်လာပြီး အားလုံးအဆင်ပြေကြောင်း အတည်ပြုပါမည်။
+
+![Browser console တွင် log message ပြသမှု screenshot](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.my.png)
+
+✅ Data သည် server သို့ လုံခြုံစွာပေးပို့နေသည်ဟု သင်ထင်ပါသလား? တစ်စုံတစ်ဦးက request ကို ဖမ်းဆီးနိုင်ခဲ့လျှင် ဘာဖြစ်မည်? [HTTPS](https://en.wikipedia.org/wiki/HTTPS) အကြောင်းကို ဖတ်ရှုပြီး လုံခြုံစွာ data communication ပြုလုပ်ပုံကို သိရှိပါ။
+
+## Data validation
+
+Username မသတ်မှတ်ဘဲ အကောင့်အသစ် register လုပ်ကြည့်ပါက server သည် [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).) status code ဖြင့် error ပြန်လည်ပေးသည်ကို တွေ့ရမည်။
+
+Server သို့ data ပေးပို့မီ [form data](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) ကို validate လုပ်ခြင်းသည် valid request ပေးပို့ရန်အတွက် အကောင်းဆုံးနည်းလမ်းဖြစ်သည်။ HTML5 form controls တွင် built-in validation ကို အောက်ပါ attributes များဖြင့် ပံ့ပိုးပေးသည်-
+
+- `required`: Field ကို ဖြည့်ရန်လိုအပ်ပြီး form ကို submit မလုပ်နိုင်ပါ။
+- `minlength` နှင့် `maxlength`: Text fields တွင် အနည်းဆုံးနှင့် အများဆုံး character အရေအတွက်ကို သတ်မှတ်သည်။
+- `min` နှင့် `max`: Numerical field ၏ အနည်းဆုံးနှင့် အများဆုံးတန်ဖိုးကို သတ်မှတ်သည်။
+- `type`: `number`, `email`, `file` ကဲ့သို့ data အမျိုးအစားကို သတ်မှတ်သည်။ ဒီ attribute သည် form control ၏ visual rendering ကိုလည်း ပြောင်းလဲနိုင်သည်။
+- `pattern`: [Regular expression](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) pattern ကို သတ်မှတ်ပြီး data သည် valid ဖြစ်/မဖြစ် စစ်ဆေးသည်။
+အကြံပြုချက် - သင့်ဖောင်ထိန်းချုပ်မှုများသည် သက်ဆိုင်မှုရှိမရှိပေါ်မူတည်၍ `:valid` နှင့် `:invalid` CSS pseudo-classes ကို အသုံးပြု၍ အပြင်အဆင်ကို စိတ်ကြိုက်ပြင်ဆင်နိုင်ပါသည်။
+### Task
+
+အကောင့်အသစ်တစ်ခုဖန်တီးရန်အတွက် `username` နှင့် `currency` ဟာ မဖြစ်မနေဖြည့်ရမည့်အကွက်များဖြစ်ပြီး၊ အခြားအကွက်များက optional ဖြစ်ပါတယ်။ အကွက် label တွေမှာ `required` attribute နဲ့အတူစာသားထည့်ပြီး HTML form ကို update လုပ်ပါ။
+
+```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>
+```
+
+ဒီ server implementation မှာ field တွေရဲ့ maximum length ကို အတိအကျကန့်သတ်ထားတာမရှိပေမယ့်၊ user text entry အတွက် reasonable limits သတ်မှတ်ထားတာက အမြဲကောင်းတဲ့အလေ့အကျင့်ဖြစ်ပါတယ်။
+
+Text field တွေမှာ `maxlength` attribute ထည့်ပါ။
+
+```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">
+```
+
+အခု *Register* ခလုတ်ကိုနှိပ်ပြီး validation rule တစ်ခုခုကိုမလိုက်နာတဲ့အကွက်ရှိရင်၊ အောက်ပါအတိုင်း error message တစ်ခုကိုတွေ့ရပါမယ်။
+
+![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.my.png)
+
+ဒီလို validation ကို data ကို server ကိုပို့မီ *client-side* validation လို့ခေါ်ပါတယ်။ ဒါပေမယ့် data ကိုမပို့ဘဲနဲ့ အချို့သော check တွေကိုလုပ်ဖို့မဖြစ်နိုင်ပါဘူး။ ဥပမာအားဖြင့် username တူညီတဲ့အကောင့်တစ်ခုရှိပြီးမရှိဘူးဆိုတာကို server ကို request ပို့မသွားဘဲနဲ့ ဒီမှာစစ်ဆေးလို့မရပါဘူး။ Server မှာလုပ်ဆောင်တဲ့ အပို validation ကို **server-side** validation လို့ခေါ်ပါတယ်။
+
+အများအားဖြင့် client-side validation နဲ့ server-side validation နှစ်ခုလုံးကို implement လုပ်ဖို့လိုအပ်ပါတယ်။ Client-side validation က user ကိုအမြန် feedback ပေးပြီး user experience ကိုတိုးတက်စေသလို၊ server-side validation က user data ကို sound နဲ့ safe ဖြစ်စေဖို့အရေးကြီးပါတယ်။
+
+---
+
+## 🚀 Challenge
+
+User ရှိပြီးသားဆိုရင် HTML မှာ error message တစ်ခုပြပါ။
+
+ဒီ login page ကို CSS styles နဲ့အတူအနည်းငယ်အလှဆင်ပြီးနောက်ဆုံးရလဒ်အဖြစ်ရနိုင်တဲ့ပုံစံက ဒီလိုဖြစ်နိုင်ပါတယ်။
+
+![Screenshot of the login page after adding CSS styles](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.my.png)
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Review & Self Study
+
+Developer တွေဟာ form တွေကိုဖန်တီးတဲ့အခါ validation strategy တွေကိုအလွန်ဖန်တီးမှုရှိစွာအသုံးပြုလာကြပါတယ်။ [CodePen](https://codepen.com) ကိုကြည့်ပြီး form flow အမျိုးမျိုးကိုလေ့လာပါ။ စိတ်ဝင်စားဖွယ်ရာနဲ့ အတုယူဖို့ကောင်းတဲ့ form တွေကိုရှာနိုင်ပါသလား?
+
+## Assignment
+
+[Style your bank app](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/7-bank-project/2-forms/assignment.md b/translations/my/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..c4825534
--- /dev/null
+++ b/translations/my/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-27T22:04:24+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "my"
+}
+-->
+# ဘဏ်အက်ပ်ကို အလှဆင်ပါ
+
+## လမ်းညွှန်ချက်များ
+
+`styles.css` ဖိုင်အသစ်တစ်ခုဖန်တီးပြီး၊ သင့်ရဲ့ လက်ရှိ `index.html` ဖိုင်မှာ link တစ်ခုထည့်ပါ။ သင်ဖန်တီးထားတဲ့ CSS ဖိုင်မှာ *Login* နဲ့ *Dashboard* စာမျက်နှာတွေကို သန့်ရှင်းပြီး သပ်ရပ်လှပအောင် အလှဆင်ပါ။ သင့်အက်ပ်ကို ကိုယ်ပိုင်အမှတ်တံဆိပ်ပုံစံရဖို့အတွက် အရောင်အသွေးပုံစံတစ်ခုဖန်တီးကြည့်ပါ။
+
+> အကြံပြုချက်: HTML ကို ပြင်ဆင်ပြီး အသစ်သော element တွေ၊ class တွေ ထည့်သွင်းနိုင်ပါတယ်။
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်သော                                                                                                               | လုံလောက်သော                                                                       | တိုးတက်မှုလိုအပ်သော                                                                             |
+| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+|          | စာမျက်နှာအားလုံး သန့်ရှင်းပြီး ဖတ်ရလွယ်ကူကာ၊ အရောင်အသွေးပုံစံတစ်ခုကို တိကျစွာထားရှိပြီး၊ အပိုင်းအစများက ထင်ထင်ရှားရှားပေါ်လွင်သည်။ | စာမျက်နှာများကို အလှဆင်ထားသော်လည်း အရောင်အသွေးပုံစံမရှိခြင်း သို့မဟုတ် အပိုင်းအစများ မရှင်းလင်းခြင်း။ | စာမျက်နှာများ အလှဆင်မှုမရှိခြင်း၊ အပိုင်းအစများ ရှုပ်ထွေးပြီး အချက်အလက်များ ဖတ်ရခက်ခဲခြင်း။ |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့ရှိသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/7-bank-project/3-data/README.md b/translations/my/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..7d7f27a4
--- /dev/null
+++ b/translations/my/7-bank-project/3-data/README.md
@@ -0,0 +1,304 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-27T22:00:28+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "my"
+}
+-->
+# ဘဏ်အက်ပ်တည်ဆောက်ခြင်း အပိုင်း ၃: ဒေတာရယူခြင်းနှင့် အသုံးပြုခြင်းနည်းလမ်းများ
+
+## မိန့်ခွန်းမတိုင်မီမေးခွန်းများ
+
+[မိန့်ခွန်းမတိုင်မီမေးခွန်းများ](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### အကျဉ်းချုပ်
+
+ဝက်ဘ်အက်ပ်တစ်ခုရဲ့ အဓိကအချက်က *ဒေတာ* ဖြစ်ပါတယ်။ ဒေတာက အမျိုးမျိုးသောပုံစံများရှိနိုင်ပေမယ့် အဓိကရည်ရွယ်ချက်က အသုံးပြုသူကို အချက်အလက်များကို ပြသပေးခြင်းဖြစ်ပါတယ်။ ဝက်ဘ်အက်ပ်များ ပိုမိုအကျိုးရှိပြီး ရှုပ်ထွေးလာတာနဲ့အမျှ အသုံးပြုသူက အချက်အလက်များကို ရယူခြင်းနှင့် အပြန်အလှန်ဆက်သွယ်ခြင်းနည်းလမ်းက ဝက်ဘ်တိုးတက်မှုရဲ့ အရေးကြီးသောအပိုင်းတစ်ခုဖြစ်လာပါတယ်။
+
+ဒီသင်ခန်းစာမှာတော့ ဒေတာကို server မှ asynchronous နည်းလမ်းဖြင့် ရယူပြီး HTML ကို ပြန်လည် reload မလုပ်ဘဲ ဝက်ဘ်စာမျက်နှာပေါ်မှာ အချက်အလက်များကို ပြသပေးနည်းကို လေ့လာပါမယ်။
+
+### ကြိုတင်လိုအပ်ချက်
+
+ဒီသင်ခန်းစာအတွက် [Login နှင့် Registration Form](../2-forms/README.md) ကို တည်ဆောက်ပြီးသားဖြစ်ရပါမယ်။ [Node.js](https://nodejs.org) ကို install လုပ်ပြီး [server API](../api/README.md) ကို locally run လုပ်ထားဖို့လည်း လိုအပ်ပါတယ်။ ဒါမှ account data ကို ရယူနိုင်ပါမယ်။
+
+server အလုပ်လုပ်နေမှုကို terminal မှာ အောက်ပါ command ကို run လုပ်ပြီး စစ်ဆေးနိုင်ပါတယ်။
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX နှင့် ဒေတာရယူခြင်း
+
+ရိုးရာဝက်ဘ်ဆိုဒ်များမှာ အသုံးပြုသူ link ကိုရွေးချယ်ခြင်း သို့မဟုတ် form ကို submit လုပ်ခြင်းဖြင့် ပြသထားသော content ကို update လုပ်ပြီး HTML စာမျက်နှာကို ပြန်လည် reload လုပ်ပါတယ်။ ဒေတာအသစ်များကို load လုပ်ဖို့လိုအပ်တဲ့အခါမှာ ဝက်ဘ် server က HTML စာမျက်နှာအသစ်တစ်ခုကို ပြန်ပေးပို့ပြီး browser မှ process လုပ်ရပါတယ်။ ဒီလုပ်ငန်းစဉ်က အသုံးပြုသူရဲ့ လက်ရှိလုပ်ဆောင်မှုကို ခေတ္တရပ်တန့်စေပြီး reload အတွင်းမှာ interaction များကို ကန့်သတ်စေပါတယ်။ ဒီ workflow ကို *Multi-Page Application* (MPA) လို့ခေါ်ပါတယ်။
+
+![Multi-page application မှာ update workflow](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.my.png)
+
+ဝက်ဘ်အက်ပ်များ ပိုမိုရှုပ်ထွေးလာတာနဲ့အမျှ [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) ဆိုတဲ့နည်းလမ်းအသစ်တစ်ခု ပေါ်ထွက်လာပါတယ်။ ဒီနည်းလမ်းက JavaScript ကို အသုံးပြုပြီး server မှ ဒေတာကို asynchronous နည်းလမ်းဖြင့် ပို့ပေးခြင်းနှင့် ရယူခြင်းကို HTML စာမျက်နှာကို reload မလုပ်ဘဲ လုပ်ဆောင်နိုင်စေပါတယ်။ ဒေတာအသစ်ကို server မှရရှိတဲ့အခါ JavaScript ကို အသုံးပြုပြီး HTML စာမျက်နှာကို [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API ဖြင့် update လုပ်နိုင်ပါတယ်။ အချိန်ကြာလာတာနဲ့အမျှ ဒီနည်းလမ်းက [*Single-Page Application* (SPA)](https://en.wikipedia.org/wiki/Single-page_application) လို့ခေါ်တဲ့နည်းလမ်းအဖြစ် တိုးတက်လာပါတယ်။
+
+![Single-page application မှာ update workflow](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.my.png)
+
+AJAX ကို ပထမဆုံးမိတ်ဆက်ခဲ့တဲ့အခါ asynchronous ဒေတာရယူဖို့ [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) API တစ်ခုသာ ရရှိနိုင်ခဲ့ပါတယ်။ ဒါပေမယ့် အခေတ်မီ browser များမှာ promises ကို အသုံးပြုပြီး JSON ဒေတာကို ပိုမိုလွယ်ကူစွာ manipulate လုပ်နိုင်တဲ့ [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) ကို support လုပ်လာပါတယ်။
+
+> အခေတ်မီ browser များအားလုံးက `Fetch API` ကို support လုပ်ပေမယ့် သင့်ဝက်ဘ်အက်ပ်ကို အဟောင်း browser များမှာလည်း အလုပ်လုပ်စေချင်ရင် [caniuse.com](https://caniuse.com/fetch) မှာ compatibility table ကို စစ်ဆေးဖို့ အမြဲကောင်းပါတယ်။
+
+### လုပ်ဆောင်ရန်
+
+[အရင်သင်ခန်းစာ](../2-forms/README.md) မှာ account တစ်ခုကို ဖန်တီးဖို့ registration form ကို implement လုပ်ထားပါတယ်။ အခုတော့ ရှိပြီးသား account ကို အသုံးပြုပြီး login လုပ်ဖို့ code ကို ထည့်သွင်းပါမယ်။ `app.js` ဖိုင်ကို ဖွင့်ပြီး `login` function အသစ်တစ်ခုကို ထည့်ပါ:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+ဒီမှာတော့ form element ကို `getElementById()` ဖြင့် ရယူပြီး `loginForm.user.value` ဖြင့် input မှ username ကို ရယူပါတယ်။ HTML မှာ `name` attribute ဖြင့် သတ်မှတ်ထားသော form control တစ်ခုစီကို form ရဲ့ property အနေနဲ့ access လုပ်နိုင်ပါတယ်။
+
+Registration အတွက် လုပ်ခဲ့သလိုပဲ server request ကို လုပ်ဆောင်ဖို့ function အသစ်တစ်ခုကို ဖန်တီးပါမယ်၊ ဒါပေမယ့် ဒီတစ်ခါမှာတော့ 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' };
+  }
+}
+```
+
+ဒီမှာတော့ server မှ ဒေတာကို asynchronous နည်းလမ်းဖြင့် request လုပ်ဖို့ `fetch` API ကို အသုံးပြုပါတယ်။ ဒေတာကို query လုပ်ဖို့ URL ကိုသာလိုအပ်ပြီး အပို parameters မလိုအပ်ပါဘူး။ `fetch` က default အနေဖြင့် [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP request ကို ဖန်တီးပေးပြီး ဒီမှာလိုအပ်တဲ့အရာဖြစ်ပါတယ်။
+
+✅ `encodeURIComponent()` ဆိုတာ URL အတွက် special characters များကို escape လုပ်ပေးတဲ့ function ဖြစ်ပါတယ်။ ဒီ function ကို မခေါ်ဘဲ `user` value ကို URL မှာ တိုက်ရိုက်အသုံးပြုရင် ဘယ်လိုပြဿနာများဖြစ်နိုင်မလဲ?
+
+အခုတော့ `login` function ကို `getAccount` ကို အသုံးပြုဖို့ update လုပ်ပါမယ်:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+  const data = await getAccount(user);
+
+  if (data.error) {
+    return console.log('loginError', data.error);
+  }
+
+  account = data;
+  navigate('/dashboard');
+}
+```
+
+ပထမဆုံး `getAccount` က asynchronous function ဖြစ်တဲ့အတွက် server result ကို စောင့်ဖို့ `await` keyword ကို အသုံးပြုရပါတယ်။ Server request တစ်ခုစီမှာ error ဖြစ်နိုင်မှုကို handle လုပ်ဖို့လိုအပ်ပါတယ်။ အခုတော့ error ကို log message အနေနဲ့သာ ပြသထားပြီး နောက်ပိုင်းမှာ ပြန်လည် handle လုပ်ပါမယ်။
+
+ထို့နောက် dashboard information ကို ပြသဖို့ data ကို တစ်နေရာမှာ သိမ်းဆည်းဖို့လိုအပ်ပါတယ်။ `account` variable မရှိသေးတဲ့အတွက် ဖိုင်ရဲ့ အပေါ်ဆုံးမှာ global variable တစ်ခုကို ဖန်တီးပါမယ်:
+
+```js
+let account = null;
+```
+
+အသုံးပြုသူ data ကို variable မှာ သိမ်းဆည်းပြီးနောက် *login* စာမျက်နှာမှ *dashboard* ကို `navigate()` function ကို အသုံးပြုပြီး ရွှေ့နိုင်ပါတယ်။
+
+နောက်ဆုံးမှာ login form ကို submit လုပ်တဲ့အခါ `login` function ကို ခေါ်ဖို့ HTML ကို ပြောင်းလဲပါ:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+အသစ် account တစ်ခုကို register လုပ်ပြီး အဲဒီ account ကို အသုံးပြုပြီး login လုပ်ကြည့်ကာ အားလုံးအလုပ်လုပ်နေမှုကို စမ်းသပ်ပါ။
+
+နောက်ပိုင်းအပိုင်းကို ဆက်မလုပ်ခင် `register` function ကို အောက်ပါ code ကို function ရဲ့ အဆုံးမှာ ထည့်သွင်းပြီး ပြည့်စုံစေပါ:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ သင်သိပါသလား? Default အနေဖြင့် server API များကို သင်ကြည့်နေတဲ့ web page ရဲ့ *same domain နှင့် port* မှသာ ခေါ်နိုင်ပါတယ်။ ဒါက browser များက အကောင်အထည်ဖော်ထားတဲ့ security mechanism ဖြစ်ပါတယ်။ ဒါပေမယ့် သင့် web app က `localhost:3000` မှာ run လုပ်နေပြီး server API က `localhost:5000` မှာ run လုပ်နေတဲ့အခါ ဘာကြောင့် အလုပ်လုပ်နေရတာလဲ? [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) ဆိုတဲ့နည်းလမ်းကို အသုံးပြုပြီး server response မှာ specific domains အတွက် exception ကို ခွင့်ပြုတဲ့ headers များကို ထည့်သွင်းခြင်းဖြင့် cross-origin HTTP requests ကို လုပ်ဆောင်နိုင်ပါတယ်။
+
+> API များအကြောင်းပိုမိုလေ့လာရန် ဒီ [သင်ခန်းစာ](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) ကို လေ့လာပါ။
+
+## HTML ကို update လုပ်ပြီး ဒေတာကို ပြသခြင်း
+
+အခုတော့ အသုံးပြုသူ data ရရှိပြီးသားဖြစ်တဲ့အတွက် HTML ကို update လုပ်ပြီး ဒေတာကို ပြသဖို့လိုအပ်ပါတယ်။ DOM မှ element ကို ရယူဖို့ `document.getElementById()` ကို အသုံးပြုနည်းကို ရှိပြီးသားဖြစ်ပါတယ်။ Base element ရရှိပြီးနောက် အောက်ပါ API များကို အသုံးပြုကာ element ကို ပြောင်းလဲခြင်း သို့မဟုတ် child elements အသစ်များကို ထည့်သွင်းနိုင်ပါတယ်:
+
+- [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) property ကို အသုံးပြုကာ element ရဲ့ text ကို ပြောင်းလဲနိုင်ပါတယ်။ ဒီ value ကို ပြောင်းလဲတဲ့အခါ element ရဲ့ children များအားလုံးကို ဖျက်ပြီး ပေးထားသော text ဖြင့် အစားထိုးပေးပါတယ်။ အဲဒီအတွက် element ရဲ့ children များအားလုံးကို ဖျက်ဖို့ empty string `''` ကို assign လုပ်ခြင်းကလည်း အကျိုးရှိပါတယ်။
+
+- [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) နှင့် [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) method ကို အသုံးပြုကာ child elements အသစ်များကို ဖန်တီးပြီး attach လုပ်နိုင်ပါတယ်။
+
+✅ [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) property ကို အသုံးပြုကာ element ရဲ့ HTML contents ကို ပြောင်းလဲနိုင်ပေမယ့် [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) attacks အတွက် အန္တရာယ်ရှိတဲ့အတွက် ဒီ method ကို ရှောင်ရှားသင့်ပါတယ်။
+
+### လုပ်ဆောင်ရန်
+
+*login* စာမျက်နှာမှာ dashboard screen ကို ရှေ့ဆက်မလုပ်ခင် တစ်ခုခုလုပ်ဆောင်ဖို့လိုအပ်ပါတယ်။ လက်ရှိမှာ username မရှိတဲ့အကောင့်ကို login လုပ်ကြည့်ရင် console မှာ message တစ်ခုပြသပေမယ့် အသုံးပြုသူအတွက် ဘာမှမပြောင်းလဲဘဲ ဘာဖြစ်နေလဲဆိုတာမသိနိုင်ပါဘူး။
+
+login `<button>` ရဲ့ အနီးမှာ error message ကို ပြသနိုင်ဖို့ placeholder element တစ်ခုကို ထည့်သွင်းပါမယ်:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+ဒီ `<div>` element က empty ဖြစ်တဲ့အတွက် content ထည့်သွင်းမချင်း screen ပေါ်မှာ ဘာမှမပြသပါဘူး။ JavaScript ဖြင့် retrieve လုပ်ဖို့ `id` ကိုလည်း ထည့်သွင်းထားပါတယ်။
+
+`app.js` ဖိုင်ကို ပြန်သွားပြီး `updateElement` ဆိုတဲ့ helper function အသစ်တစ်ခုကို ဖန်တီးပါ:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+ဒီ function က ရိုးရှင်းပါတယ်: element *id* နှင့် *text* ကိုပေးပြီး matching `id` ရဲ့ DOM element ရဲ့ text content ကို update လုပ်ပေးပါတယ်။ ဒီ method ကို `login` function ရဲ့ error message အစားအသုံးပြုပါမယ်:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+အခုတော့ invalid account ကို login လုပ်ကြည့်ရင် အောက်ပါအတိုင်း message တစ်ခုကို မြင်ရပါမယ်:
+
+![Login error message ပြသနေမှုကို ပြသထားသော screenshot](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.my.png)
+
+အခုတော့ error text ကို visually ပြသနိုင်ပါပြီ၊ ဒါပေမယ့် screen reader ဖြင့် စမ်းကြည့်ရင် ဘာမှမကြားရပါဘူး။ Screen reader များအတွက် dynamically ထည့်သွင်းထားသော text ကို announce လုပ်နိုင်ဖို့ [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) ကို အသုံးပြုရပါမယ်။ ဒီမှာတော့ alert ဆိုတဲ့ live region အမျိုးအစားကို အသုံးပြုပါမယ်:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+`register` function errors အတွက်လည်း အတူတူအကျိုးသက်ရောက်မှုကို implement လုပ်ပါ (HTML ကို update လုပ်ဖို့မမေ့ပါနဲ့)။
+
+## Dashboard မှာ အချက်အလက်များကို ပြသခြင်း
+
+အခုလို techniques များကို အသုံးပြုကာ dashboard စာမျက်နှာမှာ account information ကို ပြသပါမယ်။
+
+Server မှရရှိသော account object က အောက်ပါအတိုင်းဖြစ်ပါတယ်:
+
+```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 }
+  ],
+}
+```
+
+> မှတ်ချက်: သင့်အလုပ်ကို ပိုမိုလွယ်ကူစေရန် data ဖြင့် ပြည့်စုံထားသော `test` account ကို အသုံးပြုနိုင်ပါတယ်။
+
+### လုပ်ဆောင်ရန်
+
+HTML မှာ "Balance" section ကို placeholder elements ထည့်သွင်းဖို့အတွက် အစားထိုးပါ:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Account description ကို ပြသဖို့အတွက် အောက်မှာ section အသစ်တစ်ခုကို ထည့်သွင်းပါ:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Account description က content ရဲ့ title အဖြစ် လုပ်ဆောင်တာဖြစ်တဲ့အတွက် semantically heading အနေနဲ့ markup လုပ်ထားပါတယ်။ [Heading structure](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) ရဲ့ အရေးပါမှုကို လေ့လာပြီး စာမျက်နှာကို အနက်နက်ကြည့်ကာ heading အဖြစ်သင့်တော်သောအရာများကို သတ်မှတ်ပါ။
+
+နောက်ဆုံးမှာ `app.js` မှာ placeholder ကို ဖြည့်ဖို့ function အသစ်တစ်ခုကို ဖန်တီးပါ:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+ပထမဆုံး account data ရှိမရှိစစ်ဆေးပြီးမှ ဆက်လုပ်ဆောင်ပါမယ်။ ထို့နောက် HTML ကို update လုပ်ဖို့ `updateElement()` function ကို အသုံးပြုပါတယ်။
+
+> Balance display ကို ပိုမိုလှပစေရန် [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) method ကို အသုံးပြုကာ ဒေသမပိုင်းအနေနဲ့ digit ၂ ခုကို အတိအကျပြသပေးပါတယ်။
+
+Dashboard page ကို load လုပ်တိုင်း `updateDashboard()` function ကို ခေါ်ဖို့လိုအပ်ပါတယ်။ [Lesson 1 assignment](../1-template-route/assignment.md) ကို ပြီးစီးထားပြီးသားဖြစ်ရင် ဒီအပိုင်းက ရိုးရှင်းပါတယ်၊ မဟုတ်ရင် အောက်ပါ implementation ကို အသုံးပြုနိုင်ပါတယ်။
+
+`updateRoute()` function ရဲ့ အဆုံးမှာ အောက်ပါ code ကို ထည့်သွင်းပါ:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+Routes definition ကို အောက်ပါအတိုင်း update လုပ်ပါ:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+ဒီပြောင်းလဲမှုနဲ့ dashboard page ကို ပြသတိုင်း `updateDashboard()` function ကို ခေါ်ပါမယ်။ Login လုပ်ပြီးနောက် account balance, currency နှင့် description ကို မြင်ရပါမယ်။
+
+## HTML templates ဖြင့် table rows ကို dynamically ဖန်တီးခြင်း
+
+[Lesson 1](../1-template-route/README.md) မှာ navigation ကို implement လုပ်ဖို့ HTML templates ကို [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) method နဲ့အတူ အသုံးပြုခဲ့ပါတယ်။ Templates များက ပိုမိုသေးငယ်ပြီး စာမျက်နှာရဲ့ ထပ်တလဲလဲဖြစ်သောအပိုင်းများကို dynamically populate လုပ်ဖို့ အသုံးပြုနိုင်ပါတယ်။
+
+ဒီနည်းလမ်းကို အသုံးပြုကာ HTML table မှာ transactions များကို ပြသပါမယ်။
+
+### လုပ်ဆောင်ရန်
+
+HTML `<body>` မှာ template အသစ်တစ်ခုကို ထည့်သွင်းပါ:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+ဒီ template က table row တစ်ခုကို ကိုယ်စားပြုပြီး transactions ရဲ့ *date*, *object* နှင့် *amount* ဆိုတဲ့ column ၃ ခုကို populate လုပ်ဖို့ ရည်ရွယ်ပါတယ်။
+
+Dashboard template ရဲ့ `<tbody>` element မှာ JavaScript ဖြင့် ရှာဖွေရန် အလွယ်ကူစေရန် `id` property ကို ထည့်သ
+အကောင့် `test` ကို အသုံးပြုပြီး login လုပ်ကြည့်ပါက dashboard ပေါ်တွင် လုပ်ငန်းစာရင်းကို မြင်နိုင်ပါပြီ 🎉။
+
+---
+
+## 🚀 စိန်ခေါ်မှု
+
+အဖွဲ့လိုက်လုပ်ပြီး dashboard စာမျက်နှာကို တကယ့်ဘဏ်အက်ပ်လိုပုံစံဖြစ်အောင် ပြင်ဆင်ပါ။ သင့်အက်ပ်ကို အလှဆင်ပြီးသားဖြစ်ပါက [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) ကို အသုံးပြုပြီး [responsive design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) တစ်ခုကို ဖန်တီးပါ၊ desktop နှင့် mobile device နှစ်ခုစလုံးမှာ အဆင်ပြေစွာ အလုပ်လုပ်နိုင်အောင် ပြုလုပ်ပါ။
+
+ဒီမှာ styled dashboard စာမျက်နှာရဲ့ ဥပမာတစ်ခုကို ဖော်ပြထားပါတယ်:
+
+![Dashboard ကို အလှဆင်ပြီးနောက်ရလဒ်ရဲ့ ဥပမာ screenshot](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.my.png)
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## အိမ်စာ
+
+[သင့် code ကို ပြန်လည်ပြင်ဆင်ပြီး မှတ်ချက်ထည့်ပါ](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/7-bank-project/3-data/assignment.md b/translations/my/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..1007eea9
--- /dev/null
+++ b/translations/my/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-27T22:01:27+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "my"
+}
+-->
+# သင့်ကုဒ်ကို ပြန်လည်စီစစ်ပြီး မှတ်ချက်ထည့်ပါ
+
+## လမ်းညွှန်ချက်များ
+
+သင့်ကုဒ်အခြေခံသည် ကြီးထွားလာသည့်အခါ၊ အချိန်ကြာလာသည်နှင့်အမျှ ဖတ်ရှုရလွယ်ကူပြီး ပြုပြင်ထိန်းသိမ်းရလွယ်ကူစေရန် မကြာခဏ ပြန်လည်စီစစ်မှုများ ပြုလုပ်ရန် အရေးကြီးပါသည်။ သင့် `app.js` ကို ပြုပြင်တိုးတက်စေရန် အောက်ပါအတိုင်း မှတ်ချက်ထည့်ပြီး ပြန်လည်စီစစ်ပါ-
+
+- Server API base URL ကဲ့သို့သော constant များကို ခွဲထုတ်ပါ
+- ဆင်တူသောကုဒ်များကို စုစည်းပါ။ ဥပမာအားဖြင့် `createAccount()` နှင့် `getAccount()` နှစ်ခုလုံးတွင် အသုံးပြုထားသော ကုဒ်များကို စုစည်းရန် `sendRequest()` function တစ်ခု ဖန်တီးနိုင်ပါသည်
+- ကုဒ်ကို ဖတ်ရှုရလွယ်ကူစေရန် ပြန်လည်စီစဉ်ပြီး မှတ်ချက်များ ထည့်ပါ
+
+## အကဲဖြတ်စံနှုန်း
+
+| စံနှုန်း | ထူးချွန်သော                                                                                                                                                     | လုံလောက်သော                                                                                          | တိုးတက်မှုလိုအပ်သော                                                                     |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+|          | ကုဒ်တွင် မှတ်ချက်များထည့်ထားပြီး၊ အပိုင်းအစများအလိုက် စနစ်တကျ စီစဉ်ထားကာ ဖတ်ရှုရလွယ်ကူသည်။ Constant များကို ခွဲထုတ်ထားပြီး၊ `sendRequest()` function ကို ဖန်တီးထားသည်။ | ကုဒ်သည် သန့်ရှင်းသော်လည်း မှတ်ချက်များ၊ constant ခွဲထုတ်မှု သို့မဟုတ် function စုစည်းမှုများ ပိုမိုပြုလုပ်နိုင်ပါသေးသည်။ | ကုဒ်သည် ရှုပ်ထွေးပြီး မှတ်ချက်မထည့်ထား၊ constant မခွဲထုတ်ထားသလို function မစုစည်းထားပါ။ |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/7-bank-project/4-state-management/README.md b/translations/my/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..963ea379
--- /dev/null
+++ b/translations/my/7-bank-project/4-state-management/README.md
@@ -0,0 +1,219 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-27T22:06:06+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "my"
+}
+-->
+# ဘဏ်လုပ်ငန်းအက်ပ် တည်ဆောက်ခြင်း အပိုင်း ၄: အခြေအနေ စီမံခန့်ခွဲမှု၏ အယူအဆများ
+
+## မိန့်ခွန်းမတိုင်မီ မေးခွန်းများ
+
+[မိန့်ခွန်းမတိုင်မီ မေးခွန်းများ](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### အကျဉ်းချုပ်
+
+ဝက်ဘ်အက်ပ်တစ်ခု ကြီးထွားလာသည်နှင့်အမျှ ဒေတာများကို စီမံခန့်ခွဲရန် အခက်အခဲများ ဖြစ်လာနိုင်သည်။ ဘယ်ကုဒ်က ဒေတာကို ရယူသလဲ၊ ဘယ်စာမျက်နှာက ဒေတာကို အသုံးပြုသလဲ၊ ဘယ်နေရာမှာ၊ ဘယ်အချိန်မှာ ဒေတာကို ပြန်လည်အပ်ဒိတ်လုပ်ရမလဲ... အလွယ်တကူ စီမံခန့်ခွဲရန် ခက်ခဲသော ကုဒ်များဖြစ်လာနိုင်သည်။ အထူးသဖြင့် သင့်အက်ပ်၏ စာမျက်နှာများအကြား ဒေတာများကို မျှဝေရန် လိုအပ်သောအခါတွင် ပိုမိုခက်ခဲလာနိုင်သည်။ *State Management* (အခြေအနေ စီမံခန့်ခွဲမှု) ဆိုသော အယူအဆသည် အစဉ်အမြဲ အမျိုးမျိုးသော ပရိုဂရမ်များတွင် ရှိနေခဲ့ပြီး ဝက်ဘ်အက်ပ်များ ကြီးထွားလာသည်နှင့်အမျှ အရေးပါသော အချက်တစ်ခုအဖြစ် ဖွံ့ဖြိုးလာခဲ့သည်။
+
+ဒီအပိုင်းနောက်ဆုံးတွင် ကျွန်ုပ်တို့ တည်ဆောက်ထားသော အက်ပ်ကို ပြန်လည်သုံးသပ်ပြီး အခြေအနေ စီမံခန့်ခွဲမှုကို ပြောင်းလဲစဉ်းစားမည်ဖြစ်ပြီး ဘရောက်ဆာကို မည်သည့်အချိန်တွင်မဆို ပြန်လည် Refresh လုပ်နိုင်ရန်နှင့် အသုံးပြုသူ၏ session များအတွင်း ဒေတာကို ထိန်းသိမ်းထားနိုင်ရန် အထောက်အပံ့ပေးမည်ဖြစ်သည်။
+
+### ကြိုတင်လိုအပ်ချက်
+
+ဒီသင်ခန်းစာအတွက် [data fetching](../3-data/README.md) အပိုင်းကို ပြီးစီးထားရန် လိုအပ်သည်။ [Node.js](https://nodejs.org) ကို install လုပ်ပြီး [server API](../api/README.md) ကို locally run လုပ်ရန် လိုအပ်သည်။ ဒါမှ account data ကို စီမံခန့်ခွဲနိုင်မည်ဖြစ်သည်။
+
+Server သေချာစွာ run လုပ်နေသည်ကို စစ်ဆေးရန် terminal တွင် အောက်ပါ command ကို run လုပ်ပါ။
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## အခြေအနေ စီမံခန့်ခွဲမှုကို ပြန်လည်စဉ်းစားခြင်း
+
+[ယခင်သင်ခန်းစာ](../3-data/README.md) တွင် ကျွန်ုပ်တို့ app ၏ အခြေအနေကို `account` variable ကို အသုံးပြု၍ အခြေခံအနေဖြင့် စတင်မိတ်ဆက်ခဲ့သည်။ သို့သော် ယခု implementation တွင် အချို့သော အခက်အခဲများ ရှိနေသည်။ Dashboard တွင်ရှိနေစဉ် Page ကို Refresh လုပ်ကြည့်ပါ။ ဘာဖြစ်သလဲ?
+
+ယခုကုဒ်တွင် အခက်အခဲ ၃ ခုရှိသည်-
+
+- အခြေအနေကို မထိန်းသိမ်းထားသောကြောင့် Browser ကို Refresh လုပ်သည်နှင့် Login Page သို့ ပြန်သွားသည်။
+- အခြေအနေကို ပြောင်းလဲသော Function များစွာရှိသည်။ App ကြီးထွားလာသည်နှင့်အမျှ ပြောင်းလဲမှုများကို စစ်ဆေးရန် ခက်ခဲလာပြီး တစ်ခုခုကို Update လုပ်ရန် မေ့လျော့နိုင်သည်။
+- Logout ကို click လုပ်သည်နှင့် Login Page တွင်ရှိနေသော်လည်း Account data သေးသေးလျှက်ရှိနေသည်။
+
+ဒီအခက်အခဲများကို တစ်ခုချင်းစီ ဖြေရှင်းရန် ကုဒ်ကို Update လုပ်နိုင်သော်လည်း ဒါက ကုဒ်များကို ထပ်တူထပ်မျှဖြစ်စေပြီး App ကို ပိုမိုရှုပ်ထွေးစေမည်ဖြစ်သည်။ ဒါမှမဟုတ် အချိန်အနည်းငယ်ယူပြီး မိမိ၏ Strategy ကို ပြန်လည်စဉ်းစားနိုင်သည်။
+
+> ဒီအခက်အခဲများကို အမှန်တကယ် ဖြေရှင်းရန် ဘာတွေကို လိုအပ်နေလဲ?
+
+[State Management](https://en.wikipedia.org/wiki/State_management) ဆိုတာ App တစ်ခု၏ အခြေအနေကို အောက်ပါ ၂ ချက်အတွက် အကောင်းဆုံးနည်းလမ်း ရှာဖွေခြင်းဖြစ်သည်-
+
+- App တွင် ဒေတာများကို နားလည်ရန် လွယ်ကူစေရန် ဘယ်လိုလုပ်မလဲ?
+- အခြေအနေ data ကို အသုံးပြုသူ interface နှင့် အမြဲတမ်း sync ဖြစ်နေစေရန် (နှင့် အပြန်အလှန်) ဘယ်လိုလုပ်မလဲ?
+
+ဒီအချက်များကို ပြုလုပ်ပြီးပါက အခြားသော အခက်အခဲများသည် အလွယ်တကူ ဖြေရှင်းနိုင်မည်ဖြစ်သည်။ ဒါကို ဖြေရှင်းရန် နည်းလမ်းများစွာ ရှိသော်လည်း ကျွန်ုပ်တို့ **ဒေတာနှင့် ဒေတာကို ပြောင်းလဲရန် နည်းလမ်းများကို အလယ်တွင် စုစည်းခြင်း** ကို အသုံးပြုမည်ဖြစ်သည်။ ဒေတာများ၏ လှုပ်ရှားမှုသည် အောက်ပါအတိုင်းဖြစ်မည်-
+
+![HTML, အသုံးပြုသူ၏ လှုပ်ရှားမှုများနှင့် အခြေအနေအကြား ဒေတာလှုပ်ရှားမှုများကို ပြသသော Schema](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.my.png)
+
+> ဒီနေရာတွင် ဒေတာသည် အလိုအလျောက် view ကို update လုပ်ပေးသော အပိုင်းကို မဖော်ပြပါ၊ အဲဒါက [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming) ၏ အဆင့်မြင့်အယူအဆများနှင့် ဆက်စပ်နေသောကြောင့် ဖြစ်သည်။ အနက်ရှိုင်းစွာ လေ့လာလိုပါက အကောင်းဆုံးအကြောင်းအရာတစ်ခုဖြစ်သည်။
+
+✅ State Management အတွက် နည်းလမ်းများစွာရှိပြီး [Redux](https://redux.js.org) သည် လူကြိုက်များသော library တစ်ခုဖြစ်သည်။ အကြီးမားသော ဝက်ဘ်အက်ပ်များတွင် ကြုံရနိုင်သော အခက်အခဲများနှင့် အဲဒါကို ဘယ်လိုဖြေရှင်းနိုင်သည်ကို သင်ယူရန် အကောင်းဆုံးနည်းလမ်းတစ်ခုဖြစ်သည်။
+
+### လုပ်ငန်း
+
+အရင်ဆုံး ကုဒ်ကို အနည်းငယ် ပြုပြင်မည်။ `account` ကို အောက်ပါအတိုင်း ပြောင်းလဲပါ-
+
+```js
+let account = null;
+```
+
+အစား
+
+```js
+let state = {
+  account: null
+};
+```
+
+ဒီအကြောင်းအရာမှာ App ၏ ဒေတာအားလုံးကို တစ်ခုတည်းသော state object တွင် စုစည်းရန် ဖြစ်သည်။ ယခုအချိန်တွင် state တွင် `account` တစ်ခုတည်းသာ ရှိသဖြင့် များစွာ ပြောင်းလဲမှုမရှိသော်လည်း အနာဂတ်အတွက် လမ်းကြောင်းဖန်တီးပေးသည်။
+
+Function များကိုလည်း Update လုပ်ရန် လိုအပ်သည်။ `register()` နှင့် `login()` function များတွင် `account = ...` ကို `state.account = ...` ဖြင့် အစားထိုးပါ။
+
+`updateDashboard()` function ၏ အပေါ်တွင် အောက်ပါလိုင်းကို ထည့်ပါ-
+
+```js
+const account = state.account;
+```
+
+ဒီ refactoring ကိုယ်တိုင်က များစွာသော တိုးတက်မှုများ မဖြစ်ပေါ်စေသော်လည်း နောက်ထပ် ပြောင်းလဲမှုများအတွက် အခြေခံအုတ်မြစ်ကို ဖန်တီးရန် ဖြစ်သည်။
+
+## ဒေတာပြောင်းလဲမှုများကို စစ်ဆေးခြင်း
+
+`state` object ကို အသုံးပြု၍ ဒေတာကို သိမ်းဆည်းပြီးနောက် အဆင့်နောက်တစ်ခုမှာ ပြောင်းလဲမှုများကို စုစည်းရန် ဖြစ်သည်။ ပြောင်းလဲမှုများကို စစ်ဆေးရန် လွယ်ကူစေရန်နှင့် ဘယ်အချိန်တွင် ပြောင်းလဲမှုများ ဖြစ်ပေါ်သည်ကို သိရန် ဖြစ်သည်။
+
+`state` object ကို ပြောင်းလဲမှုများ မဖြစ်ပေါ်စေရန် [*immutable*](https://en.wikipedia.org/wiki/Immutable_object) ဖြစ်စေရန် သတ်မှတ်ခြင်းသည်လည်း အကောင်းဆုံးနည်းလမ်းတစ်ခုဖြစ်သည်။ ဒါက object ကို ပြောင်းလဲမှုများ မဖြစ်ပေါ်စေရန် ကာကွယ်ပေးပြီး [side effects](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) မလိုအပ်သောအခါ ကာကွယ်ပေးသည်။ Undo/Redo feature များကို ထည့်သွင်းနိုင်ရန် လမ်းဖွင့်ပေးပြီး Debug လုပ်ရန်လည်း လွယ်ကူစေသည်။ ဥပမာအားဖြင့် state ပြောင်းလဲမှုများအားလုံးကို log လုပ်ပြီး Bug ရှာဖွေရန် ပြောင်းလဲမှုများ၏ သမိုင်းကို သိမ်းဆည်းနိုင်သည်။
+
+JavaScript တွင် [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) ကို အသုံးပြု၍ object တစ်ခုကို immutable ဖြစ်စေရန် ဖန်တီးနိုင်သည်။ Immutable object ကို ပြောင်းလဲရန် ကြိုးစားပါက Exception တစ်ခု ဖြစ်ပေါ်မည်။
+
+✅ *shallow* immutable object နှင့် *deep* immutable object တစ်ခု၏ ကွာခြားချက်ကို သိပါသလား? [ဒီနေရာ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) တွင် ဖတ်ရှုနိုင်သည်။
+
+### လုပ်ငန်း
+
+အသစ်သော `updateState()` function တစ်ခု ဖန်တီးပါ-
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+ဒီ function တွင် ယခင် state မှ ဒေတာကို copy လုပ်ပြီး state object အသစ်တစ်ခုကို ဖန်တီးသည်။ ပြီးတော့ [bracket notation](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` ကို အသုံးပြု၍ state object ၏ property တစ်ခုကို override လုပ်သည်။ နောက်ဆုံးတွင် `Object.freeze()` ကို အသုံးပြု၍ object ကို lock လုပ်သည်။ ယခုအချိန်တွင် state တွင် `account` property တစ်ခုတည်းသာ ရှိသော်လည်း ဒီနည်းလမ်းဖြင့် state တွင် လိုအပ်သော property များစွာ ထည့်သွင်းနိုင်သည်။
+
+`state` initialization ကိုလည်း Update လုပ်ပြီး initial state ကိုလည်း freeze ဖြစ်စေရန် သေချာစေပါ-
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+ထို့နောက် `register` function တွင် `state.account = result;` assignment ကို အောက်ပါအတိုင်း အစားထိုးပါ-
+
+```js
+updateState('account', result);
+```
+
+`login` function တွင်လည်း `state.account = data;` ကို အောက်ပါအတိုင်း အစားထိုးပါ-
+
+```js
+updateState('account', data);
+```
+
+အသုံးပြုသူ Logout ကို click လုပ်သောအခါ account data မရှင်းလင်းသော အခက်အခဲကို ပြုပြင်ရန် အခွင့်အရေးကို ယခုယူပါ။
+
+အသစ်သော `logout()` function တစ်ခု ဖန်တီးပါ-
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+`updateDashboard()` တွင် `return navigate('/login');` redirection ကို `return logout();` ဖြင့် အစားထိုးပါ။
+
+အသစ်သော account ကို register လုပ်ပြီး Logout နှင့် Login ပြန်လုပ်ပါ။ အားလုံး သေချာစွာ အလုပ်လုပ်နေသည်ကို စစ်ဆေးပါ။
+
+> အကြံပြုချက်- `updateState()` ၏ အောက်ဆုံးတွင် `console.log(state)` ကို ထည့်သွင်းပြီး Browser ၏ Development Tools တွင် console ကို ဖွင့်ကာ state ပြောင်းလဲမှုအားလုံးကို ကြည့်ရှုနိုင်သည်။
+
+## အခြေအနေကို ထိန်းသိမ်းခြင်း
+
+ဝက်ဘ်အက်ပ်များအများစုသည် သေချာစွာ အလုပ်လုပ်ရန် ဒေတာကို ထိန်းသိမ်းရန် လိုအပ်သည်။ အရေးကြီးသော ဒေတာအားလုံးကို database တွင် သိမ်းဆည်းပြီး server API မှတစ်ဆင့် access လုပ်သည်။ သို့သော် Browser တွင် client app တွင် ဒေတာတစ်ချို့ကို ထိန်းသိမ်းခြင်းသည် အသုံးပြုသူအတွေ့အကြုံကို ပိုမိုကောင်းမွန်စေခြင်း သို့မဟုတ် Loading performance ကို တိုးတက်စေခြင်းအတွက် စိတ်ဝင်စားစရာကောင်းသည်။
+
+Browser တွင် ဒေတာကို သိမ်းဆည်းလိုပါက အရေးကြီးသော မေးခွန်းများကို မေးရမည်-
+
+- *ဒေတာသည် အရေးကြီးသော ဒေတာလား?* အသုံးပြုသူ၏ password ကဲ့သို့ sensitive data များကို client တွင် သိမ်းဆည်းရန် ရှောင်ရှားသင့်သည်။
+- *ဒီဒေတာကို ဘယ်လောက်ကြာအောင် သိမ်းဆည်းလိုပါသလဲ?* ဒီဒေတာကို current session အတွက်သာ အသုံးပြုလိုပါသလား၊ ဒေတာကို အမြဲတမ်း သိမ်းဆည်းလိုပါသလား?
+
+ဝက်ဘ်အက်ပ်တွင် ဒေတာကို သိမ်းဆည်းရန် နည်းလမ်းများစွာ ရှိပြီး သင့်ရည်ရွယ်ချက်အပေါ် မူတည်သည်။ ဥပမာအားဖြင့် URL တွင် search query ကို သိမ်းဆည်းပြီး အသုံးပြုသူများအကြား မျှဝေနိုင်သည်။ [Authentication](https://en.wikipedia.org/wiki/Authentication) အချက်အလက်ကဲ့သို့ server နှင့် မျှဝေရန် လိုအပ်သော ဒေတာများအတွက် [HTTP cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies) ကို အသုံးပြုနိုင်သည်။
+
+Browser API များစွာရှိပြီး ဒေတာကို သိမ်းဆည်းရန် အထူးစိတ်ဝင်စားစရာကောင်းသော API နှစ်ခုရှိသည်-
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) တစ်ခုဖြစ်ပြီး current website အတွက် session များအကြား ဒေတာကို ထိန်းသိမ်းနိုင်သည်။ သိမ်းဆည်းထားသော ဒေတာသည် မည်သည့်အချိန်တွင်မဆို မပျောက်ဆုံးပါ။
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): ဒီ API သည် `localStorage` နှင့် တူသည်။ သို့သော် session ပြီးဆုံးသည်နှင့် သိမ်းဆည်းထားသော ဒေတာကို ဖျက်ပစ်သည်။
+
+API နှစ်ခုလုံးသည် [strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) ကိုသာ သိမ်းဆည်းနိုင်သည်။ [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) format သို့ serialize လုပ်ရန် [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) ကို အသုံးပြုရန် လိုအပ်သည်။
+
+✅ Server မပါသော ဝက်ဘ်အက်ပ်တစ်ခုကို ဖန်တီးလိုပါက [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) ကို အသုံးပြု၍ client တွင် database တစ်ခု ဖန်တီးနိုင်သည်။ ဒါက အဆင့်မြင့်သော အသုံးပြုမှုများ သို့မဟုတ် ဒေတာအများအပြား သိမ်းဆည်းရန် Advanced use case များအတွက်သာ သင့်လျော်သည်။
+
+### လုပ်ငန်း
+
+အသုံးပြုသူ Logout ကို click မလုပ်မီ Login အခြေအနေကို ထိန်းသိမ်းထားရန် `localStorage` ကို အသုံးပြုမည်။ အရင်ဆုံး ဒေတာကို သိမ်းဆည်းရန် အသုံးပြုမည့် key ကို သတ်မှတ်ပါ။
+
+```js
+const storageKey = 'savedAccount';
+```
+
+ထို့နောက် `updateState()` function ၏ အဆုံးတွင် အောက်ပါလိုင်းကို ထည့်ပါ-
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+ဒီနည်းလမ်းဖြင့် အသုံးပြုသူ၏ account data ကို သိမ်းဆည်းပြီး ယခင် refactor များအားလုံးကြောင့် အမြဲတမ်း up-to-date ဖြစ်နေမည်။ ဒီနေရာတွင် ယခင် refactor များ၏ အကျိုးကျေးဇူးကို စတင်ခံစားရမည် 🙂။
+
+ဒေတာကို သိမ်းဆည်းပြီးပါက App ကို load လုပ်သောအခါ ဒေတာကို ပြန်လည် Restore လုပ်ရန်လည်း လိုအပ်သည်။ Initialization code ပိုများလာသည်ကြောင့် `app.js` ၏ အောက်ဆုံးရှိ ယခင် code ကိုလည်း ထည့်သွင်းထားသော အသစ်သော `init` function တစ်ခု ဖန်တီးပါ-
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // Our previous initialization code
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+ဒီနေရာတွင် သိမ်းဆည်းထားသော ဒေတာကို ပြန်လည်ရ
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## အလုပ်ပေးချက်
+
+[“Add transaction” dialog ကို အကောင်အထည်ဖော်ပါ](assignment.md)
+
+အလုပ်ပေးချက်ပြီးဆုံးပြီးနောက်ရရှိသော ဥပမာရလဒ်မှာ အောက်ပါအတိုင်းဖြစ်ပါသည် -
+
+![“Add transaction” dialog ဥပမာကို ပြသထားသော Screenshot](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.my.png)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို ကျေးဇူးပြု၍ သိရှိထားပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/7-bank-project/4-state-management/assignment.md b/translations/my/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..3b403526
--- /dev/null
+++ b/translations/my/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-27T22:07:01+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "my"
+}
+-->
+# "ငွေစာရင်းထည့်သွင်းရန်" ဒိုင်ယာလော့ဂ်ကို အကောင်အထည်ဖော်ပါ
+
+## လမ်းညွှန်ချက်များ
+
+ကျွန်ုပ်တို့၏ဘဏ်အက်ပ်တွင် အရေးကြီးသောအင်္ဂါရပ်တစ်ခု မရှိသေးပါ။ အဲဒါကတော့ ငွေစာရင်းအသစ်များကို ထည့်သွင်းနိုင်ခြင်းဖြစ်သည်။
+ယခင်သင်ခန်းစာလေးခုမှ သင်ယူခဲ့သမျှကို အသုံးပြု၍ "ငွေစာရင်းထည့်သွင်းရန်" ဒိုင်ယာလော့ဂ်ကို အကောင်အထည်ဖော်ပါ။
+
+- Dashboard စာမျက်နှာတွင် "ငွေစာရင်းထည့်သွင်းရန်" ခလုတ်တစ်ခု ထည့်ပါ
+- HTML template အသစ်တစ်ခုဖြင့် စာမျက်နှာအသစ်တစ်ခု ဖန်တီးပါ၊ သို့မဟုတ် JavaScript ကို အသုံးပြု၍ Dashboard စာမျက်နှာမှ မထွက်ဘဲ ဒိုင်ယာလော့ဂ် HTML ကို ပြ/ဖျောက်နိုင်ပါ (အဲဒီအတွက် [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) property သို့မဟုတ် CSS classes ကို အသုံးပြုနိုင်သည်)
+- [keyboard နှင့် screen reader accessibility](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) ကို handle လုပ်ပါ
+- Input data ကို လက်ခံရန် HTML form တစ်ခု ဖန်တီးပါ
+- Form data ကို JSON data အဖြစ် ဖန်တီးပြီး API သို့ ပို့ပါ
+- Dashboard စာမျက်နှာကို အချက်အလက်အသစ်ဖြင့် update လုပ်ပါ
+
+[server API specifications](../api/README.md) ကို ကြည့်ပြီး သင့်အနေနှင့် ခေါ်ရမည့် API နှင့် မျှော်မှန်းထားသော JSON format ကို သိပါ။
+
+ဤအလုပ်ကို ပြီးမြောက်ပြီးနောက်ရလဒ်ဥပမာကို ကြည့်ပါ:
+
+![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.my.png)
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အဆင့်သတ်မှတ်ချက် | ထူးချွန်သော                                                                                          | လုံလောက်သော                                                                                                                | တိုးတက်မှုလိုအပ်သော                           |
+| ----------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+|                   | ငွေစာရင်းထည့်သွင်းခြင်းကို သင်ခန်းစာများတွင် တွေ့ရှိခဲ့သည့် အကောင်းဆုံးအလေ့အကျင့်များအားလုံးကို လိုက်နာ၍ အကောင်အထည်ဖော်ထားသည်။ | ငွေစာရင်းထည့်သွင်းခြင်းကို အကောင်အထည်ဖော်ထားသော်လည်း သင်ခန်းစာများတွင် တွေ့ရှိခဲ့သည့် အကောင်းဆုံးအလေ့အကျင့်များကို မလိုက်နာခြင်း၊ သို့မဟုတ် အစိတ်အပိုင်းတစ်ချို့သာ အလုပ်လုပ်နေခြင်း။ | ငွေစာရင်းထည့်သွင်းခြင်း အလုပ်မလုပ်ပါ။ |
+
+---
+
+**ဝက်ဘ်ဆိုက်မှတ်ချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်ဆိုမှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတည်သောရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပြန်ဆိုမှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်ဆိုမှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားများ သို့မဟုတ် အဓိပ္ပာယ်မှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/7-bank-project/README.md b/translations/my/7-bank-project/README.md
new file mode 100644
index 00000000..b401f315
--- /dev/null
+++ b/translations/my/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-27T21:58:37+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "my"
+}
+-->
+# :dollar: ဘဏ်တစ်ခု တည်ဆောက်ခြင်း
+
+ဒီပရောဂျက်မှာ သင်ဟာ စိတ်ကူးယဉ်ဘဏ်တစ်ခုကို ဘယ်လိုတည်ဆောက်ရမယ်ဆိုတာကို သင်ယူနိုင်ပါမယ်။ ဒီသင်ခန်းစာတွေမှာ ဝက်ဘ်အက်ပ်ကို ဘယ်လိုပုံစံချပြီး လမ်းကြောင်းတွေထည့်ရမယ်၊ ဖောင်တွေတည်ဆောက်ရမယ်၊ state ကို စီမံခန့်ခွဲရမယ်၊ API ကနေ ဒေတာကို ရယူပြီး ဘဏ်ရဲ့ ဒေတာကို ဘယ်လိုရယူရမယ်ဆိုတာကို ရှင်းပြထားပါတယ်။
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.my.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.my.png) |
+|--------------------------------|--------------------------------|
+
+## သင်ခန်းစာများ
+
+1. [ဝက်ဘ်အက်ပ်ထဲမှာ HTML Templates နဲ့ Routes](1-template-route/README.md)
+2. [Login နဲ့ Registration Form တည်ဆောက်ခြင်း](2-forms/README.md)
+3. [ဒေတာရယူခြင်းနဲ့ အသုံးပြုခြင်းနည်းလမ်းများ](3-data/README.md)
+4. [State Management အယူအဆများ](4-state-management/README.md)
+
+### အားကျေးဇူးတင်စကား
+
+ဒီသင်ခန်းစာတွေကို [Yohan Lasorsa](https://twitter.com/sinedied) မှ :hearts: ဖြင့် ရေးသားထားပါတယ်။
+
+ဒီသင်ခန်းစာတွေမှာ အသုံးပြုထားတဲ့ [server API](/7-bank-project/api/README.md) ကို ဘယ်လိုတည်ဆောက်ရမယ်ဆိုတာကို သင်ယူချင်တယ်ဆိုရင် [ဒီဗီဒီယိုစီးရီး](https://aka.ms/NodeBeginner) (အထူးသဖြင့် ဗီဒီယို 17 မှ 21) ကို လိုက်နာနိုင်ပါတယ်။
+
+သင် [ဒီ interactive Learn tutorial](https://aka.ms/learn/express-api) ကိုလည်း ကြည့်ရှုနိုင်ပါတယ်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/7-bank-project/api/README.md b/translations/my/7-bank-project/api/README.md
new file mode 100644
index 00000000..4aa5b156
--- /dev/null
+++ b/translations/my/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-27T22:01:50+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "my"
+}
+-->
+# ဘဏ် API
+
+> [Node.js](https://nodejs.org) + [Express](https://expressjs.com/) ဖြင့် တည်ဆောက်ထားသော ဘဏ် API ဖြစ်သည်။
+
+API ကို အခုတင်ဆောက်ပြီးဖြစ်ပြီး၊ ဒီလေ့ကျင့်ခန်းရဲ့ အစိတ်အပိုင်းမဟုတ်ပါ။
+
+သို့သော်၊ ဒီလို API တစ်ခုကို ဘယ်လိုတည်ဆောက်ရမယ်ဆိုတာကို သင်ယူချင်တယ်ဆိုရင် ဒီဗီဒီယိုစီးရီးကို လိုက်နာနိုင်ပါတယ် - https://aka.ms/NodeBeginner (ဗီဒီယို 17 မှ 21 အထိ ဒီ API ကို အတိအကျ ဖော်ပြထားသည်)။
+
+ဒါ့အပြင် ဒီ interactive tutorial ကိုလည်း ကြည့်ရှုနိုင်ပါတယ် - https://aka.ms/learn/express-api
+
+## Server ကို အလုပ်လုပ်စေခြင်း
+
+[Node.js](https://nodejs.org) ကို သင့်စက်မှာ ထည့်သွင်းထားကြောင်း သေချာပါစေ။
+
+1. ဒီ repo ကို Git clone လုပ်ပါ - [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)။
+2. Terminal ကို ဖွင့်ပြီး `Web-Dev-For-Beginners/7-bank-project/api` folder ထဲကို သွားပါ။
+3. `npm install` ကို run လုပ်ပြီး packages တွေ install ဖြစ်အောင် စောင့်ပါ (သင့်အင်တာနက်အမြန်နှုန်းပေါ်မူတည်ပြီး အချိန်ယူနိုင်သည်)။
+4. Installation ပြီးသွားတဲ့အခါ `npm start` ကို run လုပ်ပြီး အဆင်ပြေပါပြီ။
+
+Server သည် `5000` port တွင် စတင်နားထောင်မည်ဖြစ်သည်။
+*ဒီ server သည် ဘဏ် app server terminal (port `3000` တွင် နားထိုင်နေသော) နှင့်အတူတူ အလုပ်လုပ်မည်ဖြစ်ပြီး၊ ဒါကို ပိတ်မထားပါနှင့်။*
+
+> Note: အချက်အလက်အားလုံးကို in-memory တွင်သာ သိမ်းဆည်းထားပြီး၊ အမြဲတမ်း သိမ်းဆည်းထားခြင်းမရှိပါ။ Server ကို ပိတ်လိုက်သောအခါ အချက်အလက်အားလုံး ပျောက်သွားမည်ဖြစ်သည်။
+
+## API အသေးစိတ်
+
+Route                                        | ဖော်ပြချက်
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Server အချက်အလက်ရယူရန်
+POST   /api/accounts/                        | အကောင့်တစ်ခု ဖန်တီးရန်၊ ဥပမာ - `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | သတ်မှတ်ထားသော အကောင့်အတွက် အချက်အလက်အားလုံးရယူရန်
+DELETE /api/accounts/:user                   | သတ်မှတ်ထားသော အကောင့်ကို ဖျက်ရန်
+POST   /api/accounts/:user/transactions      | လုပ်ငန်းစဉ်တစ်ခု ထည့်ရန်၊ ဥပမာ - `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | သတ်မှတ်ထားသော လုပ်ငန်းစဉ်ကို ဖျက်ရန်
+
+---
+
+**ဝက်ဘ်ဆိုက်မှတ်ချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတည်သောရင်းမြစ်အဖြစ် သတ်မှတ်ရန် လိုအပ်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များ၏ ပရော်ဖက်ရှင်နယ်ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားမှုများ သို့မဟုတ် အဓိပ္ပါယ်မှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/7-bank-project/solution/README.md b/translations/my/7-bank-project/solution/README.md
new file mode 100644
index 00000000..639b8aef
--- /dev/null
+++ b/translations/my/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-27T22:02:13+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "my"
+}
+-->
+# ဘဏ်အက်ပ်
+
+> ဘဏ်အက်ပ်ပရောဂျက်အတွက် နမူနာဖြေရှင်းနည်း၊ HTML5, CSS နှင့် JavaScript (frameworks သို့မဟုတ် libraries မပါ) အသုံးပြု၍ တည်ဆောက်ထားသည်။
+
+## အက်ပ်ကို အလုပ်လုပ်စေခြင်း
+
+ပထမဦးဆုံး [API server](../api/README.md) ကို အလုပ်လုပ်စေထားပါ။
+
+အက်ပ်ကို အလုပ်လုပ်စေဖို့ အင်တာနက်ဆာဗာမည်သည့်အမျိုးအစားမဆို အသုံးပြုနိုင်သော်လည်း၊ API ကို အလုပ်လုပ်စေဖို့ [Node.js](https://nodejs.org) ကို မဖြစ်မနေ ထည့်သွင်းထားရမည်ဖြစ်သောကြောင့်၊ သင့်အနေဖြင့် -
+
+1. ဒီ repo ကို Git clone လုပ်ပါ။
+2. Terminal ကိုဖွင့်ပြီး ဒီ directory ကိုသွားပါ၊ ထို့နောက် `npx lite-server .` ကို run လုပ်ပါ။ ဒါက `3000` port မှာ development web server ကို စတင်ပါမည်။
+3. Browser မှာ `http://localhost:3000` ကို ဖွင့်ပြီး အက်ပ်ကို အလုပ်လုပ်စေပါ။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/8-code-editor/1-using-a-code-editor/README.md b/translations/my/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..9bcf50eb
--- /dev/null
+++ b/translations/my/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,107 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-27T22:41:42+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "my"
+}
+-->
+# ကုဒ်အယ်ဒီတာ အသုံးပြုခြင်း
+
+ဒီသင်ခန်းစာမှာ [VSCode.dev](https://vscode.dev) ဆိုတဲ့ ဝဘ်အခြေပြုကုဒ်အယ်ဒီတာကို အသုံးပြုပြီး သင့်ရဲ့ကုဒ်ကို ပြင်ဆင်ခြင်းနှင့် ပရောဂျက်တွင် ပါဝင်ဆောင်ရွက်နိုင်ရန် အခြေခံအချက်များကို လေ့လာပါမည်။ ဒီအရာတွေကို သင့်ကွန်ပျူတာမှာ ဘာမှ ထည့်သွင်းမထားဘဲ လုပ်ဆောင်နိုင်ပါတယ်။
+
+## သင်ခန်းစာရည်မှန်းချက်များ
+
+ဒီသင်ခန်းစာအပြီးမှာ သင်တတ်မြောက်မည့်အရာများမှာ -
+
+- ကုဒ်ပရောဂျက်တစ်ခုအတွင်း ကုဒ်အယ်ဒီတာကို အသုံးပြုနိုင်ခြင်း
+- ဗားရှင်းထိန်းချုပ်မှုဖြင့် ပြောင်းလဲမှုများကို စောင့်ကြည့်နိုင်ခြင်း
+- ဖွံ့ဖြိုးတိုးတက်မှုအတွက် အယ်ဒီတာကို စိတ်ကြိုက်ပြင်ဆင်နိုင်ခြင်း
+
+### ကြိုတင်လိုအပ်ချက်များ
+
+စတင်မည်မီ သင့်မှာ [GitHub](https://github.com) အကောင့်တစ်ခု ရှိဖို့လိုအပ်ပါတယ်။ [GitHub](https://github.com/) ကိုသွားပြီး အကောင့်မရှိသေးပါက အသစ်တစ်ခု ဖန်တီးပါ။
+
+### နိဒါန်း
+
+ကုဒ်အယ်ဒီတာသည် ပရိုဂရမ်ရေးသားခြင်းနှင့် ရှိပြီးသားကုဒ်ပရောဂျက်များတွင် ပူးပေါင်းဆောင်ရွက်ရန် အရေးကြီးသော ကိရိယာတစ်ခုဖြစ်သည်။ အယ်ဒီတာ၏ အခြေခံအချက်များနှင့် ၎င်း၏ အင်္ဂါရပ်များကို အသုံးချနည်းကို နားလည်ပြီးပါက သင့်ရဲ့ကုဒ်ရေးသားမှုတွင် အလွယ်တကူ အသုံးချနိုင်ပါမည်။
+
+## VSCode.dev ဖြင့် စတင်ခြင်း
+
+[VSCode.dev](https://vscode.dev) သည် ဝဘ်အခြေပြု ကုဒ်အယ်ဒီတာတစ်ခုဖြစ်သည်။ ၎င်းကို အသုံးပြုရန် ဘာမှ ထည့်သွင်းရန် မလိုအပ်ပါဘူး၊ အခြားဝဘ်ဆိုဒ်တစ်ခု ဖွင့်သလိုပဲ ဖွင့်နိုင်ပါတယ်။ စတင်ရန် [https://vscode.dev](https://vscode.dev) ကို ဖွင့်ပါ။ သင် [GitHub](https://github.com/) တွင် လော့ဂ်အင်မလုပ်ထားပါက လိုအပ်သော လမ်းညွှန်ချက်များကို လိုက်နာပြီး လော့ဂ်အင်လုပ်ပါ။
+
+ဖွင့်ပြီးပါက အောက်ပါပုံနှင့် ဆင်တူသော အခြေအနေကို တွေ့ရပါမည် -
+
+![Default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.my.png)
+
+ဤအယ်ဒီတာတွင် အဓိကပိုင်းသုံးခုရှိသည် -
+
+1. _Activity Bar_ - 🔎 မျှော်မှန်းမှန်၊ ⚙️ ဂီယာနှင့် အခြားအိုင်ကွန်များပါဝင်သည်။
+2. _Side Bar_ - _Explorer_ အဖြစ် အဆင့်မြှင့်ထားသော Activity Bar ၏ အပိုင်း။
+3. _Code Area_ - ညာဘက်တွင်ရှိပြီး ကုဒ်ကို ပြင်ဆင်ရန် အသုံးပြုသည်။
+
+အိုင်ကွန်တစ်ခုချင်းစီကို နှိပ်ပြီး မီနူးအသစ်များကို ကြည့်ပါ။ ပြီးလျှင် _Explorer_ ကို ပြန်နှိပ်ပါ။
+
+သင့်ရဲ့ကုဒ်ကို ဖန်တီးခြင်း သို့မဟုတ် ပြင်ဆင်ခြင်းကို ဤ Code Area တွင် ပြုလုပ်မည်ဖြစ်သည်။
+
+## GitHub Repository ဖွင့်ခြင်း
+
+GitHub Repository တစ်ခု ဖွင့်ရန် အမျိုးမျိုးသောနည်းလမ်းများရှိသည်။ ဒီအပိုင်းမှာ Repository ကို ဖွင့်နိုင်ရန် နည်းလမ်းနှစ်ခုကို လေ့လာပါမည်။
+
+### ၁။ အယ်ဒီတာမှ ဖွင့်ခြင်း
+
+အယ်ဒီတာကို အသုံးပြု၍ Remote Repository ကို ဖွင့်ပါ။ [VSCode.dev](https://vscode.dev) သို့ သွားပါ၊ _"Open Remote Repository"_ ခလုတ်ကို တွေ့ရပါမည်။
+
+![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.my.png)
+
+Command Palette ကိုလည်း အသုံးပြုနိုင်သည်။ Command Palette သည် အမိန့် သို့မဟုတ် လုပ်ဆောင်မှုတစ်ခုကို ရှာဖွေပြီး အမိန့်ကို အကောင်အထည်ဖော်ရန် အသုံးပြုသော အကွက်တစ်ခုဖြစ်သည်။ _View_ ကိုရွေးပြီး _Command Palette_ ကိုရွေးပါ၊ သို့မဟုတ် Ctrl-Shift-P (MacOS တွင် Command-Shift-P) ကို အသုံးပြုပါ။
+
+![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.my.png)
+
+Command Palette ဖွင့်ပြီး _open remote repository_ ဟု ရိုက်ထည့်ပါ၊ ထို့နောက် ပထမဆုံးရွေးချယ်မှုကို ရွေးပါ။ သင်ပါဝင်သော Repository များ သို့မဟုတ် မကြာသေးမီက ဖွင့်ထားသော Repository များကို တွေ့ရပါမည်။ GitHub URL တစ်ခုကိုလည်း ရိုက်ထည့်နိုင်သည်။ အောက်ပါ URL ကို အသုံးပြုပါ -
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ အောင်မြင်ပါက Repository ၏ ဖိုင်အားလုံးကို အယ်ဒီတာတွင် တွေ့ရပါမည်။
+
+### ၂။ URL အသုံးပြုခြင်း
+
+URL တစ်ခုကို တိုက်ရိုက်အသုံးပြု၍ Repository ကို ဖွင့်နိုင်သည်။ ဥပမာအားဖြင့် လက်ရှိ Repository ၏ URL သည် [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) ဖြစ်သည်။ GitHub domain ကို `VSCode.dev/github` ဖြင့် အစားထိုးပြီး Repository ကို တိုက်ရိုက်ဖွင့်နိုင်သည်။ ရလဒ် URL သည် [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners) ဖြစ်ပါမည်။
+
+## ဖိုင်များကို ပြင်ဆင်ခြင်း
+
+Repository ကို Browser/VSCode.dev တွင် ဖွင့်ပြီးပါက ပရောဂျက်ကို ပြင်ဆင်ရန် နောက်တစ်ဆင့်ကို ဆက်လုပ်ပါမည်။
+
+### ၁။ ဖိုင်အသစ်တစ်ခု ဖန်တီးခြင်း
+
+ဖိုင်အသစ်တစ်ခုကို ရှိပြီးသားဖိုလ်ဒါအတွင်း သို့မဟုတ် Root Directory/Folder တွင် ဖန်တီးနိုင်သည်။ ဖိုင်အသစ်ဖန်တီးရန် ဖိုင်ကို သိမ်းဆည်းလိုသောနေရာ/Directory ကို ဖွင့်ပြီး _'New file ...'_ အိုင်ကွန်ကို နှိပ်ပါ၊ နာမည်ပေးပြီး Enter နှိပ်ပါ။
+
+![Create a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.my.png)
+
+### ၂။ Repository တွင် ဖိုင်ကို ပြင်ဆင်ပြီး သိမ်းဆည်းခြင်း
+
+VSCode.dev ကို အသုံးပြုခြင်းသည် သင့်ပရောဂျက်ကို အလျင်အမြန် ပြင်ဆင်ရန် အထောက်အကူဖြစ်သည်။ သင့်ကုဒ်ကို ပြင်ဆင်ရန် _Explorer_ အိုင်ကွန်ကို နှိပ်ပြီး Repository အတွင်းရှိ ဖိုင်များနှင့် ဖိုလ်ဒါများကို ကြည့်ပါ။ ဖိုင်တစ်ခုကို ရွေးပြီး Code Area တွင် ဖွင့်ပါ၊ ပြင်ဆင်ပြီး သိမ်းဆည်းပါ။
+
+![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.my.png)
+
+## Extension များ အသုံးပြုခြင်း
+
+VSCode တွင် Extension များကို ထည့်သွင်းခြင်းဖြင့် သင့်ဖွံ့ဖြိုးတိုးတက်မှု လုပ်ငန်းစဉ်ကို တိုးတက်စေမည့် အင်္ဂါရပ်အသစ်များနှင့် စိတ်ကြိုက်ဖွဲ့စည်းမှုများကို ထည့်သွင်းနိုင်သည်။ Extension များသည် အများအားဖြင့် Generic Extension များ သို့မဟုတ် Programming Language အခြေပြု Extension များ ဖြစ်သည်။
+
+---
+
+## လုပ်ငန်းတာဝန်
+
+[VSCode.dev ကို အသုံးပြု၍ CV/Resume ဝဘ်ဆိုဒ်တစ်ခု ဖန်တီးပါ](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+[VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) နှင့် ၎င်း၏ အခြားအင်္ဂါရပ်များအကြောင်း ပိုမိုဖတ်ရှုပါ။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့ရှိသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/8-code-editor/1-using-a-code-editor/assignment.md b/translations/my/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..2088a16e
--- /dev/null
+++ b/translations/my/8-code-editor/1-using-a-code-editor/assignment.md
@@ -0,0 +1,247 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2fcb983b8dbadadb1bc2e97f8c12dac5",
+  "translation_date": "2025-08-27T22:42:32+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "my"
+}
+-->
+# vscode.dev ကို အသုံးပြု၍ ရှုထောင့်ဝက်ဘ်ဆိုက် တစ်ခု ဖန်တီးပါ
+
+_သင့်ကို အလုပ်အကိုင်ရှာဖွေရေးအရာရှိက သင့်ရဲ့ ရှုထောင့်ကို တောင်းလိုက်တဲ့အခါ၊ URL တစ်ခုပေးလိုက်တာ ဘယ်လောက်အေးမြလဲ?_ 😎
+
+## ရည်မှန်းချက်များ
+
+ဒီအလုပ်ကို လုပ်ပြီးဆုံးတဲ့အခါ၊ သင်သည် အောက်ပါအရာများကို သင်ယူနိုင်ပါမည်-
+
+- သင့်ရဲ့ ရှုထောင့်ကို ပြသနိုင်မည့် ဝက်ဘ်ဆိုက်တစ်ခု ဖန်တီးခြင်း
+
+### လိုအပ်ချက်များ
+
+1. GitHub အကောင့်တစ်ခု။ [GitHub](https://github.com/) သို့ သွားပြီး အကောင့်မရှိသေးပါက ဖန်တီးပါ။
+
+## လုပ်ဆောင်ရန်အဆင့်များ
+
+**အဆင့် ၁:** GitHub Repository အသစ်တစ်ခု ဖန်တီးပြီး `my-resume` ဟု အမည်ပေးပါ။
+
+**အဆင့် ၂:** သင့် repository တွင် `index.html` ဖိုင်တစ်ခု ဖန်တီးပါ။ github.com တွင် အနည်းဆုံး ဖိုင်တစ်ခု ထည့်ရန်လိုအပ်သည်၊ အကြောင်းမူကား vscode.dev တွင် အလွတ် repository မဖွင့်နိုင်ပါ။
+
+`creating a new file` လင့်ခ်ကို နှိပ်ပြီး `index.html` ဟု အမည်ပေးပါ၊ ထို့နောက် `Commit new file` ခလုတ်ကို ရွေးပါ။
+
+![github.com တွင် ဖိုင်အသစ်တစ်ခု ဖန်တီးပါ](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.my.png)
+
+**အဆင့် ၃:** [VSCode.dev](https://vscode.dev) ကို ဖွင့်ပြီး `Open Remote Repository` ခလုတ်ကို ရွေးပါ။
+
+သင့်ရဲ့ ရှုထောင့်ဆိုက်အတွက် ဖန်တီးထားသော repository ၏ URL ကို ကူးယူပြီး input box တွင် ထည့်ပါ-
+
+_`your-username` ကို သင့် GitHub username ဖြင့် အစားထိုးပါ_
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ အောင်မြင်ပါက သင့် project နှင့် index.html ဖိုင်ကို browser တွင်ရှိသော text editor တွင် ဖွင့်ထားသည်ကို မြင်ရပါမည်။
+
+![ဖိုင်အသစ်တစ်ခု ဖန်တီးပါ](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.my.png)
+
+**အဆင့် ၄:** `index.html` ဖိုင်ကို ဖွင့်ပြီး အောက်ပါ code ကို သင့် code area တွင် ကူးထည့်ပြီး သိမ်းဆည်းပါ။
+
+<details>
+    <summary><b>သင့်ရဲ့ ရှုထောင့်ဝက်ဘ်ဆိုက်၏ အကြောင်းအရာကို တာဝန်ယူသော HTML code</b></summary>
+    
+        <html>
+
+            <head>
+                <link href="style.css" rel="stylesheet">
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+                <title>သင့်နာမည်ကို ဒီမှာရေးပါ!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- ရှုထောင့် header သင့်နာမည်နှင့် အလုပ်အကိုင် -->
+                    <h1>သင့်နာမည်ကို ဒီမှာရေးပါ!</h1>
+                    <hr>
+                    သင့်အလုပ်အကိုင်!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>ဆက်သွယ်ရန်</h2>
+                            <!-- ဆက်သွယ်ရန် အချက်အလက်များ -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">သင့်အီးမေးလ်ကို ဒီမှာရေးပါ</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">သင့် GitHub username ကို ဒီမှာရေးပါ!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">သင့် LinkedIn username ကို ဒီမှာရေးပါ!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>ကျွမ်းကျင်မှုများ</h2>
+                            <!-- သင့်ကျွမ်းကျင်မှုများ -->
+                            <ul>
+                                <li>ကျွမ်းကျင်မှု ၁!</li>
+                                <li>ကျွမ်းကျင်မှု ၂!</li>
+                                <li>ကျွမ်းကျင်မှု ၃!</li>
+                                <li>ကျွမ်းကျင်မှု ၄!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>ပညာရေး</h2>
+                            <!-- သင့်ပညာရေး -->
+                            <h3>သင်ယူခဲ့သော ဘာသာရပ်ကို ဒီမှာရေးပါ!</h3>
+                            <p>
+                                သင်ယူခဲ့သော သင်တန်းကျောင်းကို ဒီမှာရေးပါ!
+                            </p>
+                            <p>
+                                စတင်နှစ် - ပြီးဆုံးနှစ်
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>အကြောင်းအရာ</h2>
+                            <!-- သင့်အကြောင်း -->
+                            <p>သင့်အကြောင်းကို အတိုချုပ်ရေးပါ!</p>
+                        </section>
+                        <section>
+                            <h2>အလုပ်အတွေ့အကြုံ</h2>
+                            <!-- သင့်အလုပ်အတွေ့အကြုံ -->
+                            <h3>အလုပ်အမည်</h3>
+                            <p>
+                                အဖွဲ့အစည်းအမည် | စတင်လ – ပြီးဆုံးလ
+                            </p>
+                            <ul>
+                                    <li>တာဝန် ၁ - သင်လုပ်ခဲ့တာရေးပါ!</li>
+                                    <li>တာဝန် ၂ - သင်လုပ်ခဲ့တာရေးပါ!</li>
+                                    <li>သင့်ရဲ့ အလုပ်အကျိုးသက်ရောက်မှုကိုရေးပါ</li>
+                                    
+                            </ul>
+                            <h3>အလုပ်အမည် ၂</h3>
+                            <p>
+                                အဖွဲ့အစည်းအမည် | စတင်လ – ပြီးဆုံးလ
+                            </p>
+                            <ul>
+                                    <li>တာဝန် ၁ - သင်လုပ်ခဲ့တာရေးပါ!</li>
+                                    <li>တာဝန် ၂ - သင်လုပ်ခဲ့တာရေးပါ!</li>
+                                    <li>သင့်ရဲ့ အလုပ်အကျိုးသက်ရောက်မှုကိုရေးပါ</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+HTML code တွင် _placeholder text_ များကို သင့်ရဲ့ ရှုထောင့်အချက်အလက်များဖြင့် အစားထိုးပါ။
+
+**အဆင့် ၅:** My-Resume folder တွင် `New File ...` icon ကို နှိပ်ပြီး သင့် project တွင် `style.css` နှင့် `codeswing.json` ဖိုင် ၂ ခု ဖန်တီးပါ။
+
+**အဆင့် ၆:** `style.css` ဖိုင်ကို ဖွင့်ပြီး အောက်ပါ code ကို ကူးထည့်ပြီး သိမ်းဆည်းပါ။
+
+<details>
+        <summary><b>ဝက်ဘ်ဆိုက် layout ကို ဖော်ပြရန် CSS code</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>
+
+**အဆင့် ၆:** `codeswing.json` ဖိုင်ကို ဖွင့်ပြီး အောက်ပါ code ကို ကူးထည့်ပြီး သိမ်းဆည်းပါ။
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**အဆင့် ၇:** `Codeswing extension` ကို install လုပ်ပြီး code area တွင် ရှုထောင့်ဝက်ဘ်ဆိုက်ကို ကြည့်ရှုပါ။
+
+Activity bar တွင် _`Extensions`_ icon ကို နှိပ်ပြီး Codeswing ဟု ရိုက်ထည့်ပါ။ Expanded activity bar တွင် _blue install button_ ကို နှိပ်၍ install လုပ်ပါ၊ သို့မဟုတ် extension ကို ရွေးပြီး install button ကို အသုံးပြုပါ။ Extension install ပြီးချိန်တွင် သင့် project တွင် ပြောင်းလဲမှုများကို ကြည့်ရှုနိုင်ပါမည် 😃
+
+![Extensions install](../../../../8-code-editor/images/install-extension.gif)
+
+Extension install ပြီးနောက် သင့် screen တွင် အောက်ပါအတိုင်း မြင်ရပါမည်။
+
+![Codeswing extension in action](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.my.png)
+
+ပြောင်းလဲမှုများကို စိတ်ကျေနပ်ပါက `Changes` folder တွင် `+` button ကို နှိပ်ပြီး ပြောင်းလဲမှုများကို stage လုပ်ပါ။
+
+ပြောင်းလဲမှုအကြောင်းဖော်ပြသော commit message ရိုက်ထည့်ပြီး `check` ကို နှိပ်ပါ။ Project အလုပ်ပြီးဆုံးပါက GitHub repository သို့ ပြန်သွားရန် အပေါ်ဘက် ဘယ်ဖက်ရှိ hamburger menu icon ကို ရွေးပါ။
+
+ဂုဏ်ယူပါတယ် 🎉 သင်သည် vscode.dev ကို အသုံးပြု၍ ရှုထောင့်ဝက်ဘ်ဆိုက်တစ်ခုကို အဆင့်အနည်းငယ်ဖြင့် ဖန်တီးပြီးပါပြီ။
+
+## 🚀 စိန်ခေါ်မှု
+
+သင့်တွင် ပြောင်းလဲမှုများလုပ်ခွင့်ရှိသော remote repository တစ်ခု ဖွင့်ပြီး ဖိုင်များကို update လုပ်ပါ။ ထို့နောက် သင့်ပြောင်းလဲမှုများနှင့်အတူ branch အသစ်တစ်ခု ဖန်တီးပြီး Pull Request တင်ကြည့်ပါ။
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+[VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) နှင့် ၎င်း၏ အခြား features များအကြောင်း ပိုမိုဖတ်ရှုပါ။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/CODE_OF_CONDUCT.md b/translations/my/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..c3e1bf7e
--- /dev/null
+++ b/translations/my/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-27T21:58:22+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "my"
+}
+-->
+# Microsoft Open Source Code of Conduct
+
+ဒီပရောဂျက်သည် [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) ကို လက်ခံထားပါသည်။
+
+အရင်းအမြစ်များ:
+
+- [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)
+- မေးခွန်းများ သို့မဟုတ် စိုးရိမ်မှုများရှိပါက [opencode@microsoft.com](mailto:opencode@microsoft.com) ကို ဆက်သွယ်ပါ
+
+---
+
+**ဝက်ဘ်ဆိုက်မှတ်ချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေပါသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်ဆိုမှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတည်သောရင်းမြစ်အဖြစ် သတ်မှတ်ရန် လိုအပ်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပြန်ဆိုမှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားများ သို့မဟုတ် အဓိပ္ပါယ်မှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/CONTRIBUTING.md b/translations/my/CONTRIBUTING.md
new file mode 100644
index 00000000..dbf7858c
--- /dev/null
+++ b/translations/my/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-27T21:56:59+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "my"
+}
+-->
+# အထောက်အပံ့ပေးခြင်း
+
+ဒီပရောဂျက်ဟာ အထောက်အပံ့ပေးမှုများနှင့် အကြံပြုချက်များကို ကြိုဆိုပါတယ်။ အများစုသော အထောက်အပံ့ပေးမှုများအတွက် Contributor License Agreement (CLA) ကို သဘောတူရန် လိုအပ်ပါသည်။ ဒီ CLA က သင့်အနေဖြင့် သင့်အထောက်အပံ့ကို အသုံးပြုခွင့်ပေးရန် အခွင့်အရေးရှိကြောင်းနှင့် အမှန်တကယ်ပေးထားကြောင်းကို ကြေညာပေးရမည်ဖြစ်သည်။ အသေးစိတ်အချက်အလက်များကို [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon) တွင် ကြည့်ရှုနိုင်ပါသည်။
+
+သင့်အနေဖြင့် pull request တင်သည့်အခါ CLA-bot က သင့်အနေဖြင့် CLA ပေးရန် လိုအပ်မလိုအပ်ကြောင်းကို အလိုအလျောက် စစ်ဆေးပြီး PR ကို သင့်တော်အောင် အမှတ်အသား (label, comment) ပေးပါမည်။ Bot ပေးထားသော အညွှန်းများကို လိုက်နာရုံဖြင့် အဆင်ပြေပါသည်။ CLA ကို သင့်အနေဖြင့် ကျွန်ုပ်တို့၏ CLA ကို အသုံးပြုသည့် repository အားလုံးတွင် တစ်ကြိမ်သာ လိုအပ်ပါသည်။ ထို့အပြင် သင့်အနေဖြင့် အပြောင်းအလဲကို ဘာကြောင့် ပြုလုပ်ခဲ့သည်ကို ရှင်းပြရန် ကြိုးစားပါက ကျွန်ုပ်တို့၏ တောင်းဆိုမှုကို ပိုမိုနားလည်နိုင်ပါသည်။
+
+ဒီပရောဂျက်ဟာ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) ကို လက်ခံထားပါသည်။  
+အသေးစိတ်အချက်အလက်များအတွက် [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon) ကို ကြည့်ရှုနိုင်ပါသည်  
+သို့မဟုတ် [opencode@microsoft.com](mailto:opencode@microsoft.com) ကို ဆက်သွယ်ပြီး ထပ်မံမေးမြန်းနိုင်ပါသည်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲသုံးစားမှု သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/README.md b/translations/my/README.md
new file mode 100644
index 00000000..54924959
--- /dev/null
+++ b/translations/my/README.md
@@ -0,0 +1,201 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b672130244189715ac084c3259f6ab58",
+  "translation_date": "2025-08-27T21:55:02+00:00",
+  "source_file": "README.md",
+  "language_code": "my"
+}
+-->
+[![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 Cloud Advocates မှ ၁၂ ပတ်ကြာ သင်ရိုးတစ်ခုဖြင့် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှုအခြေခံများကို သင်ယူပါ။ ၂၄ သင်ခန်းစာတစ်ခုစီတွင် JavaScript, CSS နှင့် HTML ကို terrariums, browser extensions, space games စသည့် လက်တွေ့လုပ်ငန်းများမှတစ်ဆင့် လေ့လာနိုင်ပါသည်။ စစ်ဆေးမေးခွန်းများ၊ ဆွေးနွေးပွဲများနှင့် လက်တွေ့အလုပ်များဖြင့် ပါဝင်ဆင်နွှဲပါ။ လေ့လာမှုကို ပိုမိုထိရောက်စေရန် ပရောဂျက်အခြေပြု သင်ကြားမှုနည်းလမ်းများကို အသုံးပြုပါ။ ယနေ့မှစတင်ပြီး သင်၏ coding ခရီးကို စတင်လိုက်ပါ!  
+
+#### 🧑‍🎓 _ကျောင်းသားလား?_
+
+[**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) သို့ သွားပါ။ အခြေခံသင်ရိုးများ၊ ကျောင်းသားအထုပ်များနှင့် အခမဲ့လက်မှတ်ရယူနိုင်မည့် နည်းလမ်းများကို တွေ့နိုင်ပါသည်။ ဤစာမျက်နှာကို Bookmark လုပ်ထားပြီး လစဉ်အကြောင်းအရာများ ပြောင်းလဲသည့်အခါ ပြန်လည်စစ်ဆေးပါ။  
+
+### 📣 ကြေညာချက် - _Generative AI သင်ရိုးသစ်_ JavaScript အတွက် မကြာသေးမီက ထုတ်ပြန်ခဲ့သည်
+
+Generative AI သင်ရိုးသစ်ကို လက်မလွှတ်ပါနှင့်!  
+
+[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပြီး စတင်ပါ!  
+
+<div>  
+  <img src="./images/background.png" width="600px" />  
+</div>  
+
+- အခြေခံမှ RAG အထိ အရာအားလုံးကို ဖုံးကွယ်ထားသော သင်ခန်းစာများ  
+- GenAI နှင့် ကျွန်ုပ်တို့၏ အပလီကေးရှင်းကို အသုံးပြု၍ သမိုင်းဆိုင်ရာ စာရင်းဇယားများနှင့် အပြန်အလှန်ဆက်သွယ်ပါ  
+- စိတ်ဝင်စားဖွယ် ဇာတ်လမ်းတစ်ပုဒ်ဖြင့် အချိန်ခရီးသွားပါ!  
+
+<div>  
+  <img src="./images/character.png" width="600px" />  
+</div>  
+
+သင်ခန်းစာတစ်ခုစီတွင် အလုပ်တာဝန်၊ အသိစစ်ဆေးမှုနှင့် စိန်ခေါ်မှုများ ပါဝင်ပြီး အောက်ပါအရာများကို လေ့လာနိုင်ပါသည် -  
+- Prompting နှင့် prompt engineering  
+- Text နှင့် image app ဖန်တီးခြင်း  
+- Search apps  
+
+[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပြီး စတင်ပါ!  
+
+## 🌱 စတင်ရန်
+
+> **ဆရာများ**၊ ဤသင်ရိုးကို မည်သို့အသုံးပြုရမည်ဆိုသည်ကို [အကြံပြုချက်များ](for-teachers.md) ထည့်သွင်းထားပါသည်။ ကျွန်ုပ်တို့၏ [ဆရာများဆွေးနွေးပွဲ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) တွင် သင့်အကြံပြုချက်ကို မျှဝေပါ!  
+
+**[သင်ယူသူများ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**၊ သင်ခန်းစာတစ်ခုစီအတွက် သင်ခန်းစာမတိုင်မီ စစ်ဆေးမေးခွန်းဖြင့် စတင်ပြီး သင်ခန်းစာအကြောင်းအရာကို ဖတ်ရှုပါ၊ လှုပ်ရှားမှုများကို ပြီးမြောက်စေပြီး သင်ခန်းစာပြီးနောက် စစ်ဆေးမေးခွန်းဖြင့် သင်၏နားလည်မှုကို စစ်ဆေးပါ။  
+
+သင်ယူမှုအတွေ့အကြုံကို ပိုမိုကောင်းမွန်စေရန် သင်၏အတန်းဖော်များနှင့် ပူးပေါင်းပြီး ပရောဂျက်များကို အတူတူလုပ်ဆောင်ပါ! [ဆွေးနွေးပွဲ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) တွင် ဆွေးနွေးမှုများကို လှုံ့ဆော်ပြီး ကျွန်ုပ်တို့၏ moderator အဖွဲ့သည် သင့်မေးခွန်းများကို ဖြေကြားပေးမည်ဖြစ်သည်။  
+
+သင်၏ပညာရေးကို ပိုမိုတိုးတက်စေရန် [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ကို လေ့လာရန် အထူးအကြံပြုပါသည်။  
+
+### 📋 သင့်ပတ်ဝန်းကျင်ကို ပြင်ဆင်ခြင်း
+
+ဤသင်ရိုးသည် ဖွံ့ဖြိုးတိုးတက်မှုပတ်ဝန်းကျင်ကို အသင့်ဖြစ်စေပါသည်! စတင်ရန်အခါ [Codespace](https://github.com/features/codespaces/) (_browser-based, installation မလိုအပ်သော ပတ်ဝန်းကျင်_) သို့မဟုတ် သင့်ကွန်ပျူတာတွင် [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကဲ့သို့သော text editor ကို အသုံးပြု၍ လိုက်လျောစွာ အသုံးပြုနိုင်ပါသည်။  
+
+#### သင့် repository ကို ဖန်တီးပါ
+သင့်အလုပ်ကို လွယ်ကူစွာ သိမ်းဆည်းရန် သင့် GitHub အကောင့်တွင် repository မိမိပိုင်တစ်ခုကို ဖန်တီးရန် အကြံပြုပါသည်။ ဤစာမျက်နှာ၏ ထိပ်တွင်ရှိသော **Use this template** ခလုတ်ကို နှိပ်ပါ။  
+
+အဆင့်များကို လိုက်နာပါ -  
+1. **Repository ကို Fork လုပ်ပါ**: ဤစာမျက်နှာ၏ ညာဘက်ထိပ်တွင်ရှိသော "Fork" ခလုတ်ကို နှိပ်ပါ။  
+2. **Repository ကို Clone လုပ်ပါ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Codespace တွင် သင်ရိုးကို လည်ပတ်ခြင်း
+
+သင့်ဖန်တီးထားသော repository တွင် **Code** ခလုတ်ကို နှိပ်ပြီး **Open with Codespaces** ကို ရွေးပါ။ ဤသည်သည် သင့်အတွက် အသစ်သော Codespace တစ်ခုကို ဖန်တီးပေးမည်ဖြစ်သည်။  
+
+<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>  
+
+#### သင်၏ကွန်ပျူတာတွင် သင်ရိုးကို လည်ပတ်ခြင်း
+
+သင်၏ကွန်ပျူတာတွင် သင်ရိုးကို လည်ပတ်ရန်အတွက် text editor, browser နှင့် command line tool တစ်ခုလိုအပ်ပါသည်။ ကျွန်ုပ်တို့၏ ပထမဆုံးသင်ခန်းစာ [Programming Languages နှင့် Tools of the Trade အကြောင်းအရာ](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages) သည် သင့်အတွက် အကောင်းဆုံးဖြစ်မည့် tools များကို ရွေးချယ်ရန် လမ်းညွှန်ပေးပါမည်။  
+
+ကျွန်ုပ်တို့၏ အကြံပြုချက်မှာ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကို editor အဖြစ် အသုံးပြုရန်ဖြစ်ပြီး၊ ၎င်းတွင် [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ပါဝင်သည်။ Visual Studio Code ကို [ဤနေရာတွင်](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ဒေါင်းလုပ်လုပ်နိုင်ပါသည်။  
+
+1. သင့် repository ကို သင့်ကွန်ပျူတာသို့ Clone လုပ်ပါ။ **Code** ခလုတ်ကို နှိပ်ပြီး URL ကို ကူးယူပါ -  
+
+    <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) တွင် [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ကို ဖွင့်ပြီး အောက်ပါ command ကို run လုပ်ပါ -  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Visual Studio Code တွင် folder ကို ဖွင့်ပါ။ **File** > **Open Folder** ကို နှိပ်ပြီး သင့် Clone လုပ်ထားသော folder ကို ရွေးပါ။  
+
+> Visual Studio Code အတွက် အကြံပြုသော extensions -  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML စာမျက်နှာများကို Visual Studio Code တွင် preview လုပ်ရန်  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - သင့် code ကို ပိုမိုမြန်ဆန်စွာ ရေးရန် ကူညီပေးသည်  
+
+## 📂 သင်ခန်းစာတစ်ခုစီတွင် ပါဝင်သည် -
+
+- စိတ်ကြိုက် sketchnote  
+- စိတ်ကြိုက် အပိုဗီဒီယို  
+- သင်ခန်းစာမတိုင်မီ စစ်ဆေးမေးခွန်း  
+- ရေးသားထားသော သင်ခန်းစာ  
+- ပရောဂျက်အခြေပြု သင်ခန်းစာများအတွက် လှုပ်ရှားမှုအဆင့်ဆင့် လမ်းညွှန်ချက်များ  
+- အသိစစ်ဆေးမှုများ  
+- စိန်ခေါ်မှု  
+- အပိုဖတ်ရှုရန်စာရင်း  
+- အလုပ်တာဝန်  
+- သင်ခန်းစာပြီးနောက် စစ်ဆေးမေးခွန်း  
+
+> **စစ်ဆေးမေးခွန်းများအကြောင်းမှတ်ချက်**: စစ်ဆေးမေးခွန်းအားလုံးကို Quiz-app folder တွင် ထည့်သွင်းထားပြီး၊ စုစုပေါင်း ၄၈ ခုရှိပြီး တစ်ခုစီတွင် မေးခွန်း ၃ ခုပါဝင်သည်။ ၎င်းတို့ကို သင်ခန်းစာများမှ လင့်ခ်ထားပြီး Quiz app ကို locally သို့မဟုတ် Azure တွင် တင်နိုင်သည်။ `quiz-app` folder တွင် လမ်းညွှန်ချက်များကို လိုက်နာပါ။  
+
+## 🗃️ သင်ခန်းစာများ
+
+|     |                       ပရောဂျက်အမည်                       |                            သင်ကြားမည့်အရာများ                             | သင်ယူရမည့်ရည်မှန်းချက်များ                                                                                                                 |                                                         သင်ခန်းစာလင့်ခ်                                                          |         စာရေးသူ          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     စတင်ခြင်း                      |           Programming နှင့် Tools of the Trade အကြောင်းအရာများ           | Programming ဘာသာစကားများ၏ အခြေခံအချက်များနှင့် ပရော်ဖက်ရှင်နယ် developer များအလုပ်လုပ်ရာတွင် အသုံးပြုသော software များကို လေ့လာပါ | [Programming Languages နှင့် Tools of the Trade အကြောင်း](1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     စတင်ခြင်း                      |             GitHub အခြေခံများ၊ အဖွဲ့နှင့်အတူ အလုပ်လုပ်ခြင်း             | GitHub ကို သင်၏ပရောဂျက်တွင် မည်သို့အသုံးပြုရမည်၊ အခြားသူများနှင့် code base တွင် မည်သို့ပူးပေါင်းဆောင်ရွက်ရမည်                                                    |                            [GitHub အခြေခံများ](1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     စတင်ခြင်း                      |                             ဝက်ဘ်လက်လှမ်းမီမှု                              | ဝက်ဘ်လက်လှမ်းမီမှု၏ အခြေခံအချက်များကို လေ့လာပါ                                                                                               |                       [ဝက်ဘ်လက်လှမ်းမီမှု အခြေခံ](1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        JS အခြေခံ                         |                         JavaScript Data Types                          | JavaScript data types အခြေခံများကို လေ့လာပါ                                                                                                 |                                       [Data Types](2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        JS အခြေခံ                         |                         Functions နှင့် Methods                          | Functions နှင့် methods များကို အသုံးပြု၍ application ၏ logic flow ကို စီမံခန့်ခွဲရန် လေ့လာပါ                                                             |                              [Functions နှင့် Methods](2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |  
+| 06  |                        JS အခြေခံ                         |                        JS ဖြင့် ဆုံးဖြတ်ချက်များလုပ်ခြင်း                        | Decision-making နည်းလမ်းများကို အသုံးပြု၍ သင့် code တွင် အခြေအနေများ ဖန်တီးရန် လေ့လာပါ                                                           |                                 [ဆုံးဖြတ်ချက်များလုပ်ခြင်း](2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        JS အခြေခံ                         |                            Arrays နှင့် Loops                            | JavaScript တွင် data များကို arrays နှင့် loops အသုံးပြု၍ အလုပ်လုပ်ရန် လေ့လာပါ                                                                                 |                                   [Arrays နှင့် Loops](2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terrarium](3-terrarium/solution/README.md)       |                            HTML ကို လက်တွေ့ကျကျ အသုံးပြုခြင်း                            | Online terrarium တစ်ခု ဖန်တီးရန် HTML ကို အသုံးပြု၍ layout တစ်ခု ဖန်တီးပါ                                                         |                                 [HTML အကြို](3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terrarium](3-terrarium/solution/README.md)       |                            CSS ကို လက်တွေ့ကျကျ အသုံးပြုခြင်း                             | Online terrarium ကို style ပြုလုပ်ရန် CSS ကို အသုံးပြုပါ၊ CSS အခြေခံများနှင့် page ကို responsive ဖြစ်စေရန် အာရုံစိုက်ပါ                     |                                  [CSS အကြို](3-
+| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         ဘရောက်ဆာများနှင့်အလုပ်လုပ်ခြင်း                          | ဘရောက်ဆာများ၏ လုပ်ဆောင်ပုံ၊ သမိုင်းကြောင်းနှင့် ဘရောက်ဆာ extension ၏ ပထမဆုံး အစိတ်အပိုင်းများကို ဖွဲ့စည်းပုံကို လေ့လာပါ |                               [About Browsers](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Form တစ်ခုတည်ဆောက်ခြင်း၊ API ကို ခေါ်ယူခြင်းနှင့် local storage တွင် variable များသိမ်းဆည်းခြင်း | JavaScript ကို အသုံးပြု၍ local storage တွင် သိမ်းဆည်းထားသော variable များကို အသုံးပြု၍ API ကို ခေါ်ယူနိုင်သော ဘရောက်ဆာ extension ကို တည်ဆောက်ပါ |                [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) |          ဘရောက်ဆာ၏ နောက်ခံလုပ်ငန်းစဉ်များ၊ ဝဘ် performance          | Extension ၏ icon ကို စီမံရန် ဘရောက်ဆာ၏ နောက်ခံလုပ်ငန်းစဉ်များကို အသုံးပြုပါ၊ ဝဘ် performance နှင့် အချို့သော optimization များကို လေ့လာပါ |             [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](/6-space-game/solution/README.md)           |             JavaScript ဖြင့် အဆင့်မြင့်ဂိမ်းတည်ဆောက်ခြင်း             | Class နှင့် Composition နှစ်မျိုးလုံးကို အသုံးပြု၍ Inheritance ကို လေ့လာပါ၊ Pub/Sub pattern ကိုလေ့လာပြီး ဂိမ်းတစ်ခုတည်ဆောက်ရန် ပြင်ဆင်ပါ |                      [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Canvas တွင် ရေးဆွဲခြင်း                            | Screen ပေါ်တွင် element များကို ရေးဆွဲရန် အသုံးပြုသော Canvas API ကို လေ့လာပါ |                                [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Screen ပေါ်တွင် element များကို ရွှေ့ခြင်း                    | Cartesian coordinates နှင့် Canvas API ကို အသုံးပြု၍ element များကို ရွှေ့လှလှပပ လုပ်ဆောင်ပုံကို ရှာဖွေပါ |                           [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Collision detection                           | Keypress များကို အသုံးပြု၍ element များကို တိုက်မိစေပြီး တုံ့ပြန်မှုကို ဖန်တီးပါ၊ ဂိမ်း၏ performance ကို အာမခံရန် cooldown function ကို ထည့်သွင်းပါ |                              [Collision Detection](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             အမှတ်တွက်ခြင်း                              | ဂိမ်း၏ အခြေအနေနှင့် performance အပေါ် မူတည်၍ သင်္ချာတွက်ချက်မှုများကို လုပ်ဆောင်ပါ |                                    [Keeping Score](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     ဂိမ်းကို အဆုံးသတ်ခြင်းနှင့် ပြန်စတင်ခြင်း                     | Asset များကို ရှင်းလင်းခြင်းနှင့် variable တန်ဖိုးများကို ပြန်လည်သတ်မှတ်ခြင်းအပါအဝင် ဂိမ်းကို အဆုံးသတ်ခြင်းနှင့် ပြန်စတင်ခြင်းကို လေ့လာပါ |                                [The Ending Condition](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 Web App တစ်ခုတွင် HTML Template များနှင့် Route များ                 | Routing နှင့် HTML Template များကို အသုံးပြု၍ multipage website architecture တစ်ခု၏ အခြေခံကို ဖန်တီးပုံကို လေ့လာပါ |                            [HTML Templates and Routes](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Login နှင့် Registration Form တစ်ခုတည်ဆောက်ခြင်း                   | Form များတည်ဆောက်ခြင်းနှင့် validation routine များကို စီမံပုံကို လေ့လာပါ |                                           [Forms](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Data ကို ရယူခြင်းနှင့် အသုံးပြုခြင်းနည်းလမ်းများ                   | App ၏ data ရေစီးကြောင်း၊ data ကို fetch လုပ်ခြင်း၊ သိမ်းဆည်းခြင်းနှင့် ဖျက်ပစ်ခြင်းနည်းလမ်းများကို လေ့လာပါ |                                            [Data](/7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      State Management ၏ အယူအဆများ                      | App ၏ state ကို retain လုပ်ပုံနှင့် programmatically စီမံပုံကို လေ့လာပါ |                                [State Management](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+
+## 🏫 ပညာရေးဆိုင်ရာ
+
+ကျွန်ုပ်တို့၏ သင်ရိုးညွှန်းတန်းကို အဓိက ပညာရေးဆိုင်ရာ မူဝါဒနှစ်ခုအတိုင်း ဖန်တီးထားပါသည်။
+* ပရောဂျက်အခြေခံ သင်ယူမှု
+* မကြာခဏ စစ်မေးခွန်းများ
+
+ဒီအစီအစဉ်သည် JavaScript, HTML, CSS ၏ အခြေခံများနှင့် ယနေ့ဝဘ် developer များအသုံးပြုသော နောက်ဆုံးပေါ် tools နှင့် နည်းလမ်းများကို သင်ကြားပေးပါသည်။ ကျောင်းသားများသည် typing game, virtual terrarium, သဘာဝပတ်ဝန်းကျင်နှင့်သဟဇာတဖြစ်သော browser extension, space-invader-style game, နှင့် စီးပွားရေးလုပ်ငန်းများအတွက် banking app တို့ကို တည်ဆောက်ခြင်းအားဖြင့် လက်တွေ့အတွေ့အကြုံရရှိနိုင်မည်ဖြစ်သည်။ အစီအစဉ်၏ အဆုံးတွင် ကျောင်းသားများသည် ဝဘ်တိုးတက်မှုအပေါ် solid နားလည်မှုရရှိထားမည်ဖြစ်သည်။
+
+> 🎓 ဒီသင်ရိုးညွှန်းတန်း၏ ပထမဆုံး သင်ခန်းစာများကို Microsoft Learn တွင် [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) အဖြစ် လေ့လာနိုင်ပါသည်။
+
+အကြောင်းအရာများကို ပရောဂျက်များနှင့် ကိုက်ညီစေရန် အာရုံစိုက်ခြင်းအားဖြင့် ကျောင်းသားများအတွက် ပိုမိုစိတ်ဝင်စားဖွယ်ဖြစ်စေပြီး အယူအဆများကို ပိုမိုမှတ်မိစေမည်ဖြစ်သည်။ ကျွန်ုပ်တို့သည် JavaScript အခြေခံများကို မိတ်ဆက်ပေးသော သင်ခန်းစာများစွာကို ရေးသားထားပြီး "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" tutorial video collection မှ video တစ်ခုနှင့် တွဲဖက်ထားပါသည်။ ဒီ collection ၏ အချို့သောရေးသားသူများသည် ဒီသင်ရိုးညွှန်းတန်းကိုလည်း အထောက်အကူပြုခဲ့ပါသည်။
+
+ထို့အပြင်၊ အတန်းမတက်မီ စစ်မေးခွန်းတစ်ခုသည် ကျောင်းသား၏ အာရုံစိုက်မှုကို သင်ခန်းစာအပေါ် ဦးတည်စေပြီး အတန်းပြီးနောက် စစ်မေးခွန်းတစ်ခုသည် အယူအဆများကို ပိုမိုမှတ်မိစေမည်ဖြစ်သည်။ ဒီသင်ရိုးညွှန်းတန်းကို flexible ဖြစ်စေရန်နှင့် ပျော်ရွှင်စေရန် ရည်ရွယ်ဖန်တီးထားပြီး အစအဆုံး သို့မဟုတ် အစိတ်အပိုင်းအချို့ကို လေ့လာနိုင်ပါသည်။ ပရောဂျက်များသည် သေးငယ်ပြီး 12-ပတ်အချိန်ကာလ၏ အဆုံးတွင် ပိုမိုရှုပ်ထွေးလာမည်ဖြစ်သည်။
+
+JavaScript framework များကို မိတ်ဆက်ခြင်းကို ရည်ရွယ်လျှောက်လွှာ developer အဖြစ် framework ကို အသုံးပြုမီ အခြေခံကျသော ကျွမ်းကျင်မှုများကို အာရုံစိုက်ရန် ရည်ရွယ်၍ ရှောင်ရှားထားသော်လည်း၊ ဒီသင်ရိုးညွှန်းတန်းကို ပြီးမြောက်ပြီးနောက် လေ့လာရန်ကောင်းသော နောက်တစ်ဆင့်မှာ "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" video collection ကို လေ့လာခြင်းဖြစ်သည်။
+
+> ကျွန်ုပ်တို့၏ [Code of Conduct](CODE_OF_CONDUCT.md) နှင့် [Contributing](CONTRIBUTING.md) လမ်းညွှန်ချက်များကို ကြည့်ပါ။ သင့်၏ အဆောက်အအုံဆန်းစစ်မှုကို ကြိုဆိုပါသည်!
+
+## 🧭 အော့ဖ်လိုင်း အသုံးပြုမှု
+
+ဒီ documentation ကို [Docsify](https://docsify.js.org/#/) ကို အသုံးပြု၍ အော့ဖ်လိုင်းတွင် run လုပ်နိုင်ပါသည်။ ဒီ repo ကို fork လုပ်ပြီး [Docsify](https://docsify.js.org/#/quickstart) ကို သင့် local machine တွင် install လုပ်ပါ၊ ထို့နောက် ဒီ repo ၏ root folder တွင် `docsify serve` ဟု ရိုက်ထည့်ပါ။ website ကို သင့် localhost: `localhost:3000` တွင် port 3000 တွင် serve လုပ်မည်ဖြစ်သည်။
+
+## 📘 PDF
+
+သင်ခန်းစာများအားလုံး၏ PDF ကို [ဒီမှာ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) တွင် ရှာဖွေနိုင်ပါသည်။
+
+## 🎒 အခြားသင်တန်းများ
+
+ကျွန်ုပ်တို့၏အဖွဲ့သည် အခြားသင်တန်းများကိုလည်း ထုတ်လုပ်ပါသည်! ကြည့်ပါ:
+
+- [Generative AI for Beginners](https://aka.ms/genai-beginners)
+- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
+- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [AI for Beginners](https://aka.ms/ai-beginners)
+- [Data Science for Beginners](https://aka.ms/datascience-beginners)
+- [ML for Beginners](https://aka.ms/ml-beginners)
+- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
+- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
+- [IoT for Beginners](https://aka.ms/iot-beginners)
+- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
+- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
+
+## License
+
+ဒီ repository ကို MIT license အတိုင်း licensed လုပ်ထားပါသည်။ [LICENSE](../../LICENSE) ဖိုင်တွင် ပိုမိုသိရှိနိုင်ပါသည်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/SECURITY.md b/translations/my/SECURITY.md
new file mode 100644
index 00000000..0fdfa181
--- /dev/null
+++ b/translations/my/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-27T21:57:25+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "my"
+}
+-->
+## လုံခြုံရေး
+
+Microsoft သည် ၎င်း၏ ဆော့ဖ်ဝဲထုတ်ကုန်များနှင့် ဝန်ဆောင်မှုများ၏ လုံခြုံရေးကို အလေးထားဆောင်ရွက်ပြီး၊ ၎င်းတွင် [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin) နှင့် [ကျွန်ုပ်တို့၏ GitHub အဖွဲ့အစည်းများ](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon) အပါအဝင် GitHub အဖွဲ့အစည်းများမှ စီမံခန့်ခွဲထားသော အရင်းအမြစ်ကုဒ်ရုံများအားလုံး ပါဝင်သည်။
+
+သင်သည် Microsoft ပိုင် GitHub ရုံတစ်ခုတွင် [Microsoft ၏ လုံခြုံရေးထိခိုက်မှုအဓိပ္ပါယ်](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon) ကို ဖြည့်ဆည်းသော လုံခြုံရေးထိခိုက်မှုတစ်ခုကို ရှာဖွေတွေ့ရှိခဲ့သည်ဟု ယုံကြည်ပါက၊ အောက်တွင် ဖော်ပြထားသည့်အတိုင်း ကျွန်ုပ်တို့ထံ အကြောင်းကြားပါ။
+
+## လုံခြုံရေးပြဿနာများ အကြောင်းကြားခြင်း
+
+**GitHub public issues မှတဆင့် လုံခြုံရေးထိခိုက်မှုများကို အကြောင်းမကြားပါနှင့်။**
+
+ထိုအစား Microsoft Security Response Center (MSRC) သို့ [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon) တွင် အကြောင်းကြားပါ။
+
+သင်သည် အကောင့်ဝင်ခြင်းမရှိဘဲ တင်သွင်းလိုပါက [secure@microsoft.com](mailto:secure@microsoft.com) သို့ အီးမေးလ်ပို့ပါ။  သင်၏ စာကို ကျွန်ုပ်တို့၏ PGP key ဖြင့် စာဝှက်နိုင်ပါက ပိုမိုကောင်းမွန်ပါမည်။ [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon) မှ ဒေါင်းလုဒ်လုပ်ပါ။
+
+သင်သည် ၂၄ နာရီအတွင်း တုံ့ပြန်ချက်ရရှိရမည်ဖြစ်သည်။ တစ်စုံတစ်ရာကြောင့် မရရှိပါက၊ သင်၏မူလစာကို ကျွန်ုပ်တို့ရရှိခဲ့ကြောင်း သေချာစေရန် အီးမေးလ်ဖြင့် ထပ်မံဆက်သွယ်ပါ။ ထပ်မံသိရှိလိုပါက [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon) တွင် ကြည့်ရှုနိုင်ပါသည်။
+
+ကျွန်ုပ်တို့အား အောက်ပါ အချက်အလက်များ (သင်ပေးနိုင်သလောက်) ပါဝင်စေရန် ကြိုးစားပါက ပြဿနာ၏ သဘာဝနှင့် အကျယ်အဝန်းကို ပိုမိုနားလည်နိုင်မည်ဖြစ်သည်-
+
+  * ပြဿနာအမျိုးအစား (ဥပမာ - buffer overflow, SQL injection, cross-site scripting, စသည်)
+  * ပြဿနာဖြစ်ပေါ်နေသော အရင်းအမြစ်ဖိုင်(များ)၏ လမ်းကြောင်းများ
+  * ထိခိုက်မှုရှိသော အရင်းအမြစ်ကုဒ်၏ တည်နေရာ (tag/branch/commit သို့မဟုတ် တိုက်ရိုက် URL)
+  * ပြဿနာကို ထပ်မံဖြစ်ပေါ်စေရန် လိုအပ်သော အထူးဖွဲ့စည်းမှု
+  * ပြဿနာကို ထပ်မံဖြစ်ပေါ်စေရန် လိုက်နာရမည့် လှုပ်ရှားမှုအဆင့်များ
+  * Proof-of-concept သို့မဟုတ် exploit code (ဖြစ်နိုင်ပါက)
+  * ပြဿနာ၏ သက်ရောက်မှု၊ အထူးသဖြင့် တိုက်ခိုက်သူက ပြဿနာကို မည်သို့ အသုံးချနိုင်မည်ကို ဖော်ပြပါ
+
+ဤအချက်အလက်များသည် သင်၏ အကြောင်းကြားချက်ကို ပိုမိုလျင်မြန်စွာ စီစဉ်နိုင်စေပါမည်။
+
+သင်သည် bug bounty အတွက် အကြောင်းကြားနေပါက၊ အပြည့်အစုံသော အစီရင်ခံစာများသည် ပိုမိုမြင့်မားသော bounty ဆုငွေ ရရှိနိုင်စေပါသည်။ ကျွန်ုပ်တို့၏ [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) စာမျက်နှာတွင် လက်ရှိအစီအစဉ်များအကြောင်း အသေးစိတ်ဖတ်ရှုနိုင်ပါသည်။
+
+## အကြိုက်ဆုံးဘာသာစကားများ
+
+ကျွန်ုပ်တို့သည် အားလုံးကို အင်္ဂလိပ်ဘာသာဖြင့် ဆက်သွယ်ရန် ပိုမိုနှစ်သက်ပါသည်။
+
+## မူဝါဒ
+
+Microsoft သည် [Coordinated Vulnerability Disclosure](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon) ကို လိုက်နာဆောင်ရွက်ပါသည်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/SUPPORT.md b/translations/my/SUPPORT.md
new file mode 100644
index 00000000..45846ba2
--- /dev/null
+++ b/translations/my/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-27T21:56:31+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "my"
+}
+-->
+# အထောက်အပံ့
+
+## ပြဿနာများကို တင်ပြခြင်းနှင့် အကူအညီရယူရန်  
+
+ဒီပရောဂျက်သည် GitHub Issues ကို အသုံးပြု၍ အမှားများနှင့် အင်္ဂါရပ်တောင်းဆိုမှုများကို မှတ်တမ်းတင်ထားသည်။ အမှားအသစ်များကို တင်မီ ရှိပြီးသားပြဿနာများကို ရှာဖွေပါ၊ ထပ်တူဖြစ်ခြင်းကို ရှောင်ရှားနိုင်ပါသည်။ ပြဿနာအသစ်တင်ရန်အတွက် သင့်အမှားသို့မဟုတ် အင်္ဂါရပ်တောင်းဆိုမှုကို Issue အသစ်အဖြစ် တင်ပါ။
+
+ဒီပရောဂျက်ကို အသုံးပြုခြင်းနှင့် ပတ်သက်သော အကူအညီနှင့် မေးခွန်းများအတွက် [ကျွန်ုပ်တို့၏ ပံ့ပိုးမှုလမ်းညွှန်ချက်များ](CONTRIBUTING.md) ကို ရည်ညွှန်းပါ။
+
+## Microsoft ပံ့ပိုးမှုမူဝါဒ  
+
+ဒီပရောဂျက်အတွက် ပံ့ပိုးမှုသည် အထက်တွင် ဖော်ပြထားသော အရင်းအမြစ်များအပေါ် အကန့်အသတ်ရှိသည်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/_404.md b/translations/my/_404.md
new file mode 100644
index 00000000..7e8f7bc0
--- /dev/null
+++ b/translations/my/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-27T21:56:44+00:00",
+  "source_file": "_404.md",
+  "language_code": "my"
+}
+-->
+# အလုပ်ဆက်လုပ်နေဆဲ
+
+ဤစာမျက်နှာကို ကျွန်ုပ်တို့ လက်ရှိအလုပ်လုပ်နေပါသည်။ ကျေးဇူးပြု၍ နောက်မှ ပြန်လည်စစ်ဆေးပါ။
+
+မေးခွန်းများရှိပါက [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) တစ်ခု ဖွင့်ပါ။
+
+**[ပင်မစာမျက်နှာသို့ ပြန်သွားရန်](../../../../../../..)**
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/docs/_navbar.md b/translations/my/docs/_navbar.md
new file mode 100644
index 00000000..ffdb59b2
--- /dev/null
+++ b/translations/my/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-27T22:33:56+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "my"
+}
+-->
+- ဘာသာပြန်ချက်များ
+  - [English (United States)](../../../docs/README)
+  - [বাংলা](../../../docs/README.bn)
+  - [中文(中国)](../../../docs/README.zh-cn)
+  - [中文(台湾)](../../../docs/README.zh-tw)
+  - [Español](../../../docs/README.es)
+  - [Français](../../../docs/README.fr)
+  - [Ελληνικά](../../../docs/README.el)
+  - [हिन्दी](../../../docs/README.hi)
+  - [Bahasa Melayu](../../../docs/README.ms)
+  - [മലയാളം](../../../docs/README.ml)
+  - [தமிழ்](../../../docs/README.ta)
+  - [తెలుగు](../../../docs/README.te)
+  - [Bahasa Indonesia](../../../docs/README.id)
+  - [Italiano](../../../docs/README.it)
+  - [日本語](../../../docs/README.ja)
+  - [Nederlands](../../../docs/README.nl)
+  - [नेपाली](../../../docs/README.np)
+  - [Português](../../../docs/README.pt)
+  - [Русский](../../../docs/README.ru)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/docs/_sidebar.md b/translations/my/docs/_sidebar.md
new file mode 100644
index 00000000..ceb948ca
--- /dev/null
+++ b/translations/my/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-27T22:33:38+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "my"
+}
+-->
+- နိဒါန်း
+  - [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md)
+  - [2](../1-getting-started-lessons/2-github-basics/README.md)
+  - [3](../1-getting-started-lessons/3-accessibility/README.md)
+  
+- JS အခြေခံ
+  - [4](../2-js-basics/1-data-types/README.md)
+  - [5](../2-js-basics/2-functions-methods/README.md)
+  - [6](../2-js-basics/3-making-decisions/README.md)
+  - [7](../2-js-basics/4-arrays-loops/README.md)
+
+- HTML, CSS, JS
+  - [8](../3-terrarium/1-intro-to-html/README.md)
+  - [9](../3-terrarium/2-intro-to-css/README.md)
+  - [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md)
+
+- စာရိုက်ဂိမ်း
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- 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)
+
+- အာကာသဂိမ်း
+  - [15](../6-space-game/1-introduction/README.md)
+  - [16](../6-space-game/2-drawing-to-canvas/README.md)
+  - [17](../6-space-game/3-moving-elements-around/README.md)
+  - [18](../6-space-game/4-collision-detection/README.md)
+  - [19](../6-space-game/5-keeping-score/README.md)
+  - [20](../6-space-game/6-end-condition/README.md)
+
+- ဘဏ်ပရောဂျက်
+  - [21](../7-bank-project/1-template-route/README.md)
+  - [22](../7-bank-project/2-forms/README.md)
+  - [23](../7-bank-project/3-data/README.md)
+  - [24](../7-bank-project/4-state-management/README.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/for-teachers.md b/translations/my/for-teachers.md
new file mode 100644
index 00000000..8c4087da
--- /dev/null
+++ b/translations/my/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-27T21:57:56+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "my"
+}
+-->
+## ဆရာများအတွက်
+
+သင်တန်းတွင် ဒီသင်ရိုးကို အသုံးပြုချင်ပါသလား။ ကျေးဇူးပြု၍ အသုံးပြုနိုင်ပါသည်။
+
+အမှန်တစ်ကယ်တော့၊ GitHub Classroom ကို အသုံးပြု၍ GitHub အတွင်းမှာတင် အသုံးပြုနိုင်ပါတယ်။
+
+ဒါလုပ်ဖို့အတွက်၊ ဒီ repo ကို fork လုပ်ပါ။ သင်တန်းတစ်ခုစီအတွက် repo တစ်ခုစီဖန်တီးရန်လိုအပ်မည်ဖြစ်ပြီး၊ အဲဒီအတွက် folder တစ်ခုစီကို သီးခြား repo အဖြစ် ခွဲထုတ်ရပါမည်။ ဒီလိုလုပ်လျှင် [GitHub Classroom](https://classroom.github.com/classrooms) က သင်ခန်းစာတစ်ခုစီကို သီးခြားစီ ရယူနိုင်ပါမည်။
+
+ဒီ [လမ်းညွှန်ချက်အပြည့်အစုံ](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) က သင့်အတန်းခန်းကို စတင်ဖွဲ့စည်းရန် အကြံဉာဏ်ပေးပါမည်။
+
+## Moodle, Canvas သို့မဟုတ် Blackboard တွင် အသုံးပြုခြင်း
+
+ဒီသင်ရိုးသည် Learning Management Systems (LMS) များတွင် အလွန်ကောင်းမွန်စွာ အလုပ်လုပ်ပါသည်။ [Moodle upload file](../../../../../../../teaching-files/webdev-moodle.mbz) ကို အသုံးပြု၍ အကြောင်းအရာအပြည့်အစုံကို ရယူနိုင်သလို၊ [Common Cartridge file](../../../../../../../teaching-files/webdev-common-cartridge.imscc) ကို အသုံးပြု၍ အချို့သော အကြောင်းအရာများကို ရယူနိုင်ပါသည်။ Moodle Cloud သည် Common Cartridge အပြည့်အစုံကို ထောက်ပံ့မထားသဖြင့် Moodle download file ကို အသုံးပြု၍ Canvas သို့ upload လုပ်ခြင်းသည် ပိုမိုသင့်တော်ပါသည်။ ကျွန်ုပ်တို့အား ဒီအတွေ့အကြုံကို ပိုမိုကောင်းမွန်အောင် ပြုလုပ်ရန် အကြံပြုပါ။
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.my.png)
+> Moodle အတန်းခန်းအတွင်းရှိ သင်ရိုး
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.my.png)
+> Canvas အတွင်းရှိ သင်ရိုး
+
+## Repo ကို လက်ရှိအတိုင်း အသုံးပြုခြင်း
+
+GitHub Classroom ကို အသုံးမပြုဘဲ repo ကို လက်ရှိအတိုင်း အသုံးပြုလိုပါက၊ ဒါလည်း အလွယ်တကူ ပြုလုပ်နိုင်ပါသည်။ သင့်ကျောင်းသားများကို သင်ခန်းစာတစ်ခုစီကို အတူတူ လေ့လာရန် ဆက်သွယ်ပေးရမည်ဖြစ်သည်။
+
+အွန်လိုင်းပုံစံ (Zoom, Teams, သို့မဟုတ် အခြား) တွင်၊ စစ်ဆေးမှုများအတွက် breakout rooms ဖွဲ့စည်းပြီး၊ ကျောင်းသားများကို သင်ကြားရန် ပြင်ဆင်စေပါ။ ထို့နောက် ကျောင်းသားများကို စစ်ဆေးမှုများတွင် ပါဝင်ရန် ဖိတ်ခေါ်ပြီး၊ သတ်မှတ်ထားသောအချိန်တွင် 'issues' အဖြစ် ဖြေဆိုချက်များကို တင်ပြစေပါ။ အလားတူပင်၊ ကျောင်းသားများကို ပူးပေါင်းလုပ်ဆောင်စေလိုပါက လုပ်ငန်းတာဝန်များကိုလည်း ဒီပုံစံအတိုင်း ပြုလုပ်နိုင်ပါသည်။
+
+ပိုမိုကိုယ်ပိုင်နှင့် သီးသန့်သောပုံစံကို စိတ်ကြိုက်လုပ်ဆောင်လိုပါက၊ ကျောင်းသားများကို သင်ရိုးကို lesson တစ်ခုစီအလိုက် သူတို့၏ GitHub private repos သို့ fork လုပ်ရန် ပြောပါ။ ထို့နောက် သင့်အား access ပေးပြီး၊ စစ်ဆေးမှုများနှင့် လုပ်ငန်းတာဝန်များကို သီးသန့်စွာ ပြီးစီးပြီး သင့် classroom repo တွင် issues အဖြစ် တင်ပြနိုင်ပါသည်။
+
+အွန်လိုင်းအတန်းခန်းပုံစံတွင် ဒီသင်ရိုးကို အလုပ်လုပ်စေဖို့ နည်းလမ်းများစွာ ရှိပါသည်။ သင့်အတွက် အကောင်းဆုံးအလုပ်လုပ်မည့် နည်းလမ်းကို ကျွန်ုပ်တို့အား ပြောပြပါ။
+
+## ကျေးဇူးပြု၍ သင့်အကြံပြုချက်များကို ပေးပို့ပါ!
+
+ဒီသင်ရိုးကို သင်နှင့် သင့်ကျောင်းသားများအတွက် အကောင်းဆုံးဖြစ်စေရန် ကျွန်ုပ်တို့လိုလားပါသည်။ [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) တွင် ကျွန်ုပ်တို့နှင့် ဆက်သွယ်ပြီး၊ [**new issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) တစ်ခုဖွင့်ကာ တောင်းဆိုချက်များ၊ အမှားများနှင့် အကြံပြုချက်များကို ပေးပို့ပါ။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှားမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/lesson-template/README.md b/translations/my/lesson-template/README.md
new file mode 100644
index 00000000..d9aa4c69
--- /dev/null
+++ b/translations/my/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-27T22:34:12+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "my"
+}
+-->
+# [သင်ခန်းစာအကြောင်းအရာ]
+
+![ဗီဒီယိုတစ်ခုထည့်ပါ](../../../lesson-template/video-url)
+
+## [သင်ခန်းစာမတိုင်မီမေးခွန်း](../../../lesson-template/quiz-url)
+
+[ဒီသင်ခန်းစာမှာ ဘာတွေသင်ယူမလဲဆိုတာဖော်ပြပါ]
+
+### အနိမ့်ဆုံးအကျဉ်းချုပ်
+
+ဒီသင်ခန်းစာမှာ ဘာတွေဖော်ပြမလဲဆိုတာရှင်းပြပါ
+
+> မှတ်ချက်များ
+
+### ကြိုတင်လိုအပ်ချက်
+
+ဒီသင်ခန်းစာမတိုင်မီ ဘာအဆင့်တွေကိုပြီးစီးထားရမလဲ?
+
+### ပြင်ဆင်မှု
+
+ဒီသင်ခန်းစာကိုစတင်ဖို့အတွက် ပြင်ဆင်ရမယ့်အဆင့်များ
+
+---
+
+[အကြောင်းအရာကို အပိုင်းလိုက်ဆွဲဆောင်ပါ]
+
+## [အကြောင်းအရာ ၁]
+
+### လုပ်ငန်းတာဝန်:
+
+အတူတကွလုပ်ဆောင်ပြီး သင့် codebase ကို တိုးတက်အောင်လုပ်ပြီး ပရောဂျက်ကို မျှဝေထားတဲ့ code နဲ့တည်ဆောက်ပါ:
+
+```html
+code blocks
+```
+
+✅ အသိပညာစစ်ဆေး - ဒီအချိန်ကို အသုံးပြုပြီး ကျောင်းသားများကို အခွင့်အရေးပေးကာ ဖွင့်မေးခွန်းများဖြင့် အသိပညာကို တိုးတက်စေပါ
+
+## [အကြောင်းအရာ ၂]
+
+## [အကြောင်းအရာ ၃]
+
+🚀 စိန်ခေါ်မှု: ကျောင်းသားများအတူတကွ လုပ်ဆောင်နိုင်ဖို့ စိန်ခေါ်မှုတစ်ခုထည့်ပါ၊ ပရောဂျက်ကို တိုးတက်အောင်လုပ်ဆောင်ရန်
+
+Optional: သင်ခန်းစာပြီးဆုံးပြီး UI ရဲ့ screenshot တစ်ခုထည့်ပါ (လိုအပ်ပါက)
+
+## [သင်ခန်းစာပြီးဆုံးပြီး မေးခွန်း](../../../lesson-template/quiz-url)
+
+## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း
+
+**အလုပ်အကိုင်အပ်နှံရက် [MM/YY]**: [အလုပ်အကိုင်အမည်](assignment.md)
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/lesson-template/assignment.md b/translations/my/lesson-template/assignment.md
new file mode 100644
index 00000000..84255134
--- /dev/null
+++ b/translations/my/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-27T22:34:28+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "my"
+}
+-->
+# [Assignment Name]
+
+## လမ်းညွှန်ချက်များ
+
+## အဆင့်သတ်မှတ်ချက်
+
+| အချက်အလက် | ထူးချွန်မှု | လုံလောက်မှု | တိုးတက်မှုလိုအပ်သည် |
+| ----------- | ----------- | ------------ | -------------------- |
+|             |             |              |                      |
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့ရှိသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှု ဝန်ဆောင်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/my/quiz-app/README.md b/translations/my/quiz-app/README.md
new file mode 100644
index 00000000..470f57dc
--- /dev/null
+++ b/translations/my/quiz-app/README.md
@@ -0,0 +1,189 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-27T22:40:29+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "my"
+}
+-->
+# Quiz app
+
+ဒီ quiz တွေက https://aka.ms/webdev-beginners မှာရှိတဲ့ data science curriculum အတွက် သင်ခန်းစာမတိုင်မီနှင့်ပြီးနောက် quiz တွေဖြစ်ပါတယ်။
+
+## ဘာသာပြန်ထားတဲ့ quiz set တစ်ခုထည့်သွင်းခြင်း
+
+ဘာသာပြန်ထားတဲ့ quiz set တစ်ခုထည့်သွင်းရန် `assets/translations` folder တွေထဲမှာ quiz structure တွေကိုလိုက်ဖက်အောင်ဖန်တီးပါ။ Canonical quizzes တွေက `assets/translations/en` မှာရှိပါတယ်။ Quiz တွေကို အုပ်စုအလိုက်ခွဲထားပါတယ်။ Quiz section နဲ့အမှန်တကယ်လိုက်ဖက်တဲ့ နံပါတ်တွေကို align လုပ်ထားဖို့သေချာပါ။ ဒီ curriculum မှာ quiz စုစုပေါင်း 40 ခုရှိပြီး 0 မှစတင်ရမည်။
+
+  
+<details>
+<summary>ဘာသာပြန်ထားတဲ့ ဖိုင်ရဲ့ ပုံစံက ဒီလိုပါ:</summary>
+
+```
+[
+    {
+        "title": "A title",
+        "complete": "A complete button title",
+        "error": "An error message upon selecting the wrong answer",
+        "quizzes": [
+            {
+                "id": 1,
+                "title": "Title",
+                "quiz": [
+                    {
+                        "questionText": "The question asked",
+                        "answerOptions": [
+                            {
+                                "answerText": "Option 1 title",
+                                "isCorrect": true
+                            },
+                            {
+                                "answerText": "Option 2 title",
+                                "isCorrect": false
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+]
+```
+</details>
+
+ဘာသာပြန်ထားတဲ့ ဖိုင်တွေကို ပြင်ဆင်ပြီးနောက် `assets/translations` folder ထဲမှာရှိတဲ့ index.js ဖိုင်ကို ပြင်ဆင်ပြီး `en` မှာရှိတဲ့ convention တွေကိုလိုက်နာပြီး ဖိုင်တွေကို import လုပ်ပါ။
+
+ဥပမာ၊ သင့်ဘာသာပြန် JSON ဖိုင်က `ex.json` ဖြစ်ရင် localization key ကို 'ex' လို့ထားပြီး အောက်မှာပြထားတဲ့အတိုင်း import လုပ်ပါ။
+
+<details>
+<summary>index.js</summary>
+
+```
+import ex from "./ex.json";
+
+// if 'ex' is localization key then enter it like so in `messages` to expose it 
+
+const messages = {
+  ex: ex[0],
+};
+
+export default messages;
+```
+
+</details>
+
+## Quiz App ကို local မှာ run လုပ်ခြင်း
+
+### လိုအပ်ချက်များ
+
+- GitHub အကောင့်တစ်ခု
+- [Node.js နှင့် Git](https://nodejs.org/)
+
+### Install & Setup
+
+1. ဒီ [template](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) ကိုအသုံးပြုပြီး repository တစ်ခုဖန်တီးပါ။
+
+1. သင့်အသစ်ဖန်တီးထားတဲ့ repository ကို clone လုပ်ပြီး quiz-app folder ကိုသွားပါ။
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. npm packages နှင့် dependencies တွေကို install လုပ်ပါ။
+
+   ```bash
+   npm install
+   ```
+
+### App ကို Build လုပ်ခြင်း
+
+1. Solution ကို build လုပ်ရန် အောက်ပါ command ကို run လုပ်ပါ:
+
+   ```bash
+   npm run build
+   ```
+
+### App ကို Start လုပ်ခြင်း
+
+1. Solution ကို run လုပ်ရန် အောက်ပါ command ကို run လုပ်ပါ:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Optional] Linting
+
+1. Code ကို linting လုပ်ရန် အောက်ပါ command ကို run လုပ်ပါ:
+
+    ```bash
+    npm run lint
+    ```
+
+## Quiz-app ကို Azure မှာ Deploy လုပ်ခြင်း 
+
+### လိုအပ်ချက်များ
+- Azure Subscription တစ်ခု။ အခမဲ့ [ဒီမှာ](https://aka.ms/azure-free) စာရင်းသွင်းပါ။
+
+    _ဒီ quiz-app ကို deploy လုပ်ရန် ကုန်ကျစရိတ်: အခမဲ့_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+အထက်ပါ link မှာ Azure မှာ sign in လုပ်ပြီးနောက် subscription နှင့် resource group ကိုရွေးပါ:
+
+- Static Web App details: နာမည်တစ်ခုပေးပြီး hosting plan ကိုရွေးပါ။
+- GitHub Login: Deployment source ကို GitHub အဖြစ်သတ်မှတ်ပြီး log in လုပ်ပြီး form မှာလိုအပ်တဲ့ field တွေကိုဖြည့်ပါ:
+    - *Organization* – သင့် organization ကိုရွေးပါ။
+    - *Repository* – Web Dev for Beginners curriculum repository ကိုရွေးပါ။
+    - *Branch* - Branch (main) ကိုရွေးပါ။
+- Build Presets: Azure Static Web Apps က သင့် application မှာအသုံးပြုထားတဲ့ framework ကိုသိရှိရန် detection algorithm ကိုအသုံးပြုပါ။
+    - *App location* - ./quiz-app
+    - *Api location* -
+    - *Output location* - dist
+- Deployment: 'Review + Create' ကိုနှိပ်ပြီး 'Create' ကိုနှိပ်ပါ။
+
+    Deploy လုပ်ပြီးနောက် workflow ဖိုင်တစ်ခုကို သင့် repo ရဲ့ *.github* directory မှာဖန်တီးပါမည်။ ဒီ workflow ဖိုင်မှာ app ကို Azure မှာ re-deploy လုပ်ရန် trigger လုပ်မည့် event တွေကိုပါဝင်ပါတယ်၊ ဥပမာ _branch **main** မှာ **push** တစ်ခု_ စသည်ဖြင့်။
+
+    <details>
+    <summary>ဥပမာ Workflow ဖိုင်</summary>
+    GitHub Actions workflow ဖိုင်က ဒီလိုပုံစံရှိနိုင်ပါတယ်:
+    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: Deployment ပြီးဆုံးပြီးနောက် 'Go to Deployment' ကိုနှိပ်ပြီး 'View app in browser' ကိုနှိပ်ပါ။
+
+GitHub Action (workflow) အောင်မြင်စွာ run ပြီးနောက် live page ကို refresh လုပ်ပြီး သင့် application ကိုကြည့်ရှုနိုင်ပါမည်။
+
+---
+
+**အကြောင်းကြားချက်**:  
+ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
\ No newline at end of file
diff --git a/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..1a06124d
--- /dev/null
+++ b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -0,0 +1,217 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c63675cfaf1d223b37bb9fecbfe7c252",
+  "translation_date": "2025-08-27T22:46:19+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "uk"
+}
+-->
+# Вступ до мов програмування та інструментів розробника
+
+У цьому уроці розглядаються основи мов програмування. Теми, які тут висвітлюються, застосовуються до більшості сучасних мов програмування. У розділі "Інструменти розробника" ви дізнаєтеся про корисне програмне забезпечення, яке допомагає вам як розробнику.
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.uk.png)
+> Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест перед лекцією
+[Тест перед лекцією](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Вступ
+
+У цьому уроці ми розглянемо:
+
+- Що таке програмування?
+- Типи мов програмування
+- Основні елементи програми
+- Корисне програмне забезпечення та інструменти для професійного розробника
+
+> Ви можете пройти цей урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Що таке програмування?
+
+Програмування (також відоме як кодування) — це процес написання інструкцій для пристрою, такого як комп'ютер або мобільний пристрій. Ми пишемо ці інструкції за допомогою мови програмування, яку потім інтерпретує пристрій. Ці набори інструкцій можуть називатися різними іменами, але *програма*, *комп'ютерна програма*, *додаток (app)* і *виконуваний файл* — це кілька популярних назв.
+
+*Програма* може бути будь-чим, що написано за допомогою коду: вебсайти, ігри та мобільні додатки — це програми. Хоча можливо створити програму без написання коду, основна логіка інтерпретується пристроєм, і ця логіка, найімовірніше, була написана за допомогою коду. Програма, яка *виконує* або *запускає* код, виконує інструкції. Пристрій, на якому ви читаєте цей урок, виконує програму, щоб відобразити його на вашому екрані.
+
+✅ Проведіть невелике дослідження: хто вважається першим у світі програмістом?
+
+## Мови програмування
+
+Мови програмування дозволяють розробникам писати інструкції для пристрою. Пристрої можуть розуміти лише двійковий код (1 і 0), і для *більшості* розробників це не дуже ефективний спосіб спілкування. Мови програмування є засобом комунікації між людьми та комп'ютерами.
+
+Мови програмування мають різні формати та можуть служити різним цілям. Наприклад, JavaScript в основному використовується для вебдодатків, тоді як Bash в основному використовується для операційних систем.
+
+*Мови низького рівня* зазвичай вимагають менше кроків для інтерпретації інструкцій пристроєм, ніж *мови високого рівня*. Однак те, що робить мови високого рівня популярними, — це їхня читабельність і підтримка. JavaScript вважається мовою високого рівня.
+
+Наступний код ілюструє різницю між мовою високого рівня (JavaScript) і мовою низького рівня (ARM assembly code).
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Вірите чи ні, *вони обидва роблять одне й те саме*: виводять послідовність Фібоначчі до 10.
+
+✅ Послідовність Фібоначчі [визначається](https://en.wikipedia.org/wiki/Fibonacci_number) як набір чисел, де кожне число є сумою двох попередніх, починаючи з 0 і 1. Перші 10 чисел у послідовності Фібоначчі: 0, 1, 1, 2, 3, 5, 8, 13, 21 і 34.
+
+## Елементи програми
+
+Одна інструкція в програмі називається *оператором* і зазвичай має символ або пробіл, який позначає, де інструкція закінчується, або *завершується*. Як програма завершується, залежить від мови.
+
+Оператори в програмі можуть залежати від даних, наданих користувачем або з інших джерел, для виконання інструкцій. Дані можуть змінювати поведінку програми, тому мови програмування мають спосіб тимчасового зберігання даних для подальшого використання. Це називається *змінними*. Змінні — це оператори, які інструктують пристрій зберігати дані в пам'яті. Змінні в програмах схожі на змінні в алгебрі, де вони мають унікальне ім'я, а їхнє значення може змінюватися з часом.
+
+Існує ймовірність, що деякі оператори не будуть виконані пристроєм. Це зазвичай відбувається за задумом розробника або випадково, коли виникає неочікувана помилка. Такий контроль над додатком робить його більш надійним і підтримуваним. Зазвичай ці зміни в управлінні відбуваються, коли виконуються певні умови. Поширеним оператором, який використовується в сучасному програмуванні для управління виконанням програми, є оператор `if..else`.
+
+✅ Ви дізнаєтеся більше про цей тип операторів у наступних уроках.
+
+## Інструменти розробника
+
+[![Інструменти розробника](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Інструменти розробника")
+
+> 🎥 Натисніть на зображення вище, щоб переглянути відео про інструменти
+
+У цьому розділі ви дізнаєтеся про деяке програмне забезпечення, яке може бути дуже корисним на початку вашого професійного шляху розробника.
+
+**Середовище розробки** — це унікальний набір інструментів і функцій, які розробник часто використовує під час написання програмного забезпечення. Деякі з цих інструментів були налаштовані для конкретних потреб розробника і можуть змінюватися з часом, якщо розробник змінює пріоритети в роботі, особистих проєктах або використовує іншу мову програмування. Середовища розробки настільки ж унікальні, як і самі розробники.
+
+### Редактори
+
+Одним із найважливіших інструментів для розробки програмного забезпечення є редактор. У редакторах ви пишете свій код, а іноді й запускаєте його.
+
+Розробники покладаються на редактори з кількох додаткових причин:
+
+- *Налагодження* допомагає виявляти помилки, крок за кроком проходячи код. Деякі редактори мають функції налагодження, які можна налаштувати та додати для конкретних мов програмування.
+- *Підсвічування синтаксису* додає кольори та форматування тексту до коду, що робить його легшим для читання. Більшість редакторів дозволяють налаштовувати підсвічування синтаксису.
+- *Розширення та інтеграції* — це спеціалізовані інструменти для розробників, створені розробниками. Наприклад, багато розробників документують свій код, щоб пояснити, як він працює. Вони можуть встановити розширення для перевірки орфографії, щоб знаходити помилки в документації. Більшість розширень призначені для використання в конкретному редакторі, і більшість редакторів мають спосіб пошуку доступних розширень.
+- *Налаштування* дозволяє розробникам створювати унікальне середовище розробки відповідно до своїх потреб. Більшість редакторів надзвичайно налаштовувані та можуть дозволяти розробникам створювати власні розширення.
+
+#### Популярні редактори та розширення для веброзробки
+
+- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+  
+- [Sublimetext](https://www.sublimetext.com/)
+  - [emmet](https://emmet.io/)
+  - [SublimeLinter](http://www.sublimelinter.com/en/stable/)
+
+### Браузери
+
+Ще одним важливим інструментом є браузер. Веброзробники покладаються на браузер, щоб побачити, як їхній код працює в Інтернеті. Він також використовується для відображення візуальних елементів вебсторінки, написаних у редакторі, таких як HTML.
+
+Багато браузерів мають *інструменти розробника* (DevTools), які містять набір корисних функцій та інформації, що допомагають розробникам збирати та фіксувати важливу інформацію про їхній додаток. Наприклад, якщо на вебсторінці є помилки, іноді корисно знати, коли вони виникли. DevTools у браузері можна налаштувати для збору цієї інформації.
+
+#### Популярні браузери та DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Інструменти командного рядка
+
+Деякі розробники віддають перевагу менш графічному вигляду для своїх щоденних завдань і покладаються на командний рядок. Написання коду вимагає значної кількості друку, і деякі розробники воліють не переривати свій потік роботи на клавіатурі. Вони використовують комбінації клавіш для перемикання між вікнами, роботи з різними файлами та використання інструментів. Більшість завдань можна виконати за допомогою миші, але одна з переваг командного рядка полягає в тому, що багато чого можна зробити за допомогою інструментів командного рядка без необхідності перемикатися між мишею та клавіатурою. Ще одна перевага командного рядка — це можливість налаштування, збереження конфігурацій, їх зміни та імпорту на інші машини для розробки. Оскільки середовища розробки настільки унікальні для кожного розробника, деякі уникають використання командного рядка, деякі покладаються на нього повністю, а деякі віддають перевагу змішаному підходу.
+
+### Популярні опції командного рядка
+
+Опції командного рядка відрізняються залежно від операційної системи, яку ви використовуєте.
+
+*💻 = попередньо встановлено в операційній системі.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (також відомий як CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Популярні інструменти командного рядка
+
+- [Git](https://git-scm.com/) (💻 на більшості операційних систем)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Документація
+
+Коли розробник хоче дізнатися щось нове, він, найімовірніше, звернеться до документації, щоб дізнатися, як це використовувати. Розробники часто покладаються на документацію, щоб зрозуміти, як правильно використовувати інструменти та мови, а також щоб отримати глибше розуміння їхньої роботи.
+
+#### Популярна документація з веброзробки
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), від Mozilla, видавців браузера [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), від Google, видавців [Chrome](https://www.google.com/chrome/)
+- [Документація Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), для [Microsoft Edge](https://www.microsoft.com/edge)
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+
+✅ Проведіть дослідження: Тепер, коли ви знаєте основи середовища веброзробника, порівняйте його з середовищем вебдизайнера.
+
+---
+
+## 🚀 Виклик
+
+Порівняйте деякі мови програмування. Які унікальні риси JavaScript у порівнянні з Java? А як щодо COBOL і Go?
+
+## Тест після лекції
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Огляд і самостійне навчання
+
+Вивчіть трохи про різні мови, доступні програмісту. Спробуйте написати рядок на одній мові, а потім перепишіть його на двох інших. Що ви дізналися?
+
+## Завдання
+
+[Читання документації](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..3969085b
--- /dev/null
+++ b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "1ce4deaec80130d3a0a3c906568459fc",
+  "translation_date": "2025-08-27T22:47:53+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Читання документації
+
+## Інструкції
+
+Існує багато інструментів, які можуть знадобитися веб-розробнику, і вони описані в [документації MDN для інструментів клієнтської сторони](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Виберіть 3 інструменти, які не були розглянуті в уроці, поясніть, чому веб-розробник використовував би їх, і знайдіть інструмент, який підпадає під цю категорію, та поділіться його документацією. Не використовуйте той самий приклад інструменту, що наведений у документації MDN.
+
+## Критерії оцінювання
+
+Відмінно | Задовільно | Потребує покращення
+--- | --- | -- |
+|Пояснено, чому веб-розробник використовував би інструмент| Пояснено, як, але не чому розробник використовував би інструмент| Не згадано, як або чому розробник використовував би інструмент  |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/1-getting-started-lessons/2-github-basics/README.md b/translations/uk/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..2fb6d9b7
--- /dev/null
+++ b/translations/uk/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,339 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-27T22:51:41+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "uk"
+}
+-->
+# Вступ до GitHub
+
+Цей урок охоплює основи GitHub — платформи для розміщення та управління змінами у вашому коді.
+
+![Вступ до GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.uk.png)
+> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест перед лекцією
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Вступ
+
+У цьому уроці ми розглянемо:
+
+- відстеження роботи, яку ви виконуєте на своєму комп'ютері
+- роботу над проєктами разом з іншими
+- як робити внесок у програмне забезпечення з відкритим кодом
+
+### Попередні вимоги
+
+Перед початком перевірте, чи встановлено у вас Git. У терміналі введіть:  
+`git --version`
+
+Якщо Git не встановлено, [завантажте Git](https://git-scm.com/downloads). Потім налаштуйте свій локальний профіль Git у терміналі:
+* `git config --global user.name "ваше-ім'я"`
+* `git config --global user.email "ваш-email"`
+
+Щоб перевірити, чи вже налаштовано Git, введіть:
+`git config --list`
+
+Вам також знадобиться обліковий запис GitHub, текстовий редактор (наприклад, Visual Studio Code) і доступ до терміналу (або командного рядка).
+
+Перейдіть на [github.com](https://github.com/) і створіть обліковий запис, якщо у вас його ще немає, або увійдіть і заповніть свій профіль.
+
+✅ GitHub — це не єдине сховище коду у світі; є й інші, але GitHub є найвідомішим.
+
+### Підготовка
+
+Вам знадобиться папка з кодом проєкту на вашому локальному комп'ютері (ноутбуці або ПК) і публічне сховище на GitHub, яке слугуватиме прикладом для того, як робити внески в проєкти інших.
+
+---
+
+## Управління кодом
+
+Припустимо, у вас є папка з кодом проєкту на вашому комп'ютері, і ви хочете почати відстежувати свій прогрес за допомогою git — системи контролю версій. Дехто порівнює використання git із написанням любовного листа до свого майбутнього "я". Читаючи свої повідомлення про коміти через дні, тижні чи місяці, ви зможете згадати, чому прийняли те чи інше рішення, або "відкотити" зміни — за умови, що ви пишете хороші повідомлення про коміти.
+
+### Завдання: Створіть репозиторій і закомітьте код  
+
+> Перегляньте відео
+> 
+> [![Відео про основи Git і GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Створіть репозиторій на GitHub**. На GitHub.com, у вкладці репозиторіїв або у верхньому правому куті навігаційної панелі, знайдіть кнопку **new repo**.
+
+   1. Дайте своєму репозиторію (папці) назву.
+   1. Виберіть **create repository**.
+
+1. **Перейдіть до робочої папки**. У терміналі перейдіть до папки (також відомої як директорія), яку ви хочете почати відстежувати. Введіть:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Ініціалізуйте git-репозиторій**. У вашому проєкті введіть:
+
+   ```bash
+   git init
+   ```
+
+1. **Перевірте статус**. Щоб перевірити статус вашого репозиторію, введіть:
+
+   ```bash
+   git status
+   ```
+
+   Вивід може виглядати приблизно так:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Зазвичай команда `git status` повідомляє вам, які файли готові до _збереження_ у репозиторії або мають зміни, які ви, можливо, захочете зберегти.
+
+1. **Додайте всі файли для відстеження**  
+   Це також називається стадіюванням файлів/додаванням файлів до області підготовки.
+
+   ```bash
+   git add .
+   ```
+
+   Аргумент `git add` плюс `.` вказує, що всі ваші файли та зміни будуть відстежуватися.
+
+1. **Додайте вибрані файли для відстеження**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Це дозволяє додати лише вибрані файли до області підготовки, якщо ви не хочете комітити всі файли одразу.
+
+1. **Відмініть стадіювання всіх файлів**
+
+   ```bash
+   git reset
+   ```
+
+   Ця команда дозволяє відмінити стадіювання всіх файлів одразу.
+
+1. **Відмініть стадіювання конкретного файлу**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Ця команда дозволяє відмінити стадіювання лише конкретного файлу, який ви не хочете включати до наступного коміту.
+
+1. **Збережіть свою роботу**. На цьому етапі ви додали файли до так званої _області підготовки_. Це місце, де Git відстежує ваші файли. Щоб зробити зміни постійними, вам потрібно _закомітити_ файли. Для цього створіть _коміт_ за допомогою команди `git commit`. Коміт представляє точку збереження в історії вашого репозиторію. Введіть наступне, щоб створити _коміт_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Це закомітить усі ваші файли, додавши повідомлення "first commit". У майбутніх повідомленнях про коміти вам слід бути більш описовими, щоб передати, які саме зміни ви зробили.
+
+1. **Підключіть локальний Git-репозиторій до GitHub**. Git-репозиторій корисний на вашому комп'ютері, але в якийсь момент ви захочете створити резервну копію своїх файлів десь і запросити інших людей працювати з вами над вашим репозиторієм. Одне з чудових місць для цього — GitHub. Пам'ятайте, що ми вже створили репозиторій на GitHub, тому єдине, що нам потрібно зробити, це підключити наш локальний Git-репозиторій до GitHub. Команда `git remote add` зробить це. Введіть наступну команду:
+
+   > Зверніть увагу, перед введенням команди перейдіть на сторінку вашого репозиторію на GitHub, щоб знайти URL репозиторію. Ви використаєте його в команді нижче. Замініть ```https://github.com/username/repository_name.git``` на ваш URL GitHub.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Це створює _віддалене підключення_, назване "origin", яке вказує на репозиторій GitHub, створений раніше.
+
+1. **Відправте локальні файли на GitHub**. Досі ви створили _підключення_ між локальним репозиторієм і репозиторієм GitHub. Відправимо ці файли на GitHub за допомогою команди `git push`, ось так: 
+
+   > Зверніть увагу, ваша назва гілки за замовчуванням може відрізнятися від ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Це відправляє ваші коміти у вашу гілку "main" на GitHub.
+
+2. **Додайте більше змін**. Якщо ви хочете продовжити вносити зміни та відправляти їх на GitHub, вам потрібно буде використовувати наступні три команди:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Порада: Можливо, вам також захочеться створити файл `.gitignore`, щоб запобігти відстеженню файлів, які ви не хочете бачити на GitHub, наприклад, нотаток, які ви зберігаєте в тій самій папці, але які не мають місця в публічному репозиторії. Ви можете знайти шаблони для файлів `.gitignore` на сторінці [.gitignore templates](https://github.com/github/gitignore).
+
+#### Повідомлення про коміти
+
+Чудовий заголовок повідомлення про коміт завершує наступне речення:  
+Якщо застосувати, цей коміт <ваш заголовок тут>.
+
+Для заголовка використовуйте наказовий, теперішній час: "змінити", а не "змінив" чи "зміни".  
+Як і в заголовку, у тілі (за бажанням) також використовуйте наказовий, теперішній час. Тіло має включати мотивацію для зміни та порівняння з попередньою поведінкою. Ви пояснюєте `чому`, а не `як`.
+
+✅ Приділіть кілька хвилин, щоб переглянути GitHub. Чи можете ви знайти дійсно чудове повідомлення про коміт? А мінімальне? Яка інформація, на вашу думку, є найважливішою та найкориснішою для передачі в повідомленні про коміт?
+
+### Завдання: Співпраця
+
+Основна причина розміщення проєктів на GitHub — це можливість співпрацювати з іншими розробниками.
+
+## Робота над проєктами разом з іншими
+
+> Перегляньте відео
+>
+> [![Відео про основи Git і GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+У вашому репозиторії перейдіть до `Insights > Community`, щоб побачити, як ваш проєкт відповідає рекомендованим стандартам спільноти.
+
+   Ось кілька речей, які можуть покращити ваш репозиторій на GitHub:
+   - **Опис**. Чи додали ви опис до свого проєкту?
+   - **README**. Чи додали ви README? GitHub надає рекомендації щодо написання [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **Керівництво для внесків**. Чи має ваш проєкт [керівництво для внесків](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
+   - **Кодекс поведінки**. Чи додали ви [Кодекс поведінки](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
+   - **Ліцензія**. Можливо, найважливіше — [ліцензію](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+Усі ці ресурси допоможуть новим учасникам швидше адаптуватися. Зазвичай це ті речі, на які нові учасники звертають увагу перед тим, як переглядати ваш код, щоб зрозуміти, чи є ваш проєкт правильним місцем для їхнього часу.
+
+✅ README-файли, хоча їх підготовка займає час, часто ігноруються зайнятими підтримувачами. Чи можете ви знайти приклад особливо описового README? Примітка: існують [інструменти для створення хороших README](https://www.makeareadme.com/), які вам можуть сподобатися.
+
+### Завдання: Об'єднайте код
+
+Документація для внесків допомагає людям робити внески в проєкт. Вона пояснює, які типи внесків ви шукаєте і як працює процес. Учасники повинні пройти серію кроків, щоб мати змогу зробити внесок у ваш репозиторій на GitHub:
+
+1. **Форк вашого репозиторію**. Ви, ймовірно, захочете, щоб люди _форкали_ ваш проєкт. Форкінг означає створення копії вашого репозиторію у їхньому профілі GitHub.
+1. **Клонування**. Після цього вони клонують проєкт на свій локальний комп'ютер.
+1. **Створення гілки**. Ви захочете попросити їх створити _гілку_ для своєї роботи.
+1. **Зосередження змін на одній області**. Попросіть учасників зосередити свої внески на одній речі за раз — таким чином шанси, що ви зможете _об'єднати_ їхню роботу, будуть вищими. Уявіть, що вони виправляють помилку, додають нову функцію та оновлюють кілька тестів — що, якщо ви хочете або можете реалізувати лише 2 із 3, або 1 із 3 змін?
+
+✅ Уявіть ситуацію, коли гілки є особливо важливими для написання та впровадження якісного коду. Які випадки використання ви можете придумати?
+
+> Примітка: будьте зміною, яку хочете бачити у світі, і створюйте гілки для своєї роботи також. Усі коміти, які ви робите, будуть зроблені у гілці, до якої ви зараз "перемкнуті". Використовуйте `git status`, щоб побачити, у якій гілці ви перебуваєте.
+
+Розглянемо робочий процес учасника. Припустимо, учасник вже _форкнув_ і _клонував_ репозиторій, тому у нього є готовий Git-репозиторій на локальному комп'ютері:
+
+1. **Створіть гілку**. Використовуйте команду `git branch`, щоб створити гілку, яка міститиме зміни, які вони планують внести:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Перемкніться на робочу гілку**. Перемкніться на вказану гілку та оновіть робочу директорію за допомогою `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Виконайте роботу**. На цьому етапі ви хочете додати свої зміни. Не забудьте повідомити про це Git за допомогою наступних команд:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Переконайтеся, що ви дали своєму коміту гарну назву, для вашого ж блага, а також для підтримувача репозиторію, якому ви допомагаєте.
+
+1. **Об'єднайте свою роботу з гілкою `main`**. У якийсь момент ви закінчите роботу і захочете об'єднати її з гілкою `main`. Гілка `main` могла змінитися за цей час, тому переконайтеся, що ви спочатку оновили її до останньої версії за допомогою наступних команд:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   На цьому етапі ви хочете переконатися, що будь-які _конфлікти_, ситуації, коли Git не може легко _об'єднати_ зміни, виникають у вашій робочій гілці. Тому виконайте наступні команди:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Це принесе всі зміни з `main` у вашу гілку, і, сподіваємося, ви зможете продовжити. Якщо ні, VS Code покаже вам, де Git _заплутався_, і ви просто зміните відповідні файли, щоб вказати, який вміст є найбільш точним.
+
+1. **Відправте свою роботу на GitHub**. Відправка вашої роботи на GitHub означає дві речі: відправку вашої гілки у ваш форкований репозиторій і відкриття PR (Pull Request).
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Наведена вище команда створює гілку у вашому форкованому репозиторії.
+
+1. **Відкрийте PR**. Далі ви хочете відкрити PR. Для цього перейдіть до форкованого репозиторію на GitHub. Ви побачите індикацію на GitHub, де вас запитають, чи хочете ви створити новий PR, натисніть на це, і вас перенаправлять на інтерфейс, де ви зможете змінити заголовок повідомлення про коміт, дати йому більш відповідний опис. Тепер підтримувач репозиторію, який ви форкнули, побачить цей PR і, _сподіваємося_, оцінить і _об'єднає_ ваш PR. Ви тепер учасник, ура :)
+
+1. **Очистіть**. Вважається гарною практикою _очищати_ після успішного об'єднання PR. Ви хочете очистити як вашу локальну гілку, так і гілку, яку ви відправили на GitHub. Спочатку видаліть її локально за допомогою наступної команди:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+Перейдіть на сторінку GitHub для форкнутого репозиторію та видаліть віддалену гілку, яку ви щойно запушили.
+
+`Pull request` здається дивним терміном, адже насправді ви хочете запушити свої зміни до проєкту. Але мейнтейнер (власник проєкту) або основна команда повинні розглянути ваші зміни перед тим, як об'єднати їх із "головною" гілкою проєкту, тому ви фактично запитуєте рішення про зміну у мейнтейнера.
+
+Pull request — це місце для порівняння та обговорення відмінностей, внесених у гілку, з рецензіями, коментарями, інтегрованими тестами тощо. Хороший pull request дотримується приблизно тих самих правил, що й повідомлення про коміт. Ви можете додати посилання на проблему в трекері проблем, якщо ваша робота, наприклад, виправляє проблему. Це робиться за допомогою символу `#`, за яким слідує номер вашої проблеми. Наприклад, `#97`.
+
+🤞Сподіваємося, що всі перевірки пройдуть успішно, і власник(и) проєкту об'єднають ваші зміни в проєкт🤞
+
+Оновіть вашу поточну локальну робочу гілку всіма новими комітами з відповідної віддаленої гілки на GitHub:
+
+`git pull`
+
+## Як зробити внесок у проєкт з відкритим кодом
+
+Спочатку знайдіть репозиторій (або **repo**) на GitHub, який вас цікавить і до якого ви хочете внести зміни. Вам потрібно буде скопіювати його вміст на свій комп'ютер.
+
+✅ Хороший спосіб знайти репозиторії для початківців — це [шукати за тегом 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Скопіювати репозиторій локально](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.uk.png)
+
+Є кілька способів скопіювати код. Один із них — "клонувати" вміст репозиторію, використовуючи HTTPS, SSH або GitHub CLI (інтерфейс командного рядка).
+
+Відкрийте термінал і клонуйте репозиторій таким чином:
+`git clone https://github.com/ProjectURL`
+
+Щоб працювати над проєктом, перейдіть у потрібну папку:
+`cd ProjectURL`
+
+Ви також можете відкрити весь проєкт за допомогою [Codespaces](https://github.com/features/codespaces), вбудованого редактора коду / хмарного середовища розробки від GitHub, або [GitHub Desktop](https://desktop.github.com/).
+
+Нарешті, ви можете завантажити код у вигляді архіву.
+
+### Кілька цікавих фактів про GitHub
+
+Ви можете додати зірочку, стежити або "форкнути" будь-який публічний репозиторій на GitHub. Ви знайдете свої зіркові репозиторії у випадаючому меню у верхньому правому куті. Це як закладки, але для коду.
+
+Проєкти мають трекер проблем, зазвичай на GitHub у вкладці "Issues", якщо не вказано інше, де люди обговорюють проблеми, пов'язані з проєктом. А вкладка Pull Requests — це місце, де люди обговорюють і переглядають зміни, які перебувають у процесі.
+
+Проєкти також можуть мати обговорення на форумах, у списках розсилки або в чатах, таких як Slack, Discord чи IRC.
+
+✅ Ознайомтеся з вашим новим репозиторієм на GitHub і спробуйте кілька речей, наприклад, змінити налаштування, додати інформацію до репозиторію та створити проєкт (наприклад, дошку Kanban). Є багато цікавого, що можна зробити!
+
+---
+
+## 🚀 Виклик
+
+Попрацюйте разом із другом над кодом один одного. Створіть проєкт спільно, форкніть код, створіть гілки та об'єднайте зміни.
+
+## Післялекційний тест
+[Післялекційний тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Огляд і самостійне навчання
+
+Дізнайтеся більше про [внесок у програмне забезпечення з відкритим кодом](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Шпаргалка по Git](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Практикуйтеся, практикуйтеся, практикуйтеся. GitHub пропонує чудові навчальні шляхи через [skills.github.com](https://skills.github.com):
+
+- [Перший тиждень на GitHub](https://skills.github.com/#first-week-on-github)
+
+Там ви також знайдете більш просунуті курси.
+
+## Завдання
+
+Пройдіть [курс "Перший тиждень на GitHub"](https://skills.github.com/#first-week-on-github)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/1-getting-started-lessons/3-accessibility/README.md b/translations/uk/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..3b532180
--- /dev/null
+++ b/translations/uk/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,177 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-27T22:48:55+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення доступних веб-сторінок
+
+![Все про доступність](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.uk.png)
+> Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест перед лекцією
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Сила вебу полягає в його універсальності. Доступ для всіх, незалежно від обмежень, є важливим аспектом.
+>
+> \- Сер Тімоті Бернерс-Лі, директор W3C та винахідник Всесвітньої павутини
+
+Ця цитата ідеально підкреслює важливість створення доступних веб-сайтів. Додаток, який не може бути доступним для всіх, за визначенням є виключаючим. Як веб-розробники, ми завжди повинні пам’ятати про доступність. Якщо зосередитися на цьому з самого початку, ви будете на правильному шляху, щоб забезпечити доступність сторінок, які ви створюєте. У цьому уроці ви дізнаєтеся про інструменти, які допоможуть вам забезпечити доступність ваших веб-ресурсів, і як створювати з урахуванням доступності.
+
+> Ви можете пройти цей урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Інструменти для використання
+
+### Екранні читачі
+
+Одним із найвідоміших інструментів доступності є екранні читачі.
+
+[Екранні читачі](https://en.wikipedia.org/wiki/Screen_reader) зазвичай використовуються людьми з порушеннями зору. Як ми витрачаємо час на те, щоб браузер правильно передавав інформацію, яку ми хочемо поділитися, ми також повинні переконатися, що екранний читач робить те саме.
+
+У найпростішому вигляді екранний читач буде читати сторінку зверху вниз вголос. Якщо ваша сторінка складається лише з тексту, читач передасть інформацію аналогічно браузеру. Звісно, веб-сторінки рідко бувають лише текстовими; вони містять посилання, графіку, кольори та інші візуальні компоненти. Потрібно подбати про те, щоб ця інформація була правильно прочитана екранним читачем.
+
+Кожен веб-розробник повинен ознайомитися з екранним читачем. Як зазначено вище, це клієнт, яким користуватимуться ваші користувачі. Так само, як ви знайомі з тим, як працює браузер, ви повинні дізнатися, як працює екранний читач. На щастя, екранні читачі вбудовані в більшість операційних систем.
+
+Деякі браузери також мають вбудовані інструменти та розширення, які можуть читати текст вголос або навіть надавати деякі базові функції навігації, наприклад, [ці інструменти доступності для браузера Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Вони також є важливими інструментами доступності, але працюють зовсім інакше, ніж екранні читачі, і їх не слід плутати з інструментами тестування екранних читачів.
+
+✅ Спробуйте екранний читач і текстовий читач браузера. У Windows за замовчуванням включено [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon), а також можна встановити [JAWS](https://webaim.org/articles/jaws/) і [NVDA](https://www.nvaccess.org/about-nvda/). У macOS та iOS за замовчуванням встановлено [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10).
+
+### Збільшення
+
+Ще одним інструментом, який часто використовують люди з порушеннями зору, є функція збільшення. Найбільш базовий тип збільшення — це статичне збільшення, яке контролюється через `Control + плюс (+)` або шляхом зменшення роздільної здатності екрана. Цей тип збільшення змушує всю сторінку змінювати розмір, тому використання [адаптивного дизайну](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) важливе для забезпечення гарного користувацького досвіду на збільшених рівнях.
+
+Інший тип збільшення використовує спеціалізоване програмне забезпечення для збільшення однієї області екрана та панорамування, як при використанні реальної лупи. У Windows вбудовано [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198), а [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) є стороннім програмним забезпеченням для збільшення з більшою кількістю функцій і ширшою базою користувачів. У macOS та iOS є вбудоване програмне забезпечення для збільшення під назвою [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Перевірка контрасту
+
+Кольори на веб-сайтах потрібно ретельно вибирати, щоб відповідати потребам користувачів із кольоровою сліпотою або людей, які мають труднощі з розпізнаванням кольорів із низьким контрастом.
+
+✅ Перевірте веб-сайт, який вам подобається, на використання кольорів за допомогою розширення браузера, наприклад, [перевірки контрасту кольорів WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Що ви дізналися?
+
+### Lighthouse
+
+У розділі інструментів розробника вашого браузера ви знайдете інструмент Lighthouse. Цей інструмент важливий для отримання першого погляду на доступність (а також інші аналізи) веб-сайту. Хоча важливо не покладатися виключно на Lighthouse, оцінка 100% є дуже корисною як базовий показник.
+
+✅ Знайдіть Lighthouse у панелі інструментів розробника вашого браузера та проведіть аналіз будь-якого сайту. Що ви виявили?
+
+## Проектування з урахуванням доступності
+
+Доступність — це досить велика тема. Щоб допомогти вам, доступно багато ресурсів.
+
+- [Accessible U - Університет Міннесоти](https://accessibility.umn.edu/your-role/web-developers)
+
+Хоча ми не зможемо охопити всі аспекти створення доступних сайтів, нижче наведено деякі основні принципи, які ви захочете впровадити. Проектування доступної сторінки з самого початку **завжди** легше, ніж повернення до існуючої сторінки для її адаптації.
+
+## Хороші принципи відображення
+
+### Безпечні палітри кольорів
+
+Люди бачать світ по-різному, і це включає кольори. Вибираючи кольорову схему для вашого сайту, ви повинні переконатися, що вона доступна для всіх. Один чудовий [інструмент для створення палітр кольорів — Color Safe](http://colorsafe.co/).
+
+✅ Визначте веб-сайт, який має серйозні проблеми у використанні кольорів. Чому?
+
+### Використовуйте правильний HTML
+
+За допомогою CSS і JavaScript можна зробити будь-який елемент схожим на будь-який тип елемента управління. `<span>` може бути використаний для створення `<button>`, а `<b>` може стати гіперпосиланням. Хоча це може здатися легшим для стилізації, це нічого не передає екранному читачу. Використовуйте відповідний HTML при створенні елементів управління на сторінці. Якщо вам потрібне гіперпосилання, використовуйте `<a>`. Використання правильного HTML для правильного елемента управління називається використанням семантичного HTML.
+
+✅ Перейдіть на будь-який веб-сайт і перевірте, чи дизайнери та розробники правильно використовують HTML. Чи можете ви знайти кнопку, яка повинна бути посиланням? Підказка: клацніть правою кнопкою миші та виберіть "Переглянути джерело сторінки" у вашому браузері, щоб переглянути основний код.
+
+### Створіть описову ієрархію заголовків
+
+Користувачі екранних читачів [дуже сильно покладаються на заголовки](https://webaim.org/projects/screenreadersurvey8/#finding), щоб знаходити інформацію та навігацію по сторінці. Написання описового змісту заголовків і використання семантичних тегів заголовків важливі для створення легкої навігації для користувачів екранних читачів.
+
+### Використовуйте хороші візуальні підказки
+
+CSS пропонує повний контроль над виглядом будь-якого елемента на сторінці. Ви можете створити текстові поля без контуру або гіперпосилання без підкреслення. На жаль, видалення цих підказок може ускладнити розпізнавання типу елемента для тих, хто залежить від них.
+
+## Важливість тексту посилань
+
+Гіперпосилання є основою навігації в Інтернеті. Тому забезпечення того, щоб екранний читач міг правильно читати посилання, дозволяє всім користувачам навігацію вашим сайтом.
+
+### Екранні читачі та посилання
+
+Як і очікувалося, екранні читачі читають текст посилань так само, як і будь-який інший текст на сторінці. З огляду на це, текст, наведений нижче, може здатися цілком прийнятним.
+
+> Маленький пінгвін, іноді відомий як казковий пінгвін, є найменшим пінгвіном у світі. [Натисніть тут](https://en.wikipedia.org/wiki/Little_penguin) для отримання додаткової інформації.
+
+> Маленький пінгвін, іноді відомий як казковий пінгвін, є найменшим пінгвіном у світі. Відвідайте https://en.wikipedia.org/wiki/Little_penguin для отримання додаткової інформації.
+
+> **NOTE** Як ви зараз прочитаєте, ви **ніколи** не повинні створювати посилання, які виглядають як наведені вище.
+
+Пам’ятайте, екранні читачі — це інший інтерфейс, ніж браузери, з іншим набором функцій.
+
+### Проблема використання URL
+
+Екранні читачі читають текст. Якщо URL з’являється в тексті, екранний читач прочитає URL. Загалом, URL не передає значущої інформації та може звучати дратівливо. Ви могли відчути це, якщо ваш телефон коли-небудь вголос читав текстове повідомлення з URL.
+
+### Проблема "натисніть тут"
+
+Екранні читачі також мають можливість читати лише гіперпосилання на сторінці, так само, як людина з нормальним зором сканує сторінку на предмет посилань. Якщо текст посилання завжди "натисніть тут", користувач почує лише "натисніть тут, натисніть тут, натисніть тут, натисніть тут, натисніть тут, ..." Усі посилання тепер не відрізняються одне від одного.
+
+### Хороший текст посилання
+
+Хороший текст посилання коротко описує, що знаходиться на іншій стороні посилання. У наведеному вище прикладі про маленьких пінгвінів посилання веде на сторінку Вікіпедії про цей вид. Фраза *маленькі пінгвіни* була б ідеальним текстом посилання, оскільки вона чітко пояснює, що хтось дізнається, якщо натисне на посилання - маленькі пінгвіни.
+
+> [Маленький пінгвін](https://en.wikipedia.org/wiki/Little_penguin), іноді відомий як казковий пінгвін, є найменшим пінгвіном у світі.
+
+✅ Перегляньте Інтернет кілька хвилин, щоб знайти сторінки, які використовують незрозумілі стратегії посилань. Порівняйте їх із іншими, краще пов’язаними сайтами. Що ви дізналися?
+
+#### Примітки для пошукових систем
+
+Як додатковий бонус для забезпечення доступності вашого сайту для всіх, ви допоможете пошуковим системам навігацію вашим сайтом. Пошукові системи використовують текст посилань, щоб дізнатися теми сторінок. Тому використання хорошого тексту посилань допомагає всім!
+
+### ARIA
+
+Уявіть наступну сторінку:
+
+| Продукт      | Опис              | Замовлення   |
+| ------------ | ----------------- | ------------ |
+| Віджет       | [Опис](../../../../1-getting-started-lessons/3-accessibility/')       | [Замовлення](../../../../1-getting-started-lessons/3-accessibility/') |
+| Супервіджет  | [Опис](../../../../1-getting-started-lessons/3-accessibility/')       | [Замовлення](../../../../1-getting-started-lessons/3-accessibility/') |
+
+У цьому прикладі дублювання тексту опису та замовлення має сенс для тих, хто використовує браузер. Однак той, хто використовує екранний читач, почує лише слова *опис* і *замовлення*, повторені без контексту.
+
+Щоб підтримати такі сценарії, HTML підтримує набір атрибутів, відомих як [Доступні багаті інтернет-додатки (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Ці атрибути дозволяють надавати додаткову інформацію екранним читачам.
+
+> **NOTE**: Як і багато аспектів HTML, підтримка браузерів і екранних читачів може відрізнятися. Однак більшість основних клієнтів підтримують атрибути ARIA.
+
+Ви можете використовувати `aria-label`, щоб описати посилання, коли формат сторінки не дозволяє це зробити. Опис для віджета можна встановити як
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Загалом, використання семантичної розмітки, як описано вище, перевершує використання ARIA, але іноді немає семантичного еквівалента для різних HTML-елементів. Хорошим прикладом є дерево. Немає HTML-еквівалента для дерева, тому ви ідентифікуєте загальний `<div>` для цього елемента з відповідною роллю та значеннями ARIA. [Документація MDN про ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) містить більше корисної інформації.
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## Зображення
+
+Само собою зрозуміло, що екранні читачі не можуть автоматично читати, що знаходиться на зображенні. Забезпечення доступності зображень не потребує багато роботи - саме для цього існує атрибут `alt`. Усі значущі зображення повинні мати `alt`, щоб описати, що вони представляють.
+Зображення, які є суто декоративними, повинні мати атрибут `alt`, встановлений як порожній рядок: `alt=""`. Це запобігає непотрібному оголошенню декоративного зображення екранними читачами.
+
+✅ Як ви могли очікувати, пошукові системи також не можуть зрозуміти, що знаходиться на зображенні. Вони також використовують текст alt. Тому, як завжди, забезпечення доступності вашої сторінки приносить додаткові бонуси!
+
+## Клавіатура
+
+Деякі користувачі не можуть використовувати мишу або трекпад, натомість покладаються на взаємодію з клавіатурою, щоб переходити від одного елемента до іншого. Важливо, щоб ваш веб-сайт представляв ваш контент у логічному порядку, щоб користувач клавіатури міг отримати доступ до кожного інтерактивного елемента, рухаючись вниз по документу. Якщо ви створюєте свої веб-сторінки за допомогою семантичної розмітки та використовуєте CSS для стилізації їхнього візуального макета, ваш сайт повинен бути доступним для навігації за допомогою клавіатури, але
+Багато урядів мають закони щодо вимог доступності. Ознайомтеся із законами про доступність у вашій країні. Що охоплюється, а що ні? Наприклад, [цей урядовий вебсайт](https://accessibility.blog.gov.uk/).
+
+## Завдання
+
+[Проаналізуйте недоступний вебсайт](assignment.md)
+
+Джерело: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) від Instrument
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/1-getting-started-lessons/3-accessibility/assignment.md b/translations/uk/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..3101403e
--- /dev/null
+++ b/translations/uk/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-27T22:51:23+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Аналіз недоступного сайту
+
+## Інструкції
+
+Визначте вебсайт, який, на вашу думку, НЕ є доступним, і створіть план дій для покращення його доступності.  
+Вашим першим завданням буде ідентифікувати цей сайт, детально описати способи, якими він є недоступним, не використовуючи аналітичні інструменти, а потім провести аналіз за допомогою Lighthouse. Збережіть результати цього аналізу у форматі pdf і складіть детальний план з мінімум десяти пунктів, які показують, як можна покращити сайт.
+
+## Таблиця для перевірки доступності сайту
+
+| Критерії | Відмінно | Задовільно | Потребує покращення |
+|----------|----------|------------|---------------------|
+|          | відсутні <10% необхідного | відсутні 20% необхідного | відсутні 50% необхідного |
+
+----
+Звіт студента: включає абзаци про те, наскільки недоступним є сайт, звіт Lighthouse у форматі pdf, список із десяти пунктів для покращення з деталями, як це зробити.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/1-getting-started-lessons/README.md b/translations/uk/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..83a402e7
--- /dev/null
+++ b/translations/uk/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-27T22:45:53+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "uk"
+}
+-->
+# Початок роботи з веб-розробкою
+
+У цьому розділі навчальної програми ви ознайомитеся з концепціями, які не пов'язані з проєктами, але є важливими для становлення професійним розробником.
+
+### Теми
+
+1. [Вступ до мов програмування та інструментів розробника](1-intro-to-programming-languages/README.md)
+2. [Вступ до GitHub](2-github-basics/README.md)
+3. [Основи доступності](3-accessibility/README.md)
+
+### Автори
+
+Вступ до мов програмування та інструментів розробника був написаний з ♥️ [Жасмін Гріневей](https://twitter.com/paladique)
+
+Вступ до GitHub був написаний з ♥️ [Флор Дріс](https://twitter.com/floordrees)
+
+Основи доступності були написані з ♥️ [Крістофером Гаррісоном](https://twitter.com/geektrainer)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/2-js-basics/1-data-types/README.md b/translations/uk/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..140cd80f
--- /dev/null
+++ b/translations/uk/2-js-basics/1-data-types/README.md
@@ -0,0 +1,216 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-27T22:31:15+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "uk"
+}
+-->
+# Основи JavaScript: Типи даних
+
+![Основи JavaScript - Типи даних](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.uk.png)
+> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест перед лекцією
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Цей урок охоплює основи JavaScript — мови, яка забезпечує інтерактивність у вебі.
+
+> Ви можете пройти цей урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Змінні](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Змінні в JavaScript")
+
+[![Типи даних у JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Типи даних у JavaScript")
+
+> 🎥 Натисніть на зображення вище, щоб переглянути відео про змінні та типи даних.
+
+Давайте почнемо зі змінних і типів даних, які їх наповнюють!
+
+## Змінні
+
+Змінні зберігають значення, які можна використовувати та змінювати в коді.
+
+Створення та **оголошення** змінної має наступний синтаксис **[ключове слово] [назва]**. Це складається з двох частин:
+
+- **Ключове слово**. Ключовими словами можуть бути `let` або `var`.  
+
+✅ Ключове слово `let` було введено в ES6 і надає змінній так звану _блокову область видимості_. Рекомендується використовувати `let` замість `var`. Ми детальніше розглянемо блокові області видимості в наступних частинах.
+
+- **Назва змінної**, це ім'я, яке ви обираєте самостійно.
+
+### Завдання - робота зі змінними
+
+1. **Оголосіть змінну**. Давайте оголосимо змінну, використовуючи ключове слово `let`:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` тепер оголошено за допомогою ключового слова `let`. На даний момент вона не має значення.
+
+1. **Присвойте значення**. Збережіть значення у змінній за допомогою оператора `=`, після якого йде очікуване значення.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Примітка: використання `=` у цьому уроці означає, що ми використовуємо "оператор присвоєння", який використовується для встановлення значення змінної. Він не позначає рівність.
+
+   `myVariable` тепер *ініціалізовано* зі значенням 123.
+
+1. **Рефакторинг**. Замініть ваш код наступним оператором.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Вище наведено приклад _явної ініціалізації_, коли змінна оголошується і їй одночасно присвоюється значення.
+
+1. **Змініть значення змінної**. Змініть значення змінної наступним чином:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Після того, як змінна оголошена, ви можете змінити її значення в будь-який момент у вашому коді за допомогою оператора `=` і нового значення.
+
+   ✅ Спробуйте! Ви можете писати JavaScript прямо у вашому браузері. Відкрийте вікно браузера та перейдіть до Інструментів розробника. У консолі ви знайдете запит; введіть `let myVariable = 123`, натисніть Enter, а потім введіть `myVariable`. Що відбувається? Зверніть увагу, що ви дізнаєтеся більше про ці концепції в наступних уроках.
+
+## Константи
+
+Оголошення та ініціалізація константи слідує тим самим принципам, що і змінна, за винятком ключового слова `const`. Константи зазвичай оголошуються великими літерами.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Константи схожі на змінні, але мають дві відмінності:
+
+- **Мають значення**. Константи повинні бути ініціалізовані, інакше виникне помилка при виконанні коду.
+- **Посилання не може бути змінено**. Посилання константи не може бути змінено після ініціалізації, інакше виникне помилка при виконанні коду. Розглянемо два приклади:
+   - **Просте значення**. Наступне НЕ дозволено:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Посилання на об'єкт захищене**. Наступне НЕ дозволено.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Значення об'єкта не захищене**. Наступне дозволено:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Вище ви змінюєте значення об'єкта, але не його посилання, що робить це дозволеним.
+
+   > Примітка: `const` означає, що посилання захищене від повторного присвоєння. Значення не є _незмінним_ і може змінюватися, особливо якщо це складна структура, як об'єкт.
+
+## Типи даних
+
+Змінні можуть зберігати багато різних типів значень, таких як числа та текст. Ці різні типи значень відомі як **типи даних**. Типи даних є важливою частиною розробки програмного забезпечення, оскільки вони допомагають розробникам приймати рішення про те, як має бути написаний код і як має працювати програмне забезпечення. Крім того, деякі типи даних мають унікальні функції, які допомагають трансформувати або витягувати додаткову інформацію зі значення.
+
+✅ Типи даних також називаються примітивами даних JavaScript, оскільки вони є найнижчим рівнем типів даних, які надаються мовою. Існує 7 примітивних типів даних: string, number, bigint, boolean, undefined, null і symbol. Зробіть паузу, щоб уявити, що кожен із цих примітивів може представляти. Що таке `zebra`? А `0`? `true`?
+
+### Числа
+
+У попередньому розділі значення `myVariable` було типом даних "число".
+
+`let myVariable = 123;`
+
+Змінні можуть зберігати всі типи чисел, включаючи десяткові або від'ємні числа. Числа також можуть використовуватися з арифметичними операторами, які розглядаються в [наступному розділі](../../../../2-js-basics/1-data-types).
+
+### Арифметичні оператори
+
+Існує кілька типів операторів для виконання арифметичних функцій, і деякі з них наведені тут:
+
+| Символ | Опис                                                                      | Приклад                          |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **Додавання**: обчислює суму двох чисел                                  | `1 + 2 //очікувана відповідь 3`   |
+| `-`    | **Віднімання**: обчислює різницю двох чисел                              | `1 - 2 //очікувана відповідь -1`  |
+| `*`    | **Множення**: обчислює добуток двох чисел                                | `1 * 2 //очікувана відповідь 2`   |
+| `/`    | **Ділення**: обчислює частку двох чисел                                  | `1 / 2 //очікувана відповідь 0.5` |
+| `%`    | **Залишок**: обчислює залишок від ділення двох чисел                     | `1 % 2 //очікувана відповідь 1`   |
+
+✅ Спробуйте! Спробуйте виконати арифметичну операцію в консолі вашого браузера. Чи здивували вас результати?
+
+### Рядки
+
+Рядки — це набори символів, які знаходяться між одинарними або подвійними лапками.
+
+- `'Це рядок'`
+- `"Це також рядок"`
+- `let myString = 'Це значення рядка, збережене у змінній';`
+
+Не забудьте використовувати лапки при написанні рядка, інакше JavaScript припустить, що це назва змінної.
+
+### Форматування рядків
+
+Рядки є текстовими і час від часу потребують форматування.
+
+Щоб **об'єднати** два або більше рядків, або з'єднати їх разом, використовуйте оператор `+`.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Чому `1 + 1 = 2` у JavaScript, але `'1' + '1' = 11?` Подумайте про це. А як щодо `'1' + 1`?
+
+**Шаблонні літерали** — це ще один спосіб форматування рядків, за винятком того, що замість лапок використовується зворотний апостроф. Все, що не є простим текстом, має бути поміщено в заповнювачі `${ }`. Це включає будь-які змінні, які можуть бути рядками.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Ви можете досягти своїх цілей форматування будь-яким методом, але шаблонні літерали будуть враховувати будь-які пробіли та розриви рядків.
+
+✅ Коли б ви використовували шаблонний літерал замість простого рядка?
+
+### Булеві значення
+
+Булеві значення можуть бути лише двох значень: `true` або `false`. Булеві значення допомагають приймати рішення про те, які рядки коду повинні виконуватися, коли виконуються певні умови. У багатьох випадках [оператори](../../../../2-js-basics/1-data-types) допомагають встановлювати значення булевих змінних, і ви часто помітите та напишете змінні, які ініціалізуються або їх значення оновлюються за допомогою оператора.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Змінна може вважатися "істинною", якщо вона оцінюється як булеве значення `true`. Цікаво, що в JavaScript [усі значення є істинними, якщо вони не визначені як хибні](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Виклик
+
+JavaScript відомий своїми несподіваними способами обробки типів даних час від часу. Проведіть невелике дослідження цих "підводних каменів". Наприклад: чутливість до регістру може вас здивувати! Спробуйте це у вашій консолі: `let age = 1; let Age = 2; age == Age` (результат `false` — чому?). Які ще підводні камені ви можете знайти?
+
+## Тест після лекції
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Огляд і самостійне навчання
+
+Перегляньте [цей список вправ з JavaScript](https://css-tricks.com/snippets/javascript/) і спробуйте одну з них. Що ви дізналися?
+
+## Завдання
+
+[Практика типів даних](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/2-js-basics/1-data-types/assignment.md b/translations/uk/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..92a557d0
--- /dev/null
+++ b/translations/uk/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-27T22:32:17+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Практика типів даних
+
+## Інструкції
+
+Уявіть, що ви створюєте кошик для покупок. Напишіть документацію про типи даних, які вам знадобляться для завершення процесу покупок. Як ви прийшли до своїх рішень?
+
+## Критерії оцінювання
+
+Критерій | Відмінно | Достатньо | Потребує покращення
+--- | --- | --- | --- |
+||Шість типів даних перераховані та детально розглянуті, їх використання задокументовано|Розглянуто чотири типи даних|Розглянуто два типи даних|
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/2-js-basics/2-functions-methods/README.md b/translations/uk/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..e2f12bc8
--- /dev/null
+++ b/translations/uk/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-27T22:28:17+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "uk"
+}
+-->
+# Основи JavaScript: Методи та функції
+
+![Основи JavaScript - Функції](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.uk.png)
+> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест перед лекцією
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Коли ми думаємо про написання коду, завжди важливо забезпечити його читабельність. Хоч це може звучати нелогічно, код читається набагато більше разів, ніж пишеться. Одним із ключових інструментів у наборі розробника для забезпечення підтримуваності коду є **функція**.
+
+[![Методи та функції](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Методи та функції")
+
+> 🎥 Натисніть на зображення вище, щоб переглянути відео про методи та функції.
+
+> Ви можете пройти цей урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Функції
+
+У своїй основі функція — це блок коду, який ми можемо виконати за запитом. Це ідеально підходить для ситуацій, коли потрібно виконати одну й ту ж задачу кілька разів; замість дублювання логіки в різних місцях (що ускладнює оновлення в майбутньому), ми можемо централізувати її в одному місці та викликати, коли потрібно виконати операцію — функції навіть можна викликати з інших функцій!
+
+Не менш важливою є можливість назвати функцію. Хоч це може здатися дрібницею, назва забезпечує швидкий спосіб документування частини коду. Це можна порівняти з написом на кнопці. Якщо я натисну кнопку з написом "Скасувати таймер", я знаю, що вона зупинить роботу годинника.
+
+## Створення та виклик функції
+
+Синтаксис функції виглядає наступним чином:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Якщо я хочу створити функцію для відображення привітання, це може виглядати так:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Щоразу, коли ми хочемо викликати (або виконати) нашу функцію, ми використовуємо її назву, а потім `()`. Варто зазначити, що функцію можна визначити як до, так і після її виклику; компілятор JavaScript знайде її для вас.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Існує особливий тип функції, відомий як **метод**, який ви вже використовували! Насправді, ми бачили це в нашій демонстрації вище, коли використовували `console.log`. Відмінність методу від функції полягає в тому, що метод прив’язаний до об’єкта (`console` у нашому прикладі), тоді як функція є незалежною. Багато розробників використовують ці терміни взаємозамінно.
+
+### Найкращі практики для функцій
+
+Є кілька найкращих практик, які варто пам’ятати при створенні функцій:
+
+- Як завжди, використовуйте описові назви, щоб знати, що робитиме функція
+- Використовуйте **camelCasing** для об’єднання слів
+- Зосереджуйте функції на виконанні конкретного завдання
+
+## Передача інформації у функцію
+
+Щоб зробити функцію більш універсальною, часто потрібно передавати їй інформацію. Якщо ми розглянемо наш приклад `displayGreeting` вище, він буде відображати лише **Hello, world!**. Не найкорисніша функція, яку можна створити. Якщо ми хочемо зробити її трохи більш гнучкою, наприклад, дозволити комусь вказати ім’я людини, яку потрібно привітати, ми можемо додати **параметр**. Параметр (іноді також називається **аргументом**) — це додаткова інформація, яка передається функції.
+
+Параметри перераховуються в частині визначення в дужках і розділяються комами, як показано нижче:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Ми можемо оновити наш `displayGreeting`, щоб приймати ім’я та відображати його.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Коли ми хочемо викликати нашу функцію та передати параметр, ми вказуємо його в дужках.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Значення за замовчуванням
+
+Ми можемо зробити нашу функцію ще більш гнучкою, додавши більше параметрів. Але що, якщо ми не хочемо, щоб кожне значення було обов’язковим? Залишаючи ім’я обов’язковим (нам потрібно знати, кого ми вітаємо), ми можемо дозволити налаштувати саме привітання за бажанням. Якщо хтось не хоче його налаштовувати, ми надаємо значення за замовчуванням. Щоб надати значення за замовчуванням параметру, ми встановлюємо його так само, як встановлюємо значення для змінної — `parameterName = 'defaultValue'`. Повний приклад:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Коли ми викликаємо функцію, ми можемо вирішити, чи хочемо встановити значення для `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Значення, які повертаються
+
+До цього моменту функція, яку ми створили, завжди виводила результат у [консоль](https://developer.mozilla.org/docs/Web/API/console). Іноді це може бути саме те, що нам потрібно, особливо коли ми створюємо функції, які викликатимуть інші сервіси. Але що, якщо я хочу створити допоміжну функцію для виконання обчислення та отримати значення назад, щоб я міг використовувати його в іншому місці?
+
+Ми можемо зробити це за допомогою **значення, яке повертається**. Значення, яке повертається, повертається функцією і може бути збережене у змінній так само, як ми могли б зберегти літеральне значення, наприклад рядок або число.
+
+Якщо функція повертає щось, то використовується ключове слово `return`. Ключове слово `return` очікує значення або посилання на те, що повертається, як показано нижче:
+
+```javascript
+return myVariable;
+```  
+
+Ми могли б створити функцію для створення повідомлення привітання та повернення значення назад до виклику.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Коли ми викликаємо цю функцію, ми зберігаємо значення у змінній. Це дуже схоже на те, як ми встановлюємо змінну на статичне значення (наприклад, `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Функції як параметри для функцій
+
+У міру того, як ви будете розвиватися у своїй програмістській кар’єрі, ви зустрінете функції, які приймають функції як параметри. Цей цікавий прийом часто використовується, коли ми не знаємо, коли щось станеться або завершиться, але знаємо, що потрібно виконати операцію у відповідь.
+
+Наприклад, розглянемо [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), який запускає таймер і виконує код після його завершення. Нам потрібно сказати йому, який код ми хочемо виконати. Звучить як ідеальна робота для функції!
+
+Якщо ви запустите код нижче, через 3 секунди ви побачите повідомлення **3 секунди минуло**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Анонімні функції
+
+Давайте ще раз подивимося на те, що ми створили. Ми створюємо функцію з назвою, яка буде використана один раз. У міру того, як наш додаток стає складнішим, ми можемо побачити, що створюємо багато функцій, які будуть викликані лише один раз. Це не ідеально. Як виявляється, нам не завжди потрібно надавати назву!
+
+Коли ми передаємо функцію як параметр, ми можемо обійти створення її заздалегідь і натомість створити її як частину параметра. Ми використовуємо те ж ключове слово `function`, але створюємо її як параметр.
+
+Давайте перепишемо код вище, щоб використовувати анонімну функцію:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Якщо ви запустите наш новий код, ви помітите, що отримуєте ті ж результати. Ми створили функцію, але не довелося давати їй назву!
+
+### Функції зі стрілками
+
+Одним із скорочень, поширених у багатьох мовах програмування (включаючи JavaScript), є можливість використовувати так звану **стрілкову** або **жирну стрілкову** функцію. Вона використовує спеціальний індикатор `=>`, який виглядає як стрілка — звідси й назва! Використовуючи `=>`, ми можемо пропустити ключове слово `function`.
+
+Давайте перепишемо наш код ще раз, щоб використовувати функцію зі стрілкою:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Коли використовувати кожну стратегію
+
+Тепер ви бачили три способи передати функцію як параметр і, можливо, задаєтеся питанням, коли використовувати кожен із них. Якщо ви знаєте, що будете використовувати функцію більше одного разу, створіть її звичайним способом. Якщо ви будете використовувати її лише в одному місці, зазвичай найкраще використовувати анонімну функцію. Чи використовувати функцію зі стрілкою або більш традиційний синтаксис `function` — залежить від вас, але ви помітите, що більшість сучасних розробників віддають перевагу `=>`.
+
+---
+
+## 🚀 Виклик
+
+Чи можете ви сформулювати в одному реченні різницю між функціями та методами? Спробуйте!
+
+## Тест після лекції
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Огляд і самостійне навчання
+
+Варто [прочитати трохи більше про функції зі стрілками](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), оскільки вони все частіше використовуються в кодових базах. Попрактикуйтеся у написанні функції, а потім перепишіть її за допомогою цього синтаксису.
+
+## Завдання
+
+[Розваги з функціями](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/2-js-basics/2-functions-methods/assignment.md b/translations/uk/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..e036d49f
--- /dev/null
+++ b/translations/uk/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-27T22:29:12+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Розваги з функціями
+
+## Інструкції
+
+Створіть різні функції, як ті, що повертають значення, так і ті, що нічого не повертають.
+
+Спробуйте створити функцію, яка має комбінацію параметрів і параметрів із значеннями за замовчуванням.
+
+## Критерії оцінювання
+
+| Критерії | Відмінно                                                                                 | Достатньо                                                      | Потребує покращення |
+| -------- | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------- |
+|          | Запропоноване рішення містить дві або більше функцій із різноманітними параметрами       | Запропоноване робоче рішення містить одну функцію з кількома параметрами | Рішення має помилки |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/2-js-basics/3-making-decisions/README.md b/translations/uk/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..a3b4ba0b
--- /dev/null
+++ b/translations/uk/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-27T22:29:26+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "uk"
+}
+-->
+# Основи JavaScript: Прийняття рішень
+
+![Основи JavaScript - Прийняття рішень](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.uk.png)
+
+> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест перед лекцією
+
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Прийняття рішень і контроль порядку виконання вашого коду робить його багаторазовим і надійним. У цьому розділі розглядається синтаксис для управління потоком даних у JavaScript і його важливість при використанні з булевими типами даних.
+
+[![Прийняття рішень](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Прийняття рішень")
+
+> 🎥 Натисніть на зображення вище, щоб переглянути відео про прийняття рішень.
+
+> Ви можете пройти цей урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## Короткий огляд булевих значень
+
+Булеві значення можуть мати лише два значення: `true` або `false`. Булеві значення допомагають приймати рішення, які рядки коду повинні виконуватися за певних умов.
+
+Встановіть булеве значення як true або false ось так:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Булеві значення названі на честь англійського математика, філософа та логіка Джорджа Буля (1815–1864).
+
+## Оператори порівняння та булеві значення
+
+Оператори використовуються для оцінки умов шляхом порівняння, що створює булеве значення. Нижче наведено список операторів, які часто використовуються.
+
+| Символ | Опис                                                                                                                                                          | Приклад            |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **Менше ніж**: Порівнює два значення і повертає булеве значення `true`, якщо значення зліва менше, ніж справа                                                 | `5 < 6 // true`    |
+| `<=`   | **Менше або дорівнює**: Порівнює два значення і повертає булеве значення `true`, якщо значення зліва менше або дорівнює значенню справа                       | `5 <= 6 // true`   |
+| `>`    | **Більше ніж**: Порівнює два значення і повертає булеве значення `true`, якщо значення зліва більше, ніж справа                                               | `5 > 6 // false`   |
+| `>=`   | **Більше або дорівнює**: Порівнює два значення і повертає булеве значення `true`, якщо значення зліва більше або дорівнює значенню справа                     | `5 >= 6 // false`  |
+| `===`  | **Строга рівність**: Порівнює два значення і повертає булеве значення `true`, якщо значення справа і зліва рівні І мають однаковий тип даних                  | `5 === 6 // false` |
+| `!==`  | **Нерівність**: Порівнює два значення і повертає протилежне булеве значення тому, яке повернув би оператор строгої рівності                                   | `5 !== 6 // true`  |
+
+✅ Перевірте свої знання, написавши кілька порівнянь у консолі вашого браузера. Чи здивували вас якісь отримані дані?
+
+## Оператор if
+
+Оператор if виконає код між своїми блоками, якщо умова є істинною.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Логічні оператори часто використовуються для формування умови.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+}
+```
+
+## Оператор if..else
+
+Оператор `else` виконає код між своїми блоками, якщо умова є хибною. Він є необов’язковим для оператора `if`.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is false. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+✅ Перевірте своє розуміння цього коду та наступного, запустивши його в консолі браузера. Змініть значення змінних currentMoney і laptopPrice, щоб змінити результат `console.log()`.
+
+## Оператор switch
+
+Оператор `switch` використовується для виконання різних дій залежно від різних умов. Використовуйте оператор `switch`, щоб вибрати один із багатьох блоків коду для виконання.
+
+```javascript
+switch (expression) {
+  case x:
+    // code block
+    break;
+  case y:
+    // code block
+    break;
+  default:
+  // code block
+}
+```
+
+```javascript
+// program using switch statement
+let a = 2;
+
+switch (a) {
+  case 1:
+    a = "one";
+    break;
+  case 2:
+    a = "two";
+    break;
+  default:
+    a = "not found";
+    break;
+}
+console.log(`The value is ${a}`);
+```
+
+✅ Перевірте своє розуміння цього коду та наступного, запустивши його в консолі браузера. Змініть значення змінної a, щоб змінити результат `console.log()`.
+
+## Логічні оператори та булеві значення
+
+Прийняття рішень може вимагати більше одного порівняння, і їх можна об’єднати за допомогою логічних операторів для отримання булевого значення.
+
+| Символ | Опис                                                                                     | Приклад                                                                 |
+| ------ | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **Логічне І**: Порівнює два булеві вирази. Повертає true **лише**, якщо обидві сторони істинні | `(5 > 6) && (5 < 6 ) //Одна сторона хибна, інша істинна. Повертає false` |
+| `\|\|` | **Логічне АБО**: Порівнює два булеві вирази. Повертає true, якщо хоча б одна сторона істинна | `(5 > 6) \|\| (5 < 6) //Одна сторона хибна, інша істинна. Повертає true` |
+| `!`    | **Логічне НЕ**: Повертає протилежне значення булевого виразу                             | `!(5 > 6) // 5 не більше ніж 6, але "!" поверне true`                   |
+
+## Умови та рішення з логічними операторами
+
+Логічні оператори можна використовувати для формування умов у операторах if..else.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is true. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+### Оператор заперечення
+
+Ви вже бачили, як можна використовувати оператор `if...else` для створення умовної логіки. Все, що потрапляє в `if`, має оцінюватися як true/false. Використовуючи оператор `!`, ви можете _заперечити_ вираз. Це виглядатиме так:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Тернарні вирази
+
+`if...else` — це не єдиний спосіб вираження логіки прийняття рішень. Ви також можете використовувати так званий тернарний оператор. Його синтаксис виглядає так:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Нижче наведено більш зрозумілий приклад:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Приділіть хвилину, щоб кілька разів прочитати цей код. Чи розумієте ви, як працюють ці оператори?
+
+Вищезазначене стверджує, що:
+
+- якщо `firstNumber` більше, ніж `secondNumber`
+- тоді присвоїти `firstNumber` змінній `biggestNumber`
+- інакше присвоїти `secondNumber`.
+
+Тернарний вираз — це просто компактний спосіб написання коду нижче:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Виклик
+
+Створіть програму, яка спочатку написана з логічними операторами, а потім перепишіть її, використовуючи тернарний вираз. Який синтаксис вам більше подобається?
+
+---
+
+## Тест після лекції
+
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Огляд і самостійне навчання
+
+Дізнайтеся більше про численні оператори, доступні користувачеві, [на MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Перегляньте чудовий [довідник операторів](https://joshwcomeau.com/operator-lookup/) від Джоша Комо!
+
+## Завдання
+
+[Оператори](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/2-js-basics/3-making-decisions/assignment.md b/translations/uk/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..218ef163
--- /dev/null
+++ b/translations/uk/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-27T22:30:29+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Оператори
+
+## Інструкції
+
+Попрацюйте з операторами. Ось пропозиція для програми, яку ви можете реалізувати:
+
+У вас є набір студентів із двох різних систем оцінювання.
+
+### Перша система оцінювання
+
+Одна система оцінювання визначає оцінки від 1 до 5, де 3 і вище означає, що ви склали курс.
+
+### Друга система оцінювання
+
+Інша система оцінювання має такі оцінки: `A, A-, B, B-, C, C-`, де `A` — найвища оцінка, а `C` — найнижча прохідна оцінка.
+
+### Завдання
+
+Маючи наступний масив `allStudents`, який представляє всіх студентів і їхні оцінки, створіть новий масив `studentsWhoPass`, що містить усіх студентів, які склали курс.
+
+> TIP, використовуйте цикл for, if...else та оператори порівняння:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Критерії оцінювання
+
+| Критерій | Відмінно                       | Задовільно                   | Потребує покращення            |
+| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
+|          | Представлено повне рішення     | Представлено часткове рішення | Представлено рішення з помилками |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/2-js-basics/4-arrays-loops/README.md b/translations/uk/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..558d0d31
--- /dev/null
+++ b/translations/uk/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-27T22:32:31+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "uk"
+}
+-->
+# Основи JavaScript: Масиви та Цикли
+
+![Основи JavaScript - Масиви](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.uk.png)
+> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест перед лекцією
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Цей урок охоплює основи JavaScript — мови, яка забезпечує інтерактивність у вебі. У цьому уроці ви дізнаєтеся про масиви та цикли, які використовуються для обробки даних.
+
+[![Масиви](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Масиви")
+
+[![Цикли](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Цикли")
+
+> 🎥 Натисніть на зображення вище, щоб переглянути відео про масиви та цикли.
+
+> Ви можете пройти цей урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Масиви
+
+Робота з даними — це поширене завдання для будь-якої мови програмування, і це завдання стає набагато простішим, коли дані організовані у структурованому форматі, наприклад, у масивах. У масивах дані зберігаються у структурі, схожій на список. Однією з головних переваг масивів є те, що ви можете зберігати різні типи даних в одному масиві.
+
+✅ Масиви оточують нас всюди! Чи можете ви придумати приклад масиву в реальному житті, наприклад, масив сонячних панелей?
+
+Синтаксис масиву — це пара квадратних дужок.
+
+```javascript
+let myArray = [];
+```
+
+Це порожній масив, але масиви можуть бути оголошені вже заповненими даними. Значення в масиві розділяються комами.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Значення масиву отримують унікальне значення, яке називається **індексом** — ціле число, яке присвоюється залежно від його відстані від початку масиву. У наведеному вище прикладі рядкове значення "Chocolate" має індекс 0, а індекс "Rocky Road" дорівнює 4. Використовуйте індекс із квадратними дужками, щоб отримати, змінити або вставити значення масиву.
+
+✅ Вас дивує, що індекси масивів починаються з нуля? У деяких мовах програмування індекси починаються з 1. Це цікава історія, яку ви можете [прочитати на Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Ви можете використовувати індекс, щоб змінити значення, ось так:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+Або вставити нове значення за певним індексом ось так:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Більш поширений спосіб додавання значень до масиву — використання операторів масиву, таких як array.push()
+
+Щоб дізнатися, скільки елементів у масиві, використовуйте властивість `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Спробуйте самі! Використовуйте консоль вашого браузера, щоб створити та змінити масив власного створення.
+
+## Цикли
+
+Цикли дозволяють виконувати повторювані або **ітеративні** завдання, що може значно заощадити час і код. Кожна ітерація може відрізнятися змінними, значеннями та умовами. У JavaScript є різні типи циклів, які мають невеликі відмінності, але по суті виконують одне й те саме: проходять через дані.
+
+### Цикл For
+
+Цикл `for` вимагає 3 частини для ітерації:
+- `counter` Змінна, яка зазвичай ініціалізується числом і рахує кількість ітерацій
+- `condition` Вираз, який використовує оператори порівняння, щоб зупинити цикл, коли він стає `false`
+- `iteration-expression` Виконується наприкінці кожної ітерації, зазвичай використовується для зміни значення лічильника
+  
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Запустіть цей код у консолі браузера. Що станеться, якщо ви внесете невеликі зміни до лічильника, умови або виразу ітерації? Чи можете ви змусити його працювати у зворотному напрямку, створюючи зворотний відлік?
+
+### Цикл While
+
+На відміну від синтаксису циклу `for`, цикл `while` вимагає лише умови, яка зупинить цикл, коли умова стане `false`. Умови в циклах зазвичай залежать від інших значень, таких як лічильники, і повинні управлятися під час виконання циклу. Початкові значення для лічильників повинні бути створені поза циклом, а будь-які вирази для виконання умови, включаючи зміну лічильника, повинні підтримуватися всередині циклу.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Чому ви обрали б цикл for замість while? 17 тисяч користувачів мали те саме питання на StackOverflow, і деякі думки [можуть бути цікавими для вас](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Цикли та Масиви
+
+Масиви часто використовуються з циклами, оскільки більшість умов вимагають довжини масиву для зупинки циклу, а індекс також може бути значенням лічильника.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} //Ends when all flavors are printed
+```
+
+✅ Експериментуйте з проходженням через масив власного створення у консолі вашого браузера.
+
+---
+
+## 🚀 Виклик
+
+Існують інші способи проходження через масиви, окрім циклів for і while. Це [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) і [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Перепишіть ваш цикл масиву, використовуючи один із цих методів.
+
+## Тест після лекції
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Огляд та Самостійне Вивчення
+
+Масиви в JavaScript мають багато методів, які надзвичайно корисні для обробки даних. [Прочитайте про ці методи](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) і спробуйте деякі з них (наприклад, push, pop, slice і splice) на масиві власного створення.
+
+## Завдання
+
+[Цикл через Масив](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/2-js-basics/4-arrays-loops/assignment.md b/translations/uk/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..1c4d2aa5
--- /dev/null
+++ b/translations/uk/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-27T22:33:14+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Перебір масиву
+
+## Інструкції
+
+Створіть програму, яка виводить кожне 3-тє число в діапазоні від 1 до 20 та друкує його в консоль.
+
+> Порада: використовуйте цикл for і змініть вираз ітерації
+
+## Критерії оцінювання
+
+| Критерії | Відмінно                                | Задовільно              | Потребує покращення            |
+| -------- | --------------------------------------- | ----------------------- | ------------------------------ |
+|          | Програма працює правильно і прокоментована | Програма не прокоментована | Програма незавершена або з помилками |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/2-js-basics/README.md b/translations/uk/2-js-basics/README.md
new file mode 100644
index 00000000..1fbe5c1d
--- /dev/null
+++ b/translations/uk/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-27T22:28:03+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "uk"
+}
+-->
+# Вступ до JavaScript
+
+JavaScript — це мова вебу. У цих чотирьох уроках ви ознайомитеся з її основами.
+
+### Теми
+
+1. [Змінні та типи даних](1-data-types/README.md)
+2. [Функції та методи](2-functions-methods/README.md)
+3. [Прийняття рішень за допомогою JavaScript](3-making-decisions/README.md)
+4. [Масиви та цикли](4-arrays-loops/README.md)
+
+### Автори
+
+Ці уроки були написані з ♥️ [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) та [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/3-terrarium/1-intro-to-html/README.md b/translations/uk/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..c6fb4eb4
--- /dev/null
+++ b/translations/uk/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-27T22:34:53+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "uk"
+}
+-->
+# Проєкт "Тераріум" Частина 1: Вступ до HTML
+
+![Вступ до HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.uk.png)
+> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Тест перед лекцією
+
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+> Перегляньте відео
+
+> 
+> [![Відео про основи Git і GitHub](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Вступ
+
+HTML, або HyperText Markup Language, — це "скелет" вебу. Якщо CSS "одягає" ваш HTML, а JavaScript оживляє його, то HTML — це тіло вашого веб-додатку. Синтаксис HTML навіть відображає цю ідею, оскільки включає теги "head", "body" і "footer".
+
+У цьому уроці ми використаємо HTML для створення "скелету" інтерфейсу нашого віртуального тераріуму. Він матиме заголовок і три колонки: праву та ліву, де будуть розташовані перетягувані рослини, і центральну область, яка буде виглядати як скляний тераріум. До кінця цього уроку ви зможете побачити рослини в колонках, але інтерфейс виглядатиме трохи дивно; не хвилюйтеся, у наступному розділі ви додасте стилі CSS, щоб зробити інтерфейс більш привабливим.
+
+### Завдання
+
+На вашому комп'ютері створіть папку під назвою 'terrarium', а всередині неї файл 'index.html'. Ви можете зробити це у Visual Studio Code після створення папки terrarium, відкривши нове вікно VS Code, натиснувши 'open folder' і перейшовши до вашої нової папки. Натисніть маленьку кнопку 'file' у панелі Explorer і створіть новий файл:
+
+![explorer у VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.uk.png)
+
+Або
+
+Використайте ці команди у вашому git bash:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` або `nano index.html`
+
+> Файли index.html вказують браузеру, що це файл за замовчуванням у папці; URL-адреси, такі як `https://anysite.com/test`, можуть бути побудовані за допомогою структури папок, включаючи папку під назвою `test` з файлом `index.html` всередині; `index.html` не обов'язково має відображатися в URL.
+
+---
+
+## DocType і теги html
+
+Перший рядок HTML-файлу — це його doctype. Це трохи дивно, що цей рядок має бути на самому верху файлу, але він повідомляє старим браузерам, що сторінка повинна відображатися у стандартному режимі, відповідно до поточної специфікації HTML.
+
+> Порада: у VS Code ви можете навести курсор на тег і отримати інформацію про його використання з довідників MDN.
+
+Другий рядок має бути відкриваючим тегом `<html>`, а заразом і закриваючим тегом `</html>`. Ці теги є кореневими елементами вашого інтерфейсу.
+
+### Завдання
+
+Додайте ці рядки на початку вашого файлу `index.html`:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Існує кілька різних режимів, які можна визначити, встановивши DocType за допомогою рядка запиту: [Quirks Mode і Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Ці режими використовувалися для підтримки дуже старих браузерів, які зараз майже не використовуються (Netscape Navigator 4 і Internet Explorer 5). Ви можете дотримуватися стандартного оголошення doctype.
+
+---
+
+## 'head' документа
+
+Область 'head' HTML-документа включає важливу інформацію про вашу веб-сторінку, також відому як [метадані](https://developer.mozilla.org/docs/Web/HTML/Element/meta). У нашому випадку ми повідомляємо веб-серверу, на який буде надіслана ця сторінка для відображення, про такі чотири речі:
+
+-   заголовок сторінки
+-   метадані сторінки, включаючи:
+    -   'character set', який повідомляє про те, яке кодування символів використовується на сторінці
+    -   інформацію про браузер, включаючи `x-ua-compatible`, що вказує на підтримку браузера IE=edge
+    -   інформацію про те, як має поводитися viewport при завантаженні. Встановлення початкового масштабу viewport на 1 контролює рівень масштабування при першому завантаженні сторінки.
+
+### Завдання
+
+Додайте блок 'head' до вашого документа між відкриваючим і закриваючим тегами `<html>`.
+
+```html
+<head>
+	<title>Welcome to my Virtual Terrarium</title>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+```
+
+✅ Що станеться, якщо ви встановите мета-тег viewport таким чином: `<meta name="viewport" content="width=600">`? Дізнайтеся більше про [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## 'body' документа
+
+### HTML-теги
+
+У HTML ви додаєте теги до вашого .html файлу, щоб створити елементи веб-сторінки. Кожен тег зазвичай має відкриваючий і закриваючий тег, наприклад: `<p>hello</p>` для позначення абзацу. Створіть тіло вашого інтерфейсу, додавши пару тегів `<body>` всередині пари тегів `<html>`; ваш код тепер виглядає так:
+
+### Завдання
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Welcome to my Virtual Terrarium</title>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body></body>
+</html>
+```
+
+Тепер ви можете почати створювати вашу сторінку. Зазвичай ви використовуєте теги `<div>` для створення окремих елементів на сторінці. Ми створимо серію елементів `<div>`, які міститимуть зображення.
+
+### Зображення
+
+Один HTML-тег, який не потребує закриваючого тега, — це `<img>`, оскільки він має елемент `src`, який містить всю інформацію, необхідну сторінці для відображення елемента.
+
+Створіть папку у вашому додатку під назвою `images` і додайте до неї всі зображення з [папки вихідного коду](../../../../3-terrarium/solution/images); (там є 14 зображень рослин).
+
+### Завдання
+
+Додайте ці зображення рослин у дві колонки між тегами `<body></body>`:
+
+```html
+<div id="page">
+	<div id="left-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+		</div>
+	</div>
+	<div id="right-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+		</div>
+	</div>
+</div>
+```
+
+> Примітка: Спани проти Дівів. Діви вважаються елементами 'block', а спани — 'inline'. Що станеться, якщо ви перетворите ці діви на спани?
+
+З цим кодом рослини тепер з'являються на екрані. Виглядає це досить погано, оскільки вони ще не стилізовані за допомогою CSS, і ми зробимо це у наступному уроці.
+
+Кожне зображення має альтернативний текст, який з'являється навіть якщо ви не можете побачити або відобразити зображення. Це важливий атрибут для забезпечення доступності. Дізнайтеся більше про доступність у майбутніх уроках; наразі пам'ятайте, що атрибут alt надає альтернативну інформацію для зображення, якщо користувач з якоїсь причини не може його переглянути (через повільне з'єднання, помилку в атрибуті src або якщо користувач використовує екранний зчитувач).
+
+✅ Ви помітили, що кожне зображення має однаковий alt-тег? Чи це хороша практика? Чому або чому ні? Чи можете ви покращити цей код?
+
+---
+
+## Семантична розмітка
+
+Загалом, краще використовувати осмислену 'семантику' при написанні HTML. Що це означає? Це означає, що ви використовуєте HTML-теги для представлення типу даних або взаємодії, для яких вони були створені. Наприклад, основний заголовок тексту на сторінці має використовувати тег `<h1>`.
+
+Додайте наступний рядок прямо під вашим відкриваючим тегом `<body>`:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Використання семантичної розмітки, такої як заголовки `<h1>` і ненумеровані списки `<ul>`, допомагає екранним зчитувачам орієнтуватися на сторінці. Загалом, кнопки слід писати як `<button>`, а списки — як `<li>`. Хоча _можливо_ використовувати спеціально стилізовані елементи `<span>` з обробниками кліків для імітації кнопок, краще для користувачів з обмеженими можливостями використовувати технології для визначення місця розташування кнопки на сторінці та взаємодії з нею, якщо елемент виглядає як кнопка. З цієї причини намагайтеся використовувати семантичну розмітку якомога більше.
+
+✅ Ознайомтеся з екранним зчитувачем і [як він взаємодіє з веб-сторінкою](https://www.youtube.com/watch?v=OUDV1gqs9GA). Чи можете ви зрозуміти, чому використання несемантичної розмітки може засмутити користувача?
+
+## Тераріум
+
+Остання частина цього інтерфейсу передбачає створення розмітки, яка буде стилізована для створення тераріуму.
+
+### Завдання:
+
+Додайте цю розмітку над останнім тегом `</div>`:
+
+```html
+<div id="terrarium">
+	<div class="jar-top"></div>
+	<div class="jar-walls">
+		<div class="jar-glossy-long"></div>
+		<div class="jar-glossy-short"></div>
+	</div>
+	<div class="dirt"></div>
+	<div class="jar-bottom"></div>
+</div>
+```
+
+✅ Незважаючи на те, що ви додали цю розмітку на екран, ви абсолютно нічого не бачите. Чому?
+
+---
+
+## 🚀Виклик
+
+Існують деякі цікаві "старі" теги в HTML, які все ще весело використовувати, хоча вам не слід використовувати застарілі теги, такі як [ці теги](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) у вашій розмітці. Все ж, чи можете ви використати старий тег `<marquee>`, щоб зробити заголовок h1 прокручуваним горизонтально? (якщо ви це зробите, не забудьте видалити його потім)
+
+## Тест після лекції
+
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Огляд і самостійне навчання
+
+HTML — це "перевірена часом" система будівельних блоків, яка допомогла створити веб таким, яким він є сьогодні. Дізнайтеся трохи про його історію, вивчаючи старі та нові теги. Чи можете ви зрозуміти, чому деякі теги були застарілими, а деякі додані? Які теги можуть бути введені в майбутньому?
+
+Дізнайтеся більше про створення сайтів для вебу та мобільних пристроїв на [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+## Завдання
+
+[Практикуйте HTML: створіть макет блогу](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/3-terrarium/1-intro-to-html/assignment.md b/translations/uk/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..ad3127a2
--- /dev/null
+++ b/translations/uk/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-27T22:36:07+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Практикуйте HTML: Створіть макет блогу
+
+## Інструкції
+
+Уявіть, що ви створюєте або оновлюєте свій персональний вебсайт. Створіть графічний макет вашого сайту, а потім запишіть HTML-розмітку, яку ви б використали для створення різних елементів сайту. Ви можете зробити це на папері та відсканувати, або використати програмне забезпечення на ваш вибір, але обов’язково напишіть HTML-розмітку вручну.
+
+## Критерії оцінювання
+
+| Критерії | Відмінно                                                                           | Достатньо                                                                       | Потребує покращення                                                               |
+| -------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|          | Макет блогу представлений візуально з щонайменше 10 елементами розмітки           | Макет блогу представлений візуально приблизно з 5 елементами розмітки           | Макет блогу представлений візуально з максимум 3 елементами розмітки             |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають у результаті використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/3-terrarium/2-intro-to-css/README.md b/translations/uk/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..4228c4c9
--- /dev/null
+++ b/translations/uk/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-27T22:36:40+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "uk"
+}
+-->
+# Проєкт "Тераріум", Частина 2: Вступ до CSS
+
+![Вступ до CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.uk.png)  
+> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Передлекційна вікторина
+
+[Передлекційна вікторина](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Вступ
+
+CSS, або каскадні таблиці стилів, вирішують важливу проблему веброзробки: як зробити ваш вебсайт привабливим. Стилізація ваших додатків робить їх більш зручними та естетичними; також за допомогою CSS можна створювати адаптивний вебдизайн (Responsive Web Design, RWD), що дозволяє вашим додаткам виглядати добре незалежно від розміру екрана. CSS — це не лише про зовнішній вигляд; його специфікація включає анімації та трансформації, які дозволяють створювати складні взаємодії у ваших додатках. Робоча група CSS допомагає підтримувати актуальність специфікацій CSS; ви можете стежити за їхньою роботою на [сайті World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
+
+> Зверніть увагу, CSS — це мова, яка постійно розвивається, як і все у вебі, і не всі браузери підтримують нові частини специфікації. Завжди перевіряйте свої реалізації, звертаючись до [CanIUse.com](https://caniuse.com).
+
+У цьому уроці ми додамо стилі до нашого онлайн-тераріуму та дізнаємося більше про кілька концепцій CSS: каскадність, наслідування, використання селекторів, позиціонування та створення макетів за допомогою CSS. У процесі ми створимо макет тераріуму та сам тераріум.
+
+### Передумови
+
+Ви повинні мати HTML для вашого тераріуму, готовий до стилізації.
+
+> Перегляньте відео
+
+> 
+> [![Відео про основи Git і GitHub](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Завдання
+
+У папці вашого тераріуму створіть новий файл під назвою `style.css`. Підключіть цей файл у секції `<head>`:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## Каскадність
+
+Каскадні таблиці стилів включають ідею, що стилі "каскадують", тобто застосування стилю визначається його пріоритетом. Стилі, задані автором вебсайту, мають пріоритет над стилями, заданими браузером. Стилі, задані "вбудовано" (inline), мають пріоритет над стилями у зовнішньому файлі стилів.
+
+### Завдання
+
+Додайте вбудований стиль "color: red" до вашого тегу `<h1>`:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Потім додайте наступний код до вашого файлу `style.css`:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Який колір відображається у вашому вебдодатку? Чому? Чи можете ви знайти спосіб перевизначити стилі? Коли ви б хотіли це зробити, а коли ні?
+
+---
+
+## Наслідування
+
+Стилі наслідуються від предка до нащадка, тобто вкладені елементи наслідують стилі своїх батьків.
+
+### Завдання
+
+Задайте шрифт для тіла (`body`) і перевірте, чи наслідує вкладений елемент цей шрифт:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Відкрийте консоль вашого браузера на вкладці 'Elements' і спостерігайте за шрифтом H1. Він наслідує свій шрифт від тіла, як зазначено у браузері:
+
+![успадкований шрифт](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.uk.png)
+
+✅ Чи можете ви зробити так, щоб вкладений стиль наслідував іншу властивість?
+
+---
+
+## Селектори CSS
+
+### Теги
+
+На даний момент ваш файл `style.css` має лише кілька стилізованих тегів, і додаток виглядає досить дивно:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Такий спосіб стилізації тегу дає вам контроль над унікальними елементами, але вам потрібно контролювати стилі багатьох рослин у вашому тераріумі. Для цього вам потрібно використовувати селектори CSS.
+
+### Ідентифікатори (Ids)
+
+Додайте трохи стилів для розташування лівого та правого контейнерів. Оскільки є лише один лівий контейнер і один правий контейнер, їм у розмітці присвоєно ідентифікатори. Щоб стилізувати їх, використовуйте `#`:
+
+```CSS
+#left-container {
+	background-color: #eee;
+	width: 15%;
+	left: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+
+#right-container {
+	background-color: #eee;
+	width: 15%;
+	right: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+```
+
+Тут ви розмістили ці контейнери з абсолютним позиціонуванням зліва та справа від екрана, а також використали відсотки для їхньої ширини, щоб вони могли масштабуватися для невеликих мобільних екранів.
+
+✅ Цей код досить повторюваний, тобто не відповідає принципу "DRY" (Don't Repeat Yourself). Чи можете ви знайти кращий спосіб стилізувати ці ідентифікатори, можливо, використовуючи ідентифікатор та клас? Вам потрібно буде змінити розмітку та рефакторити CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Класи
+
+У наведеному вище прикладі ви стилізували два унікальні елементи на екрані. Якщо ви хочете, щоб стилі застосовувалися до багатьох елементів на екрані, ви можете використовувати класи CSS. Зробіть це для розташування рослин у лівому та правому контейнерах.
+
+Зверніть увагу, що кожна рослина в HTML-розмітці має комбінацію ідентифікаторів та класів. Ідентифікатори тут використовуються JavaScript, який ви додасте пізніше, для маніпуляції розташуванням рослин у тераріумі. Класи ж надають усім рослинам певний стиль.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Додайте наступне до вашого файлу `style.css`:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Примітно в цьому фрагменті змішування відносного та абсолютного позиціонування, яке ми розглянемо в наступному розділі. Зверніть увагу на те, як висоти обробляються у відсотках:
+
+Ви встановили висоту тримача рослин на 13%, що є хорошим значенням, щоб усі рослини відображалися у кожному вертикальному контейнері без необхідності прокручування.
+
+Ви змістили тримач рослин вліво, щоб рослини були більш центровані в межах їхнього контейнера. Зображення мають великий обсяг прозорого фону, щоб зробити їх більш зручними для перетягування, тому їх потрібно змістити вліво, щоб краще вписатися на екрані.
+
+Потім самій рослині надано максимальну ширину 150%. Це дозволяє їй масштабуватися вниз разом із масштабуванням браузера. Спробуйте змінити розмір вашого браузера; рослини залишаються у своїх контейнерах, але масштабуються вниз, щоб вписатися.
+
+Також примітно використання z-index, який контролює відносну висоту елемента (щоб рослини розташовувалися поверх контейнера і виглядали так, ніби вони знаходяться всередині тераріуму).
+
+✅ Чому вам потрібні як тримач рослин, так і селектор рослин у CSS?
+
+## Позиціонування в CSS
+
+Змішування властивостей позиціонування (існують статичне, відносне, фіксоване, абсолютне та липке позиціонування) може бути трохи складним, але якщо зроблено правильно, це дає вам хороший контроль над елементами на ваших сторінках.
+
+Абсолютно позиціоновані елементи розташовуються відносно найближчих позиціонованих предків, а якщо таких немає, то відносно тіла документа.
+
+Відносно позиціоновані елементи розташовуються на основі вказівок CSS щодо їхнього зміщення від початкової позиції.
+
+У нашому прикладі `plant-holder` є елементом із відносним позиціонуванням, який розташовується всередині контейнера з абсолютним позиціонуванням. Результат полягає в тому, що бічні контейнери закріплені зліва та справа, а `plant-holder` вкладений, регулюючи себе всередині бічних контейнерів, залишаючи місце для розташування рослин у вертикальному ряду.
+
+> Сам `plant` також має абсолютне позиціонування, необхідне для того, щоб зробити його перетягуваним, як ви дізнаєтеся в наступному уроці.
+
+✅ Експериментуйте зі зміною типів позиціонування бічних контейнерів і `plant-holder`. Що відбувається?
+
+## Макети в CSS
+
+Тепер ви використаєте те, що дізналися, щоб створити сам тераріум, використовуючи лише CSS!
+
+Спочатку стилізуйте дочірні елементи `.terrarium` як заокруглений прямокутник за допомогою CSS:
+
+```CSS
+.jar-walls {
+	height: 80%;
+	width: 60%;
+	background: #d1e1df;
+	border-radius: 1rem;
+	position: absolute;
+	bottom: 0.5%;
+	left: 20%;
+	opacity: 0.5;
+	z-index: 1;
+}
+
+.jar-top {
+	width: 50%;
+	height: 5%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 80.5%;
+	left: 25%;
+	opacity: 0.7;
+	z-index: 1;
+}
+
+.jar-bottom {
+	width: 50%;
+	height: 1%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 0%;
+	left: 25%;
+	opacity: 0.7;
+}
+
+.dirt {
+	width: 60%;
+	height: 5%;
+	background: #3a241d;
+	position: absolute;
+	border-radius: 0 0 1rem 1rem;
+	bottom: 1%;
+	left: 20%;
+	opacity: 0.7;
+	z-index: -1;
+}
+```
+
+Зверніть увагу на використання відсотків тут. Якщо ви зменшите масштаб вашого браузера, ви побачите, як банка також масштабується. Також зверніть увагу на відсотки ширини та висоти для елементів банки і на те, як кожен елемент абсолютно позиціонується в центрі, закріплений у нижній частині вікна перегляду.
+
+Ми також використовуємо `rem` для border-radius, що є відносною до шрифту одиницею виміру. Дізнайтеся більше про цей тип відносного вимірювання у [специфікації CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Спробуйте змінити кольори банки та прозорість у порівнянні з кольорами ґрунту. Що відбувається? Чому?
+
+---
+
+## 🚀 Виклик
+
+Додайте "блискучу" відблиск у нижній лівій частині банки, щоб вона виглядала більш схожою на скло. Ви будете стилізувати `.jar-glossy-long` і `.jar-glossy-short`, щоб вони виглядали як відблиск. Ось як це виглядатиме:
+
+![готовий тераріум](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.uk.png)
+
+Щоб завершити післялекційну вікторину, пройдіть цей модуль Learn: [Стилізуйте ваш HTML-додаток за допомогою CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Післялекційна вікторина
+
+[Післялекційна вікторина](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Огляд і самостійне навчання
+
+CSS здається оманливо простим, але є багато викликів при спробі ідеально стилізувати додаток для всіх браузерів і всіх розмірів екранів. CSS-Grid і Flexbox — це інструменти, розроблені для того, щоб зробити роботу трохи більш структурованою та надійною. Дізнайтеся про ці інструменти, граючи в [Flexbox Froggy](https://flexboxfroggy.com/) і [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Завдання
+
+[Рефакторинг CSS](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/3-terrarium/2-intro-to-css/assignment.md b/translations/uk/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..0fdcbf71
--- /dev/null
+++ b/translations/uk/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-27T22:38:16+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Рефакторинг CSS
+
+## Інструкції
+
+Перестилізуйте тераріум, використовуючи Flexbox або CSS Grid, і зробіть скріншоти, щоб показати, що ви протестували його в кількох браузерах. Можливо, вам доведеться змінити розмітку, тому створіть нову версію додатка з мистецтвом, яке буде використане для вашого рефакторингу. Не хвилюйтеся про те, щоб зробити елементи перетягуваними; наразі лише рефакторизуйте HTML і CSS.
+
+## Критерії оцінювання
+
+| Критерій | Відмінно                                                          | Задовільно                   | Потребує покращення                  |
+| -------- | ----------------------------------------------------------------- | ---------------------------- | ------------------------------------ |
+|          | Повністю перестилізований тераріум за допомогою Flexbox або CSS Grid | Перестилізовано кілька елементів | Не вдалося перестилізувати тераріум |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..eb3484f4
--- /dev/null
+++ b/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -0,0 +1,231 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "30f8903a1f290e3d438dc2c70fe60259",
+  "translation_date": "2025-08-27T22:38:32+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "uk"
+}
+-->
+# Проєкт "Тераріум", частина 3: Маніпуляція DOM і замикання
+
+![DOM і замикання](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.uk.png)
+> Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Передлекційна вікторина
+
+[Передлекційна вікторина](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Вступ
+
+Маніпуляція DOM, або "Document Object Model", є ключовим аспектом веброзробки. Згідно з [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "Document Object Model (DOM) — це представлення даних об'єктів, які складають структуру та зміст документа в Інтернеті". Виклики, пов'язані з маніпуляцією DOM, часто спонукали розробників використовувати JavaScript-фреймворки замість чистого JavaScript для управління DOM, але ми впораємося самостійно!
+
+Крім того, цей урок познайомить вас із поняттям [замикання в JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures), яке можна уявити як функцію, вкладену в іншу функцію, що дозволяє внутрішній функції отримувати доступ до області видимості зовнішньої функції.
+
+> Замикання в JavaScript — це велика і складна тема. У цьому уроці ми торкнемося найосновнішої ідеї: у коді цього тераріуму ви знайдете замикання — внутрішню функцію та зовнішню функцію, побудовані таким чином, щоб внутрішня функція мала доступ до області видимості зовнішньої функції. Для більш детальної інформації про те, як це працює, відвідайте [розширену документацію](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Ми використаємо замикання для маніпуляції DOM.
+
+Уявіть DOM як дерево, яке представляє всі способи, якими можна маніпулювати документом вебсторінки. Було створено різні API (інтерфейси програмування додатків), щоб програмісти могли отримувати доступ до DOM і редагувати, змінювати, переставляти та іншим чином керувати ним, використовуючи свою улюблену мову програмування.
+
+![Представлення дерева DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.uk.png)
+
+> Представлення DOM і HTML-розмітки, яка його посилається. Від [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+У цьому уроці ми завершимо наш інтерактивний проєкт тераріуму, створивши JavaScript, який дозволить користувачеві маніпулювати рослинами на сторінці.
+
+### Передумови
+
+Ви повинні мати готові HTML і CSS для вашого тераріуму. До кінця цього уроку ви зможете переміщати рослини в тераріум і з нього, перетягуючи їх.
+
+### Завдання
+
+У папці вашого тераріуму створіть новий файл під назвою `script.js`. Імпортуйте цей файл у секцію `<head>`:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Примітка: використовуйте `defer` при імпорті зовнішнього JavaScript-файлу в HTML-файл, щоб дозволити виконання JavaScript лише після повного завантаження HTML-файлу. Ви також можете використовувати атрибут `async`, який дозволяє скрипту виконуватися під час парсингу HTML-файлу, але в нашому випадку важливо, щоб елементи HTML були повністю доступні для перетягування перед виконанням скрипту.
+
+---
+
+## Елементи DOM
+
+Перше, що вам потрібно зробити, — це створити посилання на елементи, якими ви хочете маніпулювати в DOM. У нашому випадку це 14 рослин, які зараз знаходяться в бічних панелях.
+
+### Завдання
+
+```html
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+Що тут відбувається? Ви посилаєтеся на документ і шукаєте в його DOM елемент із певним Id. Пам'ятаєте, як у першому уроці з HTML ви дали індивідуальні Id кожному зображенню рослини (`id="plant1"`)? Тепер ви скористаєтеся цією роботою. Після ідентифікації кожного елемента ви передаєте цей елемент у функцію `dragElement`, яку ви створите за хвилину. Таким чином, елемент у HTML тепер готовий до перетягування або скоро буде.
+
+✅ Чому ми посилаємося на елементи за Id? Чому не за їх CSS-класом? Ви можете звернутися до попереднього уроку з CSS, щоб відповісти на це запитання.
+
+---
+
+## Замикання
+
+Тепер ви готові створити замикання `dragElement`, яке є зовнішньою функцією, що охоплює внутрішню функцію або функції (у нашому випадку їх буде три).
+
+Замикання корисні, коли одна або кілька функцій потребують доступу до області видимості зовнішньої функції. Ось приклад:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+У цьому прикладі функція `displayCandy` охоплює функцію, яка додає новий тип цукерок до масиву, що вже існує у функції. Якщо ви запустите цей код, масив `candy` буде недоступним, оскільки він є локальною змінною (локальною для замикання).
+
+✅ Як зробити масив `candy` доступним? Спробуйте перемістити його за межі замикання. Таким чином, масив стане глобальним, а не залишатиметься доступним лише для локальної області видимості замикання.
+
+### Завдання
+
+Під оголошеннями елементів у `script.js` створіть функцію:
+
+```javascript
+function dragElement(terrariumElement) {
+	//set 4 positions for positioning on the screen
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+`dragElement` отримує свій об'єкт `terrariumElement` із оголошень у верхній частині скрипту. Потім ви встановлюєте деякі локальні позиції на `0` для об'єкта, переданого у функцію. Це локальні змінні, які будуть маніпулюватися для кожного елемента, коли ви додасте функціональність перетягування до кожного елемента в замиканні. Тераріум буде заповнений цими перетягнутими елементами, тому додаток має відстежувати, де вони розміщені.
+
+Крім того, елемент `terrariumElement`, переданий у цю функцію, отримує подію `pointerdown`, яка є частиною [веб API](https://developer.mozilla.org/docs/Web/API), створених для допомоги в управлінні DOM. `onpointerdown` спрацьовує, коли натискається кнопка або, у нашому випадку, торкається елемент, який можна перетягувати. Цей обробник подій працює як у [веббраузерах, так і в мобільних браузерах](https://caniuse.com/?search=onpointerdown), з кількома винятками.
+
+✅ [Обробник подій `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) має набагато більшу підтримку між браузерами; чому б не використати його тут? Подумайте про точний тип взаємодії зі сторінкою, який ви намагаєтеся створити.
+
+---
+
+## Функція Pointerdrag
+
+Елемент `terrariumElement` готовий до перетягування; коли подія `onpointerdown` спрацьовує, викликається функція `pointerDrag`. Додайте цю функцію прямо під рядком: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Завдання 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Відбувається кілька речей. По-перше, ви запобігаєте стандартним подіям, які зазвичай відбуваються при pointerdown, використовуючи `e.preventDefault();`. Таким чином, ви отримуєте більше контролю над поведінкою інтерфейсу.
+
+> Поверніться до цього рядка, коли ви повністю створите файл скрипту, і спробуйте без `e.preventDefault()` — що відбувається?
+
+По-друге, відкрийте `index.html` у вікні браузера та перевірте інтерфейс. Коли ви натискаєте на рослину, ви можете побачити, як подія 'e' захоплюється. Досліджуйте подію, щоб побачити, скільки інформації збирається за одну подію pointerdown!  
+
+Далі зверніть увагу, як локальні змінні `pos3` і `pos4` встановлюються на e.clientX. Ви можете знайти значення `e` у панелі інспекції. Ці значення захоплюють координати x і y рослини в момент її натискання або торкання. Вам потрібен детальний контроль над поведінкою рослин під час їх натискання та перетягування, тому ви відстежуєте їх координати.
+
+✅ Чи стає зрозумілішим, чому весь цей додаток побудований на одному великому замиканні? Як би ви підтримували область видимості для кожної з 14 рослин, які можна перетягувати, якщо б це було не так?
+
+Завершіть початкову функцію, додавши ще дві маніпуляції подіями pointer під `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Тепер ви вказуєте, що хочете, щоб рослина перетягувалася разом із вказівником під час його переміщення, і щоб жест перетягування припинявся, коли ви знімаєте вибір рослини. `onpointermove` і `onpointerup` є частинами того ж API, що й `onpointerdown`. Інтерфейс зараз буде видавати помилки, оскільки ви ще не визначили функції `elementDrag` і `stopElementDrag`, тому створіть їх наступними.
+
+## Функції elementDrag і stopElementDrag
+
+Ви завершите своє замикання, додавши ще дві внутрішні функції, які будуть обробляти те, що відбувається, коли ви перетягуєте рослину і припиняєте її перетягування. Поведінка, яку ви хочете, полягає в тому, щоб ви могли перетягувати будь-яку рослину в будь-який час і розміщувати її будь-де на екрані. Цей інтерфейс досить нейтральний (наприклад, немає зони скидання), щоб дозволити вам створити свій тераріум саме так, як вам подобається, додаючи, видаляючи та змінюючи положення рослин.
+
+### Завдання
+
+Додайте функцію `elementDrag` прямо після закриваючої фігурної дужки функції `pointerDrag`:
+
+```javascript
+function elementDrag(e) {
+	pos1 = pos3 - e.clientX;
+	pos2 = pos4 - e.clientY;
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+	console.log(pos1, pos2, pos3, pos4);
+	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+}
+```
+У цій функції ви багато редагуєте початкові позиції 1-4, які ви встановили як локальні змінні у зовнішній функції. Що тут відбувається?
+
+Під час перетягування ви перепризначаєте `pos1`, роблячи його рівним `pos3` (який ви встановили раніше як `e.clientX`) мінус поточне значення `e.clientX`. Ви виконуєте аналогічну операцію для `pos2`. Потім ви скидаєте `pos3` і `pos4` до нових координат X і Y елемента. Ви можете спостерігати ці зміни в консолі під час перетягування. Потім ви маніпулюєте стилем css рослини, щоб встановити її нову позицію на основі нових позицій `pos1` і `pos2`, обчислюючи верхні та ліві координати X і Y рослини, порівнюючи її зміщення з цими новими позиціями.
+
+> `offsetTop` і `offsetLeft` — це властивості CSS, які встановлюють позицію елемента на основі його батьківського елемента; його батьком може бути будь-який елемент, який не має позиції `static`. 
+
+Усі ці перерахунки позицій дозволяють вам точно налаштувати поведінку тераріуму та його рослин.
+
+### Завдання 
+
+Останнє завдання для завершення інтерфейсу — додати функцію `stopElementDrag` після закриваючої фігурної дужки функції `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Ця невелика функція скидає події `onpointerup` і `onpointermove`, щоб ви могли або перезапустити прогрес вашої рослини, почавши її перетягувати знову, або почати перетягувати нову рослину.
+
+✅ Що відбувається, якщо ви не встановите ці події в null?
+
+Тепер ваш проєкт завершено!
+
+🥇Вітаємо! Ви завершили свій чудовий тераріум! ![готовий тераріум](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.uk.png)
+
+---
+
+## 🚀Виклик
+
+Додайте новий обробник подій до вашого замикання, щоб зробити щось ще з рослинами; наприклад, подвійне клацання на рослині, щоб перемістити її на передній план. Проявіть креативність!
+
+## Післялекційна вікторина
+
+[Післялекційна вікторина](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Огляд і самостійне навчання
+
+Хоча перетягування елементів на екрані здається тривіальним, існує багато способів зробити це і багато підводних каменів, залежно від ефекту, якого ви прагнете. Насправді існує цілий [API для перетягування](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API), який ви можете спробувати. Ми не використовували його в цьому модулі, оскільки ефект, який ми хотіли, був дещо іншим, але спробуйте цей API у своєму власному проєкті і подивіться, чого ви можете досягти.
+
+Знайдіть більше інформації про події вказівника в [документації W3C](https://www.w3.org/TR/pointerevents1/) і на [MDN web docs](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Завжди перевіряйте можливості браузера за допомогою [CanIUse.com](https://caniuse.com/).
+
+## Завдання
+
+[Попрацюйте трохи більше з DOM](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..7754f3df
--- /dev/null
+++ b/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "22fb6c3cb570c47f1ac65048393941fa",
+  "translation_date": "2025-08-27T22:39:57+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Працюйте трохи більше з DOM
+
+## Інструкції
+
+Дослідіть DOM трохи глибше, «усиновивши» елемент DOM. Відвідайте [список інтерфейсів DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) на MDN і виберіть один. Знайдіть його використання на веб-сайті в інтернеті та напишіть пояснення, як він використовується.
+
+## Критерії оцінювання
+
+| Критерії | Відмінно                                      | Задовільно                                      | Потребує покращення     |
+| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|          | Представлено опис у вигляді абзацу з прикладом | Представлено опис у вигляді абзацу без прикладу | Опис не представлено    |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/3-terrarium/README.md b/translations/uk/3-terrarium/README.md
new file mode 100644
index 00000000..2826f264
--- /dev/null
+++ b/translations/uk/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-27T22:34:33+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "uk"
+}
+-->
+# Мій тераріум: проект для вивчення HTML, CSS і маніпуляцій з DOM за допомогою JavaScript 🌵🌱
+
+Невелика вправа з перетягування елементів. З невеликою кількістю HTML, JS і CSS ви зможете створити веб-інтерфейс, стилізувати його і навіть додати кілька взаємодій на ваш вибір.
+
+![мій тераріум](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.uk.png)
+
+# Уроки
+
+1. [Вступ до HTML](./1-intro-to-html/README.md)
+2. [Вступ до CSS](./2-intro-to-css/README.md)
+3. [Вступ до DOM і замикань у JS](./3-intro-to-DOM-and-closures/README.md)
+
+## Авторство
+
+Написано з ♥️ [Jen Looper](https://www.twitter.com/jenlooper)
+
+Тераріум, створений за допомогою CSS, був натхненний скляною банкою від Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Ілюстрації намальовані вручну [Jen Looper](http://jenlooper.com) за допомогою Procreate.
+
+## Розгортання вашого тераріуму
+
+Ви можете розгорнути або опублікувати ваш тераріум в інтернеті за допомогою Azure Static Web Apps.
+
+1. Форкніть цей репозиторій
+
+2. Натисніть цю кнопку
+
+[![Кнопка для розгортання в Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Пройдіть майстер створення вашого додатку. Переконайтеся, що ви встановили корінь додатку на `/solution` або корінь вашої кодової бази. У цьому додатку немає API, тому не хвилюйтеся про його додавання. У вашому форкнутому репозиторії буде створена папка github, яка допоможе службі збірки Azure Static Web Apps зібрати і опублікувати ваш додаток на новому URL.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/3-terrarium/solution/README.md b/translations/uk/3-terrarium/solution/README.md
new file mode 100644
index 00000000..a4ee8543
--- /dev/null
+++ b/translations/uk/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-27T22:36:22+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "uk"
+}
+-->
+# Мій тераріум: проект для вивчення HTML, CSS та маніпуляцій з DOM за допомогою JavaScript 🌵🌱
+
+Невелика вправа з перетягування елементів. За допомогою трохи HTML, JS і CSS ви можете створити веб-інтерфейс, стилізувати його та додати взаємодію.
+
+![мій тераріум](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.uk.png)
+
+## Авторство
+
+Написано з ♥️ [Джен Лупер](https://www.twitter.com/jenlooper)
+
+Тераріум, створений за допомогою CSS, був натхненний скляною банкою від Якоба Мандри [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Ілюстрації були намальовані вручну [Джен Лупер](http://jenlooper.com) за допомогою Procreate.
+
+## Розгортання вашого тераріуму
+
+Ви можете розгорнути або опублікувати ваш тераріум в інтернеті за допомогою Azure Static Web Apps.
+
+1. Зробіть форк цього репозиторію
+
+2. Натисніть цю кнопку
+
+[![Кнопка для розгортання в Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Пройдіть через майстер створення вашого додатку. Переконайтеся, що ви встановили корінь додатку на `/solution` або корінь вашої кодової бази. У цьому додатку немає API, тому не хвилюйтеся щодо його додавання. У вашому форкованому репозиторії буде створена папка .github, яка допоможе службі побудови Azure Static Web Apps створити та опублікувати ваш додаток на новому URL.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/4-typing-game/README.md b/translations/uk/4-typing-game/README.md
new file mode 100644
index 00000000..07a489c4
--- /dev/null
+++ b/translations/uk/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-27T22:43:08+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "uk"
+}
+-->
+# Програмування, кероване подіями - Створення гри на швидкість друку
+
+## Вступ
+
+Друкування — це одна з найбільш недооцінених навичок розробника. Здатність швидко переносити думки з голови до редактора дозволяє творчості вільно текти. Один із найкращих способів навчитися — це грати в гру!
+
+> Тож, давайте створимо гру на швидкість друку!
+
+Ви будете використовувати свої навички JavaScript, HTML і CSS, які ви вже освоїли, щоб створити гру на швидкість друку. Гра запропонує гравцеві випадкову цитату (ми використовуємо цитати [Шерлока Холмса](https://en.wikipedia.org/wiki/Sherlock_Holmes)) і засіче час, за який гравець зможе точно її надрукувати. Ви будете використовувати свої навички JavaScript, HTML і CSS, які ви вже освоїли, щоб створити цю гру.
+
+![демо](../../../4-typing-game/images/demo.gif)
+
+## Передумови
+
+Цей урок передбачає, що ви знайомі з такими концепціями:
+
+- Створення текстових полів вводу та кнопок
+- CSS і встановлення стилів за допомогою класів
+- Основи JavaScript
+  - Створення масиву
+  - Генерація випадкового числа
+  - Отримання поточного часу
+
+## Урок
+
+[Створення гри на швидкість друку за допомогою програмування, керованого подіями](./typing-game/README.md)
+
+## Подяки
+
+Написано з ♥️ [Крістофером Гаррісоном](http://www.twitter.com/geektrainer)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/4-typing-game/solution/README.md b/translations/uk/4-typing-game/solution/README.md
new file mode 100644
index 00000000..dc01e879
--- /dev/null
+++ b/translations/uk/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:45:44+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "uk"
+}
+-->
+Це заповнювач, залишений порожнім навмисно
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/4-typing-game/typing-game/README.md b/translations/uk/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..b05e04d0
--- /dev/null
+++ b/translations/uk/4-typing-game/typing-game/README.md
@@ -0,0 +1,353 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-27T22:43:30+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення гри за допомогою подій
+
+## Тест перед лекцією
+
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Програмування, кероване подіями
+
+Коли ми створюємо веб-додаток, ми надаємо графічний інтерфейс користувача (GUI), щоб користувач міг взаємодіяти з тим, що ми створили. Найпоширеніший спосіб взаємодії з браузером — це кліки та введення тексту в різних елементах. Виклик для нас, як розробників, полягає в тому, що ми не знаємо, коли користувач виконає ці дії!
+
+[Програмування, кероване подіями](https://en.wikipedia.org/wiki/Event-driven_programming) — це тип програмування, який нам потрібен для створення GUI. Якщо розібрати цю фразу, то основним словом тут є **подія**. [Подія](https://www.merriam-webster.com/dictionary/event), згідно з Merriam-Webster, визначається як "щось, що відбувається". Це ідеально описує нашу ситуацію. Ми знаємо, що щось станеться, і ми хочемо виконати певний код у відповідь, але ми не знаємо, коли це станеться.
+
+Щоб позначити частину коду, яку ми хочемо виконати, ми створюємо функцію. У [процедурному програмуванні](https://en.wikipedia.org/wiki/Procedural_programming) функції викликаються у певному порядку. Те ж саме буде справедливим для програмування, керованого подіями. Різниця полягає в тому, **як** функції будуть викликатися.
+
+Для обробки подій (кліки кнопок, введення тексту тощо) ми реєструємо **слухачів подій**. Слухач подій — це функція, яка чекає на виникнення події та виконується у відповідь. Слухачі подій можуть оновлювати інтерфейс користувача, викликати сервер або виконувати будь-які інші дії у відповідь на дії користувача. Ми додаємо слухача подій за допомогою [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) і передаємо функцію для виконання.
+
+> **NOTE:** Варто зазначити, що існує багато способів створення слухачів подій. Ви можете використовувати анонімні функції або створювати іменовані. Ви можете використовувати різні скорочення, наприклад, встановлювати властивість `click` або використовувати `addEventListener`. У нашій вправі ми зосередимося на `addEventListener` і анонімних функціях, оскільки це, мабуть, найпоширеніша техніка, яку використовують веб-розробники. Це також найгнучкіший спосіб, оскільки `addEventListener` працює для всіх подій, а назву події можна передати як параметр.
+
+### Поширені події
+
+Існує [безліч подій](https://developer.mozilla.org/docs/Web/Events), які ви можете використовувати при створенні додатків. Практично будь-яка дія користувача на сторінці викликає подію, що дає вам багато можливостей для забезпечення бажаного досвіду. На щастя, вам зазвичай потрібна лише невелика кількість подій. Ось кілька поширених (включаючи ті, які ми будемо використовувати для створення нашої гри):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Користувач натиснув на щось, зазвичай кнопку або гіперпосилання
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Користувач натиснув праву кнопку миші
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Користувач виділив текст
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Користувач ввів текст
+
+## Створення гри
+
+Ми створимо гру, щоб дослідити, як працюють події в JavaScript. Наша гра перевірятиме навички набору тексту гравця, що є однією з найбільш недооцінених навичок, які повинні мати всі розробники. Ми всі повинні практикувати набір тексту! Загальний процес гри виглядатиме так:
+
+- Гравець натискає кнопку старту і отримує цитату для набору
+- Гравець набирає цитату якомога швидше у текстовому полі
+  - Кожне завершене слово виділяється наступним
+  - Якщо гравець зробив помилку, текстове поле стає червоним
+  - Коли гравець завершує цитату, відображається повідомлення про успіх із витраченим часом
+
+Давайте створимо нашу гру та дізнаємося про події!
+
+### Структура файлів
+
+Нам знадобиться три файли: **index.html**, **script.js** і **style.css**. Давайте почнемо з їх налаштування, щоб полегшити собі життя.
+
+- Створіть нову папку для вашої роботи, відкривши консоль або термінал і виконавши наступну команду:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Відкрийте Visual Studio Code
+
+```bash
+code .
+```
+
+- Додайте три файли до папки у Visual Studio Code з наступними назвами:
+  - index.html
+  - script.js
+  - style.css
+
+## Створення інтерфейсу користувача
+
+Якщо ми розглянемо вимоги, то зрозуміємо, що нам знадобиться кілька елементів на нашій HTML-сторінці. Це схоже на рецепт, де нам потрібні інгредієнти:
+
+- Місце для відображення цитати, яку користувач має набрати
+- Місце для відображення повідомлень, наприклад, повідомлення про успіх
+- Текстове поле для введення тексту
+- Кнопка старту
+
+Кожному з цих елементів потрібні ID, щоб ми могли працювати з ними у нашому JavaScript. Ми також додамо посилання на CSS і JavaScript файли, які ми створимо.
+
+Створіть новий файл під назвою **index.html**. Додайте наступний HTML:
+
+```html
+<!-- inside index.html -->
+<html>
+<head>
+  <title>Typing game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Typing game!</h1>
+  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
+  <p id="quote"></p> <!-- This will display our quote -->
+  <p id="message"></p> <!-- This will display any status messages -->
+  <div>
+    <input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
+    <button type="button" id="start">Start</button> <!-- To start the game -->
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
+```
+
+### Запуск додатка
+
+Завжди краще розробляти поступово, щоб бачити, як виглядає результат. Давайте запустимо наш додаток. У Visual Studio Code є чудове розширення під назвою [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), яке буде локально хостити ваш додаток і оновлювати браузер кожного разу, коли ви зберігаєте зміни.
+
+- Встановіть [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), перейшовши за посиланням і натиснувши **Install**
+  - Браузер запропонує вам відкрити Visual Studio Code, а потім Visual Studio Code запропонує виконати установку
+  - Перезапустіть Visual Studio Code, якщо буде запропоновано
+- Після встановлення у Visual Studio Code натисніть Ctrl-Shift-P (або Cmd-Shift-P), щоб відкрити командну палітру
+- Введіть **Live Server: Open with Live Server**
+  - Live Server почне хостити ваш додаток
+- Відкрийте браузер і перейдіть на **https://localhost:5500**
+- Тепер ви повинні побачити створену вами сторінку!
+
+Давайте додамо функціональність.
+
+## Додати CSS
+
+Після створення HTML додамо CSS для основного стилювання. Нам потрібно виділити слово, яке гравець має набрати, і змінити колір текстового поля, якщо введений текст неправильний. Ми зробимо це за допомогою двох класів.
+
+Створіть новий файл під назвою **style.css** і додайте наступний синтаксис.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ Що стосується CSS, ви можете оформити сторінку на свій смак. Приділіть трохи часу, щоб зробити сторінку більш привабливою:
+
+- Виберіть інший шрифт
+- Змініть кольори заголовків
+- Змініть розміри елементів
+
+## JavaScript
+
+Після створення інтерфейсу користувача настав час зосередитися на JavaScript, який забезпечить логіку. Ми розділимо це на кілька етапів:
+
+- [Створення констант](../../../../4-typing-game/typing-game)
+- [Слухач подій для старту гри](../../../../4-typing-game/typing-game)
+- [Слухач подій для введення тексту](../../../../4-typing-game/typing-game)
+
+Але спочатку створіть новий файл під назвою **script.js**.
+
+### Додати константи
+
+Нам знадобиться кілька елементів, щоб полегшити собі програмування. Знову ж таки, як у рецепті, ось що нам потрібно:
+
+- Масив із списком усіх цитат
+- Порожній масив для зберігання всіх слів поточної цитати
+- Місце для зберігання індексу слова, яке гравець зараз набирає
+- Час, коли гравець натиснув старт
+
+Нам також потрібні посилання на елементи інтерфейсу користувача:
+
+- Текстове поле (**typed-value**)
+- Відображення цитати (**quote**)
+- Повідомлення (**message**)
+
+```javascript
+// inside script.js
+// all of our quotes
+const quotes = [
+    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+    'There is nothing more deceptive than an obvious fact.',
+    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+    'I never make exceptions. An exception disproves the rule.',
+    'What one man can invent another can discover.',
+    'Nothing clears up a case so much as stating it to another person.',
+    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+// store the list of words and the index of the word the player is currently typing
+let words = [];
+let wordIndex = 0;
+// the starting time
+let startTime = Date.now();
+// page elements
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+```
+
+✅ Додайте більше цитат до вашої гри
+
+> **NOTE:** Ми можемо отримувати елементи в будь-який момент у коді за допомогою `document.getElementById`. Оскільки ми будемо часто звертатися до цих елементів, ми уникнемо помилок із рядковими літералами, використовуючи константи. Фреймворки, такі як [Vue.js](https://vuejs.org/) або [React](https://reactjs.org/), можуть допомогти вам краще централізувати ваш код.
+
+Приділіть хвилинку, щоб переглянути відео про використання `const`, `let` і `var`.
+
+[![Типи змінних](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Типи змінних")
+
+> 🎥 Натисніть на зображення вище, щоб переглянути відео про змінні.
+
+### Додати логіку старту
+
+Щоб почати гру, гравець натисне старт. Звісно, ми не знаємо, коли він це зробить. Тут нам допоможе [слухач подій](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). Слухач подій дозволить нам чекати на виникнення події та виконувати код у відповідь. У нашому випадку ми хочемо виконати код, коли користувач натисне старт.
+
+Коли користувач натискає **старт**, нам потрібно вибрати цитату, налаштувати інтерфейс користувача та налаштувати відстеження поточного слова та часу. Нижче наведено JavaScript, який вам потрібно додати; ми обговоримо його після блоку коду.
+
+```javascript
+// at the end of script.js
+document.getElementById('start').addEventListener('click', () => {
+  // get a quote
+  const quoteIndex = Math.floor(Math.random() * quotes.length);
+  const quote = quotes[quoteIndex];
+  // Put the quote into an array of words
+  words = quote.split(' ');
+  // reset the word index for tracking
+  wordIndex = 0;
+
+  // UI updates
+  // Create an array of span elements so we can set a class
+  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
+  // Convert into string and set as innerHTML on quote display
+  quoteElement.innerHTML = spanWords.join('');
+  // Highlight the first word
+  quoteElement.childNodes[0].className = 'highlight';
+  // Clear any prior messages
+  messageElement.innerText = '';
+
+  // Setup the textbox
+  // Clear the textbox
+  typedValueElement.value = '';
+  // set focus
+  typedValueElement.focus();
+  // set the event handler
+
+  // Start the timer
+  startTime = new Date().getTime();
+});
+```
+
+Розберемо код!
+
+- Налаштування відстеження слів
+  - Використання [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) і [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) дозволяє нам випадково вибрати цитату з масиву `quotes`
+  - Ми перетворюємо `quote` у масив `words`, щоб відстежувати слово, яке гравець зараз набирає
+  - `wordIndex` встановлюється на 0, оскільки гравець почне з першого слова
+- Налаштування інтерфейсу користувача
+  - Створюємо масив `spanWords`, який містить кожне слово всередині елемента `span`
+    - Це дозволить нам виділити слово на екрані
+  - `join` масиву створює рядок, який ми можемо використовувати для оновлення `innerHTML` у `quoteElement`
+    - Це відобразить цитату для гравця
+  - Встановлюємо `className` першого елемента `span` на `highlight`, щоб виділити його жовтим кольором
+  - Очищаємо `messageElement`, встановлюючи `innerText` на `''`
+- Налаштування текстового поля
+  - Очищаємо поточне `value` у `typedValueElement`
+  - Встановлюємо `focus` на `typedValueElement`
+- Запускаємо таймер, викликаючи `getTime`
+
+### Додати логіку введення тексту
+
+Коли гравець вводить текст, виникає подія `input`. Цей слухач подій перевірятиме, чи правильно гравець вводить слово, і оброблятиме поточний стан гри. Повертаючись до **script.js**, додайте наступний код у кінці. Ми розберемо його після блоку коду.
+
+```javascript
+// at the end of script.js
+typedValueElement.addEventListener('input', () => {
+  // Get the current word
+  const currentWord = words[wordIndex];
+  // get the current value
+  const typedValue = typedValueElement.value;
+
+  if (typedValue === currentWord && wordIndex === words.length - 1) {
+    // end of sentence
+    // Display success
+    const elapsedTime = new Date().getTime() - startTime;
+    const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
+    messageElement.innerText = message;
+  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+    // end of word
+    // clear the typedValueElement for the new word
+    typedValueElement.value = '';
+    // move to the next word
+    wordIndex++;
+    // reset the class name for all elements in quote
+    for (const wordElement of quoteElement.childNodes) {
+      wordElement.className = '';
+    }
+    // highlight the new word
+    quoteElement.childNodes[wordIndex].className = 'highlight';
+  } else if (currentWord.startsWith(typedValue)) {
+    // currently correct
+    // highlight the next word
+    typedValueElement.className = '';
+  } else {
+    // error state
+    typedValueElement.className = 'error';
+  }
+});
+```
+
+Розберемо код! Ми починаємо з отримання поточного слова та значення, яке гравець ввів на даний момент. Потім ми використовуємо каскадну логіку, де перевіряємо, чи завершена цитата, чи завершене слово, чи слово правильне, або (нарешті), чи є помилка.
+
+- Цитата завершена, якщо `typedValue` дорівнює `currentWord`, а `wordIndex` дорівнює одному менше, ніж `length` масиву `words`
+  - Обчислюємо `elapsedTime`, віднімаючи `startTime` від поточного часу
+  - Ділимо `elapsedTime` на 1,000, щоб перетворити мілісекунди на секунди
+  - Відображаємо повідомлення про успіх
+- Слово завершене, якщо `typedValue` закінчується пробілом (кінець слова) і `typedValue` дорівнює `currentWord`
+  - Встановлюємо `value` у `typedElement` на `''`, щоб дозволити введення наступного слова
+  - Збільшуємо `wordIndex`, щоб перейти до наступного слова
+  - Проходимо через всі `childNodes` у `quoteElement`, встановлюючи `className` на `''`, щоб повернути стандартний вигляд
+  - Встановлюємо `className` поточного слова на `highlight`, щоб позначити його як наступне слово для введення
+- Слово введено правильно (але не завершено), якщо `currentWord` починається з `typedValue`
+  - Переконуємося, що `typedValueElement` відображається як стандартний, очищаючи `className`
+- Якщо ми дійшли до цього моменту, є помилка
+  - Встановлюємо `className` у `typedValueElement` на `error`
+
+## Перевірте ваш додаток
+
+Ви дійшли до кінця! Останній крок — переконатися, що ваш додаток працює. Спробуйте! Не хвилюйтеся, якщо виникнуть помилки; **усі розробники** стикаються з помилками. Аналізуйте повідомлення та виправляйте їх за потреби.
+
+Натисніть **старт** і починайте вводити текст! Це має виглядати приблизно так, як показано на анімації.
+
+![Анімація гри в дії](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Виклик
+
+Додайте більше функціональності
+
+- Вимкніть слухач подій `input` після завершення гри та увімкніть його знову, коли натиснуто кнопку
+- Вимкніть текстове поле, коли гравець завершує цитату
+- Відобразіть модальне діалогове вікно з повідомленням про успіх
+- Зберігайте найвищі результати за допомогою [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Тест після лекції
+
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Огляд і самостійне навчання
+
+Ознайомтеся з [усіма доступними подіями](https://developer.mozilla.org/docs/Web/Events) для розробника через веб-браузер і подумайте про сценарії, в яких ви б використовували кожну з них.
+
+## Завдання
+
+[Створіть нову гру з клавіатурою](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/4-typing-game/typing-game/assignment.md b/translations/uk/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..633b7ea5
--- /dev/null
+++ b/translations/uk/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-27T22:45:31+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Створіть нову гру з клавіатурою
+
+## Інструкції
+
+Створіть невелику гру, яка використовує події клавіатури для виконання завдань. Це може бути різновид гри на швидкість друку або художня гра, яка малює пікселі на екрані при натисканні клавіш. Проявіть креативність!
+
+## Критерії оцінювання
+
+| Критерії | Відмінно                 | Задовільно              | Потребує покращення |
+| -------- | ------------------------ | ----------------------- | ------------------- |
+|          | Представлена повна гра   | Гра дуже мінімальна     | У грі є помилки     |
+|          |                          |                         |                     |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають у результаті використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/1-about-browsers/README.md b/translations/uk/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..57d0bc14
--- /dev/null
+++ b/translations/uk/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-27T22:09:38+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "uk"
+}
+-->
+# Проєкт розширення для браузера Частина 1: Все про браузери
+
+![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.uk.jpg)
+> Скетчноут від [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Тест перед лекцією
+
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Вступ
+
+Розширення для браузера додають додаткову функціональність до браузера. Але перед тим, як створювати одне з них, варто трохи дізнатися про те, як браузери виконують свою роботу.
+
+### Про браузер
+
+У цьому циклі уроків ви навчитеся створювати розширення для браузера, яке працюватиме в Chrome, Firefox та Edge. У цій частині ви дізнаєтеся, як працюють браузери, і створите структуру елементів розширення для браузера.
+
+Але що таке браузер? Це програмне забезпечення, яке дозволяє кінцевому користувачеві отримувати контент із сервера та відображати його на веб-сторінках.
+
+✅ Трохи історії: перший браузер називався "WorldWideWeb" і був створений сером Тімоті Бернерсом-Лі у 1990 році.
+
+![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.uk.jpg)
+> Деякі ранні браузери, через [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Коли користувач підключається до інтернету, використовуючи адресу URL (Uniform Resource Locator), зазвичай через протокол передачі гіпертексту `http` або `https`, браузер взаємодіє з веб-сервером і отримує веб-сторінку.
+
+На цьому етапі механізм рендерингу браузера відображає її на пристрої користувача, який може бути мобільним телефоном, настільним комп'ютером або ноутбуком.
+
+Браузери також мають можливість кешувати контент, щоб його не доводилося отримувати з сервера кожного разу. Вони можуть записувати історію активності користувача, зберігати "куки" — невеликі фрагменти даних, які містять інформацію про активність користувача, і багато іншого.
+
+Важливо пам'ятати, що браузери не однакові! Кожен браузер має свої сильні та слабкі сторони, і професійний веб-розробник повинен розуміти, як зробити веб-сторінки ефективними для різних браузерів. Це включає роботу з маленькими екранами, такими як мобільні телефони, а також з користувачами, які перебувають офлайн.
+
+Дуже корисний веб-сайт, який варто додати в закладки у вашому улюбленому браузері, — це [caniuse.com](https://www.caniuse.com). Коли ви створюєте веб-сторінки, дуже корисно використовувати списки підтримуваних технологій на цьому сайті, щоб найкраще підтримувати своїх користувачів.
+
+✅ Як дізнатися, які браузери найпопулярніші серед користувачів вашого веб-сайту? Перевірте свою аналітику — ви можете встановити різні пакети аналітики як частину процесу веб-розробки, і вони покажуть вам, які браузери найчастіше використовуються.
+
+## Розширення для браузера
+
+Чому варто створювати розширення для браузера? Це зручний інструмент, який можна прикріпити до браузера для швидкого доступу до завдань, які ви часто повторюєте. Наприклад, якщо вам потрібно перевіряти кольори на різних веб-сторінках, які ви використовуєте, ви можете встановити розширення для вибору кольорів. Якщо вам важко запам'ятовувати паролі, ви можете використовувати розширення для управління паролями.
+
+Розширення для браузера також цікаво розробляти. Вони зазвичай виконують обмежену кількість завдань, але роблять це дуже добре.
+
+✅ Які ваші улюблені розширення для браузера? Які завдання вони виконують?
+
+### Встановлення розширень
+
+Перед тим, як почати створювати, ознайомтеся з процесом створення та розгортання розширення для браузера. Хоча кожен браузер трохи відрізняється у тому, як він управляє цим завданням, процес схожий у Chrome і Firefox на прикладі Edge:
+
+![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.uk.png)
+
+> Примітка: Переконайтеся, що ви увімкнули режим розробника та дозволили встановлення розширень з інших магазинів.
+
+Суть процесу:
+
+- створіть своє розширення, використовуючи `npm run build` 
+- перейдіть у браузері до панелі розширень, використовуючи кнопку "Налаштування та інше" (значок `...`) у верхньому правому куті
+- якщо це нова установка, виберіть `load unpacked`, щоб завантажити нове розширення з його папки збірки (у нашому випадку це `/dist`) 
+- або натисніть `reload`, якщо ви перезавантажуєте вже встановлене розширення
+
+✅ Ці інструкції стосуються розширень, які ви створюєте самостійно; щоб встановити розширення, які вже випущені в магазин розширень браузера, перейдіть до відповідних [магазинів](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) і встановіть потрібне розширення.
+
+### Початок роботи
+
+Ви створите розширення для браузера, яке відображатиме вуглецевий слід вашого регіону, показуючи енергоспоживання вашого регіону та джерело енергії. Розширення матиме форму для збору ключа API, щоб ви могли отримати доступ до API CO2 Signal.
+
+**Вам потрібно:**
+
+- [ключ API](https://www.co2signal.com/); введіть свою електронну адресу у поле на цій сторінці, і вам буде надіслано ключ
+- [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
+- [початковий код](../../../../5-browser-extension/start). Завантажте папку `start`; ви будете доповнювати код у цій папці.
+- [NPM](https://www.npmjs.com) - NPM — це інструмент управління пакетами; встановіть його локально, і пакети, зазначені у вашому файлі `package.json`, будуть встановлені для використання у вашому веб-активі
+
+✅ Дізнайтеся більше про управління пакетами у цьому [чудовому модулі Learn](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Приділіть хвилину, щоб переглянути кодову базу:
+
+dist
+    -|manifest.json (налаштування за замовчуванням тут)
+    -|index.html (HTML-розмітка фронтенду тут)
+    -|background.js (JS для фону тут)
+    -|main.js (збірка JS)
+src
+    -|index.js (ваш JS-код тут)
+
+✅ Як тільки у вас буде ключ API та код регіону, збережіть їх десь у нотатках для подальшого використання.
+
+### Створення HTML для розширення
+
+Це розширення має два вигляди. Один для збору ключа API та коду регіону:
+
+![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.uk.png)
+
+І другий для відображення вуглецевого споживання регіону:
+
+![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.uk.png)
+
+Почнемо зі створення HTML для форми та стилізації її за допомогою CSS.
+
+У папці `/dist` ви створите форму та область результатів. У файлі `index.html` заповніть позначену область форми:
+
+```HTML
+<form class="form-data" autocomplete="on">
+	<div>
+		<h2>New? Add your Information</h2>
+	</div>
+	<div>
+		<label for="region">Region Name</label>
+		<input type="text" id="region" required class="region-name" />
+	</div>
+	<div>
+		<label for="api">Your API Key from tmrow</label>
+		<input type="text" id="api" required class="api-key" />
+	</div>
+	<button class="search-btn">Submit</button>
+</form>	
+```
+Це форма, де збережена інформація буде введена та збережена у локальному сховищі.
+
+Далі створіть область результатів; під фінальним тегом форми додайте кілька div:
+
+```HTML
+<div class="result">
+	<div class="loading">loading...</div>
+	<div class="errors"></div>
+	<div class="data"></div>
+	<div class="result-container">
+		<p><strong>Region: </strong><span class="my-region"></span></p>
+		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+	</div>
+	<button class="clear-btn">Change region</button>
+</div>
+```
+На цьому етапі ви можете спробувати збірку. Переконайтеся, що встановили залежності пакета цього розширення:
+
+```
+npm install
+```
+
+Ця команда використовуватиме npm, менеджер пакетів Node, для встановлення webpack для процесу збірки вашого розширення. Ви можете побачити результат цього процесу, переглянувши `/dist/main.js` — ви побачите, що код був зібраний.
+
+На даний момент розширення має зібратися, і якщо ви розгорнете його в Edge як розширення, ви побачите акуратно відображену форму.
+
+Вітаємо, ви зробили перші кроки до створення розширення для браузера. У наступних уроках ви зробите його більш функціональним та корисним.
+
+---
+
+## 🚀 Виклик
+
+Перегляньте магазин розширень для браузера та встановіть одне з них у свій браузер. Ви можете дослідити його файли цікавими способами. Що ви відкрили?
+
+## Тест після лекції
+
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Огляд та самостійне навчання
+
+На цьому уроці ви дізналися трохи про історію веб-браузера; скористайтеся цією можливістю, щоб дізнатися, як винахідники Всесвітньої павутини уявляли її використання, прочитавши більше про її історію. Деякі корисні сайти:
+
+[Історія веб-браузерів](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[Історія вебу](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Інтерв'ю з Тімом Бернерсом-Лі](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+
+## Завдання 
+
+[Змініть стиль вашого розширення](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/1-about-browsers/assignment.md b/translations/uk/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..2db0c0e3
--- /dev/null
+++ b/translations/uk/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-27T22:10:40+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Змініть стиль вашого розширення
+
+## Інструкції
+
+Кодова база цього розширення вже містить стилі, але ви не зобов’язані їх використовувати; зробіть ваше розширення унікальним, змінивши його стиль, відредагувавши css-файл.
+
+## Критерії оцінювання
+
+| Критерії | Відмінно                                     | Задовільно           | Потребує покращення |
+| -------- | -------------------------------------------- | --------------------- | ------------------- |
+|          | Код подано з функціональними новими стилями  | Стилізація неповна   | Стилі містять помилки |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..2e0442b6
--- /dev/null
+++ b/translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -0,0 +1,240 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e10f168beac4e7b05e30e0eb5c92bf11",
+  "translation_date": "2025-08-27T22:17:02+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "uk"
+}
+-->
+# Проєкт розширення для браузера, частина 2: Виклик API, використання Local Storage
+
+## Тест перед лекцією
+
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Вступ
+
+У цьому уроці ви навчитеся викликати API, надсилаючи форму вашого розширення для браузера, і відображати результати в ньому. Крім того, ви дізнаєтеся, як зберігати дані в локальному сховищі браузера для подальшого використання.
+
+✅ Дотримуйтесь нумерованих сегментів у відповідних файлах, щоб знати, куди вставляти код.
+
+### Налаштування елементів для роботи в розширенні:
+
+На цьому етапі ви вже створили HTML для форми та `<div>` для результатів вашого розширення. Тепер вам потрібно працювати у файлі `/src/index.js` і поступово будувати ваше розширення. Зверніться до [попереднього уроку](../1-about-browsers/README.md) для налаштування проєкту та процесу збірки.
+
+Працюючи у файлі `index.js`, почніть із створення кількох змінних `const`, щоб зберігати значення, пов'язані з різними полями:
+
+```JavaScript
+// form fields
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// results
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+Усі ці поля посилаються на їхні CSS-класи, які ви налаштували в HTML на попередньому уроці.
+
+### Додайте слухачі подій
+
+Далі додайте слухачі подій для форми та кнопки очищення, яка скидає форму, щоб при надсиланні форми або натисканні кнопки очищення щось відбувалося. Також додайте виклик для ініціалізації додатка в кінці файлу:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Зверніть увагу на скорочений запис для прослуховування подій submit або click і на те, як подія передається у функції handleSubmit або reset. Чи можете ви написати еквівалент цього скорочення у довшому форматі? Який підхід вам більше подобається?
+
+### Розробка функцій init() та reset():
+
+Тепер ви створите функцію, яка ініціалізує розширення, і називається вона init():
+
+```JavaScript
+function init() {
+	//if anything is in localStorage, pick it up
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	//set icon to be generic green
+	//todo
+
+	if (storedApiKey === null || storedRegion === null) {
+		//if we don't have the keys, show the form
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+        //if we have saved keys/regions in localStorage, show results when they load
+        displayCarbonUsage(storedApiKey, storedRegion);
+		results.style.display = 'none';
+		form.style.display = 'none';
+		clearBtn.style.display = 'block';
+	}
+};
+
+function reset(e) {
+	e.preventDefault();
+	//clear local storage for region only
+	localStorage.removeItem('regionName');
+	init();
+}
+
+```
+
+У цій функції є цікава логіка. Прочитавши її, чи можете ви зрозуміти, що відбувається?
+
+- створюються дві змінні `const`, щоб перевірити, чи зберіг користувач APIKey і код регіону в локальному сховищі.
+- якщо будь-яке з цих значень дорівнює null, форма відображається, змінюючи її стиль на 'block'.
+- приховуються результати, завантаження та кнопка очищення, а текст помилки встановлюється як порожній рядок.
+- якщо ключ і регіон існують, запускається процедура:
+  - виклик API для отримання даних про вуглецеве споживання,
+  - приховування області результатів,
+  - приховування форми,
+  - відображення кнопки скидання.
+
+Перед тим як рухатися далі, корисно дізнатися про дуже важливу концепцію, доступну в браузерах: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage — це зручний спосіб зберігати рядки в браузері у вигляді пари `ключ-значення`. Цей тип веб-сховища можна маніпулювати за допомогою JavaScript для управління даними в браузері. LocalStorage не має терміну дії, тоді як SessionStorage, інший вид веб-сховища, очищується при закритті браузера. Різні типи сховищ мають свої переваги та недоліки.
+
+> Примітка: ваше розширення для браузера має власне локальне сховище; головне вікно браузера — це окремий екземпляр і працює незалежно.
+
+Ви встановлюєте значення APIKey як рядок, наприклад, і можете побачити, що воно встановлене в Edge, "інспектуючи" веб-сторінку (ви можете клацнути правою кнопкою миші в браузері, щоб інспектувати) і перейти на вкладку Applications, щоб побачити сховище.
+
+![Панель локального сховища](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.uk.png)
+
+✅ Подумайте про ситуації, коли НЕ варто зберігати деякі дані в LocalStorage. Загалом, розміщення API Keys у LocalStorage — це погана ідея! Чи розумієте ви чому? У нашому випадку, оскільки наш додаток створений виключно для навчання і не буде розміщений у магазині додатків, ми використовуємо цей метод.
+
+Зверніть увагу, що ви використовуєте Web API для маніпуляції LocalStorage, використовуючи `getItem()`, `setItem()` або `removeItem()`. Це широко підтримується у браузерах.
+
+Перш ніж створювати функцію `displayCarbonUsage()`, яка викликається в `init()`, давайте створимо функціонал для обробки початкового надсилання форми.
+
+### Обробка надсилання форми
+
+Створіть функцію `handleSubmit`, яка приймає аргумент події `(e)`. Зупиніть поширення події (у цьому випадку ми хочемо зупинити оновлення браузера) і викличте нову функцію `setUpUser`, передаючи аргументи `apiKey.value` і `region.value`. Таким чином, ви використовуєте два значення, які вводяться через початкову форму, коли відповідні поля заповнені.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Освіжіть пам'ять — HTML, який ви створили на попередньому уроці, має два поля введення, значення яких захоплюються через `const`, які ви створили на початку файлу, і обидва вони є `required`, тому браузер не дозволяє користувачам вводити порожні значення.
+
+### Налаштування користувача
+
+Переходячи до функції `setUpUser`, тут ви встановлюєте значення локального сховища для apiKey і regionName. Додайте нову функцію:
+
+```JavaScript
+function setUpUser(apiKey, regionName) {
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	//make initial call
+	displayCarbonUsage(apiKey, regionName);
+}
+```
+
+Ця функція встановлює повідомлення про завантаження, яке відображається під час виклику API. На цьому етапі ви дійшли до створення найважливішої функції цього розширення для браузера!
+
+### Відображення вуглецевого споживання
+
+Нарешті, час зробити запит до API!
+
+Перш ніж рухатися далі, варто обговорити API. API, або [Інтерфейси програмування додатків](https://www.webopedia.com/TERM/A/API.html), є критичним елементом інструментарію веб-розробника. Вони забезпечують стандартні способи взаємодії та інтерфейсу між програмами. Наприклад, якщо ви створюєте веб-сайт, який потребує запиту до бази даних, хтось міг створити API для вас. Хоча існує багато типів API, одним із найпопулярніших є [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ Термін 'REST' означає 'Representational State Transfer' і передбачає використання різноманітно налаштованих URL-адрес для отримання даних. Проведіть невелике дослідження про різні типи API, доступні розробникам. Який формат вам здається найбільш привабливим?
+
+Є важливі моменти, на які слід звернути увагу в цій функції. По-перше, зверніть увагу на ключове слово [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Написання ваших функцій таким чином, щоб вони працювали асинхронно, означає, що вони чекатимуть завершення дії, наприклад, повернення даних, перш ніж продовжити.
+
+Ось коротке відео про `async`:
+
+[![Async і Await для управління обіцянками](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async і Await для управління обіцянками")
+
+> 🎥 Натисніть на зображення вище, щоб переглянути відео про async/await.
+
+Створіть нову функцію для запиту до API C02Signal:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+Це велика функція. Що тут відбувається?
+
+- дотримуючись найкращих практик, ви використовуєте ключове слово `async`, щоб ця функція працювала асинхронно. Функція містить блок `try/catch`, оскільки вона повертає обіцянку, коли API повертає дані. Оскільки ви не контролюєте швидкість відповіді API (він може взагалі не відповісти!), вам потрібно обробити цю невизначеність, викликаючи його асинхронно.
+- ви робите запит до API co2signal, щоб отримати дані вашого регіону, використовуючи ваш API Key. Щоб використовувати цей ключ, вам потрібно використовувати тип автентифікації в параметрах заголовка.
+- коли API відповідає, ви призначаєте різні елементи його відповіді частинам вашого екрану, які ви налаштували для відображення цих даних.
+- якщо виникає помилка або результату немає, ви відображаєте повідомлення про помилку.
+
+✅ Використання асинхронних шаблонів програмування — це ще один дуже корисний інструмент у вашому арсеналі. Прочитайте [про різні способи](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function), якими можна налаштувати цей тип коду.
+
+Вітаємо! Якщо ви зберете своє розширення (`npm run build`) і оновите його на панелі розширень, у вас буде працююче розширення! Єдине, що поки не працює, — це іконка, і ви виправите це в наступному уроці.
+
+---
+
+## 🚀 Виклик
+
+Ми обговорили кілька типів API у цих уроках. Оберіть веб-API та дослідіть, що воно пропонує. Наприклад, ознайомтеся з API, доступними в браузерах, такими як [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Що, на вашу думку, робить API чудовим?
+
+## Тест після лекції
+
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Огляд і самостійне навчання
+
+У цьому уроці ви дізналися про LocalStorage та API, обидва дуже корисні для професійного веб-розробника. Чи можете ви подумати, як ці дві речі працюють разом? Подумайте, як би ви спроєктували веб-сайт, який зберігає елементи для використання API.
+
+## Завдання
+
+[Освойте API](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/uk/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..f8989ff6
--- /dev/null
+++ b/translations/uk/5-browser-extension/2-forms-browsers-local-storage/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a0c78d1dd9d1acdbf7f52e7cc3ebe1a7",
+  "translation_date": "2025-08-27T22:18:50+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Прийміть API
+
+## Інструкції
+
+API можуть бути дуже цікавими для використання. Ось [список багатьох безкоштовних API](https://github.com/public-apis/public-apis). Виберіть API і створіть розширення для браузера, яке вирішує певну проблему. Це може бути маленька проблема, наприклад, недостатня кількість фотографій домашніх тварин (спробуйте [dog CEO API](https://dog.ceo/dog-api/)) або щось більш масштабне - отримуйте задоволення!
+
+## Критерії оцінювання
+
+| Критерій | Відмінно                                                                  | Достатньо                                 | Потребує покращення       |
+| -------- | ------------------------------------------------------------------------- | ----------------------------------------- | ------------------------- |
+|          | Повне розширення для браузера подано з використанням API зі списку вище   | Подано часткове розширення для браузера   | У поданому є помилки      |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..00b1cffa
--- /dev/null
+++ b/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -0,0 +1,176 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f198c6b817b4b2a99749f4662e7cae98",
+  "translation_date": "2025-08-27T22:11:28+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "uk"
+}
+-->
+# Проєкт розширення для браузера, частина 3: Дізнайтеся про фонові завдання та продуктивність
+
+## Тест перед лекцією
+
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Вступ
+
+У двох попередніх уроках цього модуля ви навчилися створювати форму та область відображення для даних, отриманих з API. Це дуже стандартний спосіб створення веб-присутності. Ви навіть дізналися, як асинхронно отримувати дані. Ваше розширення для браузера майже готове.
+
+Залишилося впоратися з деякими фоновими завданнями, зокрема оновленням кольору значка розширення. Це чудова нагода поговорити про те, як браузер керує такими завданнями. Давайте розглянемо ці завдання у контексті продуктивності ваших веб-ресурсів під час їх створення.
+
+## Основи продуктивності вебсайтів
+
+> "Продуктивність вебсайту стосується двох речей: наскільки швидко завантажується сторінка і наскільки швидко виконується код на ній." -- [Зак Гроссбарт](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Тема оптимізації вебсайтів для швидкої роботи на всіх типах пристроїв, для всіх користувачів і в будь-яких умовах є надзвичайно обширною. Ось кілька моментів, які варто враховувати під час створення стандартного вебпроєкту або розширення для браузера.
+
+Перше, що потрібно зробити, щоб переконатися, що ваш сайт працює ефективно, — це зібрати дані про його продуктивність. Найперше місце для цього — інструменти розробника вашого веббраузера. У Edge ви можете вибрати кнопку "Налаштування та інше" (значок із трьома крапками у верхньому правому куті браузера), потім перейти до "Додаткові інструменти" > "Інструменти розробника" і відкрити вкладку "Продуктивність". Ви також можете скористатися комбінацією клавіш `Ctrl` + `Shift` + `I` у Windows або `Option` + `Command` + `I` на Mac, щоб відкрити інструменти розробника.
+
+На вкладці "Продуктивність" є інструмент профілювання. Відкрийте вебсайт (наприклад, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) і натисніть кнопку "Запис", а потім оновіть сайт. Зупиніть запис у будь-який момент, і ви зможете побачити рутинні процеси, які генеруються для "скриптів", "рендерингу" та "малювання" сайту:
+
+![Профайлер Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.uk.png)
+
+✅ Відвідайте [документацію Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) про панель продуктивності в Edge.
+
+> Порада: щоб отримати точні дані про час завантаження вашого сайту, очистіть кеш браузера.
+
+Виберіть елементи на шкалі часу профілю, щоб збільшити події, які відбуваються під час завантаження вашої сторінки.
+
+Отримайте знімок продуктивності вашої сторінки, вибравши частину шкали часу профілю та переглянувши панель зведення:
+
+![Знімок профайлера Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.uk.png)
+
+Перевірте панель журналу подій, щоб побачити, чи є події, які тривали довше 15 мс:
+
+![Журнал подій Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.uk.png)
+
+✅ Ознайомтеся з вашим профайлером! Відкрийте інструменти розробника на цьому сайті та перевірте, чи є вузькі місця. Який ресурс завантажується найдовше? Найшвидше?
+
+## Перевірки профілювання
+
+Загалом, існують деякі "проблемні зони", за якими кожен веброзробник повинен стежити під час створення сайту, щоб уникнути неприємних сюрпризів під час розгортання у продакшн.
+
+**Розміри ресурсів**: За останні кілька років веб став "важчим", а отже, й повільнішим. Частково це пов'язано з використанням зображень.
+
+✅ Перегляньте [Архів Інтернету](https://httparchive.org/reports/page-weight) для історичного огляду ваги сторінок та іншого.
+
+Хорошою практикою є оптимізація зображень і їх доставка у відповідному розмірі та роздільній здатності для ваших користувачів.
+
+**Перегляд DOM**: Браузер має створити свою модель об'єктів документа (DOM) на основі коду, який ви пишете, тому в інтересах хорошої продуктивності сторінки слід мінімізувати теги, використовуючи та стилізуючи лише те, що потрібно сторінці. Наприклад, надлишкові CSS, пов'язані зі сторінкою, можна оптимізувати; стилі, які потрібні лише на одній сторінці, не потрібно включати до основного стилю.
+
+**JavaScript**: Кожен розробник JavaScript повинен стежити за "скриптами, що блокують рендеринг", які мають бути завантажені перед тим, як решта DOM може бути переглянута та відображена у браузері. Розгляньте можливість використання `defer` для ваших вбудованих скриптів (як це зроблено у модулі Terrarium).
+
+✅ Спробуйте кілька сайтів на [вебсайті тестування швидкості сайтів](https://www.webpagetest.org/), щоб дізнатися більше про загальні перевірки, які виконуються для визначення продуктивності сайту.
+
+Тепер, коли ви маєте уявлення про те, як браузер відображає ресурси, які ви йому надсилаєте, давайте розглянемо останні кілька кроків, які потрібно виконати, щоб завершити ваше розширення:
+
+### Створіть функцію для обчислення кольору
+
+Працюючи у файлі `/src/index.js`, додайте функцію під назвою `calculateColor()` після серії змінних `const`, які ви встановили для доступу до DOM:
+
+```JavaScript
+function calculateColor(value) {
+	let co2Scale = [0, 150, 600, 750, 800];
+	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	let closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	console.log(value + ' is closest to ' + closestNum);
+	let num = (element) => element > closestNum;
+	let scaleIndex = co2Scale.findIndex(num);
+
+	let closestColor = colors[scaleIndex];
+	console.log(scaleIndex, closestColor);
+
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+Що тут відбувається? Ви передаєте значення (інтенсивність вуглецю) з виклику API, який ви завершили на попередньому уроці, а потім обчислюєте, наскільки близьке його значення до індексу, представленого у масиві кольорів. Потім ви надсилаєте це найближче значення кольору до chrome runtime.
+
+Chrome.runtime має [API](https://developer.chrome.com/extensions/runtime), яке обробляє всі види фонових завдань, і ваше розширення використовує це:
+
+> "Використовуйте chrome.runtime API для отримання фонової сторінки, повернення деталей про маніфест і прослуховування та реагування на події у життєвому циклі додатка або розширення. Ви також можете використовувати це API для перетворення відносного шляху URL на повністю кваліфіковані URL."
+
+✅ Якщо ви розробляєте це розширення для Edge, вас може здивувати, що ви використовуєте API Chrome. Новіші версії браузера Edge працюють на рушії браузера Chromium, тому ви можете використовувати ці інструменти.
+
+> Зверніть увагу, якщо ви хочете профілювати розширення для браузера, відкрийте інструменти розробника безпосередньо у розширенні, оскільки воно є окремим екземпляром браузера.
+
+### Встановіть колір значка за замовчуванням
+
+Тепер у функції `init()` встановіть значок на універсальний зелений колір, викликавши дію `updateIcon` у Chrome:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Викличте функцію, виконайте виклик
+
+Далі викличте функцію, яку ви щойно створили, додавши її до обіцянки, повернутої API C02Signal:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+І нарешті, у файлі `/dist/background.js` додайте слухач для цих викликів фонових дій:
+
+```JavaScript
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+	if (msg.action === 'updateIcon') {
+		chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+	}
+});
+//borrowed from energy lollipop extension, nice feature!
+function drawIcon(value) {
+	let canvas = document.createElement('canvas');
+	let context = canvas.getContext('2d');
+
+	context.beginPath();
+	context.fillStyle = value.color;
+	context.arc(100, 100, 50, 0, 2 * Math.PI);
+	context.fill();
+
+	return context.getImageData(50, 50, 100, 100);
+}
+```
+
+У цьому коді ви додаєте слухач для будь-яких повідомлень, що надходять до менеджера фонових завдань. Якщо це виклик "updateIcon", тоді виконується наступний код для малювання значка відповідного кольору за допомогою Canvas API.
+
+✅ Ви дізнаєтеся більше про Canvas API у [уроках про космічну гру](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Тепер перебудуйте своє розширення (`npm run build`), оновіть і запустіть його, і спостерігайте за зміною кольору. Час сходити за покупками чи помити посуд? Тепер ви знаєте!
+
+Вітаємо, ви створили корисне розширення для браузера та дізналися більше про те, як працює браузер і як профілювати його продуктивність.
+
+---
+
+## 🚀 Виклик
+
+Дослідіть деякі вебсайти з відкритим кодом, які існують вже давно, і, спираючись на їхню історію в GitHub, спробуйте визначити, як вони оптимізувалися з роками для покращення продуктивності, якщо взагалі оптимізувалися. Яка найпоширеніша проблема?
+
+## Тест після лекції
+
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Огляд і самостійне навчання
+
+Розгляньте можливість підписки на [розсилку про продуктивність](https://perf.email/).
+
+Дослідіть деякі способи, якими браузери оцінюють продуктивність вебсайтів, переглянувши вкладки продуктивності у їхніх вебінструментах. Чи знаходите ви якісь суттєві відмінності?
+
+## Завдання
+
+[Аналізуйте сайт на продуктивність](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/uk/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..305119d1
--- /dev/null
+++ b/translations/uk/5-browser-extension/3-background-tasks-and-performance/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc09b0fb314a5ab0507ba99216e6a843",
+  "translation_date": "2025-08-27T22:13:02+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Аналіз сайту на продуктивність
+
+Надайте детальний звіт про веб-сайт, вказуючи області, де є проблеми з продуктивністю. Проаналізуйте, чому сайт працює повільно, і що можна зробити для його прискорення. Не покладайтеся лише на інструменти браузера, а проведіть дослідження інших інструментів, які можуть допомогти у створенні вашого звіту.
+
+## Критерії оцінювання
+
+| Критерії | Відмінно                                                                                                   | Задовільно                 | Потребує покращення           |
+| -------- | ---------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------------------- |
+|          | Представлено звіт із деталями, отриманими не лише з інструментів браузера, але й із сторонніх інструментів, якщо доступні | Представлено базовий звіт | Представлено мінімальний звіт |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний переклад людиною. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/README.md b/translations/uk/5-browser-extension/README.md
new file mode 100644
index 00000000..b2db89d6
--- /dev/null
+++ b/translations/uk/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-27T22:09:09+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення розширення для браузера
+
+Створення розширень для браузера — це цікавий і захоплюючий спосіб подумати про продуктивність ваших додатків, створюючи при цьому інший тип веб-активів. Цей модуль включає уроки про те, як працюють браузери, як розгорнути розширення для браузера, як створити форму, викликати API, використовувати локальне сховище, а також як оцінити продуктивність вашого вебсайту та покращити її.
+
+Ви створите розширення для браузера, яке працює в Edge, Chrome і Firefox. Це розширення, яке нагадує міні-вебсайт, пристосований для дуже конкретного завдання, перевіряє [C02 Signal API](https://www.co2signal.com) для отримання даних про використання електроенергії та інтенсивність викидів вуглецю в заданому регіоні, і повертає інформацію про вуглецевий слід цього регіону.
+
+Це розширення може бути викликане користувачем у будь-який момент після введення ключа API та коду регіону у форму, щоб визначити місцеве використання електроенергії, тим самим надаючи дані, які можуть вплинути на рішення користувача щодо споживання електроенергії. Наприклад, може бути доцільно відкласти запуск сушарки для одягу (активність із високим рівнем викидів вуглецю) під час періоду високого споживання електроенергії у вашому регіоні.
+
+### Теми
+
+1. [Про браузер](1-about-browsers/README.md)
+2. [Форми та локальне сховище](2-forms-browsers-local-storage/README.md)
+3. [Фонові завдання та продуктивність](3-background-tasks-and-performance/README.md)
+
+### Подяки
+
+![зелене розширення для браузера](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+
+## Подяки
+
+Ідея для цього тригера вуглецевого сліду була запропонована Асімом Хусейном, лідером команди Green Cloud Advocacy у Microsoft і автором [Green Principles](https://principles.green/). Спочатку це був [проєкт вебсайту](https://github.com/jlooper/green).
+
+Структура розширення для браузера була натхненна [розширенням COVID від Adebola Adeniran](https://github.com/onedebos/covtension).
+
+Концепція системи іконок у вигляді «точок» була запропонована структурою іконок розширення для браузера [Energy Lollipop](https://energylollipop.com/) для відстеження викидів у Каліфорнії.
+
+Ці уроки були написані з ♥️ [Джен Лупер](https://www.twitter.com/jenlooper).
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/solution/README.md b/translations/uk/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..44936ea0
--- /dev/null
+++ b/translations/uk/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-27T22:13:39+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "uk"
+}
+-->
+# Розширення для браузера Carbon Trigger: Завершений код
+
+Використовуючи API C02 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб мати нагадування прямо у вашому браузері про те, наскільки інтенсивним є споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати обґрунтовані рішення щодо ваших дій на основі цієї інформації.
+
+![знімок екрану розширення](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+
+## Початок роботи
+
+Вам потрібно буде встановити [npm](https://npmjs.com). Завантажте копію цього коду в папку на вашому комп'ютері.
+
+Встановіть усі необхідні пакети:
+
+```
+npm install
+```
+
+Зберіть розширення за допомогою webpack:
+
+```
+npm run build
+```
+
+Щоб встановити розширення в Edge, скористайтеся меню з трьома крапками у верхньому правому куті браузера, щоб знайти панель розширень. Там виберіть "Завантажити розпаковане" для завантаження нового розширення. У вікні вибору відкрийте папку 'dist', і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
+
+![встановлення](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+
+Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка на панелі розширення браузера повинна змінитися, щоб відобразити споживання енергії у вашому регіоні, і надати вам підказку щодо того, які енергоємні дії будуть доречними. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний переклад людиною. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/solution/translation/README.es.md b/translations/uk/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..970da757
--- /dev/null
+++ b/translations/uk/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-27T22:15:15+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "uk"
+}
+-->
+# Розширення браузера Carbon Trigger: Повний код
+
+Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, яке дозволить вам отримувати нагадування безпосередньо у вашому браузері про споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію.
+
+![знімок екрану розширення](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.uk.png)
+
+## Початок роботи
+
+Вам потрібно мати встановлений [npm](https://npmjs.com). Завантажте копію цього коду в папку на вашому комп'ютері.
+
+Встановіть усі необхідні пакети:
+
+```
+npm install
+```
+
+Зберіть розширення за допомогою webpack:
+
+```
+npm run build
+```
+
+Щоб встановити в Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Завантажити розпаковане", щоб додати нове розширення. Виберіть папку "dist", коли буде запропоновано, і розширення буде завантажено. Для використання вам знадобиться API-ключ для CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) – введіть свою електронну адресу у відповідне поле на цій сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Карті електроенергії](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую "US-NEISO").
+
+![встановлення](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.uk.png)
+
+Після введення API-ключа та регіону в інтерфейсі розширення, кольорова точка на панелі розширення браузера повинна змінитися, щоб відобразити споживання енергії у вашому регіоні, і надати вам індикатор щодо дій з високим споживанням енергії, які будуть для вас доречними. Концепцію цієї системи "точок" я запозичив із [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/solution/translation/README.fr.md b/translations/uk/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..86900cf1
--- /dev/null
+++ b/translations/uk/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-27T22:15:57+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "uk"
+}
+-->
+# Розширення браузера Carbon Trigger: Завершений код
+
+Використовуючи API C02 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб ви могли отримувати нагадування безпосередньо у своєму браузері про споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій на основі цієї інформації.
+
+![знімок розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+
+## Початок роботи
+
+Вам потрібно буде встановити [npm](https://npmjs.com). Завантажте копію цього коду в папку на вашому комп'ютері.
+
+Встановіть усі необхідні пакети:
+
+```
+npm install
+```
+
+Зберіть розширення за допомогою webpack:
+
+```
+npm run build
+```
+
+Щоб встановити на Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Завантажити розпаковане розширення", щоб додати нове розширення. Укажіть папку 'dist' у запиті, і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) – введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Карті електроенергії](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
+
+![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+
+Після введення API-ключа та регіону в інтерфейсі розширення кольорова точка на панелі розширень браузера повинна змінюватися, відображаючи споживання енергії у вашому регіоні, і надавати вам індикатор щодо енергоємних дій, які вам варто виконувати. Концепція цієї системи "точок" була натхненна [розширенням Energy Lollipop](https://energylollipop.com/) для каліфорнійських викидів.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/solution/translation/README.hi.md b/translations/uk/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..04509f86
--- /dev/null
+++ b/translations/uk/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-27T22:14:04+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "uk"
+}
+-->
+# Розширення для браузера Carbon Trigger: завершений код
+
+Використання API CO2 Signal від tmrow для відстеження споживання електроенергії, створення розширення для браузера, яке нагадуватиме вам про те, наскільки інтенсивно використовується електроенергія у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій на основі цієї інформації.
+
+![Скріншот розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+
+## Початок роботи
+
+Вам потрібно встановити [npm](https://npmjs.com). Завантажте копію цього коду у папку на вашому комп'ютері.
+
+Встановіть усі необхідні пакети:
+
+```
+npm install
+```
+
+Створіть розширення за допомогою Webpack:
+
+```
+npm run build
+```
+
+Щоб встановити на Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель розширень. Звідти виберіть "Завантажити неупаковане" для завантаження нового розширення. У вікні виберіть папку "dist", і розширення буде завантажено. Для використання вам знадобиться API-ключ CO2 Signal ([отримайте його через електронну пошту тут](https://www.co2signal.com/) — введіть свою електронну адресу у поле на сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones) [на електричній карті](https://www.electricitymap.org/map) (наприклад, для Бостона я використовую 'US-NEISO').
+
+![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+
+Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка у панелі розширень браузера повинна змінитися, відображаючи споживання енергії у вашому регіоні, і надавати вам індикатор того, які енергоємні дії будуть доречними. Концепція цієї системи "точок" була запропонована мені розширенням [Energy Lollipop](https://energylollipop.com/) для каліфорнійських викидів.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/solution/translation/README.it.md b/translations/uk/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..e329227a
--- /dev/null
+++ b/translations/uk/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-27T22:14:29+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "uk"
+}
+-->
+# Розширення браузера Carbon Trigger: код для початку
+
+Ви будете використовувати API Signal CO2 від tmrow для моніторингу споживання електроенергії, щоб створити розширення для браузера, яке надаватиме нагадування безпосередньо у вашому браузері про те, наскільки інтенсивним є використання електроенергії у вашому регіоні. Використання цього спеціального розширення допоможе оцінити ваші дії на основі цієї інформації.
+
+![знімок екрану розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+
+## Початок роботи
+
+Необхідно, щоб [npm](https://npmjs.com) був встановлений. Завантажте копію цього коду в папку на вашому комп’ютері.
+
+Встановіть усі необхідні пакети:
+
+```
+npm install
+```
+
+Створіть розширення за допомогою webpack:
+
+```
+npm run build
+```
+
+Для встановлення в Edge скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Якщо ще не активовано, увімкніть Режим розробника (внизу ліворуч). Виберіть "Завантажити розпаковане", щоб завантажити нове розширення. Укажіть папку "dist" у запиті, і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal (його можна [отримати тут через електронну пошту](https://www.co2signal.com/) — введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [електричній мапі](https://www.electricitymap.org/map) (наприклад, для Бостона це "US-NEISO").
+
+![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+
+Після введення API-ключа та регіону в інтерфейсі розширення кольорова точка на панелі розширення браузера має змінитися, щоб відображати споживання енергії у вашому регіоні, і надавати підказки щодо того, які енергоємні дії доцільно виконувати. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/solution/translation/README.ja.md b/translations/uk/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..4bcecdd2
--- /dev/null
+++ b/translations/uk/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-27T22:14:51+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "uk"
+}
+-->
+# Розширення для браузера Carbon Trigger: Завершений код
+
+Ми створимо розширення для браузера, яке використовує API CO2 Signal від tmrow, щоб відстежувати споживання електроенергії у вашому регіоні. Це розширення відображатиме нагадування у вашому браузері про рівень споживання електроенергії, що дозволить вам приймати рішення щодо вашої діяльності на основі цієї інформації.
+
+![скріншот розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+
+## Початок роботи
+
+Переконайтеся, що у вас встановлений [npm](https://npmjs.com). Завантажте копію цього коду у папку на вашому комп'ютері.
+
+Встановіть усі необхідні пакети.
+
+```
+npm install
+```
+
+Зберіть розширення за допомогою webpack.
+
+```
+npm run build
+```
+
+Щоб встановити розширення в Edge, знайдіть панель "Розширення" через меню з "трьома крапками" у верхньому правому куті браузера. Там виберіть "Load Unpacked" і завантажте нове розширення. У вікні, що з'явиться, відкрийте папку "dist", і розширення буде завантажено. Для використання вам знадобиться API-ключ CO2 Signal ([отримайте його тут через email](https://www.co2signal.com/) - введіть вашу електронну адресу у відповідне поле на сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, для Бостона використовується 'US-NEISO').
+
+![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+
+Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка, що відображається на панелі розширень браузера, змінюватиметься відповідно до рівня енергоспоживання у вашому регіоні. Це допоможе вам визначити, які види діяльності, що потребують енергії, є доцільними в даний момент. Концепція цієї "точкової" системи була натхненна розширенням [Energy Lollipop](https://energylollipop.com/) для відстеження викидів у Каліфорнії.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/solution/translation/README.ms.md b/translations/uk/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..80280ab1
--- /dev/null
+++ b/translations/uk/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-27T22:15:38+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "uk"
+}
+-->
+# Розширення браузера Carbon Trigger: Повний код
+
+Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, яке дозволить вам отримувати сповіщення про рівень споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію.
+
+![скріншот розширення браузера](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+
+## Початок роботи
+
+Вам потрібно встановити [npm](https://npmjs.com). Завантажте копію цього коду в папку на вашому комп'ютері.
+
+Встановіть усі необхідні пакети:
+
+```
+npm install
+```
+
+Зберіть розширення за допомогою webpack:
+
+```
+npm run build
+```
+
+Щоб встановити в Edge, скористайтеся меню "три точки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Load Unpacked", щоб завантажити нове розширення. Відкрийте папку 'dist' за запитом, і розширення буде завантажено. Для використання вам знадобиться API-ключ для CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть вашу електронну адресу у відповідне поле на сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Електричній карті](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
+
+![завантаження](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+
+Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка на панелі розширення браузера змінюватиметься, відображаючи рівень споживання енергії у вашому регіоні, і надаватиме вам рекомендації щодо відповідних дій. Ідея системи "точок" була запозичена з [розширення браузера Energy Lollipop](https://energylollipop.com/) для Каліфорнії.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/5-browser-extension/start/README.md b/translations/uk/5-browser-extension/start/README.md
new file mode 100644
index 00000000..6273aef5
--- /dev/null
+++ b/translations/uk/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-27T22:13:18+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "uk"
+}
+-->
+# Розширення для браузера Carbon Trigger: Початковий код
+
+Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб мати нагадування прямо у вашому браузері про те, наскільки інтенсивно використовується електроенергія у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію.
+
+![знімок екрана розширення](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+
+## Початок роботи
+
+Вам потрібно мати встановлений [npm](https://npmjs.com). Завантажте копію цього коду в папку на вашому комп'ютері.
+
+Встановіть усі необхідні пакети:
+
+```
+npm install
+```
+
+Зберіть розширення за допомогою webpack:
+
+```
+npm run build
+```
+
+Щоб встановити розширення в Edge, скористайтеся меню з трьома крапками у верхньому правому куті браузера, щоб знайти панель розширень. Там виберіть "Завантажити розпаковане" для додавання нового розширення. У вікні вибору відкрийте папку 'dist', і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
+
+![встановлення](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+
+Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка в панелі розширення браузера має змінитися, відображаючи споживання енергії у вашому регіоні, і підказувати, які енергоємні дії вам варто виконувати. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для відстеження викидів у Каліфорнії.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/1-introduction/README.md b/translations/uk/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..649aaca5
--- /dev/null
+++ b/translations/uk/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-27T22:26:48+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення космічної гри Частина 1: Вступ
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Тест перед лекцією
+
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Наслідування та композиція в розробці ігор
+
+У попередніх уроках не було великої потреби турбуватися про архітектуру додатків, які ви створювали, оскільки проєкти були невеликими за масштабом. Однак, коли ваші додатки зростають у розмірах і масштабах, архітектурні рішення стають важливішими. Існує два основних підходи до створення великих додатків у JavaScript: *композиція* або *наслідування*. У кожного з них є свої переваги та недоліки, але давайте пояснимо їх у контексті гри.
+
+✅ Одна з найвідоміших книг про програмування присвячена [шаблонам проєктування](https://en.wikipedia.org/wiki/Design_Patterns).
+
+У грі є `ігрові об'єкти`, які є об'єктами, що існують на екрані. Це означає, що вони мають розташування в декартовій системі координат, яке характеризується наявністю координат `x` і `y`. У процесі розробки гри ви помітите, що всі ваші ігрові об'єкти мають стандартні властивості, спільні для кожної гри, яку ви створюєте, а саме елементи, які є:
+
+- **залежними від розташування** Більшість, якщо не всі, ігрові елементи залежать від розташування. Це означає, що вони мають розташування, `x` і `y`.
+- **рухомими** Це об'єкти, які можуть переміщатися в нове місце. Зазвичай це герой, монстр або NPC (персонаж, яким не керує гравець), але не, наприклад, статичний об'єкт, як дерево.
+- **самознищуваними** Ці об'єкти існують лише протягом певного періоду часу, після чого вони готуються до видалення. Зазвичай це представлено булевою змінною `dead` або `destroyed`, яка сигналізує ігровому двигуну, що цей об'єкт більше не потрібно відображати.
+- **з затримкою** 'Затримка' — це типова властивість короткочасних об'єктів. Типовий приклад — це текст або графічний ефект, як вибух, який має бути видимим лише кілька мілісекунд.
+
+✅ Подумайте про гру, як Pac-Man. Чи можете ви визначити чотири типи об'єктів, описаних вище, у цій грі?
+
+### Вираження поведінки
+
+Все, що ми описали вище, — це поведінка, яку можуть мати ігрові об'єкти. Як же ми можемо закодувати це? Ми можемо виразити цю поведінку як методи, пов'язані з класами або об'єктами.
+
+**Класи**
+
+Ідея полягає в тому, щоб використовувати `класи` у поєднанні з `наслідуванням`, щоб додати певну поведінку до класу.
+
+✅ Наслідування — це важливе поняття для розуміння. Дізнайтеся більше у [статті MDN про наслідування](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+У коді ігровий об'єкт зазвичай може виглядати так:
+
+```javascript
+
+//set up the class GameObject
+class GameObject {
+  constructor(x, y, type) {
+    this.x = x;
+    this.y = y;
+    this.type = type;
+  }
+}
+
+//this class will extend the GameObject's inherent class properties
+class Movable extends GameObject {
+  constructor(x,y, type) {
+    super(x,y, type)
+  }
+
+//this movable object can be moved on the screen
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
+class Hero extends Movable {
+  constructor(x,y) {
+    super(x,y, 'Hero')
+  }
+}
+
+//this class, on the other hand, only inherits the GameObject properties
+class Tree extends GameObject {
+  constructor(x,y) {
+    super(x,y, 'Tree')
+  }
+}
+
+//a hero can move...
+const hero = new Hero();
+hero.moveTo(5,5);
+
+//but a tree cannot
+const tree = new Tree();
+```
+
+✅ Приділіть кілька хвилин, щоб переосмислити героя Pac-Man (наприклад, Inky, Pinky або Blinky) і як його можна було б написати на JavaScript.
+
+**Композиція**
+
+Інший спосіб обробки наслідування об'єктів — використання *композиції*. Тоді об'єкти виражають свою поведінку таким чином:
+
+```javascript
+//create a constant gameObject
+const gameObject = {
+  x: 0,
+  y: 0,
+  type: ''
+};
+
+//...and a constant movable
+const movable = {
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+//then the constant movableObject is composed of the gameObject and movable constants
+const movableObject = {...gameObject, ...movable};
+
+//then create a function to create a new Hero who inherits the movableObject properties
+function createHero(x, y) {
+  return {
+    ...movableObject,
+    x,
+    y,
+    type: 'Hero'
+  }
+}
+//...and a static object that inherits only the gameObject properties
+function createStatic(x, y, type) {
+  return {
+    ...gameObject
+    x,
+    y,
+    type
+  }
+}
+//create the hero and move it
+const hero = createHero(10,10);
+hero.moveTo(5,5);
+//and create a static tree which only stands around
+const tree = createStatic(0,0, 'Tree'); 
+```
+
+**Який шаблон обрати?**
+
+Вибір залежить від вас. JavaScript підтримує обидві ці парадигми.
+
+--
+
+Ще один шаблон, поширений у розробці ігор, вирішує проблему управління користувацьким досвідом гри та її продуктивністю.
+
+## Шаблон Pub/Sub
+
+✅ Pub/Sub означає 'publish-subscribe' (публікація-підписка)
+
+Цей шаблон вирішує ідею, що різні частини вашого додатка не повинні знати одна про одну. Чому це важливо? Це значно спрощує загальне розуміння того, що відбувається, якщо різні частини розділені. Це також полегшує раптову зміну поведінки, якщо це необхідно. Як ми можемо це реалізувати? Ми встановлюємо кілька концепцій:
+
+- **повідомлення**: Повідомлення зазвичай є текстовим рядком, доповненим необов'язковим корисним навантаженням (частиною даних, яка уточнює, про що йдеться у повідомленні). Типове повідомлення в грі може бути `KEY_PRESSED_ENTER`.
+- **видавець**: Цей елемент *публікує* повідомлення і надсилає його всім підписникам.
+- **підписник**: Цей елемент *слухає* конкретні повідомлення і виконує певне завдання в результаті отримання цього повідомлення, наприклад, стріляє лазером.
+
+Реалізація досить невелика за розміром, але це дуже потужний шаблон. Ось як його можна реалізувати:
+
+```javascript
+//set up an EventEmitter class that contains listeners
+class EventEmitter {
+  constructor() {
+    this.listeners = {};
+  }
+//when a message is received, let the listener to handle its payload
+  on(message, listener) {
+    if (!this.listeners[message]) {
+      this.listeners[message] = [];
+    }
+    this.listeners[message].push(listener);
+  }
+//when a message is sent, send it to a listener with some payload
+  emit(message, payload = null) {
+    if (this.listeners[message]) {
+      this.listeners[message].forEach(l => l(message, payload))
+    }
+  }
+}
+
+```
+
+Щоб використати наведений вище код, ми можемо створити дуже маленьку реалізацію:
+
+```javascript
+//set up a message structure
+const Messages = {
+  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
+};
+//invoke the eventEmitter you set up above
+const eventEmitter = new EventEmitter();
+//set up a hero
+const hero = createHero(0,0);
+//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+
+//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
+window.addEventListener('keyup', (evt) => {
+  if (evt.key === 'ArrowLeft') {
+    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
+  }
+});
+```
+
+У наведеному вище прикладі ми підключаємо подію клавіатури, `ArrowLeft`, і надсилаємо повідомлення `HERO_MOVE_LEFT`. Ми слухаємо це повідомлення і переміщуємо `hero` як результат. Сила цього шаблону полягає в тому, що слухач подій і герой не знають один про одного. Ви можете переназначити `ArrowLeft` на клавішу `A`. Крім того, можна зробити щось зовсім інше на `ArrowLeft`, зробивши кілька змін у функції `on` об'єкта eventEmitter:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Коли ваша гра стає складнішою, цей шаблон залишається незмінним у своїй складності, а ваш код залишається чистим. Дуже рекомендується використовувати цей шаблон.
+
+---
+
+## 🚀 Виклик
+
+Подумайте, як шаблон pub-sub може покращити гру. Які частини повинні надсилати події, і як гра повинна на них реагувати? Зараз у вас є шанс проявити творчість, придумуючи нову гру і те, як її частини можуть поводитися.
+
+## Тест після лекції
+
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Огляд і самостійне навчання
+
+Дізнайтеся більше про Pub/Sub, [прочитавши про це](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Завдання
+
+[Створіть макет гри](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/1-introduction/assignment.md b/translations/uk/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..cc218fdb
--- /dev/null
+++ b/translations/uk/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-27T22:27:48+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Створіть макет гри
+
+## Інструкції
+
+Використовуючи приклади коду з уроку, створіть представлення гри, яка вам подобається. Це має бути проста гра, але мета полягає в тому, щоб використати або шаблон класу, або шаблон композиції, а також шаблон pub/sub, щоб показати, як гра може запускатися. Проявіть креативність!
+
+## Критерії оцінювання
+
+| Критерії | Відмінно                                                | Достатньо                                             | Потребує покращення                                  |
+| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
+|          | Три елементи розміщені на екрані та змінюються          | Два елементи розміщені на екрані та змінюються        | Один елемент розміщений на екрані та змінюється     |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/2-drawing-to-canvas/README.md b/translations/uk/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..65362b16
--- /dev/null
+++ b/translations/uk/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-27T22:24:08+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення космічної гри, частина 2: Малюємо героя та монстрів на Canvas
+
+## Передлекційний тест
+
+[Передлекційний тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Canvas
+
+Canvas — це HTML-елемент, який за замовчуванням не має вмісту; це чистий аркуш. Ви повинні додати до нього вміст, малюючи на ньому.
+
+✅ Прочитайте [більше про Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) на MDN.
+
+Ось як зазвичай оголошується Canvas як частина тіла сторінки:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+У наведеному вище прикладі ми встановлюємо `id`, `width` і `height`.
+
+- `id`: задайте це, щоб отримати посилання, коли вам потрібно буде взаємодіяти з елементом.
+- `width`: це ширина елемента.
+- `height`: це висота елемента.
+
+## Малювання простих геометричних фігур
+
+Canvas використовує декартову систему координат для малювання. Таким чином, він використовує осі x та y для визначення розташування об'єктів. Точка `0,0` знаходиться у верхньому лівому куті, а нижній правий кут відповідає значенням WIDTH і HEIGHT Canvas.
+
+![сітка Canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.uk.png)  
+> Зображення з [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Щоб малювати на Canvas, потрібно виконати наступні кроки:
+
+1. **Отримати посилання** на елемент Canvas.
+2. **Отримати посилання** на елемент Context, який знаходиться на Canvas.
+3. **Виконати операцію малювання** за допомогою елемента Context.
+
+Код для виконання цих кроків зазвичай виглядає так:
+
+```javascript
+// draws a red rectangle
+//1. get the canvas reference
+canvas = document.getElementById("myCanvas");
+
+//2. set the context to 2D to draw basic shapes
+ctx = canvas.getContext("2d");
+
+//3. fill it with the color red
+ctx.fillStyle = 'red';
+
+//4. and draw a rectangle with these parameters, setting location and size
+ctx.fillRect(0,0, 200, 200) // x,y,width, height
+```
+
+✅ Canvas API здебільшого зосереджений на 2D-фігурах, але ви також можете малювати 3D-елементи на вебсайті; для цього можна використовувати [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+За допомогою Canvas API можна малювати різноманітні речі, наприклад:
+
+- **Геометричні фігури**: ми вже показали, як намалювати прямокутник, але є ще багато іншого, що можна намалювати.
+- **Текст**: ви можете малювати текст із будь-яким шрифтом і кольором.
+- **Зображення**: ви можете малювати зображення на основі ресурсів, таких як .jpg або .png.
+
+✅ Спробуйте! Ви вже знаєте, як намалювати прямокутник, чи зможете ви намалювати коло на сторінці? Подивіться на цікаві приклади малюнків Canvas на CodePen. Ось [особливо вражаючий приклад](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Завантаження та малювання зображень
+
+Щоб завантажити зображення, потрібно створити об'єкт `Image` і встановити його властивість `src`. Потім потрібно прослухати подію `load`, щоб дізнатися, коли зображення готове до використання. Код виглядає так:
+
+### Завантаження ресурсу
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Шаблон завантаження ресурсу
+
+Рекомендується обгорнути наведений вище код у конструкцію, щоб його було легше використовувати, і ви могли маніпулювати зображенням лише тоді, коли воно повністю завантажене:
+
+```javascript
+function loadAsset(path) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = path;
+    img.onload = () => {
+      // image loaded and ready to be used
+      resolve(img);
+    }
+  })
+}
+
+// use like so
+
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+}
+
+```
+
+Щоб намалювати ігрові ресурси на екрані, ваш код виглядатиме так:
+
+```javascript
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+
+  canvas = document.getElementById("myCanvas");
+  ctx = canvas.getContext("2d");
+  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
+  ctx.drawImage(monsterImg, 0,0);
+}
+```
+
+## Тепер час почати створювати вашу гру
+
+### Що створювати
+
+Ви створите вебсторінку з елементом Canvas. Вона повинна відображати чорний екран розміром `1024*768`. Ми надали вам два зображення:
+
+- Корабель героя
+
+   ![Корабель героя](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.uk.png)
+
+- 5*5 монстрів
+
+   ![Корабель монстра](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.uk.png)
+
+### Рекомендовані кроки для початку розробки
+
+Знайдіть файли, які були створені для вас у підпапці `your-work`. Вона повинна містити наступне:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Відкрийте копію цієї папки у Visual Studio Code. Вам потрібно налаштувати локальне середовище розробки, бажано з Visual Studio Code, NPM і Node. Якщо у вас не налаштований `npm` на комп'ютері, [ось як це зробити](https://www.npmjs.com/get-npm).
+
+Розпочніть ваш проєкт, перейшовши до папки `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+Це запустить HTTP-сервер за адресою `http://localhost:5000`. Відкрийте браузер і введіть цю адресу. Зараз це порожня сторінка, але це зміниться.
+
+> Примітка: щоб побачити зміни на екрані, оновіть браузер.
+
+### Додайте код
+
+Додайте необхідний код до `your-work/app.js`, щоб виконати наступне:
+
+1. **Намалюйте** Canvas із чорним фоном  
+   > Порада: додайте два рядки під відповідним TODO у `/app.js`, встановивши елемент `ctx` чорним, а верхні/ліві координати — 0,0, а висоту та ширину — рівними Canvas.
+2. **Завантажте** текстури  
+   > Порада: додайте зображення гравця та ворога, використовуючи `await loadTexture` і передаючи шлях до зображення. Ви поки що не побачите їх на екрані!
+3. **Намалюйте** героя в центрі екрана в нижній половині  
+   > Порада: використовуйте API `drawImage`, щоб намалювати heroImg на екрані, встановивши `canvas.width / 2 - 45` і `canvas.height - canvas.height / 4)`.
+4. **Намалюйте** 5*5 монстрів  
+   > Порада: тепер ви можете розкоментувати код для малювання ворогів на екрані. Далі перейдіть до функції `createEnemies` і реалізуйте її.
+
+   Спочатку задайте кілька констант:
+
+    ```javascript
+    const MONSTER_TOTAL = 5;
+    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+    const STOP_X = START_X + MONSTER_WIDTH;
+    ```
+
+   Потім створіть цикл для малювання масиву монстрів на екрані:
+
+    ```javascript
+    for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          ctx.drawImage(enemyImg, x, y);
+        }
+      }
+    ```
+
+## Результат
+
+Готовий результат повинен виглядати так:
+
+![Чорний екран із героєм і 5*5 монстрами](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.uk.png)
+
+## Рішення
+
+Спробуйте вирішити завдання самостійно, але якщо у вас виникнуть труднощі, перегляньте [рішення](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Виклик
+
+Ви дізналися про малювання за допомогою Canvas API, орієнтованого на 2D; ознайомтеся з [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) і спробуйте намалювати 3D-об'єкт.
+
+## Післялекційний тест
+
+[Післялекційний тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Огляд і самостійне навчання
+
+Дізнайтеся більше про Canvas API, [прочитавши про нього](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Завдання
+
+[Попрацюйте з Canvas API](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/2-drawing-to-canvas/assignment.md b/translations/uk/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..3490cf5a
--- /dev/null
+++ b/translations/uk/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-27T22:25:10+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Гра з Canvas API
+
+## Інструкції
+
+Оберіть один елемент Canvas API і створіть щось цікаве на його основі. Чи зможете ви створити маленьку галактику з повторюваних зірок? Або цікаву текстуру з кольорових ліній? Ви можете переглянути CodePen для натхнення (але не копіюйте).
+
+## Критерії оцінювання
+
+| Критерії | Відмінно                                                  | Задовільно                        | Потребує покращення   |
+| -------- | --------------------------------------------------------- | ---------------------------------- | --------------------- |
+|          | Код подано, демонструє цікаву текстуру або форму          | Код подано, але не працює         | Код не подано         |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/3-moving-elements-around/README.md b/translations/uk/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..dc85054d
--- /dev/null
+++ b/translations/uk/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,402 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-27T22:19:29+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення космічної гри, частина 3: Додавання руху
+
+## Тест перед лекцією
+
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Ігри стають цікавішими, коли на екрані з'являються інопланетяни! У цій грі ми використаємо два типи руху:
+
+- **Рух за допомогою клавіатури/миші**: коли користувач взаємодіє з клавіатурою або мишею для переміщення об'єкта на екрані.
+- **Рух, викликаний грою**: коли гра переміщує об'єкт через певний інтервал часу.
+
+Отже, як ми можемо переміщувати об'єкти на екрані? Все залежить від декартових координат: ми змінюємо місцезнаходження (x, y) об'єкта, а потім перерисовуємо екран.
+
+Зазвичай для реалізації *руху* на екрані потрібні наступні кроки:
+
+1. **Встановити нове місцезнаходження** для об'єкта; це необхідно, щоб створити враження, що об'єкт перемістився.
+2. **Очистити екран**, екран потрібно очищати між перерисовками. Ми можемо очистити його, намалювавши прямокутник, заповнений кольором фону.
+3. **Перерисувати об'єкт** у новому місцезнаходженні. Таким чином ми досягаємо переміщення об'єкта з одного місця в інше.
+
+Ось як це може виглядати в коді:
+
+```javascript
+//set the hero's location
+hero.x += 5;
+// clear the rectangle that hosts the hero
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+// redraw the game background and hero
+ctx.fillRect(0, 0, canvas.width, canvas.height)
+ctx.fillStyle = "black";
+ctx.drawImage(heroImg, hero.x, hero.y);
+```
+
+✅ Чи можете ви придумати причину, чому перерисовка вашого героя багато кадрів на секунду може призводити до витрат продуктивності? Прочитайте про [альтернативи цьому підходу](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Обробка подій клавіатури
+
+Ви обробляєте події, прив'язуючи конкретні події до коду. Події клавіатури викликаються для всього вікна, тоді як події миші, наприклад `click`, можуть бути прив'язані до натискання на конкретний елемент. Ми будемо використовувати події клавіатури протягом цього проєкту.
+
+Для обробки події потрібно використати метод `addEventListener()` вікна і надати йому два параметри. Перший параметр — це назва події, наприклад `keyup`. Другий параметр — це функція, яка має бути викликана в результаті виникнення події.
+
+Ось приклад:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+Для подій клавіш є дві властивості події, які можна використовувати, щоб дізнатися, яка клавіша була натиснута:
+
+- `key` — це текстове представлення натиснутої клавіші, наприклад `ArrowUp`.
+- `keyCode` — це числове представлення, наприклад `37`, що відповідає `ArrowLeft`.
+
+✅ Маніпуляція подіями клавіш корисна не лише для розробки ігор. Які ще застосування цього підходу ви можете придумати?
+
+### Спеціальні клавіші: застереження
+
+Є деякі *спеціальні* клавіші, які впливають на вікно. Це означає, що якщо ви слухаєте подію `keyup` і використовуєте ці спеціальні клавіші для переміщення вашого героя, це також викличе горизонтальне прокручування. З цієї причини ви можете захотіти *вимкнути* цю вбудовану поведінку браузера під час створення вашої гри. Вам потрібен код, як цей:
+
+```javascript
+let onKeyDown = function (e) {
+  console.log(e.keyCode);
+  switch (e.keyCode) {
+    case 37:
+    case 39:
+    case 38:
+    case 40: // Arrow keys
+    case 32:
+      e.preventDefault();
+      break; // Space
+    default:
+      break; // do not block other keys
+  }
+};
+
+window.addEventListener('keydown', onKeyDown);
+```
+
+Вищезазначений код забезпечить вимкнення *за замовчуванням* поведінки для клавіш зі стрілками та пробілу. Механізм *вимкнення* відбувається, коли ми викликаємо `e.preventDefault()`.
+
+## Рух, викликаний грою
+
+Ми можемо змусити об'єкти рухатися самостійно, використовуючи таймери, такі як функції `setTimeout()` або `setInterval()`, які оновлюють місцезнаходження об'єкта на кожному такті або інтервалі часу. Ось як це може виглядати:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## Ігровий цикл
+
+Ігровий цикл — це концепція, яка по суті є функцією, що викликається через регулярні інтервали. Його називають ігровим циклом, оскільки все, що має бути видимим для користувача, малюється в цьому циклі. Ігровий цикл використовує всі ігрові об'єкти, які є частиною гри, малюючи їх, якщо вони не повинні більше бути частиною гри. Наприклад, якщо об'єкт — це ворог, якого вразив лазер і він вибухнув, він більше не є частиною поточного ігрового циклу (ви дізнаєтеся більше про це в наступних уроках).
+
+Ось як типовий ігровий цикл може виглядати в коді:
+
+```javascript
+let gameLoopId = setInterval(() =>
+  function gameLoop() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    drawHero();
+    drawEnemies();
+    drawStaticObjects();
+}, 200);
+```
+
+Вищезазначений цикл викликається кожні `200` мілісекунд для перерисовки полотна. Ви можете вибрати найкращий інтервал, який має сенс для вашої гри.
+
+## Продовження космічної гри
+
+Ви візьмете існуючий код і розширите його. Або почніть з коду, який ви завершили під час частини I, або використовуйте код із [частини II - стартовий](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Рух героя**: ви додасте код, щоб забезпечити можливість переміщення героя за допомогою клавіш зі стрілками.
+- **Рух ворогів**: вам також потрібно буде додати код, щоб забезпечити рух ворогів зверху вниз із заданою швидкістю.
+
+## Рекомендовані кроки
+
+Знайдіть файли, які були створені для вас у підпапці `your-work`. Вона повинна містити наступне:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Ви починаєте свій проєкт у папці `your_work`, ввівши:
+
+```bash
+cd your-work
+npm start
+```
+
+Вищезазначене запустить HTTP-сервер за адресою `http://localhost:5000`. Відкрийте браузер і введіть цю адресу, зараз він повинен відобразити героя та всіх ворогів; поки що нічого не рухається!
+
+### Додайте код
+
+1. **Додайте спеціальні об'єкти** для `hero`, `enemy` та `game object`, вони повинні мати властивості `x` та `y`. (Згадайте розділ про [Спадкування або композицію](../README.md)).
+
+   *ПІДКАЗКА*: `game object` має бути тим, що має `x` та `y` і здатність малювати себе на полотні.
+
+   >порада: почніть із додавання нового класу GameObject із його конструктором, як показано нижче, а потім намалюйте його на полотні:
+  
+    ```javascript
+        
+    class GameObject {
+      constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.dead = false;
+        this.type = "";
+        this.width = 0;
+        this.height = 0;
+        this.img = undefined;
+      }
+    
+      draw(ctx) {
+        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+      }
+    }
+    ```
+
+    Тепер розширте цей GameObject, щоб створити Hero та Enemy.
+    
+    ```javascript
+    class Hero extends GameObject {
+      constructor(x, y) {
+        ...it needs an x, y, type, and speed
+      }
+    }
+    ```
+
+    ```javascript
+    class Enemy extends GameObject {
+      constructor(x, y) {
+        super(x, y);
+        (this.width = 98), (this.height = 50);
+        this.type = "Enemy";
+        let id = setInterval(() => {
+          if (this.y < canvas.height - this.height) {
+            this.y += 5;
+          } else {
+            console.log('Stopped at', this.y)
+            clearInterval(id);
+          }
+        }, 300)
+      }
+    }
+    ```
+
+2. **Додайте обробники подій клавіш** для обробки навігації клавішами (переміщення героя вгору/вниз, вліво/вправо).
+
+   *ПАМ'ЯТАЙТЕ*: це декартова система, верхній лівий кут — `0,0`. Також не забудьте додати код для зупинки *поведінки за замовчуванням*.
+
+   >порада: створіть свою функцію onKeyDown і прив'яжіть її до вікна:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Перевірте консоль вашого браузера на цьому етапі та спостерігайте за реєстрацією натискань клавіш. 
+
+3. **Реалізуйте** [патерн Pub-Sub](../README.md), це допоможе зберегти ваш код чистим, коли ви будете виконувати наступні частини.
+
+   Для виконання цього останнього пункту ви можете:
+
+   1. **Додати слухач подій** у вікно:
+
+       ```javascript
+        window.addEventListener("keyup", (evt) => {
+          if (evt.key === "ArrowUp") {
+            eventEmitter.emit(Messages.KEY_EVENT_UP);
+          } else if (evt.key === "ArrowDown") {
+            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+          } else if (evt.key === "ArrowLeft") {
+            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+          } else if (evt.key === "ArrowRight") {
+            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+          }
+        });
+        ```
+
+    1. **Створити клас EventEmitter** для публікації та підписки на повідомлення:
+
+        ```javascript
+        class EventEmitter {
+          constructor() {
+            this.listeners = {};
+          }
+        
+          on(message, listener) {
+            if (!this.listeners[message]) {
+              this.listeners[message] = [];
+            }
+            this.listeners[message].push(listener);
+          }
+        
+          emit(message, payload = null) {
+            if (this.listeners[message]) {
+              this.listeners[message].forEach((l) => l(message, payload));
+            }
+          }
+        }
+        ```
+
+    1. **Додати константи** та налаштувати EventEmitter:
+
+        ```javascript
+        const Messages = {
+          KEY_EVENT_UP: "KEY_EVENT_UP",
+          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
+          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
+          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
+        };
+        
+        let heroImg, 
+            enemyImg, 
+            laserImg,
+            canvas, ctx, 
+            gameObjects = [], 
+            hero, 
+            eventEmitter = new EventEmitter();
+        ```
+
+    1. **Ініціалізувати гру**
+
+    ```javascript
+    function initGame() {
+      gameObjects = [];
+      createEnemies();
+      createHero();
+    
+      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+        hero.y -=5 ;
+      })
+    
+      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+        hero.y += 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+        hero.x -= 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+        hero.x += 5;
+      });
+    }
+    ```
+
+1. **Налаштувати ігровий цикл**
+
+   Переробіть функцію window.onload, щоб ініціалізувати гру та налаштувати ігровий цикл із хорошим інтервалом. Ви також додасте лазерний промінь:
+
+    ```javascript
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      let gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100)
+      
+    };
+    ```
+
+5. **Додайте код** для переміщення ворогів через певний інтервал
+
+    Переробіть функцію `createEnemies()`, щоб створити ворогів і додати їх до нового класу gameObjects:
+
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
+    
+    і додайте функцію `createHero()`, щоб виконати подібний процес для героя.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    і нарешті, додайте функцію `drawGameObjects()`, щоб почати малювання:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Ваші вороги повинні почати наступати на ваш космічний корабель героя!
+
+---
+
+## 🚀 Виклик
+
+Як ви бачите, ваш код може перетворитися на "спагетті-код", коли ви починаєте додавати функції, змінні та класи. Як ви можете краще організувати свій код, щоб він був більш читабельним? Накресліть систему для організації вашого коду, навіть якщо він все ще знаходиться в одному файлі.
+
+## Тест після лекції
+
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Огляд і самостійне навчання
+
+Хоча ми пишемо нашу гру без використання фреймворків, існує багато фреймворків на основі JavaScript для розробки ігор на полотні. Приділіть час для [читання про них](https://github.com/collections/javascript-game-engines).
+
+## Завдання
+
+[Коментуйте ваш код](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/3-moving-elements-around/assignment.md b/translations/uk/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..88560a4c
--- /dev/null
+++ b/translations/uk/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-27T22:20:32+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Коментуйте свій код
+
+## Інструкції
+
+Перегляньте ваш поточний файл /app.js у папці вашої гри та знайдіть способи додати коментарі й упорядкувати його. Код дуже легко може стати хаотичним, і зараз чудова нагода додати коментарі, щоб забезпечити його читабельність і можливість використання в майбутньому.
+
+## Критерії оцінювання
+
+| Критерії | Відмінно                                                          | Задовільно                           | Потребує покращення                                              |
+| -------- | ----------------------------------------------------------------- | ------------------------------------- | ---------------------------------------------------------------- |
+|          | Код у `app.js` повністю прокоментований і організований у логічні блоки | Код у `app.js` достатньо прокоментований | Код у `app.js` дещо неорганізований і має недостатньо коментарів |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/4-collision-detection/README.md b/translations/uk/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..15c38384
--- /dev/null
+++ b/translations/uk/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-27T22:22:15+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення космічної гри, частина 4: Додавання лазера та виявлення зіткнень
+
+## Передлекційна вікторина
+
+[Передлекційна вікторина](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+У цьому уроці ви навчитеся стріляти лазерами за допомогою JavaScript! Ми додамо до нашої гри дві речі:
+
+- **Лазер**: цей лазер стріляє з корабля героя вертикально вгору.
+- **Виявлення зіткнень**: у рамках реалізації можливості *стріляти* ми також додамо кілька цікавих правил гри:
+   - **Лазер влучає в ворога**: ворог знищується, якщо його вразив лазер.
+   - **Лазер досягає верхньої частини екрану**: лазер знищується, якщо досягає верхньої частини екрану.
+   - **Зіткнення ворога та героя**: ворог і герой знищуються, якщо стикаються.
+   - **Ворог досягає нижньої частини екрану**: ворог і герой знищуються, якщо ворог досягає нижньої частини екрану.
+
+Коротко кажучи, ви — *герой* — повинні вразити всіх ворогів лазером, перш ніж вони досягнуть нижньої частини екрану.
+
+✅ Проведіть невелике дослідження про першу комп'ютерну гру, яка була створена. Яка була її функціональність?
+
+Давайте будемо героями разом!
+
+## Виявлення зіткнень
+
+Як ми можемо виявляти зіткнення? Нам потрібно уявляти наші ігрові об'єкти як прямокутники, що рухаються. Чому саме так? Тому що зображення, яке використовується для відображення ігрового об'єкта, є прямокутником: воно має `x`, `y`, `width` і `height`.
+
+Якщо два прямокутники, наприклад, герой і ворог, *перетинаються*, це означає зіткнення. Що має відбутися далі, залежить від правил гри. Для реалізації виявлення зіткнень вам потрібно наступне:
+
+1. Спосіб отримати прямокутне представлення ігрового об'єкта, щось на кшталт цього:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Функція порівняння, яка може виглядати так:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Як знищувати об'єкти
+
+Щоб знищити об'єкт у грі, потрібно повідомити грі, що цей об'єкт більше не потрібно відображати в ігровому циклі, який викликається через певний інтервал. Один із способів зробити це — позначити ігровий об'єкт як *мертвий*, коли щось відбувається, наприклад:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Потім можна видалити *мертві* об'єкти перед повторним відображенням екрану, наприклад:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Як стріляти лазером
+
+Стрільба лазером означає реагування на подію натискання клавіші та створення об'єкта, який рухається в певному напрямку. Для цього потрібно виконати наступні кроки:
+
+1. **Створити об'єкт лазера**: з верхньої частини корабля героя, який після створення починає рухатися вгору до верхньої частини екрану.
+2. **Прив'язати код до події натискання клавіші**: потрібно вибрати клавішу на клавіатурі, яка буде відповідати за стрільбу лазером.
+3. **Створити ігровий об'єкт, який виглядає як лазер**, коли натискається клавіша.
+
+## Затримка для лазера
+
+Лазер повинен стріляти щоразу, коли ви натискаєте клавішу, наприклад, *пробіл*. Щоб запобігти створенню занадто великої кількості лазерів за короткий час, потрібно це виправити. Виправлення полягає у впровадженні так званої *затримки* — таймера, який гарантує, що лазер можна стріляти лише через певний інтервал. Це можна реалізувати наступним чином:
+
+```javascript
+class Cooldown {
+  constructor(time) {
+    this.cool = false;
+    setTimeout(() => {
+      this.cool = true;
+    }, time)
+  }
+}
+
+class Weapon {
+  constructor {
+  }
+  fire() {
+    if (!this.cooldown || this.cooldown.cool) {
+      // produce a laser
+      this.cooldown = new Cooldown(500);
+    } else {
+      // do nothing - it hasn't cooled down yet.
+    }
+  }
+}
+```
+
+✅ Перегляньте урок 1 із серії про космічну гру, щоб нагадати собі про *затримки*.
+
+## Що створити
+
+Ви візьмете існуючий код (який ви повинні були очистити та рефакторити) з попереднього уроку та розширите його. Або почніть із коду з частини II, або використовуйте код із [Part III- starter](../../../../../../../../../your-work).
+
+> підказка: лазер, з яким ви працюватимете, вже знаходиться у вашій папці з ресурсами та підключений до вашого коду.
+
+- **Додайте виявлення зіткнень**, коли лазер стикається з чимось, повинні застосовуватися наступні правила:
+   1. **Лазер влучає в ворога**: ворог знищується, якщо його вразив лазер.
+   2. **Лазер досягає верхньої частини екрану**: лазер знищується, якщо досягає верхньої частини екрану.
+   3. **Зіткнення ворога та героя**: ворог і герой знищуються, якщо стикаються.
+   4. **Ворог досягає нижньої частини екрану**: ворог і герой знищуються, якщо ворог досягає нижньої частини екрану.
+
+## Рекомендовані кроки
+
+Знайдіть файли, які були створені для вас у підпапці `your-work`. Вона повинна містити наступне:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Запустіть ваш проєкт у папці `your_work`, ввівши:
+
+```bash
+cd your-work
+npm start
+```
+
+Це запустить HTTP-сервер за адресою `http://localhost:5000`. Відкрийте браузер і введіть цю адресу, зараз він повинен відображати героя та всіх ворогів, але нічого ще не рухається :).
+
+### Додайте код
+
+1. **Налаштуйте прямокутне представлення вашого ігрового об'єкта для обробки зіткнень**. Наведений нижче код дозволяє отримати прямокутне представлення `GameObject`. Відредагуйте ваш клас GameObject, щоб розширити його:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Додайте код, який перевіряє зіткнення**. Це буде нова функція, яка перевіряє, чи перетинаються два прямокутники:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Додайте можливість стріляти лазером**
+   1. **Додайте повідомлення про подію натискання клавіші**. Клавіша *пробіл* повинна створювати лазер прямо над кораблем героя. Додайте три константи в об'єкт Messages:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Обробіть клавішу пробіл**. Відредагуйте функцію `window.addEventListener` для обробки натискання пробілу:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Додайте слухачі подій**. Відредагуйте функцію `initGame()`, щоб герой міг стріляти, коли натискається пробіл:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       і додайте нову функцію `eventEmitter.on()`, щоб забезпечити поведінку, коли ворог стикається з лазером:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Рух об'єкта**. Переконайтеся, що лазер поступово рухається до верхньої частини екрану. Ви створите новий клас Laser, який розширює `GameObject`, як ви робили раніше:
+
+      ```javascript
+        class Laser extends GameObject {
+        constructor(x, y) {
+          super(x,y);
+          (this.width = 9), (this.height = 33);
+          this.type = 'Laser';
+          this.img = laserImg;
+          let id = setInterval(() => {
+            if (this.y > 0) {
+              this.y -= 15;
+            } else {
+              this.dead = true;
+              clearInterval(id);
+            }
+          }, 100)
+        }
+      }
+      ```
+
+   1. **Обробіть зіткнення**. Реалізуйте правила зіткнень для лазера. Додайте функцію `updateGameObjects()`, яка перевіряє об'єкти, що стикаються:
+
+      ```javascript
+      function updateGameObjects() {
+        const enemies = gameObjects.filter(go => go.type === 'Enemy');
+        const lasers = gameObjects.filter((go) => go.type === "Laser");
+      // laser hit something
+        lasers.forEach((l) => {
+          enemies.forEach((m) => {
+            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+              first: l,
+              second: m,
+            });
+          }
+         });
+      });
+
+        gameObjects = gameObjects.filter(go => !go.dead);
+      }  
+      ```
+
+      Переконайтеся, що ви додали `updateGameObjects()` у ваш ігровий цикл у `window.onload`.
+
+   4. **Реалізуйте затримку** для лазера, щоб його можна було стріляти лише через певний інтервал.
+
+      Нарешті, відредагуйте клас Hero, щоб він міг мати затримку:
+
+       ```javascript
+      class Hero extends GameObject {
+        constructor(x, y) {
+          super(x, y);
+          (this.width = 99), (this.height = 75);
+          this.type = "Hero";
+          this.speed = { x: 0, y: 0 };
+          this.cooldown = 0;
+        }
+        fire() {
+          gameObjects.push(new Laser(this.x + 45, this.y - 10));
+          this.cooldown = 500;
+    
+          let id = setInterval(() => {
+            if (this.cooldown > 0) {
+              this.cooldown -= 100;
+            } else {
+              clearInterval(id);
+            }
+          }, 200);
+        }
+        canFire() {
+          return this.cooldown === 0;
+        }
+      }
+      ```
+
+На цьому етапі ваша гра має певну функціональність! Ви можете керувати героєм за допомогою стрілок, стріляти лазером за допомогою пробілу, і вороги зникають, коли ви їх вражаєте. Чудова робота!
+
+---
+
+## 🚀 Виклик
+
+Додайте вибух! Перегляньте ігрові ресурси в [репозиторії Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) і спробуйте додати вибух, коли лазер влучає в прибульця.
+
+## Післялекційна вікторина
+
+[Післялекційна вікторина](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Огляд і самостійне навчання
+
+Експериментуйте з інтервалами у вашій грі. Що відбувається, коли ви їх змінюєте? Читайте більше про [таймінгові події в JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Завдання
+
+[Дослідження зіткнень](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/4-collision-detection/assignment.md b/translations/uk/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..fbe159aa
--- /dev/null
+++ b/translations/uk/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-27T22:23:31+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Досліджуйте зіткнення
+
+## Інструкції
+
+Щоб краще зрозуміти, як працюють зіткнення, створіть дуже маленьку гру з кількома об'єктами, які стикаються. Зробіть так, щоб вони рухалися за допомогою натискань клавіш або кліків миші, і нехай щось відбувається з одним із об'єктів, коли він стикається. Це може бути щось на кшталт метеорита, що вдаряє землю, або машинок-бамперів. Проявіть креативність!
+
+## Критерії оцінювання
+
+| Критерій | Відмінно                                                                                                                  | Задовільно                   | Потребує покращення |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+|          | Створено повністю робочий зразок коду, з об'єктами, намальованими на полотні, базовими зіткненнями та реакціями           | Код неповний у деяких аспектах | Код працює некоректно |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/4-collision-detection/solution/README.md b/translations/uk/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..25bd4e41
--- /dev/null
+++ b/translations/uk/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:23:49+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "uk"
+}
+-->
+Це заповнювач, залишений порожнім навмисно
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/4-collision-detection/your-work/README.md b/translations/uk/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..3016fa95
--- /dev/null
+++ b/translations/uk/6-space-game/4-collision-detection/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:23:58+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "uk"
+}
+-->
+Це заповнювач, залишений порожнім навмисно
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/5-keeping-score/README.md b/translations/uk/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..0a472399
--- /dev/null
+++ b/translations/uk/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-27T22:20:46+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення космічної гри, частина 5: Очки та життя
+
+## Тест перед лекцією
+
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+У цьому уроці ви навчитеся додавати очки до гри та розраховувати життя.
+
+## Відображення тексту на екрані
+
+Щоб показати очки гри на екрані, потрібно знати, як розміщувати текст на екрані. Для цього використовується метод `fillText()` об'єкта canvas. Ви також можете контролювати інші аспекти, такі як шрифт, колір тексту та його вирівнювання (ліворуч, праворуч, по центру). Нижче наведено код, який малює текст на екрані.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Дізнайтеся більше про [додавання тексту до canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), і не соромтеся зробити ваш текст більш стильним!
+
+## Життя як концепція гри
+
+Концепція життя в грі — це просто число. У контексті космічної гри зазвичай призначають певну кількість життів, які зменшуються одне за одним, коли ваш корабель отримує пошкодження. Було б чудово, якщо ви зможете показати графічне представлення цього, наприклад, маленькі кораблики або сердечка замість числа.
+
+## Що потрібно створити
+
+Додайте наступне до вашої гри:
+
+- **Очки гри**: За кожен знищений ворожий корабель герой має отримувати очки, ми пропонуємо 100 очок за корабель. Очки гри повинні відображатися внизу ліворуч.
+- **Життя**: Ваш корабель має три життя. Ви втрачаєте одне життя кожного разу, коли ворожий корабель стикається з вами. Кількість життів повинна відображатися внизу праворуч у вигляді наступного графічного елемента ![зображення життя](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.uk.png).
+
+## Рекомендовані кроки
+
+Знайдіть файли, які були створені для вас у підпапці `your-work`. Вона повинна містити наступне:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Запустіть ваш проєкт у папці `your_work`, ввівши:
+
+```bash
+cd your-work
+npm start
+```
+
+Це запустить HTTP-сервер за адресою `http://localhost:5000`. Відкрийте браузер і введіть цю адресу, зараз він повинен відображати героя та всіх ворогів, і коли ви натискаєте стрілки вліво та вправо, герой рухається і може збивати ворогів.
+
+### Додайте код
+
+1. **Скопіюйте необхідні ресурси** з папки `solution/assets/` у папку `your-work`; ви додасте ресурс `life.png`. Додайте `lifeImg` до функції window.onload:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Додайте `lifeImg` до списку ресурсів:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Додайте змінні**. Додайте код, який представляє ваш загальний рахунок (0) і кількість життів (3), відображайте ці значення на екрані.
+
+3. **Розширте функцію `updateGameObjects()`**. Розширте функцію `updateGameObjects()` для обробки зіткнень з ворогами:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Додайте життя та очки**. 
+   1. **Ініціалізуйте змінні**. Під `this.cooldown = 0` у класі `Hero` встановіть життя та очки:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Відображайте змінні на екрані**. Відображайте ці значення на екрані:
+
+        ```javascript
+        function drawLife() {
+          // TODO, 35, 27
+          const START_POS = canvas.width - 180;
+          for(let i=0; i < hero.life; i++ ) {
+            ctx.drawImage(
+              lifeImg, 
+              START_POS + (45 * (i+1) ), 
+              canvas.height - 37);
+          }
+        }
+        
+        function drawPoints() {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = "red";
+          ctx.textAlign = "left";
+          drawText("Points: " + hero.points, 10, canvas.height-20);
+        }
+        
+        function drawText(message, x, y) {
+          ctx.fillText(message, x, y);
+        }
+
+        ```
+
+   1. **Додайте методи до ігрового циклу**. Переконайтеся, що ви додали ці функції до функції window.onload під `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Реалізуйте правила гри**. Реалізуйте наступні правила гри:
+
+   1. **За кожне зіткнення героя з ворогом** віднімайте одне життя.
+   
+      Розширте клас `Hero`, щоб виконати це віднімання:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **За кожен лазер, який влучає у ворога**, збільшуйте рахунок гри на 100 очок.
+
+      Розширте клас Hero, щоб виконати це збільшення:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Додайте ці функції до ваших Collision Event Emitters:
+
+        ```javascript
+        eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+           first.dead = true;
+           second.dead = true;
+           hero.incrementPoints();
+        })
+
+        eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+           enemy.dead = true;
+           hero.decrementLife();
+        });
+        ```
+
+✅ Проведіть невелике дослідження, щоб дізнатися про інші ігри, створені за допомогою JavaScript/Canvas. Які їхні спільні риси?
+
+Після завершення роботи ви повинні побачити маленькі кораблики "життя" внизу праворуч, очки внизу ліворуч, а також зменшення кількості життів при зіткненні з ворогами та збільшення очок при знищенні ворогів. Чудова робота! Ваша гра майже готова.
+
+---
+
+## 🚀 Виклик
+
+Ваш код майже завершений. Чи можете ви уявити наступні кроки?
+
+## Тест після лекції
+
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Огляд і самостійне навчання
+
+Дослідіть способи, за допомогою яких можна збільшувати та зменшувати очки гри та кількість життів. Існують цікаві ігрові рушії, такі як [PlayFab](https://playfab.com). Як використання одного з них може покращити вашу гру?
+
+## Завдання
+
+[Створіть гру з підрахунком очок](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/5-keeping-score/assignment.md b/translations/uk/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..7fcfd5ad
--- /dev/null
+++ b/translations/uk/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-27T22:21:30+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Створіть Гру з Нарахуванням Балів
+
+## Інструкції
+
+Створіть гру, у якій життя та бали відображаються креативно. Наприклад, можна показувати життя у вигляді сердець, а бали — як велике число внизу по центру екрана. Ознайомтеся з [Безкоштовними ресурсами для ігор](https://www.kenney.nl/)
+
+# Критерії Оцінювання
+
+| Критерії | Відмінно                | Задовільно                 | Потребує Покращення        |
+| -------- | ----------------------- | -------------------------- | -------------------------- |
+|          | представлена повна гра  | гра частково представлена  | часткова гра містить помилки |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/5-keeping-score/solution/README.md b/translations/uk/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..86913850
--- /dev/null
+++ b/translations/uk/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:21:46+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "uk"
+}
+-->
+Це заповнювач, залишений порожнім навмисно
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/5-keeping-score/your-work/README.md b/translations/uk/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..c0d1e5d8
--- /dev/null
+++ b/translations/uk/6-space-game/5-keeping-score/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:21:56+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "uk"
+}
+-->
+Це заповнювач, залишений порожнім навмисно
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/6-end-condition/README.md b/translations/uk/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..2d44a28d
--- /dev/null
+++ b/translations/uk/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-27T22:25:26+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення космічної гри, частина 6: Завершення та перезапуск
+
+## Тест перед лекцією
+
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Існують різні способи визначення *умови завершення* гри. Як творець гри, ви вирішуєте, чому гра завершується. Ось кілька причин, якщо припустити, що ми говоримо про космічну гру, яку ви створювали до цього:
+
+- **Знищено `N` ворожих кораблів**: Це досить поширено, якщо гра поділена на рівні, і для завершення рівня потрібно знищити `N` ворожих кораблів.
+- **Ваш корабель знищено**: У багатьох іграх ви програєте, якщо ваш корабель знищено. Інший поширений підхід — це концепція життів. Кожного разу, коли ваш корабель знищено, у вас віднімається одне життя. Коли всі життя втрачені, гра завершується.
+- **Ви зібрали `N` очок**: Ще одна поширена умова завершення — це збирання очок. Як саме ви отримуєте очки, залежить від вас, але зазвичай очки нараховуються за різні дії, наприклад, знищення ворожого корабля або збирання предметів, які випадають після їх знищення.
+- **Завершення рівня**: Це може включати кілька умов, таких як знищення `X` ворожих кораблів, збирання `Y` очок або, можливо, збирання певного предмета.
+
+## Перезапуск
+
+Якщо людям подобається ваша гра, вони, ймовірно, захочуть зіграти знову. Коли гра завершується з будь-якої причини, ви повинні запропонувати можливість перезапустити її.
+
+✅ Подумайте, за яких умов гра завершується, і як вас зазвичай спонукають до її перезапуску.
+
+## Що потрібно створити
+
+Ви додасте ці правила до своєї гри:
+
+1. **Перемога в грі**. Коли всі ворожі кораблі знищено, ви виграєте гру. Додатково відобразіть повідомлення про перемогу.
+1. **Перезапуск**. Коли всі ваші життя втрачені або гра виграна, ви повинні запропонувати спосіб перезапустити гру. Пам'ятайте! Вам потрібно буде ініціалізувати гру заново, і попередній стан гри має бути очищений.
+
+## Рекомендовані кроки
+
+Знайдіть файли, які були створені для вас у підпапці `your-work`. Вона повинна містити наступне:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Запустіть свій проєкт у папці `your_work`, ввівши:
+
+```bash
+cd your-work
+npm start
+```
+
+Це запустить HTTP-сервер за адресою `http://localhost:5000`. Відкрийте браузер і введіть цю адресу. Ваша гра має бути в ігровому стані.
+
+> порада: щоб уникнути попереджень у Visual Studio Code, відредагуйте функцію `window.onload`, щоб викликати `gameLoopId` як є (без `let`), і оголосіть `gameLoopId` на початку файлу окремо: `let gameLoopId;`
+
+### Додайте код
+
+1. **Відстеження умови завершення**. Додайте код, який відстежує кількість ворогів або чи був знищений корабель героя, додавши ці дві функції:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Додайте логіку до обробників повідомлень**. Відредагуйте `eventEmitter`, щоб обробляти ці умови:
+
+    ```javascript
+    eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+        first.dead = true;
+        second.dead = true;
+        hero.incrementPoints();
+
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+
+    eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+        enemy.dead = true;
+        hero.decrementLife();
+        if (isHeroDead())  {
+          eventEmitter.emit(Messages.GAME_END_LOSS);
+          return; // loss before victory
+        }
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+    
+    eventEmitter.on(Messages.GAME_END_WIN, () => {
+        endGame(true);
+    });
+      
+    eventEmitter.on(Messages.GAME_END_LOSS, () => {
+      endGame(false);
+    });
+    ```
+
+1. **Додайте нові типи повідомлень**. Додайте ці повідомлення до об'єкта constants:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Додайте код для перезапуску**. Додайте код, який перезапускає гру при натисканні вибраної кнопки.
+
+   1. **Слухайте натискання клавіші `Enter`**. Відредагуйте `eventListener` вашого вікна, щоб слухати це натискання:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Додайте повідомлення про перезапуск**. Додайте це повідомлення до вашого об'єкта Messages:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Реалізуйте правила гри**. Реалізуйте наступні правила гри:
+
+   1. **Умова перемоги гравця**. Коли всі ворожі кораблі знищено, відобразіть повідомлення про перемогу.
+
+      1. Спочатку створіть функцію `displayMessage()`:
+
+        ```javascript
+        function displayMessage(message, color = "red") {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = color;
+          ctx.textAlign = "center";
+          ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+        }
+        ```
+
+      1. Створіть функцію `endGame()`:
+
+        ```javascript
+        function endGame(win) {
+          clearInterval(gameLoopId);
+        
+          // set a delay so we are sure any paints have finished
+          setTimeout(() => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = "black";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            if (win) {
+              displayMessage(
+                "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+                "green"
+              );
+            } else {
+              displayMessage(
+                "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+              );
+            }
+          }, 200)  
+        }
+        ```
+
+   1. **Логіка перезапуску**. Коли всі життя втрачені або гравець виграв гру, відобразіть, що гру можна перезапустити. Додатково перезапустіть гру, коли натиснуто клавішу для перезапуску (ви можете вирішити, яка клавіша буде відповідати за перезапуск).
+
+      1. Створіть функцію `resetGame()`:
+
+        ```javascript
+        function resetGame() {
+          if (gameLoopId) {
+            clearInterval(gameLoopId);
+            eventEmitter.clear();
+            initGame();
+            gameLoopId = setInterval(() => {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              ctx.fillStyle = "black";
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              drawPoints();
+              drawLife();
+              updateGameObjects();
+              drawGameObjects(ctx);
+            }, 100);
+          }
+        }
+        ```
+
+     1. Додайте виклик до `eventEmitter` для скидання гри у `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Додайте функцію `clear()` до EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Вітаємо, Капітане! Ваша гра завершена! Чудова робота! 🚀 💥 👽
+
+---
+
+## 🚀 Виклик
+
+Додайте звук! Чи можете ви додати звук, щоб покращити ігровий процес, наприклад, коли лазер влучає, герой гине або виграє? Ознайомтеся з цим [прикладом](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play), щоб дізнатися, як відтворювати звук за допомогою JavaScript.
+
+## Тест після лекції
+
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Огляд і самостійне навчання
+
+Ваше завдання — створити нову пробну гру, тому досліджуйте цікаві ігри, щоб побачити, яку гру ви могли б створити.
+
+## Завдання
+
+[Створіть пробну гру](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/6-end-condition/assignment.md b/translations/uk/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..5a52b48b
--- /dev/null
+++ b/translations/uk/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-27T22:26:15+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Створіть приклад гри
+
+## Інструкції
+
+Спробуйте створити невелику гру, де ви практикуєте різні кінцеві умови. Варіюйте між отриманням певної кількості очок, втратою всіх життів героєм або перемогою над усіма монстрами. Створіть щось просте, наприклад, текстову пригодницьку гру в консолі. Використовуйте наведений нижче ігровий процес як натхнення:
+
+```
+Hero> Strikes with broadsword - orc takes 3p damage
+Orc> Hits with club - hero takes 2p damage
+Hero> Kicks - orc takes 1p damage
+Game> Orc is defeated - Hero collects 2 coins
+Game> ****No more monsters, you have conquered the evil fortress****
+```
+
+## Критерії оцінювання
+
+| Критерії | Відмінно               | Достатньо                  | Потребує покращення        |
+| -------- | ---------------------- | -------------------------- | -------------------------- |
+|          | представлена повна гра | представлена часткова гра  | часткова гра містить помилки |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні інтерпретації, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/6-end-condition/solution/README.md b/translations/uk/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..641d5dea
--- /dev/null
+++ b/translations/uk/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:26:31+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "uk"
+}
+-->
+Це заповнювач, залишений порожнім навмисно
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/6-end-condition/your-work/README.md b/translations/uk/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..564b6d31
--- /dev/null
+++ b/translations/uk/6-space-game/6-end-condition/your-work/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:26:39+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "uk"
+}
+-->
+Це заповнювач, залишений порожнім навмисно
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/README.md b/translations/uk/6-space-game/README.md
new file mode 100644
index 00000000..ba4b706f
--- /dev/null
+++ b/translations/uk/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-27T22:19:06+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення космічної гри
+
+Космічна гра для вивчення більш складних основ JavaScript
+
+У цьому уроці ви навчитеся створювати власну космічну гру. Якщо ви коли-небудь грали в гру "Space Invaders", ця гра має ту саму ідею: керувати космічним кораблем і стріляти в монстрів, які спускаються зверху. Ось як виглядатиме готова гра:
+
+![Готова гра](../../../6-space-game/images/pewpew.gif)
+
+У цих шести уроках ви навчитеся наступного:
+
+- **Взаємодіяти** з елементом Canvas для малювання на екрані
+- **Розуміти** декартову систему координат
+- **Вивчити** патерн Pub-Sub для створення надійної архітектури гри, яку легко підтримувати та розширювати
+- **Використовувати** Async/Await для завантаження ресурсів гри
+- **Обробляти** події клавіатури
+
+## Огляд
+
+- Теорія
+   - [Вступ до створення ігор з JavaScript](1-introduction/README.md)
+- Практика
+   - [Малювання на canvas](2-drawing-to-canvas/README.md)
+   - [Переміщення елементів по екрану](3-moving-elements-around/README.md)
+   - [Виявлення зіткнень](4-collision-detection/README.md)
+   - [Підрахунок очок](5-keeping-score/README.md)
+   - [Завершення та перезапуск гри](6-end-condition/README.md)
+
+## Подяки
+
+Ресурси, використані для цього, взяті з https://www.kenney.nl/.  
+Якщо вам подобається створювати ігри, це дійсно чудові ресурси: багато з них безкоштовні, а деякі платні.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/6-space-game/solution/README.md b/translations/uk/6-space-game/solution/README.md
new file mode 100644
index 00000000..d349a20b
--- /dev/null
+++ b/translations/uk/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T22:22:05+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "uk"
+}
+-->
+Це заповнювач, залишений порожнім навмисно
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/7-bank-project/1-template-route/README.md b/translations/uk/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..fe7c6b69
--- /dev/null
+++ b/translations/uk/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-27T22:07:19+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення банківського додатку Частина 1: HTML-шаблони та маршрути у веб-додатку
+
+## Передлекційна вікторина
+
+[Передлекційна вікторина](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Вступ
+
+З появою JavaScript у браузерах вебсайти стали більш інтерактивними та складними, ніж будь-коли. Веб-технології тепер часто використовуються для створення повноцінних додатків, які працюють безпосередньо у браузері, і які ми називаємо [веб-додатками](https://en.wikipedia.org/wiki/Web_application). Оскільки веб-додатки є дуже інтерактивними, користувачі не хочуть чекати повного перезавантаження сторінки кожного разу, коли виконується якась дія. Саме тому JavaScript використовується для оновлення HTML безпосередньо через DOM, щоб забезпечити більш плавний досвід користувача.
+
+У цьому уроці ми закладемо основи для створення банківського веб-додатку, використовуючи HTML-шаблони для створення кількох екранів, які можна відображати та оновлювати без необхідності перезавантаження всієї HTML-сторінки.
+
+### Передумови
+
+Вам потрібен локальний веб-сервер для тестування веб-додатку, який ми створимо в цьому уроці. Якщо у вас його немає, ви можете встановити [Node.js](https://nodejs.org) і використовувати команду `npx lite-server` з вашої папки проекту. Це створить локальний веб-сервер і відкриє ваш додаток у браузері.
+
+### Підготовка
+
+На вашому комп'ютері створіть папку з назвою `bank` і файл `index.html` всередині неї. Ми почнемо з цього HTML [шаблону](https://en.wikipedia.org/wiki/Boilerplate_code):
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bank App</title>
+  </head>
+  <body>
+    <!-- This is where you'll work -->
+  </body>
+</html>
+```
+
+---
+
+## HTML-шаблони
+
+Якщо ви хочете створити кілька екранів для веб-сторінки, одним із рішень буде створення окремого HTML-файлу для кожного екрану, який ви хочете відобразити. Однак це рішення має певні незручності:
+
+- Ви повинні перезавантажувати весь HTML при перемиканні екрану, що може бути повільним.
+- Важко ділитися даними між різними екранами.
+
+Інший підхід полягає в тому, щоб мати лише один HTML-файл і визначити кілька [HTML-шаблонів](https://developer.mozilla.org/docs/Web/HTML/Element/template) за допомогою елемента `<template>`. Шаблон — це багаторазовий HTML-блок, який не відображається браузером і має бути створений під час виконання за допомогою JavaScript.
+
+### Завдання
+
+Ми створимо банківський додаток із двома екранами: сторінкою входу та панеллю управління. Спочатку додамо в HTML-тег `<body>` елемент-заповнювач, який ми будемо використовувати для створення різних екранів нашого додатку:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Ми надаємо йому `id`, щоб було легше знайти його за допомогою JavaScript пізніше.
+
+> Порада: оскільки вміст цього елемента буде замінено, ми можемо додати повідомлення про завантаження або індикатор, який буде показаний під час завантаження додатку.
+
+Далі додамо HTML-шаблон для сторінки входу. Поки що ми просто додамо заголовок і секцію з посиланням, яке ми будемо використовувати для навігації.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Потім додамо ще один HTML-шаблон для сторінки панелі управління. Ця сторінка міститиме різні секції:
+
+- Заголовок із назвою та посиланням для виходу
+- Поточний баланс банківського рахунку
+- Список транзакцій, відображений у таблиці
+
+```html
+<template id="dashboard">
+  <header>
+    <h1>Bank App</h1>
+    <a href="/login">Logout</a>
+  </header>
+  <section>
+    Balance: 100$
+  </section>
+  <section>
+    <h2>Transactions</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Object</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </section>
+</template>
+```
+
+> Порада: створюючи HTML-шаблони, якщо ви хочете побачити, як вони виглядатимуть, ви можете закоментувати рядки `<template>` і `</template>`, обгорнувши їх у `<!-- -->`.
+
+✅ Як ви думаєте, чому ми використовуємо атрибути `id` для шаблонів? Чи могли б ми використовувати щось інше, наприклад класи?
+
+## Відображення шаблонів за допомогою JavaScript
+
+Якщо ви спробуєте ваш поточний HTML-файл у браузері, ви побачите, що він застряє на екрані з написом `Loading...`. Це тому, що нам потрібно додати трохи JavaScript-коду, щоб створити та відобразити HTML-шаблони.
+
+Створення шаблону зазвичай виконується в 3 етапи:
+
+1. Отримати елемент шаблону в DOM, наприклад, використовуючи [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Клонувати елемент шаблону, використовуючи [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Прикріпити його до DOM під видимим елементом, наприклад, використовуючи [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Чому нам потрібно клонувати шаблон перед тим, як прикріпити його до DOM? Що, на вашу думку, станеться, якщо ми пропустимо цей крок?
+
+### Завдання
+
+Створіть новий файл із назвою `app.js` у вашій папці проекту та імпортуйте цей файл у секцію `<head>` вашого HTML:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Тепер у `app.js` ми створимо нову функцію `updateRoute`:
+
+```js
+function updateRoute(templateId) {
+  const template = document.getElementById(templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Тут ми виконуємо саме ті 3 кроки, які описані вище. Ми створюємо шаблон із `id` `templateId` і поміщаємо його клонований вміст у наш елемент-заповнювач додатку. Зверніть увагу, що нам потрібно використовувати `cloneNode(true)`, щоб скопіювати весь піддерево шаблону.
+
+Тепер викличте цю функцію з одним із шаблонів і подивіться на результат.
+
+```js
+updateRoute('login');
+```
+
+✅ Яка мета цього коду `app.innerHTML = '';`? Що станеться без нього?
+
+## Створення маршрутів
+
+Коли ми говоримо про веб-додаток, ми називаємо *маршрутизацією* намір зіставити **URL-адреси** з конкретними екранами, які мають бути відображені. На вебсайті з кількома HTML-файлами це робиться автоматично, оскільки шляхи до файлів відображаються в URL-адресі. Наприклад, з такими файлами у вашій папці проекту:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Якщо ви створите веб-сервер із коренем `mywebsite`, зіставлення URL буде таким:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Однак для нашого веб-додатку ми використовуємо один HTML-файл, що містить усі екрани, тому ця стандартна поведінка нам не допоможе. Ми повинні створити це зіставлення вручну та оновити відображений шаблон за допомогою JavaScript.
+
+### Завдання
+
+Ми використаємо простий об'єкт для реалізації [карти](https://en.wikipedia.org/wiki/Associative_array) між шляхами URL-адрес і нашими шаблонами. Додайте цей об'єкт на початку вашого файлу `app.js`.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Тепер трохи змінимо функцію `updateRoute`. Замість того, щоб передавати безпосередньо `templateId` як аргумент, ми хочемо спочатку отримати його, подивившись на поточний URL, а потім використати нашу карту, щоб отримати відповідне значення `templateId`. Ми можемо використовувати [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname), щоб отримати лише секцію шляху з URL.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Тут ми зіставили маршрути, які ми оголосили, з відповідними шаблонами. Ви можете перевірити, що це працює правильно, змінивши URL вручну у вашому браузері.
+
+✅ Що станеться, якщо ви введете невідомий шлях у URL? Як ми могли б це вирішити?
+
+## Додавання навігації
+
+Наступний крок для нашого додатку — додати можливість переходу між сторінками без необхідності змінювати URL вручну. Це передбачає дві речі:
+
+1. Оновлення поточного URL
+2. Оновлення відображеного шаблону на основі нового URL
+
+Ми вже подбали про другу частину за допомогою функції `updateRoute`, тому нам потрібно зрозуміти, як оновити поточний URL.
+
+Ми будемо використовувати JavaScript, а точніше [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), який дозволяє оновлювати URL і створювати новий запис в історії перегляду без перезавантаження HTML.
+
+> Примітка: Хоча HTML-елемент прив'язки [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) можна використовувати самостійно для створення гіперпосилань на різні URL-адреси, він за замовчуванням змусить браузер перезавантажити HTML. Необхідно запобігти цій поведінці під час обробки маршрутизації за допомогою власного JavaScript, використовуючи функцію `preventDefault()` для події кліку.
+
+### Завдання
+
+Давайте створимо нову функцію, яку ми можемо використовувати для навігації в нашому додатку:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Цей метод спочатку оновлює поточний URL на основі заданого шляху, а потім оновлює шаблон. Властивість `window.location.origin` повертає корінь URL, дозволяючи нам реконструювати повну URL-адресу з заданого шляху.
+
+Тепер, коли у нас є ця функція, ми можемо вирішити проблему, яка виникає, якщо шлях не відповідає жодному визначеному маршруту. Ми модифікуємо функцію `updateRoute`, додавши резервний варіант до одного з існуючих маршрутів, якщо ми не можемо знайти відповідність.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Якщо маршрут не може бути знайдений, ми тепер перенаправимо на сторінку `login`.
+
+Тепер давайте створимо функцію для отримання URL при кліку на посилання та запобігання стандартній поведінці браузера для посилань:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Давайте завершимо систему навігації, додавши прив'язки до наших посилань *Login* і *Logout* у HTML.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Об'єкт `event` вище захоплює подію `click` і передає її до нашої функції `onLinkClick`.
+
+Використовуючи атрибут [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick), прив'яжіть подію `click` до JavaScript-коду, тут виклику функції `navigate()`.
+
+Спробуйте натиснути на ці посилання, тепер ви повинні мати можливість переходити між різними екранами вашого додатку.
+
+✅ Метод `history.pushState` є частиною стандарту HTML5 і реалізований у [всіх сучасних браузерах](https://caniuse.com/?search=pushState). Якщо ви створюєте веб-додаток для старих браузерів, є трюк, який ви можете використовувати замість цього API: використовуючи [хеш (`#`)](https://en.wikipedia.org/wiki/URI_fragment) перед шляхом, ви можете реалізувати маршрутизацію, яка працює з регулярною навігацією за допомогою прив'язок і не перезавантажує сторінку, оскільки її метою було створення внутрішніх посилань на сторінці.
+
+## Обробка кнопок "Назад" і "Вперед" у браузері
+
+Використання `history.pushState` створює нові записи в історії навігації браузера. Ви можете перевірити це, утримуючи *кнопку назад* вашого браузера, вона повинна відображати щось на кшталт цього:
+
+![Скріншот історії навігації](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.uk.png)
+
+Якщо ви спробуєте кілька разів натиснути кнопку назад, ви побачите, що поточний URL змінюється, а історія оновлюється, але той самий шаблон продовжує відображатися.
+
+Це тому, що додаток не знає, що нам потрібно викликати `updateRoute()` кожного разу, коли історія змінюється. Якщо ви подивитеся на [документацію `history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), ви побачите, що якщо стан змінюється - тобто ми перейшли до іншого URL - подія [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) викликається. Ми використаємо це, щоб виправити проблему.
+
+### Завдання
+
+Щоб переконатися, що відображений шаблон оновлюється, коли історія браузера змінюється, ми прив'яжемо нову функцію, яка викликає `updateRoute()`. Ми зробимо це внизу нашого файлу `app.js`:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Примітка: ми використали [стрілкову функцію](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) для оголошення нашого обробника події `popstate` для стислості, але звичайна функція працювала б так само.
+
+Ось відео для повторення про стрілкові функції:
+
+[![Стрілкові функції](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Стрілкові функції")
+
+> 🎥 Натисніть на зображення вище, щоб переглянути відео про стрілкові функції.
+
+Тепер спробуйте використовувати кнопки "Назад" і "Вперед" вашого браузера та перевірте, що відображений маршрут тепер правильно оновлюється.
+
+---
+
+## 🚀 Виклик
+
+Додайте новий шаблон і маршрут для третьої сторінки, яка показує кредити для цього додатку.
+
+## Післялекційна вікторина
+
+[Післялекційна вікторина](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Огляд і самостійне навчання
+
+Маршрутизація є однією з несподівано складних частин веб-розробки, особливо коли веб переходить від поведінки оновлення сторінок до оновлень сторінок у додатках з однією сторінкою (SPA). Прочитайте трохи про [те, як служба Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) обробляє маршрутизацію. Чи можете ви пояснити, чому деякі з описаних у цьому документі рішень є необхідними?
+
+## Завдання
+
+[Покращіть маршрутизацію](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/7-bank-project/1-template-route/assignment.md b/translations/uk/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..4d12b7de
--- /dev/null
+++ b/translations/uk/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-27T22:08:52+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Покращення маршрутизації
+
+## Інструкції
+
+У декларації маршрутів наразі міститься лише ID шаблону для використання. Але при відображенні нової сторінки іноді потрібні додаткові дії. Давайте покращимо нашу реалізацію маршрутизації, додавши дві нові функції:
+
+- Додайте заголовки до кожного шаблону та оновлюйте заголовок вікна за допомогою нового заголовка при зміні шаблону.
+- Додайте опцію для виконання певного коду після зміни шаблону. Ми хочемо, щоб у консолі розробника кожного разу, коли відображається сторінка панелі управління, друкувалося `'Dashboard is shown'`.
+
+## Критерії оцінювання
+
+| Критерій | Відмінно                                                                                                                           | Задовільно                                                                                                                                                                                | Потребує покращення                                    |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+|          | Обидві функції реалізовані та працюють. Додавання заголовка та виконання коду також працює для нового маршруту, доданого в декларацію `routes`. | Обидві функції працюють, але поведінка жорстко закодована і не налаштовується через декларацію `routes`. Додавання третього маршруту із заголовком та виконанням коду не працює або працює частково. | Одна з функцій відсутня або працює некоректно.        |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/7-bank-project/2-forms/README.md b/translations/uk/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..1f87afa7
--- /dev/null
+++ b/translations/uk/7-bank-project/2-forms/README.md
@@ -0,0 +1,312 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-27T22:02:21+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення банківського додатку, частина 2: створення форми входу та реєстрації
+
+## Передлекційний тест
+
+[Передлекційний тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Вступ
+
+У майже всіх сучасних веб-додатках ви можете створити обліковий запис, щоб мати свій власний приватний простір. Оскільки кілька користувачів можуть одночасно отримувати доступ до веб-додатку, потрібен механізм для зберігання персональних даних кожного користувача окремо та вибору інформації для відображення. Ми не будемо розглядати, як [безпечно керувати ідентифікацією користувачів](https://en.wikipedia.org/wiki/Authentication), оскільки це окрема велика тема, але ми забезпечимо можливість створення одного (або кількох) банківських рахунків у нашому додатку.
+
+У цій частині ми використаємо HTML-форми для додавання входу та реєстрації до нашого веб-додатку. Ми розглянемо, як програмно надсилати дані на серверний API, і зрештою визначимо базові правила валідації для введення користувачем даних.
+
+### Передумови
+
+Вам потрібно завершити [шаблони HTML та маршрутизацію](../1-template-route/README.md) веб-додатку для цього уроку. Також необхідно встановити [Node.js](https://nodejs.org) і [запустити серверний API](../api/README.md) локально, щоб ви могли надсилати дані для створення облікових записів.
+
+**Зверніть увагу**  
+Ви будете використовувати два термінали одночасно, як зазначено нижче:  
+1. Для основного банківського додатку, який ми створили в уроці [шаблони HTML та маршрутизація](../1-template-route/README.md).  
+2. Для [серверного API банківського додатку](../api/README.md), який ми щойно налаштували вище.
+
+Вам потрібно, щоб обидва сервери працювали одночасно для подальшого проходження уроку. Вони слухають на різних портах (порт `3000` і порт `5000`), тому все має працювати без проблем.
+
+Ви можете перевірити, чи сервер працює належним чином, виконавши цю команду в терміналі:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Форма та елементи керування
+
+Елемент `<form>` інкапсулює розділ HTML-документа, де користувач може вводити та надсилати дані за допомогою інтерактивних елементів керування. Існує багато різних елементів інтерфейсу користувача (UI), які можна використовувати у формі, найпоширенішими з яких є елементи `<input>` і `<button>`.
+
+Існує багато різних [типів](https://developer.mozilla.org/docs/Web/HTML/Element/input) `<input>`. Наприклад, щоб створити поле, де користувач може ввести своє ім'я користувача, ви можете використати:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+Атрибут `name` буде використовуватися як ім'я властивості, коли дані форми будуть надіслані. Атрибут `id` використовується для зв’язування `<label>` з елементом керування формою.
+
+> Ознайомтеся з повним списком [типів `<input>`](https://developer.mozilla.org/docs/Web/HTML/Element/input) і [інших елементів керування формами](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls), щоб отримати уявлення про всі доступні елементи інтерфейсу користувача, які ви можете використовувати під час створення вашого інтерфейсу.
+
+✅ Зверніть увагу, що `<input>` є [порожнім елементом](https://developer.mozilla.org/docs/Glossary/Empty_element), до якого *не слід* додавати закриваючий тег. Ви можете використовувати самозакриваючий запис `<input/>`, але це не обов’язково.
+
+Елемент `<button>` у формі має особливу поведінку. Якщо ви не вкажете його атрибут `type`, він автоматично надішле дані форми на сервер при натисканні. Ось можливі значення атрибута `type`:
+
+- `submit`: За замовчуванням у `<form>`, кнопка викликає дію надсилання форми.
+- `reset`: Кнопка скидає всі елементи керування форми до їх початкових значень.
+- `button`: Не призначає жодної поведінки за замовчуванням при натисканні кнопки. Ви можете призначити їй власні дії за допомогою JavaScript.
+
+### Завдання
+
+Давайте почнемо з додавання форми до шаблону `login`. Нам знадобиться поле для *імені користувача* та кнопка *Login*.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <h2>Login</h2>
+    <form id="loginForm">
+      <label for="username">Username</label>
+      <input id="username" name="user" type="text">
+      <button>Login</button>
+    </form>
+  </section>
+</template>
+```
+
+Якщо придивитися, ви помітите, що ми також додали елемент `<label>`. Елементи `<label>` використовуються для додавання назви до елементів керування інтерфейсу користувача, таких як наше поле для імені користувача. Мітки важливі для зручності читання ваших форм, а також мають додаткові переваги:
+
+- Зв’язуючи мітку з елементом керування формою, це допомагає користувачам, які використовують допоміжні технології (наприклад, екранний диктор), зрозуміти, які дані від них очікуються.
+- Ви можете натиснути на мітку, щоб безпосередньо сфокусуватися на пов’язаному полі введення, що полегшує доступ на пристроях із сенсорним екраном.
+
+> [Доступність](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) у вебі — це дуже важлива тема, яку часто ігнорують. Завдяки [семантичним HTML-елементам](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) створювати доступний контент не складно, якщо використовувати їх належним чином. Ви можете [дізнатися більше про доступність](https://developer.mozilla.org/docs/Web/Accessibility), щоб уникнути поширених помилок і стати відповідальним розробником.
+
+Тепер ми додамо другу форму для реєстрації, одразу під попередньою:
+
+```html
+<hr/>
+<h2>Register</h2>
+<form id="registerForm">
+  <label for="user">Username</label>
+  <input id="user" name="user" type="text">
+  <label for="currency">Currency</label>
+  <input id="currency" name="currency" type="text" value="$">
+  <label for="description">Description</label>
+  <input id="description" name="description" type="text">
+  <label for="balance">Current balance</label>
+  <input id="balance" name="balance" type="number" value="0">
+  <button>Register</button>
+</form>
+```
+
+Використовуючи атрибут `value`, ми можемо визначити значення за замовчуванням для певного поля введення. Зверніть увагу, що поле введення для `balance` має тип `number`. Чи виглядає воно інакше, ніж інші поля? Спробуйте взаємодіяти з ним.
+
+✅ Чи можете ви навігувати та взаємодіяти з формами, використовуючи лише клавіатуру? Як би ви це зробили?
+
+## Надсилання даних на сервер
+
+Тепер, коли у нас є функціональний інтерфейс, наступний крок — надіслати дані на сервер. Давайте швидко протестуємо наш поточний код: що відбувається, якщо ви натискаєте кнопку *Login* або *Register*?
+
+Чи помітили ви зміну в адресному рядку вашого браузера?
+
+![Знімок екрана зі зміною URL браузера після натискання кнопки Register](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.uk.png)
+
+Дія за замовчуванням для `<form>` — це надсилання форми на поточну URL-адресу сервера за допомогою [методу GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), додаючи дані форми безпосередньо до URL. Однак цей метод має кілька недоліків:
+
+- Обсяг даних, що надсилаються, дуже обмежений (приблизно 2000 символів).
+- Дані безпосередньо видно в URL (що не дуже добре для паролів).
+- Він не працює з завантаженням файлів.
+
+Саме тому ви можете змінити його на використання [методу POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5), який надсилає дані форми на сервер у тілі HTTP-запиту, без жодних попередніх обмежень.
+
+> Хоча POST є найпоширенішим методом для надсилання даних, [у деяких конкретних сценаріях](https://www.w3.org/2001/tag/doc/whenToUseGet.html) краще використовувати метод GET, наприклад, під час реалізації поля пошуку.
+
+### Завдання
+
+Додайте властивості `action` і `method` до форми реєстрації:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Тепер спробуйте зареєструвати новий обліковий запис зі своїм ім’ям. Після натискання кнопки *Register* ви повинні побачити щось подібне:
+
+![Вікно браузера на адресі localhost:5000/api/accounts, що показує JSON-рядок із даними користувача](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.uk.png)
+
+Якщо все працює правильно, сервер повинен відповісти на ваш запит [JSON](https://www.json.org/json-en.html)-відповіддю, що містить дані створеного облікового запису.
+
+✅ Спробуйте зареєструватися знову з тим самим ім’ям. Що відбувається?
+
+## Надсилання даних без перезавантаження сторінки
+
+Як ви, мабуть, помітили, є невелика проблема з підходом, який ми щойно використали: під час надсилання форми ми виходимо з нашого додатку, і браузер перенаправляє на URL сервера. Ми намагаємося уникнути всіх перезавантажень сторінок у нашому веб-додатку, оскільки створюємо [односторінковий додаток (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+Щоб надіслати дані форми на сервер без примусового перезавантаження сторінки, нам потрібно використовувати JavaScript. Замість того, щоб вказувати URL у властивості `action` елемента `<form>`, ви можете використовувати будь-який JavaScript-код, додавши перед ним рядок `javascript:`, щоб виконати власну дію. Це також означає, що вам доведеться реалізувати деякі завдання, які раніше автоматично виконував браузер:
+
+- Отримання даних форми.
+- Конвертація та кодування даних форми у відповідний формат.
+- Створення HTTP-запиту та його надсилання на сервер.
+
+### Завдання
+
+Замініть `action` форми реєстрації на:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Відкрийте `app.js` і додайте нову функцію з назвою `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Тут ми отримуємо елемент форми за допомогою `getElementById()` і використовуємо помічник [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData), щоб витягти значення з елементів керування форми у вигляді набору пар ключ/значення. Потім ми конвертуємо дані у звичайний об’єкт за допомогою [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) і, нарешті, серіалізуємо дані у формат [JSON](https://www.json.org/json-en.html), який зазвичай використовується для обміну даними в Інтернеті.
+
+Дані тепер готові до надсилання на сервер. Створіть нову функцію з назвою `createAccount`:
+
+```js
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: account
+    });
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+Що робить ця функція? По-перше, зверніть увагу на ключове слово `async`. Це означає, що функція містить код, який виконуватиметься [**асинхронно**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Коли використовується разом із ключовим словом `await`, це дозволяє чекати виконання асинхронного коду — наприклад, очікування відповіді сервера — перед продовженням.
+
+Ось коротке відео про використання `async/await`:
+
+[![Async і Await для керування промісами](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async і Await для керування промісами")
+
+> 🎥 Натисніть на зображення вище, щоб переглянути відео про async/await.
+
+Ми використовуємо API `fetch()` для надсилання JSON-даних на сервер. Цей метод приймає 2 параметри:
+
+- URL сервера, тому ми вказуємо `//localhost:5000/api/accounts`.
+- Налаштування запиту. Тут ми встановлюємо метод `POST` і надаємо `body` для запиту. Оскільки ми надсилаємо JSON-дані на сервер, нам також потрібно встановити заголовок `Content-Type` у значення `application/json`, щоб сервер знав, як інтерпретувати вміст.
+
+Оскільки сервер відповість на запит JSON-даними, ми можемо використовувати `await response.json()`, щоб розібрати JSON-вміст і повернути отриманий об’єкт. Зверніть увагу, що цей метод є асинхронним, тому ми використовуємо ключове слово `await`, щоб переконатися, що будь-які помилки під час розбору також будуть враховані.
+
+Тепер додайте трохи коду до функції `register`, щоб викликати `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Оскільки ми використовуємо ключове слово `await`, нам потрібно додати ключове слово `async` перед функцією `register`:
+
+```js
+async function register() {
+```
+
+Нарешті, додамо кілька логів, щоб перевірити результат. Остаточна функція має виглядати так:
+
+```js
+async function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const jsonData = JSON.stringify(Object.fromEntries(formData));
+  const result = await createAccount(jsonData);
+
+  if (result.error) {
+    return console.log('An error occurred:', result.error);
+  }
+
+  console.log('Account created!', result);
+}
+```
+
+Це було трохи довго, але ми впоралися! Якщо ви відкриєте [інструменти розробника браузера](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) і спробуєте зареєструвати новий обліковий запис, ви не побачите жодних змін на веб-сторінці, але в консолі з’явиться повідомлення, яке підтверджує, що все працює.
+
+![Знімок екрана з повідомленням у консолі браузера](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.uk.png)
+
+✅ Як ви думаєте, чи дані надсилаються на сервер безпечно? Що, якщо хтось зможе перехопити запит? Ви можете прочитати про [HTTPS](https://en.wikipedia.org/wiki/HTTPS), щоб дізнатися більше про безпечну передачу даних.
+
+## Валідація даних
+
+Якщо ви спробуєте зареєструвати новий обліковий запис, не вказавши спочатку ім’я користувача, ви побачите, що сервер повертає помилку зі статус-кодом [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Перед надсиланням даних на сервер гарною практикою є [перевірка даних форми](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) заздалегідь, щоб переконатися, що ви надсилаєте дійсний запит. HTML5 елементи керування формами забезпечують вбудовану валідацію за допомогою різних атрибутів:
+
+- `required`: поле має бути заповнене, інакше форму не можна надіслати.
+- `minlength` і `maxlength`: визначають мінімальну та максимальну кількість символів у текстових полях.
+- `min` і `max`: визначають мінімальне та максимальне значення числового поля.
+- `type`: визначає тип очікуваних даних, наприклад, `number`, `email`, `file` або [інші вбудовані типи](https://developer.mozilla.org/docs/Web/HTML/Element/input). Цей атрибут також може змінювати візуальне відображення елемента керування.
+- `pattern`: дозволяє визначити [регулярний вираз](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) для перевірки, чи введені дані є дійсними.
+Порада: ви можете налаштувати вигляд елементів керування формою залежно від того, чи вони є валідними, чи ні, використовуючи псевдокласи CSS `:valid` та `:invalid`.
+### Завдання
+
+Для створення нового облікового запису необхідно заповнити два обов’язкові поля: ім’я користувача та валюту. Інші поля є необов’язковими. Оновіть HTML форми, використовуючи атрибут `required` і текст у мітці поля, щоб це виглядало так:
+
+```html
+<label for="user">Username (required)</label>
+<input id="user" name="user" type="text" required>
+...
+<label for="currency">Currency (required)</label>
+<input id="currency" name="currency" type="text" value="$" required>
+```
+
+Хоча ця конкретна серверна реалізація не накладає жорстких обмежень на максимальну довжину полів, завжди є гарною практикою визначати розумні межі для будь-якого текстового вводу користувача.
+
+Додайте атрибут `maxlength` до текстових полів:
+
+```html
+<input id="user" name="user" type="text" maxlength="20" required>
+...
+<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
+...
+<input id="description" name="description" type="text" maxlength="100">
+```
+
+Тепер, якщо ви натиснете кнопку *Зареєструватися*, і якесь поле не відповідатиме визначеним нами правилам валідації, ви побачите щось подібне:
+
+![Знімок екрана, що показує помилку валідації при спробі надіслати форму](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.uk.png)
+
+Валідація, яка виконується *до* надсилання будь-яких даних на сервер, називається **клієнтською валідацією**. Але зверніть увагу, що не завжди можливо виконати всі перевірки без надсилання даних. Наприклад, ми не можемо перевірити тут, чи існує вже обліковий запис із таким самим ім’ям користувача, без запиту до сервера. Додаткова валідація, яка виконується на сервері, називається **серверною валідацією**.
+
+Зазвичай потрібно реалізовувати обидва типи валідації. Клієнтська валідація покращує взаємодію з користувачем, надаючи миттєвий зворотний зв’язок, але серверна валідація є критично важливою для забезпечення коректності та безпеки даних користувача.
+
+---
+
+## 🚀 Виклик
+
+Показуйте повідомлення про помилку в HTML, якщо користувач уже існує.
+
+Ось приклад того, як може виглядати фінальна сторінка входу після невеликого стилізування:
+
+![Знімок екрана сторінки входу після додавання стилів CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.uk.png)
+
+## Післялекційний тест
+
+[Післялекційний тест](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Огляд і самостійне навчання
+
+Розробники проявляють неабияку креативність у створенні форм, особливо щодо стратегій валідації. Дізнайтеся про різні підходи до створення форм, переглядаючи [CodePen](https://codepen.com); чи зможете ви знайти цікаві та надихаючі приклади форм?
+
+## Завдання
+
+[Стилізуйте свій банківський додаток](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/7-bank-project/2-forms/assignment.md b/translations/uk/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..5c135c3c
--- /dev/null
+++ b/translations/uk/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-27T22:04:17+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Оформіть ваш додаток банку
+
+## Інструкції
+
+Створіть новий файл `styles.css` і додайте посилання на нього у ваш поточний файл `index.html`. У щойно створеному CSS-файлі додайте стилі, щоб сторінки *Вхід* та *Панель управління* виглядали охайно та впорядковано. Спробуйте створити кольорову тему, щоб надати вашому додатку власний стиль.
+
+> Порада: ви можете змінити HTML і додати нові елементи та класи, якщо це необхідно.
+
+## Критерії оцінювання
+
+| Критерій | Відмінно                                                                                                                | Задовільно                                                                    | Потребує покращення                                                                             |
+| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+|          | Усі сторінки виглядають охайно та читабельно, з узгодженою кольоровою темою, а різні секції чітко виділені.              | Сторінки оформлені, але без теми або з секціями, які не чітко розмежовані.      | Сторінки не мають стилів, секції виглядають неорганізовано, інформацію важко читати.           |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/7-bank-project/3-data/README.md b/translations/uk/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..b7929d41
--- /dev/null
+++ b/translations/uk/7-bank-project/3-data/README.md
@@ -0,0 +1,347 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-27T21:58:48+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення банківського додатку, частина 3: Методи отримання та використання даних
+
+## Тест перед лекцією
+
+[Тест перед лекцією](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Вступ
+
+У центрі кожного веб-додатку знаходяться *дані*. Дані можуть мати різні форми, але їх основна мета — показувати інформацію користувачеві. З розвитком веб-додатків, які стають все більш інтерактивними та складними, спосіб доступу користувача до інформації та взаємодії з нею став ключовою частиною веб-розробки.
+
+У цьому уроці ми розглянемо, як асинхронно отримувати дані з сервера та використовувати ці дані для відображення інформації на веб-сторінці без перезавантаження HTML.
+
+### Передумови
+
+Вам потрібно створити [Форму входу та реєстрації](../2-forms/README.md) як частину веб-додатку для цього уроку. Також необхідно встановити [Node.js](https://nodejs.org) і [запустити сервер API](../api/README.md) локально, щоб отримати дані облікового запису.
+
+Ви можете перевірити, чи сервер працює правильно, виконавши цю команду в терміналі:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX та отримання даних
+
+Традиційні веб-сайти оновлюють відображений контент, коли користувач вибирає посилання або надсилає дані через форму, шляхом перезавантаження повної HTML-сторінки. Кожного разу, коли потрібно завантажити нові дані, веб-сервер повертає абсолютно нову HTML-сторінку, яку потрібно обробити браузером, перериваючи поточну дію користувача та обмежуючи взаємодії під час перезавантаження. Цей робочий процес також називається *багатосторінковим додатком* або *MPA*.
+
+![Робочий процес оновлення в багатосторінковому додатку](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.uk.png)
+
+Коли веб-додатки стали більш складними та інтерактивними, з'явилася нова техніка під назвою [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)). Ця техніка дозволяє веб-додаткам асинхронно надсилати та отримувати дані з сервера за допомогою JavaScript, без необхідності перезавантаження HTML-сторінки, що забезпечує швидше оновлення та плавнішу взаємодію з користувачем. Коли нові дані отримані з сервера, поточна HTML-сторінка також може бути оновлена за допомогою JavaScript через [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API. З часом цей підхід еволюціонував у те, що зараз називається [*односторінковим додатком* або *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Робочий процес оновлення в односторінковому додатку](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.uk.png)
+
+Коли AJAX вперше був представлений, єдиним API для асинхронного отримання даних був [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Але сучасні браузери тепер також реалізують більш зручний і потужний [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), який використовує проміси та краще підходить для роботи з даними у форматі JSON.
+
+> Хоча всі сучасні браузери підтримують `Fetch API`, якщо ви хочете, щоб ваш веб-додаток працював на старих браузерах, завжди варто перевірити [таблицю сумісності на caniuse.com](https://caniuse.com/fetch).
+
+### Завдання
+
+У [попередньому уроці](../2-forms/README.md) ми реалізували форму реєстрації для створення облікового запису. Тепер ми додамо код для входу за допомогою існуючого облікового запису та отримання його даних. Відкрийте файл `app.js` і додайте нову функцію `login`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Спочатку ми отримуємо елемент форми за допомогою `getElementById()`, а потім отримуємо ім'я користувача з введення через `loginForm.user.value`. Кожен елемент форми можна отримати за його ім'ям (встановленим у HTML через атрибут `name`) як властивість форми.
+
+Аналогічно до того, що ми зробили для реєстрації, ми створимо ще одну функцію для виконання запиту до сервера, але цього разу для отримання даних облікового запису:
+
+```js
+async function getAccount(user) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+Ми використовуємо `fetch` API для асинхронного запиту даних із сервера, але цього разу нам не потрібні додаткові параметри, окрім URL, оскільки ми лише запитуємо дані. За замовчуванням `fetch` створює HTTP-запит типу [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET), що нам і потрібно.
+
+✅ `encodeURIComponent()` — це функція, яка екранує спеціальні символи для URL. Які проблеми можуть виникнути, якщо ми не викличемо цю функцію і використаємо значення `user` безпосередньо в URL?
+
+Тепер оновимо нашу функцію `login`, щоб використовувати `getAccount`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+  const data = await getAccount(user);
+
+  if (data.error) {
+    return console.log('loginError', data.error);
+  }
+
+  account = data;
+  navigate('/dashboard');
+}
+```
+
+Оскільки `getAccount` є асинхронною функцією, нам потрібно використовувати ключове слово `await`, щоб дочекатися результату сервера. Як і у випадку з будь-яким запитом до сервера, ми також повинні обробляти помилки. Поки що ми просто додамо повідомлення в лог для відображення помилки, а пізніше повернемося до цього.
+
+Потім нам потрібно зберегти дані десь, щоб пізніше використовувати їх для відображення інформації на панелі управління. Оскільки змінна `account` ще не існує, ми створимо глобальну змінну для неї на початку нашого файлу:
+
+```js
+let account = null;
+```
+
+Після того, як дані користувача збережені у змінній, ми можемо перейти зі сторінки *login* на *dashboard* за допомогою функції `navigate()`, яку ми вже маємо.
+
+Нарешті, нам потрібно викликати нашу функцію `login`, коли форма входу буде надіслана, змінивши HTML:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Перевірте, чи все працює правильно, зареєструвавши новий обліковий запис і спробувавши увійти за допомогою цього ж облікового запису.
+
+Перед тим як перейти до наступної частини, ми також можемо завершити функцію `register`, додавши це в кінці функції:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Чи знали ви, що за замовчуванням ви можете викликати серверні API лише з *того ж домену та порту*, що й веб-сторінка, яку ви переглядаєте? Це механізм безпеки, який забезпечують браузери. Але зачекайте, наш веб-додаток працює на `localhost:3000`, тоді як сервер API працює на `localhost:5000`. Чому це працює? Використовуючи техніку під назвою [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), можна виконувати HTTP-запити між різними доменами, якщо сервер додає спеціальні заголовки до відповіді, дозволяючи виключення для конкретних доменів.
+
+> Дізнайтеся більше про API, пройшовши цей [урок](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon).
+
+## Оновлення HTML для відображення даних
+
+Тепер, коли у нас є дані користувача, нам потрібно оновити існуючий HTML, щоб відобразити їх. Ми вже знаємо, як отримати елемент із DOM, наприклад, за допомогою `document.getElementById()`. Після того, як у вас є базовий елемент, ось кілька API, які ви можете використовувати для його зміни або додавання дочірніх елементів:
+
+- Використовуючи властивість [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent), ви можете змінити текст елемента. Зверніть увагу, що зміна цього значення видаляє всіх дочірніх елементів (якщо вони є) і замінює їх на наданий текст. Таким чином, це також ефективний метод для видалення всіх дочірніх елементів даного елемента, присвоюючи йому порожній рядок `''`.
+
+- Використовуючи [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) разом із методом [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), ви можете створювати та прикріплювати один або кілька нових дочірніх елементів.
+
+✅ Використовуючи властивість [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) елемента, також можна змінювати його HTML-вміст, але цей метод слід уникати, оскільки він вразливий до атак [міжсайтового скриптингу (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting).
+
+### Завдання
+
+Перед тим як перейти до екрану панелі управління, є ще одна річ, яку ми повинні зробити на сторінці *login*. Зараз, якщо ви спробуєте увійти з ім'ям користувача, яке не існує, повідомлення показується в консолі, але для звичайного користувача нічого не змінюється, і він не знає, що відбувається.
+
+Додамо елемент-заповнювач у форму входу, де ми можемо відображати повідомлення про помилку, якщо це необхідно. Хорошим місцем буде розташування перед кнопкою входу `<button>`:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Цей елемент `<div>` порожній, тобто нічого не буде відображатися на екрані, поки ми не додамо до нього якийсь вміст. Ми також надаємо йому `id`, щоб легко отримати його за допомогою JavaScript.
+
+Поверніться до файлу `app.js` і створіть нову допоміжну функцію `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Ця функція досить проста: за заданим *id* елемента та *текстом* вона оновлює текстовий вміст DOM-елемента з відповідним `id`. Використаємо цей метод замість попереднього повідомлення про помилку у функції `login`:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Тепер, якщо ви спробуєте увійти з недійсним обліковим записом, ви побачите щось на зразок цього:
+
+![Скріншот, що показує повідомлення про помилку під час входу](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.uk.png)
+
+Тепер у нас є текст помилки, який відображається візуально, але якщо ви спробуєте це з екранним читачем, ви помітите, що нічого не оголошується. Щоб текст, який динамічно додається на сторінку, оголошувався екранними читачами, він повинен використовувати так звану [живу область (Live Region)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Тут ми будемо використовувати специфічний тип живої області, який називається сповіщенням:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Реалізуйте таку ж поведінку для помилок функції `register` (не забудьте оновити HTML).
+
+## Відображення інформації на панелі управління
+
+Використовуючи ті ж техніки, які ми щойно розглянули, ми також займемося відображенням інформації облікового запису на сторінці панелі управління.
+
+Ось як виглядає об'єкт облікового запису, отриманий із сервера:
+
+```json
+{
+  "user": "test",
+  "currency": "$",
+  "description": "Test account",
+  "balance": 75,
+  "transactions": [
+    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
+    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
+    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
+  ],
+}
+```
+
+> Примітка: щоб полегшити собі життя, ви можете використовувати попередньо створений обліковий запис `test`, який вже заповнений даними.
+
+### Завдання
+
+Почнемо з заміни розділу "Баланс" у HTML, щоб додати елементи-заповнювачі:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Ми також додамо новий розділ трохи нижче для відображення опису облікового запису:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Оскільки опис облікового запису функціонує як заголовок для контенту під ним, він семантично позначений як заголовок. Дізнайтеся більше про те, чому [структура заголовків](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) важлива для доступності, і критично оцініть сторінку, щоб визначити, що ще може бути заголовком.
+
+Далі ми створимо нову функцію в `app.js`, щоб заповнити заповнювачі:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Спочатку ми перевіряємо, чи є у нас необхідні дані облікового запису, перш ніж продовжувати. Потім ми використовуємо функцію `updateElement()`, яку створили раніше, щоб оновити HTML.
+
+> Щоб зробити відображення балансу більш привабливим, ми використовуємо метод [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), щоб примусово відображати значення з 2 цифрами після десяткової точки.
+
+Тепер нам потрібно викликати нашу функцію `updateDashboard()` кожного разу, коли завантажується сторінка панелі управління. Якщо ви вже завершили [завдання уроку 1](../1-template-route/assignment.md), це має бути просто, інакше ви можете використати наступну реалізацію.
+
+Додайте цей код у кінці функції `updateRoute()`:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+І оновіть визначення маршрутів:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+З цією зміною кожного разу, коли відображається сторінка панелі управління, викликається функція `updateDashboard()`. Після входу ви повинні побачити баланс облікового запису, валюту та опис.
+
+## Динамічне створення рядків таблиці за допомогою HTML-шаблонів
+
+У [першому уроці](../1-template-route/README.md) ми використовували HTML-шаблони разом із методом [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) для реалізації навігації в нашому додатку. Шаблони також можуть бути меншими та використовуватися для динамічного заповнення повторюваних частин сторінки.
+
+Ми використаємо схожий підхід для відображення списку транзакцій у HTML-таблиці.
+
+### Завдання
+
+Додайте новий шаблон у `<body>` HTML:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Цей шаблон представляє один рядок таблиці з трьома стовпцями, які ми хочемо заповнити: *дата*, *об'єкт* і *сума* транзакції.
+
+Потім додайте властивість `id` до елемента `<tbody>` таблиці в шаблоні панелі управління, щоб його було легше знайти за допомогою JavaScript:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+Наш HTML готовий, перейдемо до JavaScript і створимо нову функцію `createTransactionRow`:
+
+```js
+function createTransactionRow(transaction) {
+  const template = document.getElementById('transaction');
+  const transactionRow = template.content.cloneNode(true);
+  const tr = transactionRow.querySelector('tr');
+  tr.children[0].textContent = transaction.date;
+  tr.children[1].textContent = transaction.object;
+  tr.children[2].textContent = transaction.amount.toFixed(2);
+  return transactionRow;
+}
+```
+
+Ця функція робить саме те, що її назва передбачає: використовуючи шаблон, який ми створили раніше, вона створює новий рядок таблиці та заповнює його вміст даними транзакції. Ми використаємо це у функції `updateDashboard()`, щоб заповнити таблицю:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Тут ми використовуємо метод [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), який створює новий фрагмент DOM, з яким ми можемо працювати, перш ніж остаточно прикріпити його до нашої HTML-таблиці.
+
+Є ще одна річ, яку ми повинні зробити, перш ніж цей код запрацює, оскільки наша функція `updateElement()` наразі підтримує лише текстовий вміст. Змінімо її код трохи:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+```
+
+Ми використовуємо метод [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), оскільки він дозволяє прикріплювати як текст, так і [DOM-вузли](https://developer.mozilla.org/docs/Web/API/Node) до батьківського елемента, що ідеально підходить для всіх наших випадків використання.
+Якщо ви спробуєте увійти за допомогою облікового запису `test`, тепер ви повинні побачити список транзакцій на панелі управління 🎉.
+
+---
+
+## 🚀 Виклик
+
+Працюйте разом, щоб зробити сторінку панелі управління схожою на справжній банківський додаток. Якщо ви вже стилізували свій додаток, спробуйте використати [медіа-запити](https://developer.mozilla.org/docs/Web/CSS/Media_Queries), щоб створити [адаптивний дизайн](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), який добре працює як на настільних комп’ютерах, так і на мобільних пристроях.
+
+Ось приклад стилізованої сторінки панелі управління:
+
+![Скріншот прикладу результату панелі управління після стилізації](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.uk.png)
+
+## Тест після лекції
+
+[Тест після лекції](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Завдання
+
+[Рефакторизуйте та прокоментуйте свій код](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/7-bank-project/3-data/assignment.md b/translations/uk/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..b2975eb2
--- /dev/null
+++ b/translations/uk/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-27T22:01:18+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Рефакторинг і коментування вашого коду
+
+## Інструкції
+
+Коли ваш кодова база зростає, важливо регулярно проводити рефакторинг, щоб зберігати її читабельною та зручною для підтримки. Додайте коментарі та рефакторизуйте ваш `app.js`, щоб покращити якість коду:
+
+- Винесіть константи, такі як базовий URL серверного API
+- Уніфікуйте схожий код: наприклад, можна створити функцію `sendRequest()`, щоб об'єднати код, який використовується в `createAccount()` і `getAccount()`
+- Реорганізуйте код, щоб зробити його легшим для читання, і додайте коментарі
+
+## Критерії оцінювання
+
+| Критерій | Відмінно                                                                                                                                                     | Задовільно                                                                                       | Потребує покращення                                                                     |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+|          | Код прокоментований, добре організований у різних секціях і легкий для читання. Константи винесені, створена уніфікована функція `sendRequest()`.              | Код чистий, але його можна покращити за допомогою додаткових коментарів, винесення констант або уніфікації. | Код неорганізований, без коментарів, константи не винесені, код не уніфікований.       |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають у результаті використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/7-bank-project/4-state-management/README.md b/translations/uk/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..0bc9bcb7
--- /dev/null
+++ b/translations/uk/7-bank-project/4-state-management/README.md
@@ -0,0 +1,292 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-27T22:04:35+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "uk"
+}
+-->
+# Створення банківського додатку, частина 4: Концепції управління станом
+
+## Передлекційна вікторина
+
+[Передлекційна вікторина](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Вступ
+
+Зі зростанням веб-додатку стає складно відстежувати всі потоки даних. Який код отримує дані, яка сторінка їх використовує, де і коли їх потрібно оновлювати... Легко опинитися з заплутаним кодом, який важко підтримувати. Це особливо актуально, коли потрібно ділитися даними між різними сторінками додатку, наприклад, даними користувача. Концепція *управління станом* завжди існувала у всіх типах програм, але з ростом складності веб-додатків це стало ключовим моментом, який варто враховувати під час розробки.
+
+У цій фінальній частині ми переглянемо додаток, який ми створили, щоб переосмислити, як управляється стан, забезпечуючи підтримку оновлення браузера в будь-який момент і збереження даних між сеансами користувача.
+
+### Передумови
+
+Вам потрібно завершити частину [отримання даних](../3-data/README.md) веб-додатку для цього уроку. Також необхідно встановити [Node.js](https://nodejs.org) і [запустити сервер API](../api/README.md) локально, щоб ви могли управляти даними облікового запису.
+
+Ви можете перевірити, чи сервер працює належним чином, виконавши цю команду в терміналі:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Переосмислення управління станом
+
+У [попередньому уроці](../3-data/README.md) ми ввели базову концепцію стану в нашому додатку за допомогою глобальної змінної `account`, яка містить банківські дані для поточного користувача, що увійшов у систему. Однак наша поточна реалізація має деякі недоліки. Спробуйте оновити сторінку, коли ви перебуваєте на інформаційній панелі. Що відбувається?
+
+Є три проблеми з поточним кодом:
+
+- Стан не зберігається, оскільки оновлення браузера повертає вас на сторінку входу.
+- Є кілька функцій, які змінюють стан. Зі зростанням додатку це може ускладнити відстеження змін, і легко забути оновити одну з них.
+- Стан не очищується, тому коли ви натискаєте *Вийти*, дані облікового запису все ще залишаються, хоча ви перебуваєте на сторінці входу.
+
+Ми могли б оновити наш код, щоб вирішити ці проблеми по черзі, але це створило б більше дублювання коду і зробило додаток складнішим для підтримки. Або ми могли б зупинитися на кілька хвилин і переосмислити нашу стратегію.
+
+> Які проблеми ми насправді намагаємося вирішити?
+
+[Управління станом](https://en.wikipedia.org/wiki/State_management) полягає у знаходженні хорошого підходу для вирішення цих двох конкретних проблем:
+
+- Як зробити потоки даних у додатку зрозумілими?
+- Як забезпечити синхронізацію даних стану з інтерфейсом користувача (і навпаки)?
+
+Як тільки ви вирішите ці проблеми, будь-які інші проблеми, які можуть виникнути, або вже будуть вирішені, або стануть легшими для вирішення. Існує багато можливих підходів для вирішення цих проблем, але ми скористаємося загальним рішенням, яке полягає у **централізації даних і способів їх зміни**. Потоки даних виглядатимуть так:
+
+![Схема, що показує потоки даних між HTML, діями користувача і станом](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.uk.png)
+
+> Тут ми не будемо розглядати частину, де дані автоматично викликають оновлення представлення, оскільки це пов'язано з більш складними концепціями [Реактивного програмування](https://en.wikipedia.org/wiki/Reactive_programming). Це хороший предмет для подальшого вивчення, якщо ви готові до глибокого занурення.
+
+✅ Існує багато бібліотек з різними підходами до управління станом, [Redux](https://redux.js.org) є популярним варіантом. Ознайомтеся з концепціями і шаблонами, які використовуються, оскільки це часто хороший спосіб дізнатися, з якими потенційними проблемами ви можете зіткнутися у великих веб-додатках і як їх можна вирішити.
+
+### Завдання
+
+Почнемо з невеликого рефакторингу. Замініть оголошення `account`:
+
+```js
+let account = null;
+```
+
+На:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Ідея полягає у *централізації* всіх даних нашого додатку в одному об'єкті стану. Зараз у стані є лише `account`, тому це не сильно змінює ситуацію, але створює основу для подальших змін.
+
+Також потрібно оновити функції, які його використовують. У функціях `register()` і `login()` замініть `account = ...` на `state.account = ...`;
+
+На початку функції `updateDashboard()` додайте цей рядок:
+
+```js
+const account = state.account;
+```
+
+Цей рефакторинг сам по собі не приніс значних покращень, але ідея полягала у створенні основи для наступних змін.
+
+## Відстеження змін даних
+
+Тепер, коли ми створили об'єкт `state` для зберігання наших даних, наступним кроком є централізація оновлень. Мета полягає у тому, щоб зробити легшим відстеження будь-яких змін і моментів, коли вони відбуваються.
+
+Щоб уникнути внесення змін до об'єкта `state`, також хорошою практикою є вважати його [*незмінним*](https://en.wikipedia.org/wiki/Immutable_object), тобто таким, який взагалі не можна змінювати. Це також означає, що вам потрібно створити новий об'єкт стану, якщо ви хочете щось у ньому змінити. Роблячи це, ви створюєте захист від потенційно небажаних [побічних ефектів](https://en.wikipedia.org/wiki/Side_effect_(computer_science)), і відкриваєте можливості для нових функцій у вашому додатку, таких як реалізація undo/redo, а також спрощуєте налагодження. Наприклад, ви могли б реєструвати кожну зміну стану і зберігати історію змін, щоб зрозуміти джерело помилки.
+
+У JavaScript ви можете використовувати [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) для створення незмінної версії об'єкта. Якщо ви спробуєте внести зміни до незмінного об'єкта, буде викликано виняток.
+
+✅ Чи знаєте ви різницю між *поверхневим* і *глибоким* незмінним об'єктом? Ви можете прочитати про це [тут](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Завдання
+
+Створимо нову функцію `updateState()`:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+У цій функції ми створюємо новий об'єкт стану і копіюємо дані з попереднього стану за допомогою [*оператора розпакування (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Потім ми перевизначаємо конкретну властивість об'єкта стану новими даними, використовуючи [нотацію з квадратними дужками](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` для присвоєння. Нарешті, ми блокуємо об'єкт, щоб запобігти модифікаціям, використовуючи `Object.freeze()`. Зараз у стані зберігається лише властивість `account`, але з таким підходом ви можете додати стільки властивостей, скільки вам потрібно.
+
+Також оновимо ініціалізацію `state`, щоб переконатися, що початковий стан також заморожений:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Після цього оновіть функцію `register`, замінивши присвоєння `state.account = result;` на:
+
+```js
+updateState('account', result);
+```
+
+Зробіть те ж саме з функцією `login`, замінивши `state.account = data;` на:
+
+```js
+updateState('account', data);
+```
+
+Тепер скористаємося можливістю вирішити проблему, коли дані облікового запису не очищуються, коли користувач натискає *Вийти*.
+
+Створіть нову функцію `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+У `updateDashboard()` замініть перенаправлення `return navigate('/login');` на `return logout();`;
+
+Спробуйте зареєструвати новий обліковий запис, вийти і знову увійти, щоб переконатися, що все працює правильно.
+
+> Порада: ви можете переглянути всі зміни стану, додавши `console.log(state)` в кінці `updateState()` і відкривши консоль у засобах розробки вашого браузера.
+
+## Збереження стану
+
+Більшість веб-додатків потребують збереження даних для коректної роботи. Усі критичні дані зазвичай зберігаються в базі даних і доступні через серверний API, як у випадку з даними облікового запису користувача. Але іноді також цікаво зберігати деякі дані в клієнтському додатку, який працює у вашому браузері, для покращення досвіду користувача або підвищення продуктивності завантаження.
+
+Коли ви хочете зберігати дані у вашому браузері, є кілька важливих питань, які варто задати собі:
+
+- *Чи є дані конфіденційними?* Ви повинні уникати зберігання будь-яких конфіденційних даних на клієнті, таких як паролі користувачів.
+- *Як довго вам потрібно зберігати ці дані?* Ви плануєте отримувати доступ до цих даних лише протягом поточного сеансу чи хочете, щоб вони зберігалися назавжди?
+
+Існує кілька способів зберігання інформації всередині веб-додатку, залежно від того, що ви хочете досягти. Наприклад, ви можете використовувати URL-адреси для зберігання пошукового запиту і зробити його доступним для інших користувачів. Ви також можете використовувати [HTTP cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies), якщо дані потрібно передавати на сервер, наприклад, інформацію про [автентифікацію](https://en.wikipedia.org/wiki/Authentication).
+
+Ще один варіант — використовувати один із багатьох API браузера для зберігання даних. Два з них особливо цікаві:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): [Сховище ключ/значення](https://en.wikipedia.org/wiki/Key%E2%80%93value_database), яке дозволяє зберігати дані, специфічні для поточного веб-сайту, між різними сеансами. Дані, збережені в ньому, ніколи не закінчуються.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): працює так само, як `localStorage`, за винятком того, що дані, збережені в ньому, очищуються після завершення сеансу (коли браузер закривається).
+
+Зверніть увагу, що обидва ці API дозволяють зберігати лише [рядки](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Якщо ви хочете зберігати складні об'єкти, вам потрібно буде серіалізувати їх у формат [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) за допомогою [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Якщо ви хочете створити веб-додаток, який не працює з сервером, також можливо створити базу даних на клієнті за допомогою API [`IndexedDB`](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Цей варіант зарезервований для складних випадків використання або якщо вам потрібно зберігати значну кількість даних, оскільки він складніший у використанні.
+
+### Завдання
+
+Ми хочемо, щоб наші користувачі залишалися в системі, поки вони явно не натиснуть кнопку *Вийти*, тому ми будемо використовувати `localStorage` для зберігання даних облікового запису. Спочатку визначимо ключ, який будемо використовувати для зберігання наших даних.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Потім додайте цей рядок у кінці функції `updateState()`:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+Завдяки цьому дані облікового запису користувача будуть збережені і завжди актуальні, оскільки ми централізували всі оновлення стану раніше. Тут ми починаємо отримувати вигоду від усіх наших попередніх рефакторингів 🙂.
+
+Оскільки дані зберігаються, ми також повинні подбати про їх відновлення, коли додаток завантажується. Оскільки ми почнемо мати більше коду для ініціалізації, можливо, буде хорошою ідеєю створити нову функцію `init`, яка також включає наш попередній код у кінці `app.js`:
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // Our previous initialization code
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+Тут ми отримуємо збережені дані, і якщо вони є, ми оновлюємо стан відповідно. Важливо зробити це *перед* оновленням маршруту, оскільки може бути код, який залежить від стану під час оновлення сторінки.
+
+Ми також можемо зробити сторінку *Dashboard* сторінкою за замовчуванням нашого додатку, оскільки тепер ми зберігаємо дані облікового запису. Якщо дані не знайдені, інформаційна панель все одно перенаправляє на сторінку *Login*. У `updateRoute()` замініть резервний варіант `return navigate('/login');` на `return navigate('/dashboard');`.
+
+Тепер увійдіть у додаток і спробуйте оновити сторінку. Ви повинні залишитися на інформаційній панелі. Завдяки цьому оновленню ми вирішили всі наші початкові проблеми...
+
+## Оновлення даних
+
+...Але ми також могли створити нову проблему. Ой!
+
+Перейдіть на інформаційну панель, використовуючи обліковий запис `test`, а потім виконайте цю команду в терміналі, щоб створити нову транзакцію:
+
+```sh
+curl --request POST \
+     --header "Content-Type: application/json" \
+     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
+     http://localhost:5000/api/accounts/test/transactions
+```
+
+Спробуйте оновити сторінку інформаційної панелі у браузері зараз. Що відбувається? Ви бачите нову транзакцію?
+
+Стан зберігається безстроково завдяки `localStorage`, але це також означає, що він ніколи не оновлюється, поки ви не вийдете з додатку і знову не увійдете!
+
+Одна з можливих стратегій вирішення цієї проблеми — перезавантажувати дані облікового запису кожного разу, коли завантажується інформаційна панель, щоб уникнути застарілих даних.
+
+### Завдання
+
+Створіть нову функцію `updateAccountData`:
+
+```js
+async function updateAccountData() {
+  const account = state.account;
+  if (!account) {
+    return logout();
+  }
+
+  const data = await getAccount(account.user);
+  if (data.error) {
+    return logout();
+  }
+
+  updateState('account', data);
+}
+```
+
+Цей метод перевіряє, чи ми зараз увійшли в систему, а потім перезавантажує дані облікового запису з сервера.
+
+Створіть ще одну функцію під назвою `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Ця функція оновлює дані облікового запису, а потім займається оновленням HTML сторінки інформаційної панелі. Це те, що нам потрібно викликати, коли завантажується маршрут інформаційної панелі. Оновіть визначення маршруту:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+Спробуйте оновити інформаційну панель зараз, вона повинна відображати оновлені дані облікового запису.
+
+---
+
+## 🚀 Виклик
+
+Тепер, коли ми перезавантажуємо дані облікового запису кожного разу, коли завантажується інформаційна панель, як ви думаєте, чи нам все ще потрібно зберігати *всі дані облікового запису*?
+
+Спробуйте раз
+[Післялекційна вікторина](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Завдання
+
+[Реалізуйте діалогове вікно "Додати транзакцію"](assignment.md)
+
+Ось приклад результату після виконання завдання:
+
+![Знімок екрана, що показує приклад діалогового вікна "Додати транзакцію"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.uk.png)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/7-bank-project/4-state-management/assignment.md b/translations/uk/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..7976319c
--- /dev/null
+++ b/translations/uk/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-27T22:06:52+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Реалізуйте діалогове вікно "Додати транзакцію"
+
+## Інструкції
+
+У нашому банківському додатку все ще бракує однієї важливої функції: можливості вводити нові транзакції.
+Використовуючи все, що ви вивчили в чотирьох попередніх уроках, реалізуйте діалогове вікно "Додати транзакцію":
+
+- Додайте кнопку "Додати транзакцію" на сторінці панелі управління
+- Створіть нову сторінку з HTML-шаблоном або використовуйте JavaScript для показу/приховування HTML діалогового вікна без переходу зі сторінки панелі управління (можна використовувати властивість [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) або CSS-класи)
+- Переконайтеся, що ви врахували [доступність для клавіатури та екранних читачів](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) для діалогового вікна
+- Реалізуйте HTML-форму для введення даних
+- Створіть JSON-дані з даних форми та надішліть їх до API
+- Оновіть сторінку панелі управління новими даними
+
+Ознайомтеся зі [специфікаціями серверного API](../api/README.md), щоб дізнатися, який API потрібно викликати і який формат JSON очікується.
+
+Ось приклад результату після завершення завдання:
+
+![Скріншот, що показує приклад діалогового вікна "Додати транзакцію"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.uk.png)
+
+## Критерії оцінювання
+
+| Критерій | Відмінно                                                                                         | Задовільно                                                                                                             | Потребує покращення                          |
+| -------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
+|          | Додавання транзакції реалізовано повністю, з дотриманням усіх найкращих практик, розглянутих на уроках. | Додавання транзакції реалізовано, але без дотримання найкращих практик, розглянутих на уроках, або працює лише частково. | Додавання транзакції не працює взагалі.     |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/7-bank-project/README.md b/translations/uk/7-bank-project/README.md
new file mode 100644
index 00000000..a5924661
--- /dev/null
+++ b/translations/uk/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-27T21:58:29+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "uk"
+}
+-->
+# :dollar: Створення Банку
+
+У цьому проєкті ви навчитеся створювати вигаданий банк. Ці уроки включають інструкції щодо створення макету веб-додатку, налаштування маршрутів, створення форм, управління станом і отримання даних з API, з якого можна отримати дані банку.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.uk.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.uk.png) |
+|--------------------------------|--------------------------------|
+
+## Уроки
+
+1. [HTML-шаблони та маршрути у веб-додатку](1-template-route/README.md)
+2. [Створення форми для входу та реєстрації](2-forms/README.md)
+3. [Методи отримання та використання даних](3-data/README.md)
+4. [Концепції управління станом](4-state-management/README.md)
+
+### Авторство
+
+Ці уроки були написані з :hearts: [Йоханом Ласорсою](https://twitter.com/sinedied).
+
+Якщо вам цікаво дізнатися, як створити [серверний API](/7-bank-project/api/README.md), який використовується в цих уроках, ви можете переглянути [цю серію відео](https://aka.ms/NodeBeginner) (особливо відео з 17 по 21).
+
+Також ви можете ознайомитися з [інтерактивним навчальним посібником](https://aka.ms/learn/express-api).
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/7-bank-project/api/README.md b/translations/uk/7-bank-project/api/README.md
new file mode 100644
index 00000000..5a13e35f
--- /dev/null
+++ b/translations/uk/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-27T22:01:38+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "uk"
+}
+-->
+# Bank API
+
+> Bank API створений за допомогою [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+API вже створено для вас і не є частиною цього завдання.
+
+Однак, якщо вам цікаво дізнатися, як створити подібний API, ви можете переглянути цю серію відео: https://aka.ms/NodeBeginner (відео з 17 по 21 охоплюють саме цей API).
+
+Також ви можете ознайомитися з інтерактивним підручником: https://aka.ms/learn/express-api
+
+## Запуск сервера
+
+Переконайтеся, що у вас встановлений [Node.js](https://nodejs.org).
+
+1. Клонуйте цей репозиторій [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Відкрийте термінал і перейдіть до папки `Web-Dev-For-Beginners/7-bank-project/api`.
+3. Запустіть `npm install` і дочекайтеся встановлення пакетів (це може зайняти деякий час залежно від якості вашого інтернет-з'єднання).
+4. Після завершення встановлення запустіть `npm start`, і все готово.
+
+Сервер має почати слухати на порту `5000`.
+*Цей сервер буде працювати разом із головним сервером додатку банку (слухає на порту `3000`), не закривайте його.*
+
+> Примітка: всі записи зберігаються в оперативній пам'яті і не зберігаються постійно, тому після зупинки сервера всі дані будуть втрачені.
+
+## Деталі API
+
+Маршрут                                      | Опис
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Отримати інформацію про сервер
+POST   /api/accounts/                        | Створити обліковий запис, наприклад: `{ user: 'Yohan', description: 'Мій бюджет', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Отримати всі дані для зазначеного облікового запису
+DELETE /api/accounts/:user                   | Видалити зазначений обліковий запис
+POST   /api/accounts/:user/transactions      | Додати транзакцію, наприклад: `{ date: '2020-07-23T18:25:43.511Z', object: 'Купив книгу', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Видалити зазначену транзакцію
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/7-bank-project/solution/README.md b/translations/uk/7-bank-project/solution/README.md
new file mode 100644
index 00000000..27fb7918
--- /dev/null
+++ b/translations/uk/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-27T22:02:07+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "uk"
+}
+-->
+# Банківський додаток
+
+> Приклад рішення для проєкту банківського додатка, створеного за допомогою чистих HTML5, CSS та JavaScript (без використання фреймворків чи бібліотек).
+
+## Запуск додатка
+
+Спочатку переконайтеся, що у вас запущений [API сервер](../api/README.md).
+
+Для запуску додатка можна використовувати будь-який веб-сервер, але оскільки у вас вже має бути встановлений [Node.js](https://nodejs.org) для запуску API, ви можете:
+
+1. Клонувати цей репозиторій за допомогою Git.
+2. Відкрити термінал, перейти до цієї директорії та виконати команду `npx lite-server .`. Це запустить веб-сервер для розробки на порту `3000`.
+3. Відкрити `http://localhost:3000` у браузері, щоб запустити додаток.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний переклад людиною. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/8-code-editor/1-using-a-code-editor/README.md b/translations/uk/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..154b6fb8
--- /dev/null
+++ b/translations/uk/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,158 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-27T22:40:45+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "uk"
+}
+-->
+# Використання редактора коду
+
+Цей урок охоплює основи використання [VSCode.dev](https://vscode.dev), веб-редактора коду, щоб ви могли вносити зміни до свого коду та брати участь у проєкті без необхідності встановлювати щось на свій комп'ютер.
+
+## Навчальні цілі
+
+У цьому уроці ви навчитеся:
+
+- Використовувати редактор коду в проєкті
+- Відстежувати зміни за допомогою системи контролю версій
+- Налаштовувати редактор для розробки
+
+### Передумови
+
+Перед початком вам потрібно створити обліковий запис на [GitHub](https://github.com). Перейдіть на [GitHub](https://github.com/) і створіть обліковий запис, якщо у вас його ще немає.
+
+### Вступ
+
+Редактор коду — це важливий інструмент для написання програм і співпраці над існуючими проєктами. Як тільки ви зрозумієте основи редактора та навчитеся використовувати його функції, ви зможете застосовувати ці знання під час написання коду.
+
+## Початок роботи з VSCode.dev
+
+[VSCode.dev](https://vscode.dev) — це редактор коду у веб-браузері. Вам не потрібно нічого встановлювати, щоб ним користуватися, так само як відкривати будь-який інший вебсайт. Щоб почати роботу з редактором, відкрийте наступне посилання: [https://vscode.dev](https://vscode.dev). Якщо ви не ввійшли до [GitHub](https://github.com/), дотримуйтесь інструкцій для входу або створення нового облікового запису, а потім увійдіть.
+
+Після завантаження редактор має виглядати приблизно так:
+
+![Default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.uk.png)
+
+Є три основні секції, починаючи з крайньої лівої сторони і рухаючись вправо:
+
+1. _Панель активності_, яка містить кілька іконок, таких як лупа 🔎, шестерня ⚙️ та інші.
+2. Розширена панель активності, яка за замовчуванням відкриває _Провідник_, називається _бічною панеллю_.
+3. І, нарешті, область коду праворуч.
+
+Натисніть на кожну з іконок, щоб відобразити різні меню. Після цього натисніть на _Провідник_, щоб повернутися до початкового вигляду.
+
+Коли ви почнете створювати код або змінювати існуючий, це буде відбуватися у найбільшій області праворуч. Ви також будете використовувати цю область для перегляду існуючого коду, що зробите далі.
+
+## Відкриття репозиторію GitHub
+
+Перше, що вам потрібно зробити, — це відкрити репозиторій GitHub. Існує кілька способів відкриття репозиторію. У цьому розділі ви побачите два різні способи, як можна відкрити репозиторій, щоб почати працювати над змінами.
+
+### 1. За допомогою редактора
+
+Використовуйте сам редактор, щоб відкрити віддалений репозиторій. Якщо ви перейдете на [VSCode.dev](https://vscode.dev), ви побачите кнопку _"Open Remote Repository"_:
+
+![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.uk.png)
+
+Ви також можете скористатися командною палітрою. Командна палітра — це поле введення, де ви можете ввести будь-яке слово, яке є частиною команди або дії, щоб знайти потрібну команду для виконання. Використовуйте меню у верхньому лівому куті, потім виберіть _View_, а потім _Command Palette_, або скористайтеся наступним сполученням клавіш: Ctrl-Shift-P (на MacOS — Command-Shift-P).
+
+![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.uk.png)
+
+Після відкриття меню введіть _open remote repository_, а потім виберіть перший варіант. З'являться кілька репозиторіїв, до яких ви належите або які відкривали раніше. Ви також можете використати повну URL-адресу GitHub, щоб вибрати один із них. Використайте наступну URL-адресу та вставте її у поле:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Якщо все успішно, ви побачите всі файли цього репозиторію, завантажені у текстовий редактор.
+
+### 2. Використовуючи URL-адресу
+
+Ви також можете використовувати URL-адресу для завантаження репозиторію. Наприклад, повна URL-адреса поточного репозиторію — [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), але ви можете замінити домен GitHub на `VSCode.dev/github` і завантажити репозиторій безпосередньо. Отримана URL-адреса буде [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Редагування файлів
+
+Після того, як ви відкрили репозиторій у браузері/vscode.dev, наступним кроком буде внесення оновлень або змін до проєкту.
+
+### 1. Створення нового файлу
+
+Ви можете створити файл всередині існуючої папки або в кореневій директорії/папці. Щоб створити новий файл, відкрийте місце/директорію, куди ви хочете зберегти файл, і виберіть іконку _'New file ...'_ на панелі активності _(ліворуч)_, дайте йому назву і натисніть Enter.
+
+![Create a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.uk.png)
+
+### 2. Редагування та збереження файлу в репозиторії
+
+Використання vscode.dev корисне, коли вам потрібно швидко оновити свій проєкт без необхідності завантажувати будь-яке програмне забезпечення локально.  
+Щоб оновити код, натисніть іконку 'Explorer', також розташовану на панелі активності, щоб переглянути файли та папки в репозиторії.  
+Виберіть файл, щоб відкрити його в області коду, внесіть зміни та збережіть.
+
+![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.uk.png)
+
+Після завершення оновлення проєкту виберіть іконку _`source control`_, яка містить усі нові зміни, внесені до вашого репозиторію.
+
+Щоб переглянути зміни, внесені до вашого проєкту, виберіть файл(и) у папці `Changes` на розширеній панелі активності. Це відкриє 'Робоче дерево', де ви зможете візуально побачити зміни, внесені до файлу. Червоний колір показує видалення з проєкту, а зелений — додавання.
+
+![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.uk.png)
+
+Якщо вас задовольняють внесені зміни, наведіть курсор на папку `Changes` і натисніть кнопку `+`, щоб підготувати зміни до коміту. Підготовка означає підготовку ваших змін для їхнього коміту до GitHub.
+
+Якщо ж вас не влаштовують деякі зміни і ви хочете їх скасувати, наведіть курсор на папку `Changes` і виберіть іконку `undo`.
+
+Потім введіть `commit message` _(Опис змін, які ви внесли до проєкту)_, натисніть іконку `check`, щоб закомітити та відправити зміни.
+
+Після завершення роботи над проєктом виберіть іконку `hamburger menu` у верхньому лівому куті, щоб повернутися до репозиторію на github.com.
+
+![Stage & commit changes](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Використання розширень
+
+Встановлення розширень у VSCode дозволяє додавати нові функції та налаштовувати середовище розробки у вашому редакторі для покращення робочого процесу. Ці розширення також допомагають додати підтримку для кількох мов програмування і часто є або загальними розширеннями, або мовно-орієнтованими.
+
+Щоб переглянути список усіх доступних розширень, натисніть іконку _`Extensions`_ на панелі активності та почніть вводити назву розширення у текстовому полі з написом _'Search Extensions in Marketplace'_.  
+Ви побачите список розширень, кожне з яких містить **назву розширення, ім'я видавця, короткий опис, кількість завантажень** та **рейтинг у вигляді зірок**.
+
+![Extension details](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.uk.png)
+
+Ви також можете переглянути всі раніше встановлені розширення, розширення, популярні серед розробників, у папці _`Popular`_, а також рекомендовані розширення для вас — або користувачами у тому ж робочому просторі, або на основі ваших нещодавно відкритих файлів — у папці _`Recommended`_.
+
+![View extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.uk.png)
+
+### 1. Встановлення розширень
+
+Щоб встановити розширення, введіть його назву у поле пошуку та натисніть на нього, щоб переглянути додаткову інформацію про розширення в області коду, як тільки воно з'явиться на розширеній панелі активності.
+
+Ви можете натиснути _синю кнопку встановлення_ на розширеній панелі активності, щоб встановити розширення, або скористатися кнопкою встановлення, яка з'являється в області коду після вибору розширення для завантаження додаткової інформації.
+
+![Install extensions](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Налаштування розширень
+
+Після встановлення розширення вам може знадобитися змінити його поведінку та налаштувати його відповідно до ваших уподобань. Для цього виберіть іконку Extensions, і цього разу ваше розширення з'явиться у папці _Installed_, натисніть на _**Gear icon**_ і перейдіть до _Extensions Setting_.
+
+![Modify extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.uk.png)
+
+### 3. Управління розширеннями
+
+Після встановлення та використання розширення vscode.dev пропонує варіанти управління розширенням залежно від різних потреб. Наприклад, ви можете:
+
+- **Вимкнути:** _(Тимчасово вимкнути розширення, якщо воно вам більше не потрібне, але ви не хочете повністю його видаляти)_
+
+    Виберіть встановлене розширення на розширеній панелі активності > натисніть на Gear icon > виберіть 'Disable' або 'Disable (Workspace)' **АБО** відкрийте розширення в області коду та натисніть синю кнопку Disable.
+
+- **Видалити:** Виберіть встановлене розширення на розширеній панелі активності > натисніть на Gear icon > виберіть 'Uninstall' **АБО** відкрийте розширення в області коду та натисніть синю кнопку Uninstall.
+
+---
+
+## Завдання
+
+[Створіть вебсайт-резюме за допомогою vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Огляд та самостійне навчання
+
+Дізнайтеся більше про [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) та його інші функції.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/8-code-editor/1-using-a-code-editor/assignment.md b/translations/uk/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..a3f417c9
--- /dev/null
+++ b/translations/uk/8-code-editor/1-using-a-code-editor/assignment.md
@@ -0,0 +1,247 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2fcb983b8dbadadb1bc2e97f8c12dac5",
+  "translation_date": "2025-08-27T22:42:09+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "uk"
+}
+-->
+# Створення резюме-сайту за допомогою vscode.dev
+
+_Як круто було б, якщо рекрутер попросить ваше резюме, а ви надішлете їм посилання?_ 😎
+
+## Цілі
+
+Після виконання цього завдання ви навчитеся:
+
+- Створювати вебсайт для демонстрації вашого резюме
+
+### Попередні вимоги
+
+1. Обліковий запис GitHub. Перейдіть на [GitHub](https://github.com/) і створіть обліковий запис, якщо у вас його ще немає.
+
+## Кроки
+
+**Крок 1:** Створіть новий репозиторій на GitHub і назвіть його `my-resume`.
+
+**Крок 2:** Створіть файл `index.html` у вашому репозиторії. Ми додамо хоча б один файл безпосередньо на github.com, оскільки ви не можете відкрити порожній репозиторій у vscode.dev.
+
+Натисніть посилання `creating a new file`, введіть назву `index.html` і виберіть кнопку `Commit new file`.
+
+![Створення нового файлу на github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.uk.png)
+
+**Крок 3:** Відкрийте [VSCode.dev](https://vscode.dev) і виберіть кнопку `Open Remote Repository`.
+
+Скопіюйте URL-адресу репозиторію, який ви щойно створили для вашого сайту резюме, і вставте її в поле вводу:
+
+_Замініть `your-username` на ваше ім'я користувача GitHub._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Якщо все успішно, ви побачите ваш проект і файл index.html, відкритий у текстовому редакторі в браузері.
+
+![Створення нового файлу](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.uk.png)
+
+**Крок 4:** Відкрийте файл `index.html`, вставте код нижче у ваш кодовий простір і збережіть.
+
+<details>
+    <summary><b>HTML-код, який відповідає за контент вашого сайту резюме.</b></summary>
+    
+        <html>
+
+            <head>
+                <link href="style.css" rel="stylesheet">
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+                <title>Ваше ім'я тут!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- заголовок резюме з вашим ім'ям і посадою -->
+                    <h1>Ваше ім'я тут!</h1>
+                    <hr>
+                    Ваша роль!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>КОНТАКТИ</h2>
+                            <!-- контактна інформація, включаючи соціальні мережі -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Введіть вашу електронну пошту тут</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Введіть ваше ім'я користувача тут!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Введіть ваше ім'я користувача тут!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>НАВИЧКИ</h2>
+                            <!-- ваші навички -->
+                            <ul>
+                                <li>Навичка 1!</li>
+                                <li>Навичка 2!</li>
+                                <li>Навичка 3!</li>
+                                <li>Навичка 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>ОСВІТА</h2>
+                            <!-- ваша освіта -->
+                            <h3>Введіть ваш курс тут!</h3>
+                            <p>
+                                Введіть ваш навчальний заклад тут!
+                            </p>
+                            <p>
+                                Початок - Кінець
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>ПРО МЕНЕ</h2>
+                            <!-- про вас -->
+                            <p>Напишіть коротко про себе!</p>
+                        </section>
+                        <section>
+                            <h2>ДОСВІД РОБОТИ</h2>
+                            <!-- ваш досвід роботи -->
+                            <h3>Посада</h3>
+                            <p>
+                                Назва організації тут | Місяць початку – Місяць закінчення
+                            </p>
+                            <ul>
+                                    <li>Завдання 1 - Напишіть, що ви робили!</li>
+                                    <li>Завдання 2 - Напишіть, що ви робили!</li>
+                                    <li>Напишіть результати/вплив вашого внеску</li>
+                                    
+                            </ul>
+                            <h3>Посада 2</h3>
+                            <p>
+                                Назва організації тут | Місяць початку – Місяць закінчення
+                            </p>
+                            <ul>
+                                    <li>Завдання 1 - Напишіть, що ви робили!</li>
+                                    <li>Завдання 2 - Напишіть, що ви робили!</li>
+                                    <li>Напишіть результати/вплив вашого внеску</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Додайте деталі вашого резюме, замінивши _текст-заповнювач_ у HTML-коді.
+
+**Крок 5:** Наведіть курсор на папку My-Resume, натисніть на іконку `New File ...` і створіть 2 нові файли у вашому проекті: `style.css` і `codeswing.json`.
+
+**Крок 6:** Відкрийте файл `style.css`, вставте код нижче і збережіть.
+
+<details>
+        <summary><b>CSS-код для форматування макету сайту.</b></summary>
+            
+            body {
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                font-size: 16px;
+                max-width: 960px;
+                margin: auto;
+            }
+            h1 {
+                font-size: 3em;
+                letter-spacing: .6em;
+                padding-top: 1em;
+                padding-bottom: 1em;
+            }
+
+            h2 {
+                font-size: 1.5em;
+                padding-bottom: 1em;
+            }
+
+            h3 {
+                font-size: 1em;
+                padding-bottom: 1em;
+            }
+            main { 
+                display: grid;
+                grid-template-columns: 40% 60%;
+                margin-top: 3em;
+            }
+            header {
+                text-align: center;
+                margin: auto 2em;
+            }
+
+            section {
+                margin: auto 1em 4em 2em;
+            }
+
+            i {
+                margin-right: .5em;
+            }
+
+            p {
+                margin: .2em auto
+            }
+
+            hr {
+                border: none;
+                background-color: lightgray;
+                height: 1px;
+            }
+
+            h1, h2, h3 {
+                font-weight: 100;
+                margin-bottom: 0;
+            }
+            #mainLeft {
+                border-right: 1px solid lightgray;
+            }
+            
+</details>
+
+**Крок 6:** Відкрийте файл `codeswing.json`, вставте код нижче і збережіть.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Крок 7:** Встановіть розширення `Codeswing`, щоб візуалізувати сайт резюме у кодовому просторі.
+
+Натисніть на іконку _`Extensions`_ на панелі активності та введіть Codeswing. Натисніть _синю кнопку встановлення_ на розширеній панелі активності або використайте кнопку встановлення, яка з'явиться у кодовому просторі після вибору розширення для завантаження додаткової інформації. Після встановлення розширення спостерігайте за змінами у вашому проекті 😃.
+
+![Встановлення розширень](../../../../8-code-editor/images/install-extension.gif)
+
+Ось що ви побачите на екрані після встановлення розширення.
+
+![Розширення Codeswing в дії](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.uk.png)
+
+Якщо ви задоволені внесеними змінами, наведіть курсор на папку `Changes` і натисніть кнопку `+`, щоб зафіксувати зміни.
+
+Введіть повідомлення про коміт _(Опис змін, які ви внесли до проекту)_ і зафіксуйте зміни, натиснувши на `check`. Після завершення роботи над проектом виберіть іконку меню гамбургер у верхньому лівому куті, щоб повернутися до репозиторію на GitHub.
+
+Вітаємо 🎉 Ви щойно створили сайт резюме за допомогою vscode.dev у кілька кроків.
+
+## 🚀 Виклик
+
+Відкрийте віддалений репозиторій, до якого у вас є права на внесення змін, і оновіть кілька файлів. Далі спробуйте створити нову гілку зі своїми змінами та зробити Pull Request.
+
+## Огляд і самостійне навчання
+
+Дізнайтеся більше про [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) та його інші функції.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний переклад людиною. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/CODE_OF_CONDUCT.md b/translations/uk/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..b7e37d5d
--- /dev/null
+++ b/translations/uk/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-27T21:58:15+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "uk"
+}
+-->
+# Кодекс поведінки з відкритим кодом Microsoft
+
+Цей проєкт прийняв [Кодекс поведінки з відкритим кодом Microsoft](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Ресурси:
+
+- [Кодекс поведінки з відкритим кодом Microsoft](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Поширені запитання щодо Кодексу поведінки Microsoft](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Звертайтеся за адресою [opencode@microsoft.com](mailto:opencode@microsoft.com) з питаннями або занепокоєннями
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/CONTRIBUTING.md b/translations/uk/CONTRIBUTING.md
new file mode 100644
index 00000000..e85827b5
--- /dev/null
+++ b/translations/uk/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-27T21:56:50+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "uk"
+}
+-->
+# Участь у проекті
+
+Цей проєкт вітає внески та пропозиції. Більшість внесків вимагають від вас погодитися з Угодою про ліцензування внесків (Contributor License Agreement, CLA), яка підтверджує, що ви маєте право і дійсно надаєте нам права на використання вашого внеску. Для отримання додаткової інформації відвідайте [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Коли ви надсилаєте pull request, бот CLA автоматично визначить, чи потрібно вам надати CLA, і відповідно позначить PR (наприклад, міткою, коментарем). Просто дотримуйтесь інструкцій, наданих ботом. Вам потрібно буде зробити це лише один раз для всіх репозиторіїв, які використовують нашу CLA. Також, будь ласка, спробуйте пояснити, чому ви внесли цю зміну, щоб ми краще зрозуміли ваш запит.
+
+Цей проєкт прийняв [Кодекс поведінки з відкритим кодом Microsoft](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).  
+Для отримання додаткової інформації перегляньте [Часті запитання щодо Кодексу поведінки](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)  
+або зв'яжіться з нами за адресою [opencode@microsoft.com](mailto:opencode@microsoft.com) з будь-якими додатковими питаннями чи коментарями.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/README.md b/translations/uk/README.md
new file mode 100644
index 00000000..53d9c0a6
--- /dev/null
+++ b/translations/uk/README.md
@@ -0,0 +1,206 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b672130244189715ac084c3259f6ab58",
+  "translation_date": "2025-08-27T21:54:04+00:00",
+  "source_file": "README.md",
+  "language_code": "uk"
+}
+-->
+[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
+[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
+[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
+[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+
+[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
+[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
+
+[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)  
+
+[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)  
+
+# Веб-розробка для початківців — навчальна програма  
+
+Вивчайте основи веб-розробки за допомогою нашого 12-тижневого курсу від Microsoft Cloud Advocates. Кожен із 24 уроків охоплює JavaScript, CSS і HTML через практичні проєкти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях і практичних завданнях. Покращуйте свої навички та оптимізуйте засвоєння знань завдяки ефективній проєктно-орієнтованій методиці. Почніть свою подорож у програмуванні вже сьогодні!  
+
+#### 🧑‍🎓 _Ви студент?_  
+
+Відвідайте [**сторінку Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете ресурси для початківців, студентські пакети та навіть способи отримати безкоштовний сертифікат. Це сторінка, яку варто додати в закладки та час від часу перевіряти, оскільки ми щомісяця оновлюємо контент.  
+
+### 📣 Оголошення — _Нова навчальна програма_ з генеративного AI для JavaScript  
+
+Не пропустіть нашу нову навчальну програму з генеративного AI!  
+
+Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб розпочати!  
+
+<div>  
+  <img src="./images/background.png" width="600px" />  
+</div>  
+
+- Уроки, що охоплюють все — від основ до RAG.  
+- Спілкуйтеся з історичними персонажами за допомогою GenAI та нашого додатку-компаньйона.  
+- Захоплюючий сюжет, ви будете подорожувати у часі!  
+
+<div>  
+  <img src="./images/character.png" width="600px" />  
+</div>  
+
+Кожен урок включає завдання для виконання, перевірку знань і виклик, щоб допомогти вам освоїти такі теми, як:  
+- Створення запитів і інженерія запитів  
+- Генерація тексту та зображень  
+- Додатки для пошуку  
+
+Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб розпочати!  
+
+## 🌱 Початок роботи  
+
+> **Вчителі**, ми [додали кілька пропозицій](for-teachers.md) щодо використання цієї навчальної програми. Ми будемо раді вашим відгукам [у нашому форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Учні](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для кожного уроку починайте з вікторини перед лекцією, читайте матеріал лекції, виконуйте різні завдання та перевіряйте свої знання за допомогою вікторини після лекції.  
+
+Щоб покращити ваш досвід навчання, спілкуйтеся з однолітками та працюйте над проєктами разом! Обговорення заохочуються у нашому [форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), де наша команда модераторів буде доступна для відповіді на ваші запитання.  
+
+Для подальшого навчання ми настійно рекомендуємо дослідити [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для додаткових навчальних матеріалів.  
+
+### 📋 Налаштування середовища  
+
+Ця навчальна програма має готове середовище розробки! На початку ви можете вибрати запуск навчальної програми у [Codespace](https://github.com/features/codespaces/) (_середовище на основі браузера, без необхідності встановлення_) або локально на вашому комп'ютері за допомогою текстового редактора, такого як [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Створіть свій репозиторій  
+Щоб легко зберігати свою роботу, рекомендується створити власну копію цього репозиторію. Ви можете зробити це, натиснувши кнопку **Use this template** у верхній частині сторінки. Це створить новий репозиторій у вашому обліковому записі GitHub із копією навчальної програми.  
+
+Виконайте ці кроки:  
+1. **Форк репозиторію**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки.  
+2. **Клонування репозиторію**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Запуск навчальної програми у Codespace  
+
+У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code** і виберіть **Open with Codespaces**. Це створить новий Codespace для роботи.  
+
+<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>  
+
+#### Запуск навчальної програми локально на вашому комп'ютері  
+
+Щоб запустити цю навчальну програму локально на вашому комп'ютері, вам знадобиться текстовий редактор, браузер і інструмент командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), проведе вас через різні варіанти кожного з цих інструментів, щоб ви могли вибрати те, що найкраще підходить для вас.  
+
+Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як ваш редактор, який також має вбудований [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Ви можете завантажити Visual Studio Code [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Клонуйте ваш репозиторій на комп'ютер. Ви можете зробити це, натиснувши кнопку **Code** і скопіювавши URL:  
+
+    <img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>  
+
+    Потім відкрийте [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) і виконайте наступну команду, замінивши `<your-repository-url>` на URL, який ви щойно скопіювали:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder** і вибравши папку, яку ви щойно клонували.  
+
+>  Рекомендовані розширення для Visual Studio Code:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) — для попереднього перегляду HTML-сторінок у Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) — для швидшого написання коду  
+
+## 📂 Кожен урок включає:  
+
+- необов'язковий скетчноут  
+- необов'язкове додаткове відео  
+- вікторину для розігріву перед уроком  
+- письмовий матеріал уроку  
+- для уроків, заснованих на проєктах, покрокові інструкції щодо створення проєкту  
+- перевірку знань  
+- виклик  
+- додаткове читання  
+- завдання  
+- вікторину після уроку  
+
+> **Примітка щодо вікторин**: Усі вікторини знаходяться в папці Quiz-app, всього 48 вікторин по три питання кожна. Вони пов'язані з уроками, додаток для вікторин можна запускати локально або розгортати в Azure; дотримуйтесь інструкцій у папці `quiz-app`. Вікторини поступово локалізуються.  
+
+## 🗃️ Уроки  
+
+|     |                       Назва проєкту                       |                            Вивчені концепти                             | Навчальні цілі                                                                                                                 |                                                         Посилання на урок                                                          |         Автор          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Початок роботи                      |           Вступ до програмування та інструментів           | Вивчіть основи більшості мов програмування та програмне забезпечення, яке допомагає професійним розробникам виконувати свою роботу | [Вступ до мов програмування та інструментів](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Початок роботи                      |             Основи GitHub, включаючи роботу в команді             | Як використовувати GitHub у вашому проєкті, як співпрацювати з іншими над кодовою базою                                                    |                            [Вступ до GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Початок роботи                      |                             Доступність                              | Вивчіть основи веб-доступності                                                                                               |                       [Основи доступності](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        Основи JS                         |                         Типи даних у JavaScript                          | Основи типів даних у JavaScript                                                                                                 |                                       [Типи даних](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        Основи JS                         |                         Функції та методи                          | Вивчіть функції та методи для управління логікою додатку                                                             |                              [Функції та методи](/2-js-basics/2-functions-methods/README.md)                               | Jasmine і Christopher |  
+| 06  |                        Основи JS                         |                        Прийняття рішень у JS                        | Вивчіть, як створювати умови у вашому коді за допомогою методів прийняття рішень                                                           |                                 [Прийняття рішень](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        Основи JS                         |                            Масиви та цикли                            | Працюйте з даними за допомогою масивів і циклів у JavaScript                                                                                 |                                   [Масиви та цикли](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Тераріум](/3-terrarium/solution/README.md)       |                            HTML на практиці                            | Створіть HTML для онлайн-тераріуму, зосереджуючись на створенні макета                                                         |                                 [Вступ до HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Тераріум](/3-terrarium/solution/README.md)       |                            CSS на практиці                             | Створіть CSS для стилізації онлайн-тераріуму, зосереджуючись на основах CSS, включаючи адаптивність                     |                                  [Вступ до CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Тераріум](/3-terrarium/solution/README.md)            |                 Замикання у JavaScript, маніпуляція DOM                  | Створіть JavaScript, щоб тераріум працював як інтерфейс перетягування, зосереджуючись на замиканнях і маніпуляції DOM             |                  [Замикання у JavaScript, маніпуляція DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
+| 11  |          [Гра на швидкість друку](/4-typing-game/solution/README.md)          |                          Створення гри на швидкість друку                           | Вивчіть, як використовувати події клавіатури для управління логікою вашого додатку на JavaScript                                                          |                                [Програмування, кероване подіями](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
+| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Робота з браузерами                          | Дізнайтеся, як працюють браузери, їхню історію та як створити перші елементи розширення для браузера                               |                               [Про браузери](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Створення форми, виклик API та збереження змінних у локальному сховищі | Створіть елементи JavaScript для вашого розширення браузера, щоб викликати API, використовуючи змінні, збережені у локальному сховищі |                [API, форми та локальне сховище](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Фонові процеси в браузері, продуктивність вебу               | Використовуйте фонові процеси браузера для управління іконкою розширення; дізнайтеся про продуктивність вебу та оптимізації         |             [Фонові завдання та продуктивність](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Розширена розробка ігор з JavaScript                      | Дізнайтеся про наслідування за допомогою класів і композиції, а також про патерн Pub/Sub, готуючись до створення гри                |                      [Вступ до розширеної розробки ігор](/6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Малювання на canvas                         | Дізнайтеся про 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          |
+
+
+## 🏫 Педагогіка
+
+Наша навчальна програма розроблена з урахуванням двох ключових педагогічних принципів:
+* навчання на основі проєктів
+* часті тести
+
+Програма навчає основам JavaScript, HTML і CSS, а також найновішим інструментам і технікам, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру для набору тексту, віртуаріум, екологічне розширення для браузера, гру в стилі "космічний нападник" та банківський додаток для бізнесу. До кінця серії студенти отримають міцне розуміння веб-розробки.
+
+> 🎓 Ви можете пройти перші кілька уроків цієї програми як [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
+
+Забезпечуючи відповідність контенту проєктам, процес стає більш захоплюючим для студентів, а засвоєння концепцій покращується. Ми також написали кілька вступних уроків з основ JavaScript для ознайомлення з концепціями, у парі з відео з колекції "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", деякі автори якої зробили внесок у цю програму.
+
+Крім того, тест з низькими ставками перед заняттям налаштовує студента на вивчення теми, а другий тест після заняття забезпечує подальше засвоєння. Ця програма була розроблена як гнучка та цікава і може бути пройдена повністю або частково. Проєкти починаються з простих і стають дедалі складнішими до кінця 12-тижневого циклу.
+
+Хоча ми свідомо уникали введення фреймворків JavaScript, щоб зосередитися на базових навичках, необхідних веб-розробнику перед освоєнням фреймворка, хорошим наступним кроком після завершення цієї програми буде вивчення Node.js через іншу колекцію відео: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Ознайомтеся з нашими [Правилами поведінки](CODE_OF_CONDUCT.md) та [Рекомендаціями щодо внесків](CONTRIBUTING.md). Ми вітаємо ваші конструктивні відгуки!
+
+
+## 🧭 Офлайн-доступ
+
+Ви можете запустити цю документацію офлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на ваш локальний комп'ютер, а потім у кореневій папці цього репозиторію введіть `docsify serve`. Веб-сайт буде доступний на порту 3000 вашого localhost: `localhost:3000`.
+
+## 📘 PDF
+
+PDF усіх уроків можна знайти [тут](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Інші курси
+
+Наша команда створює інші курси! Ознайомтеся з:
+
+- [Generative AI for Beginners](https://aka.ms/genai-beginners)
+- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
+- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [AI for Beginners](https://aka.ms/ai-beginners)
+- [Data Science for Beginners](https://aka.ms/datascience-beginners)
+- [ML for Beginners](https://aka.ms/ml-beginners)
+- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
+- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
+- [IoT for Beginners](https://aka.ms/iot-beginners)
+- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
+- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
+
+## Ліцензія
+
+Цей репозиторій ліцензований за ліцензією MIT. Дивіться файл [LICENSE](../../LICENSE) для отримання додаткової інформації.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/SECURITY.md b/translations/uk/SECURITY.md
new file mode 100644
index 00000000..a4ab5eb1
--- /dev/null
+++ b/translations/uk/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-27T21:57:08+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "uk"
+}
+-->
+## Безпека
+
+Microsoft серйозно ставиться до безпеки наших програмних продуктів і послуг, включаючи всі репозиторії вихідного коду, які керуються через наші організації на GitHub, такі як [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin) та [наші організації на GitHub](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Якщо ви вважаєте, що знайшли вразливість у безпеці в будь-якому репозиторії, що належить Microsoft, яка відповідає [визначенню вразливості безпеки Microsoft](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), будь ласка, повідомте нам про це, як описано нижче.
+
+## Повідомлення про проблеми безпеки
+
+**Будь ласка, не повідомляйте про вразливості безпеки через публічні проблеми на GitHub.**
+
+Натомість повідомляйте про них до Центру реагування на безпеку Microsoft (MSRC) за адресою [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Якщо ви віддаєте перевагу надсиланню без входу в систему, надішліть електронний лист на адресу [secure@microsoft.com](mailto:secure@microsoft.com). Якщо можливо, зашифруйте ваше повідомлення за допомогою нашого PGP-ключа; завантажте його зі сторінки [Microsoft Security Response Center PGP Key](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Ви повинні отримати відповідь протягом 24 годин. Якщо з якоїсь причини ви не отримали відповіді, будь ласка, надішліть повторний лист, щоб переконатися, що ми отримали ваше початкове повідомлення. Додаткову інформацію можна знайти на [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Будь ласка, включіть запитувану інформацію, зазначену нижче (наскільки це можливо), щоб допомогти нам краще зрозуміти природу та масштаб можливої проблеми:
+
+  * Тип проблеми (наприклад, переповнення буфера, SQL-ін'єкція, міжсайтовий скриптинг тощо)
+  * Повні шляхи до файлів вихідного коду, пов'язаних із проявом проблеми
+  * Місце розташування ураженого вихідного коду (тег/гілка/коміт або пряме посилання)
+  * Будь-яка спеціальна конфігурація, необхідна для відтворення проблеми
+  * Покрокові інструкції для відтворення проблеми
+  * Код доказу концепції або експлойт (якщо можливо)
+  * Вплив проблеми, включаючи те, як зловмисник може використати цю проблему
+
+Ця інформація допоможе нам швидше обробити ваш звіт.
+
+Якщо ви повідомляєте про проблему в рамках програми винагород за знайдені помилки, більш повні звіти можуть сприяти отриманню вищої винагороди. Будь ласка, відвідайте сторінку [Програма винагород Microsoft за знайдені помилки](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) для отримання додаткової інформації про наші активні програми.
+
+## Бажані мови
+
+Ми віддаємо перевагу, щоб усі повідомлення були англійською мовою.
+
+## Політика
+
+Microsoft дотримується принципу [Координованого розкриття вразливостей](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/SUPPORT.md b/translations/uk/SUPPORT.md
new file mode 100644
index 00000000..865038df
--- /dev/null
+++ b/translations/uk/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-27T21:56:24+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "uk"
+}
+-->
+# Підтримка
+
+## Як повідомити про проблеми та отримати допомогу  
+
+Цей проєкт використовує GitHub Issues для відстеження помилок і запитів на нові функції. Перед тим як створювати нову проблему, будь ласка, перевірте наявні, щоб уникнути дублювання. Для нових проблем створіть новий Issue із описом вашої помилки або запиту на функцію.
+
+Для отримання допомоги та відповідей на запитання щодо використання цього проєкту, зверніться до [наших рекомендацій для учасників](CONTRIBUTING.md).
+
+## Політика підтримки Microsoft  
+
+Підтримка цього проєкту обмежується ресурсами, зазначеними вище.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/_404.md b/translations/uk/_404.md
new file mode 100644
index 00000000..78cabeb3
--- /dev/null
+++ b/translations/uk/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-27T21:56:39+00:00",
+  "source_file": "_404.md",
+  "language_code": "uk"
+}
+-->
+# Робота триває
+
+Ми працюємо над цією сторінкою. Будь ласка, поверніться пізніше.
+
+Відкрийте [запит](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose), якщо у вас є запитання.
+
+**[Повернутися на головну](../../../../../../..)**
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/docs/_navbar.md b/translations/uk/docs/_navbar.md
new file mode 100644
index 00000000..b4dd5d34
--- /dev/null
+++ b/translations/uk/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-27T22:33:50+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "uk"
+}
+-->
+- Переклади
+  - [English (United States)](../../../docs/README)
+  - [বাংলা](../../../docs/README.bn)
+  - [中文(中国)](../../../docs/README.zh-cn)
+  - [中文(台湾)](../../../docs/README.zh-tw)
+  - [Español](../../../docs/README.es)
+  - [Français](../../../docs/README.fr)
+  - [Ελληνικά](../../../docs/README.el)
+  - [हिन्दी](../../../docs/README.hi)
+  - [Bahasa Melayu](../../../docs/README.ms)
+  - [മലയാളം](../../../docs/README.ml)
+  - [தமிழ்](../../../docs/README.ta)
+  - [తెలుగు](../../../docs/README.te)
+  - [Bahasa Indonesia](../../../docs/README.id)
+  - [Italiano](../../../docs/README.it)
+  - [日本語](../../../docs/README.ja)
+  - [Nederlands](../../../docs/README.nl)
+  - [नेपाली](../../../docs/README.np)
+  - [Português](../../../docs/README.pt)
+  - [Русский](../../../docs/README.ru)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/docs/_sidebar.md b/translations/uk/docs/_sidebar.md
new file mode 100644
index 00000000..0f6c8191
--- /dev/null
+++ b/translations/uk/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-27T22:33:29+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "uk"
+}
+-->
+- Вступ
+  - [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md)
+  - [2](../1-getting-started-lessons/2-github-basics/README.md)
+  - [3](../1-getting-started-lessons/3-accessibility/README.md)
+  
+- Основи JS
+  - [4](../2-js-basics/1-data-types/README.md)
+  - [5](../2-js-basics/2-functions-methods/README.md)
+  - [6](../2-js-basics/3-making-decisions/README.md)
+  - [7](../2-js-basics/4-arrays-loops/README.md)
+
+- HTML, CSS, JS
+  - [8](../3-terrarium/1-intro-to-html/README.md)
+  - [9](../3-terrarium/2-intro-to-css/README.md)
+  - [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md)
+
+- Гра на швидкість набору тексту
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Розширення для браузера
+  - [12](../5-browser-extension/1-about-browsers/README.md)
+  - [13](../5-browser-extension/2-forms-browsers-local-storage/README.md)
+  - [14](../5-browser-extension/3-background-tasks-and-performance/README.md)
+
+- Космічна гра
+  - [15](../6-space-game/1-introduction/README.md)
+  - [16](../6-space-game/2-drawing-to-canvas/README.md)
+  - [17](../6-space-game/3-moving-elements-around/README.md)
+  - [18](../6-space-game/4-collision-detection/README.md)
+  - [19](../6-space-game/5-keeping-score/README.md)
+  - [20](../6-space-game/6-end-condition/README.md)
+
+- Банківський проєкт
+  - [21](../7-bank-project/1-template-route/README.md)
+  - [22](../7-bank-project/2-forms/README.md)
+  - [23](../7-bank-project/3-data/README.md)
+  - [24](../7-bank-project/4-state-management/README.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/for-teachers.md b/translations/uk/for-teachers.md
new file mode 100644
index 00000000..d9e8d8f8
--- /dev/null
+++ b/translations/uk/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-27T21:57:44+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "uk"
+}
+-->
+## Для викладачів
+
+Хочете використовувати цей навчальний матеріал у своєму класі? Будь ласка, не соромтеся!
+
+Насправді, ви можете використовувати його прямо на GitHub, скориставшись GitHub Classroom.
+
+Для цього зробіть форк цього репозиторію. Вам потрібно буде створити окремий репозиторій для кожного уроку, тому необхідно витягнути кожну папку в окремий репозиторій. Таким чином, [GitHub Classroom](https://classroom.github.com/classrooms) зможе окремо обробляти кожен урок.
+
+Ці [повні інструкції](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) допоможуть вам налаштувати ваш клас.
+
+## Використання в Moodle, Canvas або Blackboard
+
+Цей навчальний матеріал добре працює в цих системах управління навчанням! Використовуйте [файл для завантаження в Moodle](../../../../../../../teaching-files/webdev-moodle.mbz) для повного контенту або спробуйте [файл Common Cartridge](../../../../../../../teaching-files/webdev-common-cartridge.imscc), який містить частину контенту. Moodle Cloud не підтримує повні експорти Common Cartridge, тому краще використовувати файл для завантаження в Moodle, який можна завантажити в Canvas. Будь ласка, повідомте нам, як ми можемо покращити цей досвід.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.uk.png)
+> Навчальний матеріал у класі Moodle
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.uk.png)
+> Навчальний матеріал у Canvas
+
+## Використання репозиторію як є
+
+Якщо ви хочете використовувати цей репозиторій у його поточному вигляді, без використання GitHub Classroom, це також можливо. Вам потрібно буде повідомити своїм студентам, над яким уроком працювати разом.
+
+У форматі онлайн (Zoom, Teams або інші) ви можете створити кімнати для групової роботи над вікторинами та наставляти студентів, щоб допомогти їм підготуватися до навчання. Потім запросіть студентів до вікторин і попросіть їх надсилати відповіді як 'issues' у певний час. Ви можете зробити те ж саме з завданнями, якщо хочете, щоб студенти працювали спільно у відкритому форматі.
+
+Якщо ви віддаєте перевагу більш приватному формату, попросіть студентів зробити форк навчального матеріалу, урок за уроком, у свої власні приватні репозиторії на GitHub і надати вам доступ. Тоді вони зможуть виконувати вікторини та завдання приватно і надсилати їх вам через issues у вашому класному репозиторії.
+
+Існує багато способів зробити це ефективним у форматі онлайн-класу. Будь ласка, повідомте нам, що працює найкраще для вас!
+
+## Будь ласка, поділіться своїми думками!
+
+Ми хочемо зробити цей навчальний матеріал корисним для вас і ваших студентів. Зв’яжіться з нами у [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) і відкрийте [**новий issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) для будь-яких запитів, помилок та відгуків.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматизовані переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/lesson-template/README.md b/translations/uk/lesson-template/README.md
new file mode 100644
index 00000000..481468f3
--- /dev/null
+++ b/translations/uk/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-27T22:34:04+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "uk"
+}
+-->
+# [Тема уроку]
+
+![Вставте відео тут](../../../lesson-template/video-url)
+
+## [Тест перед лекцією](../../../lesson-template/quiz-url)
+
+[Опишіть, що ми будемо вивчати]
+
+### Вступ
+
+Опишіть, що буде розглянуто
+
+> Примітки
+
+### Передумови
+
+Які кроки повинні бути виконані перед цим уроком?
+
+### Підготовка
+
+Підготовчі кроки для початку цього уроку
+
+---
+
+[Розглядайте контент блоками]
+
+## [Тема 1]
+
+### Завдання:
+
+Працюйте разом, щоб поступово вдосконалювати ваш кодовий базис для створення проекту зі спільним кодом:
+
+```html
+code blocks
+```
+
+✅ Перевірка знань - використайте цей момент, щоб розширити знання студентів за допомогою відкритих запитань
+
+## [Тема 2]
+
+## [Тема 3]
+
+🚀 Виклик: Додайте завдання для студентів, щоб вони працювали над проектом спільно в класі
+
+Опціонально: додайте скріншот інтерфейсу завершеного уроку, якщо це доречно
+
+## [Тест після лекції](../../../lesson-template/quiz-url)
+
+## Огляд та самостійне навчання
+
+**Термін здачі [MM/YY]**: [Назва завдання](assignment.md)
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/lesson-template/assignment.md b/translations/uk/lesson-template/assignment.md
new file mode 100644
index 00000000..0a8f190d
--- /dev/null
+++ b/translations/uk/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-27T22:34:22+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "uk"
+}
+-->
+# [Назва Завдання]
+
+## Інструкції
+
+## Критерії Оцінювання
+
+| Критерії | Відмінно | Задовільно | Потребує Покращення |
+| -------- | -------- | ---------- | ------------------- |
+|          |          |            |                     |
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file
diff --git a/translations/uk/quiz-app/README.md b/translations/uk/quiz-app/README.md
new file mode 100644
index 00000000..b90ac218
--- /dev/null
+++ b/translations/uk/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-27T22:40:11+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "uk"
+}
+-->
+# Додаток для вікторин
+
+Ці вікторини є попередніми та підсумковими тестами для навчальної програми з науки про дані на https://aka.ms/webdev-beginners
+
+## Додавання перекладеного набору вікторин
+
+Додайте переклад вікторини, створивши відповідні структури вікторин у папках `assets/translations`. Оригінальні вікторини знаходяться в `assets/translations/en`. Вікторини розділені на кілька груп. Переконайтеся, що нумерація відповідає правильному розділу вікторини. У цій навчальній програмі всього 40 вікторин, починаючи з 0.
+
+  
+<details>
+<summary>Ось структура файлу перекладу:</summary>
+
+```
+[
+    {
+        "title": "A title",
+        "complete": "A complete button title",
+        "error": "An error message upon selecting the wrong answer",
+        "quizzes": [
+            {
+                "id": 1,
+                "title": "Title",
+                "quiz": [
+                    {
+                        "questionText": "The question asked",
+                        "answerOptions": [
+                            {
+                                "answerText": "Option 1 title",
+                                "isCorrect": true
+                            },
+                            {
+                                "answerText": "Option 2 title",
+                                "isCorrect": false
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+]
+```
+</details>
+
+Після редагування перекладів відредагуйте файл index.js у папці перекладу, щоб імпортувати всі файли відповідно до конвенцій у `en`.
+
+Відредагуйте файл `index.js` у `assets/translations`, щоб імпортувати нові перекладені файли.
+
+Наприклад, якщо ваш перекладений JSON знаходиться у файлі `ex.json`, зробіть 'ex' ключем локалізації, а потім додайте його, як показано нижче, для імпорту:
+
+<details>
+<summary>index.js</summary>
+
+```
+import ex from "./ex.json";
+
+// if 'ex' is localization key then enter it like so in `messages` to expose it 
+
+const messages = {
+  ex: ex[0],
+};
+
+export default messages;
+```
+
+</details>
+
+## Запуск додатка для вікторин локально
+
+### Попередні вимоги
+
+- Обліковий запис GitHub
+- [Node.js та Git](https://nodejs.org/)
+
+### Встановлення та налаштування
+
+1. Створіть репозиторій із цього [шаблону](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Клонуйте ваш новий репозиторій і перейдіть до папки quiz-app
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Встановіть npm-пакети та залежності
+
+   ```bash
+   npm install
+   ```
+
+### Збірка додатка
+
+1. Для збірки рішення виконайте:
+
+   ```bash
+   npm run build
+   ```
+
+### Запуск додатка
+
+1. Для запуску рішення виконайте:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Необов'язково] Лінтинг
+
+1. Щоб переконатися, що код пройшов лінтинг, виконайте:
+
+    ```bash
+    npm run lint
+    ```
+
+## Розгортання додатка для вікторин на Azure 
+
+### Попередні вимоги
+- Підписка на Azure. Зареєструйтеся безкоштовно [тут](https://aka.ms/azure-free).
+
+    _Орієнтовна вартість розгортання цього додатка: БЕЗКОШТОВНО_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Після входу в Azure через посилання вище виберіть підписку та групу ресурсів, а потім:
+
+- Деталі статичного веб-додатка: Вкажіть назву та виберіть план хостингу
+- Вхід до GitHub: Встановіть джерело розгортання як GitHub, потім увійдіть і заповніть необхідні поля у формі:
+    - *Організація* – Виберіть вашу організацію.
+    - *Репозиторій* – Виберіть репозиторій навчальної програми Web Dev for Beginners. 
+    - *Гілка* - Виберіть гілку (main) 
+- Налаштування збірки: Azure Static Web Apps використовує алгоритм для визначення фреймворку, який використовується у вашому додатку. 
+    - *Розташування додатка* - ./quiz-app
+    - *Розташування API* -
+    - *Розташування вихідних даних* - dist
+- Розгортання: Натисніть 'Review + Create', потім 'Create'
+
+    Після розгортання у вашому репозиторії в директорії *.github* буде створено файл workflow. Цей файл містить інструкції щодо подій, які ініціюють повторне розгортання додатка на Azure, наприклад, _**push** у гілку **main**_ тощо.
+
+    <details>
+    <summary>Приклад файлу Workflow</summary>
+    Ось приклад того, як може виглядати файл workflow для GitHub Actions:
+    name: Azure Static Web Apps CI/CD
+
+    ```
+    on:
+    push:
+        branches:
+        - main
+    pull_request:
+        types: [opened, synchronize, reopened, closed]
+        branches:
+        - main
+
+    jobs:
+    build_and_deploy_job:
+        runs-on: ubuntu-latest
+        name: Build and Deploy Job
+        steps:
+        - uses: actions/checkout@v2
+        - name: Build And Deploy
+            id: builddeploy
+            uses: Azure/static-web-apps-deploy@v1
+            with:
+            azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+            repo_token: ${{ secrets.GITHUB_TOKEN }}
+            action: "upload"
+            app_location: "quiz-app" # App source code path
+            api_location: ""API source code path optional
+            output_location: "dist" #Built app content directory - optional
+    ```
+
+    </details>
+
+- Після розгортання: Після завершення розгортання натисніть 'Go to Deployment', а потім 'View app in browser'.
+
+Після успішного виконання GitHub Action (workflow) оновіть сторінку, щоб переглянути ваш додаток.
+
+---
+
+**Відмова від відповідальності**:  
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
\ No newline at end of file