diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.fi.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.fi.png
new file mode 100644
index 00000000..dd884658
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.fi.png differ
diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.he.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.he.png
new file mode 100644
index 00000000..b7196681
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.he.png differ
diff --git a/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.nl.png b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.nl.png
new file mode 100644
index 00000000..70b426b6
Binary files /dev/null and b/translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.nl.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.fi.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.fi.png
new file mode 100644
index 00000000..8229af93
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.fi.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.he.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.he.png
new file mode 100644
index 00000000..87c1ce9b
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.he.png differ
diff --git a/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.nl.png b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.nl.png
new file mode 100644
index 00000000..347212b5
Binary files /dev/null and b/translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.nl.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.fi.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.fi.png
new file mode 100644
index 00000000..df50cf4e
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.fi.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.he.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.he.png
new file mode 100644
index 00000000..72854bd8
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.he.png differ
diff --git a/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.nl.png b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.nl.png
new file mode 100644
index 00000000..452d5789
Binary files /dev/null and b/translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.nl.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.fi.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.fi.png
new file mode 100644
index 00000000..391fbbb8
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.fi.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.he.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.he.png
new file mode 100644
index 00000000..2c418133
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.he.png differ
diff --git a/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.nl.png b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.nl.png
new file mode 100644
index 00000000..9952708d
Binary files /dev/null and b/translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.nl.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.fi.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.fi.png
new file mode 100644
index 00000000..1571eb63
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.fi.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.he.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.he.png
new file mode 100644
index 00000000..a1576878
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.he.png differ
diff --git a/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.nl.png b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.nl.png
new file mode 100644
index 00000000..4530857e
Binary files /dev/null and b/translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.nl.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.fi.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.fi.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.fi.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.he.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.he.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.he.png differ
diff --git a/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.nl.png b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.nl.png
new file mode 100644
index 00000000..3bd93a53
Binary files /dev/null and b/translated_images/backgroundColor.e19c3c60768150c8de229c89233ecb5d859aeabef0ada99d2236dd2c44c1510f.nl.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.fi.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.fi.png
new file mode 100644
index 00000000..9a00a020
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.fi.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.he.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.he.png
new file mode 100644
index 00000000..5fe71298
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.he.png differ
diff --git a/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.nl.png b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.nl.png
new file mode 100644
index 00000000..caaa6d7d
Binary files /dev/null and b/translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.nl.png differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.fi.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.fi.jpg
new file mode 100644
index 00000000..26955ae0
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.fi.jpg differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.he.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.he.jpg
new file mode 100644
index 00000000..2bea1f84
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.he.jpg differ
diff --git a/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.nl.jpg b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.nl.jpg
new file mode 100644
index 00000000..981eb16c
Binary files /dev/null and b/translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.nl.jpg differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.fi.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.fi.png
new file mode 100644
index 00000000..24dac152
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.fi.png differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.he.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.he.png
new file mode 100644
index 00000000..bea4c151
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.he.png differ
diff --git a/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.nl.png b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.nl.png
new file mode 100644
index 00000000..18ce8804
Binary files /dev/null and b/translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.nl.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.fi.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.fi.png
new file mode 100644
index 00000000..b323ddd0
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.fi.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.he.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.he.png
new file mode 100644
index 00000000..4bb5aaca
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.he.png differ
diff --git a/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.nl.png b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.nl.png
new file mode 100644
index 00000000..3103a597
Binary files /dev/null and b/translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.nl.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.fi.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.fi.png
new file mode 100644
index 00000000..8ed7edc6
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.fi.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.he.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.he.png
new file mode 100644
index 00000000..acde8671
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.he.png differ
diff --git a/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.nl.png b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.nl.png
new file mode 100644
index 00000000..8ea437b8
Binary files /dev/null and b/translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.nl.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.fi.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.fi.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.fi.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.he.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.he.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.he.png differ
diff --git a/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.nl.png b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.nl.png
new file mode 100644
index 00000000..ccc65305
Binary files /dev/null and b/translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.nl.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.fi.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.fi.png
new file mode 100644
index 00000000..d0dfed51
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.fi.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.he.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.he.png
new file mode 100644
index 00000000..4ae43464
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.he.png differ
diff --git a/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.nl.png b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.nl.png
new file mode 100644
index 00000000..479c7cab
Binary files /dev/null and b/translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.nl.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.fi.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.fi.png
new file mode 100644
index 00000000..04b43344
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.fi.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.he.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.he.png
new file mode 100644
index 00000000..effbec55
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.he.png differ
diff --git a/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.nl.png b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.nl.png
new file mode 100644
index 00000000..42f0c682
Binary files /dev/null and b/translated_images/clone_repo.6a202fb230ab6bdd8e8f536661f12088315044ed26899f00b5815db04bff9217.nl.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.fi.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.fi.png
new file mode 100644
index 00000000..2265b507
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.fi.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.he.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.he.png
new file mode 100644
index 00000000..05dc4c26
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.he.png differ
diff --git a/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.nl.png b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.nl.png
new file mode 100644
index 00000000..df030799
Binary files /dev/null and b/translated_images/create-a-fork.297ab42b4bd0af9989c1a00dc1ad10805a7e109296a5f47acebacaf5ff098a30.nl.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.fi.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.fi.png
new file mode 100644
index 00000000..9f878f13
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.fi.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.he.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.he.png
new file mode 100644
index 00000000..07238496
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.he.png differ
diff --git a/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.nl.png b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.nl.png
new file mode 100644
index 00000000..26492c32
Binary files /dev/null and b/translated_images/create-new-file-pb.0797800d977ec3ebf484be2545060e443a902973aaa5267219c07fe199b0e2d4.nl.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.fi.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.fi.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.fi.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.he.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.he.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.he.png differ
diff --git a/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.nl.png b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.nl.png
new file mode 100644
index 00000000..a1fb99b5
Binary files /dev/null and b/translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.nl.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.fi.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.fi.png
new file mode 100644
index 00000000..08b8a6a4
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.fi.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.he.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.he.png
new file mode 100644
index 00000000..a0bc41b5
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.he.png differ
diff --git a/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.nl.png b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.nl.png
new file mode 100644
index 00000000..cc017da5
Binary files /dev/null and b/translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.nl.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.fi.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.fi.png
new file mode 100644
index 00000000..8829708c
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.fi.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.he.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.he.png
new file mode 100644
index 00000000..f5e394ac
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.he.png differ
diff --git a/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.nl.png b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.nl.png
new file mode 100644
index 00000000..09b1fe9b
Binary files /dev/null and b/translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.nl.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.fi.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.fi.png
new file mode 100644
index 00000000..73555f04
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.fi.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.he.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.he.png
new file mode 100644
index 00000000..513e925f
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.he.png differ
diff --git a/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.nl.png b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.nl.png
new file mode 100644
index 00000000..251191a3
Binary files /dev/null and b/translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.nl.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.fi.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.fi.png
new file mode 100644
index 00000000..135130b2
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.fi.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.he.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.he.png
new file mode 100644
index 00000000..93ab87fa
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.he.png differ
diff --git a/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.nl.png b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.nl.png
new file mode 100644
index 00000000..99e9e775
Binary files /dev/null and b/translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.nl.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.fi.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.fi.png
new file mode 100644
index 00000000..bac30770
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.fi.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.he.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.he.png
new file mode 100644
index 00000000..597c2f33
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.he.png differ
diff --git a/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.nl.png b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.nl.png
new file mode 100644
index 00000000..a7d485b0
Binary files /dev/null and b/translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.nl.png differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.fi.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.fi.jpg
new file mode 100644
index 00000000..a8f5ccde
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.fi.jpg differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.he.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.he.jpg
new file mode 100644
index 00000000..ab9c230e
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.he.jpg differ
diff --git a/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.nl.jpg b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.nl.jpg
new file mode 100644
index 00000000..56317bc6
Binary files /dev/null and b/translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.nl.jpg differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.fi.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.fi.png
new file mode 100644
index 00000000..30c65ce2
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.fi.png differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.he.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.he.png
new file mode 100644
index 00000000..3766a721
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.he.png differ
diff --git a/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.nl.png b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.nl.png
new file mode 100644
index 00000000..9c693ff6
Binary files /dev/null and b/translated_images/edit-a-file-pb.263555922c14fc523f53f394da84b6e155b1c6d1835dfa572b33ea98a209ef94.nl.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.fi.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.fi.png
new file mode 100644
index 00000000..aeb8cf12
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.fi.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.he.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.he.png
new file mode 100644
index 00000000..e5149839
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.he.png differ
diff --git a/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.nl.png b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.nl.png
new file mode 100644
index 00000000..97178a64
Binary files /dev/null and b/translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.nl.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.fi.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.fi.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.fi.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.he.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.he.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.he.png differ
diff --git a/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.nl.png b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.nl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.035a46787bff658cd126f2e02f640e60fc84536ee2d009a1a5792f3e0423c148.nl.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.fi.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.fi.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.fi.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.he.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.he.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.he.png differ
diff --git a/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.nl.png b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.nl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.1a1354d7988de290ea352832e06745922d463e9a4a7cca3b8f89477e934b16b2.nl.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.fi.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.fi.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.fi.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.he.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.he.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.he.png differ
diff --git a/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.nl.png b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.nl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.22cbee6ea27a5809ef09dddc81a4f77714de1a4c8fe2b29ee5d13651f8d60fe0.nl.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.fi.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.fi.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.fi.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.he.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.he.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.he.png differ
diff --git a/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.nl.png b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.nl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.321ecb1b4eb21f2c5b74a5118216ac3cbdf4cda52de32993a6c157547e7539bd.nl.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.fi.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.fi.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.fi.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.he.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.he.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.he.png differ
diff --git a/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.nl.png b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.nl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.4fbf2889e6129db41989c4c74999ae81dd8d4dd994f1df01f720e923a5749a36.nl.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.fi.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.fi.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.fi.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.he.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.he.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.he.png differ
diff --git a/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.nl.png b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.nl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.nl.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.fi.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.fi.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.fi.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.he.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.he.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.he.png differ
diff --git a/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.nl.png b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.nl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.62983ed4bfb2220fe28986c8c8c5e6f1528caf879a4290bddbf3550469374c5d.nl.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.fi.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.fi.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.fi.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.he.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.he.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.he.png differ
diff --git a/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.nl.png b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.nl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.add7036e1c3c30144d4500534897f937d962ffb178f6d7dbb536c2b19f05d3b7.nl.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.fi.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.fi.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.fi.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.he.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.he.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.he.png differ
diff --git a/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.nl.png b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.nl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b39a140287683bf7a409e00e19b41f29793c9dea0220e5d9fb174978fec357a2.nl.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.fi.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.fi.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.fi.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.he.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.he.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.he.png differ
diff --git a/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.nl.png b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.nl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.b9626ed228a17a323a180f11f359f96848de1c9ee48d76702b49cd1cc3ef3821.nl.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.fi.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.fi.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.fi.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.he.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.he.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.he.png differ
diff --git a/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.nl.png b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.nl.png
new file mode 100644
index 00000000..51122167
Binary files /dev/null and b/translated_images/enemyShip.deb0477a7312f54d5e9b3f707b02af3cfa2cafa04e1e9a3dd5818e6ab0244b2c.nl.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.fi.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.fi.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.fi.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.he.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.he.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.he.png differ
diff --git a/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.nl.png b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.nl.png
new file mode 100644
index 00000000..0431526a
Binary files /dev/null and b/translated_images/enemyUFO.bf8585e4e8dcdb68e03f67a534d870334c5db3557ad4f960027eac7782cf7ceb.nl.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.fi.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.fi.png
new file mode 100644
index 00000000..18986515
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.fi.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.he.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.he.png
new file mode 100644
index 00000000..a6c3d78c
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.he.png differ
diff --git a/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.nl.png b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.nl.png
new file mode 100644
index 00000000..85f804e1
Binary files /dev/null and b/translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.nl.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png
new file mode 100644
index 00000000..9be52bc9
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.he.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.he.png
new file mode 100644
index 00000000..c27af7b4
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.he.png differ
diff --git a/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png
new file mode 100644
index 00000000..c066bcf8
Binary files /dev/null and b/translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.fi.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.fi.png
new file mode 100644
index 00000000..2f68c1bf
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.fi.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.he.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.he.png
new file mode 100644
index 00000000..34e3adb9
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.he.png differ
diff --git a/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.nl.png b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.nl.png
new file mode 100644
index 00000000..3391d598
Binary files /dev/null and b/translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.nl.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.fi.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.fi.png
new file mode 100644
index 00000000..e14338a9
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.fi.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.he.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.he.png
new file mode 100644
index 00000000..5c2d7390
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.he.png differ
diff --git a/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.nl.png b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.nl.png
new file mode 100644
index 00000000..62799f16
Binary files /dev/null and b/translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.nl.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.fi.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.fi.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.fi.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.he.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.he.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.he.png differ
diff --git a/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.nl.png b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.nl.png
new file mode 100644
index 00000000..26e0ae43
Binary files /dev/null and b/translated_images/favicon.37b561214b36d454f9fd1f725d77f310fe256eb88f2a0ae08b9cb18aeb30650c.nl.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.fi.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.fi.png
new file mode 100644
index 00000000..5903ac69
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.fi.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.he.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.he.png
new file mode 100644
index 00000000..81819898
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.he.png differ
diff --git a/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.nl.png b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.nl.png
new file mode 100644
index 00000000..5ddd08a2
Binary files /dev/null and b/translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.nl.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.fi.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.fi.png
new file mode 100644
index 00000000..ed16c40e
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.fi.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.he.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.he.png
new file mode 100644
index 00000000..7fcb8a22
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.he.png differ
diff --git a/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.nl.png b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.nl.png
new file mode 100644
index 00000000..222763c1
Binary files /dev/null and b/translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.nl.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png
new file mode 100644
index 00000000..52c4f680
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.he.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.he.png
new file mode 100644
index 00000000..df68e6f6
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.he.png differ
diff --git a/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png
new file mode 100644
index 00000000..2bf624a1
Binary files /dev/null and b/translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.fi.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.fi.png
new file mode 100644
index 00000000..52c4f680
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.fi.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.he.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.he.png
new file mode 100644
index 00000000..621c95ae
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.he.png differ
diff --git a/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.nl.png b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.nl.png
new file mode 100644
index 00000000..9bad19d0
Binary files /dev/null and b/translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.nl.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.fi.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.fi.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.fi.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.he.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.he.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.he.png differ
diff --git a/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.nl.png b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.nl.png
new file mode 100644
index 00000000..cfd373b4
Binary files /dev/null and b/translated_images/laserGreen.89904f0f499455604f204b641dfe992cb6f688d5b1c82a2227d1674af84c0b20.nl.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.fi.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.fi.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.fi.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.he.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.he.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.he.png differ
diff --git a/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.nl.png b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.nl.png
new file mode 100644
index 00000000..816fdf33
Binary files /dev/null and b/translated_images/laserGreenShot.e4fbfc4714c08a5b1a3e94429dde0e5ad4f010c25f0d0b6c321aea62014ed203.nl.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.fi.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.fi.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.fi.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.he.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.he.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.he.png differ
diff --git a/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.nl.png b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.nl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.2040e11f55c0a40a9800af7a11247676b4969e6c87e697f29589f605a0192b05.nl.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.fi.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.fi.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.fi.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.he.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.he.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.he.png differ
diff --git a/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.nl.png b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.nl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.381bc5555491ce677eedc34e728c7c4f5676ce6c74db68d8a4d82fde952cb8fb.nl.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.fi.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.fi.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.fi.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.he.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.he.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.he.png differ
diff --git a/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.nl.png b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.nl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.69730edd76f0b3bd5a45ae075c3dd1a064017020ddff4b4c3f007c21d9a62ebc.nl.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.fi.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.fi.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.fi.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.he.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.he.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.he.png differ
diff --git a/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.nl.png b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.nl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.b583dc1728eb8581da951a0ec74c42cf06cf6903e9b939c71baaf04ef1a60f90.nl.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.fi.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.fi.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.fi.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.he.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.he.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.he.png differ
diff --git a/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.nl.png b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.nl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.cae9ab24ea9b18fd5fde4b22153f4d71291a363bd611de8108bc6a40cecefe24.nl.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.fi.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.fi.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.fi.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.he.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.he.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.he.png differ
diff --git a/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.nl.png b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.nl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.d81ce4986f87c251d4fd93a2fcfb8215c90684ad71d59de7bb0c2561a8e76d56.nl.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.fi.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.fi.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.fi.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.he.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.he.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.he.png differ
diff --git a/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.nl.png b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.nl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e58ef8db2585dfbe451c9f46f4190d75f555479ddc24e2b75be28fe3a2894f24.nl.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.fi.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.fi.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.fi.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.he.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.he.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.he.png differ
diff --git a/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.nl.png b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.nl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e66e29ace6666064cf451ce990d73b779028e21542cded84ecad88577353aad1.nl.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.fi.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.fi.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.fi.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.he.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.he.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.he.png differ
diff --git a/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.nl.png b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.nl.png
new file mode 100644
index 00000000..9b6c5f9b
Binary files /dev/null and b/translated_images/laserRed.e86e8fb629c6026e20cc7e8507f8a1f2fc82cc355117c721eb08ac67c40d3e6a.nl.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.fi.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.fi.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.fi.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.he.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.he.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.he.png differ
diff --git a/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.nl.png b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.nl.png
new file mode 100644
index 00000000..28ecda5b
Binary files /dev/null and b/translated_images/laserRedShot.c39d066745996a71e5ffb0eeec4eff60fede6dc7fb65bdf8ef8b64193fda04c9.nl.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.fi.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.fi.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.fi.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.he.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.he.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.he.png differ
diff --git a/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.nl.png b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.nl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.27144b6d4bfdea76e9613184ff89c93d44888d2c9068a8599553a4306cd539ea.nl.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.fi.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.fi.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.fi.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.he.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.he.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.he.png differ
diff --git a/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.nl.png b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.nl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.2a159298dd98f4efde6d8b2792eaff08d6944f39e57dbfa65b0b3d7f27addf7e.nl.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.fi.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.fi.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.fi.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.he.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.he.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.he.png differ
diff --git a/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.nl.png b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.nl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.466df3b1692a244ad9189538ae5184e6bb43165d7c3172f66b5a60790a1541cc.nl.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.fi.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.fi.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.fi.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.he.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.he.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.he.png differ
diff --git a/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.nl.png b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.nl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.65a2aaceca87528424e6e93a36e953b58d4facfefbfd42dc4d6ad2db43076018.nl.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.fi.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.fi.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.fi.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.he.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.he.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.he.png differ
diff --git a/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.nl.png b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.nl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.nl.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.fi.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.fi.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.fi.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.he.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.he.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.he.png differ
diff --git a/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.nl.png b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.nl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.78b6e96a3003767e113e7d6fbb5d57fc59245a92579256c08af23c93f2e2b0a3.nl.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.fi.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.fi.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.fi.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.he.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.he.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.he.png differ
diff --git a/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.nl.png b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.nl.png
new file mode 100644
index 00000000..3487f796
Binary files /dev/null and b/translated_images/life.86d843ce9c23289c0094eff7154a7b6d3cada290b7db733424ee1c68864143c5.nl.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.fi.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.fi.png
new file mode 100644
index 00000000..6bc7dfd0
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.fi.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.he.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.he.png
new file mode 100644
index 00000000..ff00c063
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.he.png differ
diff --git a/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.nl.png b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.nl.png
new file mode 100644
index 00000000..1d482554
Binary files /dev/null and b/translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.nl.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.fi.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.fi.png
new file mode 100644
index 00000000..3e29b6de
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.fi.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.he.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.he.png
new file mode 100644
index 00000000..c24e7f3a
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.he.png differ
diff --git a/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.nl.png b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.nl.png
new file mode 100644
index 00000000..f7dda218
Binary files /dev/null and b/translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.nl.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.fi.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.fi.png
new file mode 100644
index 00000000..666b370e
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.fi.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.he.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.he.png
new file mode 100644
index 00000000..a2e5353e
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.he.png differ
diff --git a/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.nl.png b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.nl.png
new file mode 100644
index 00000000..ce0ac3d1
Binary files /dev/null and b/translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.nl.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.fi.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.fi.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.fi.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.he.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.he.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.he.png differ
diff --git a/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.nl.png b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.nl.png
new file mode 100644
index 00000000..b3cd5407
Binary files /dev/null and b/translated_images/meteorBig.1e452b3ad7af50adaafcbe25c82b2758be31cdff66d6b417b79f5453bf9ad3e0.nl.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.fi.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.fi.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.fi.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.he.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.he.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.he.png differ
diff --git a/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.nl.png b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.nl.png
new file mode 100644
index 00000000..a61e0e28
Binary files /dev/null and b/translated_images/meteorSmall.0d729bc71c12d41f26f077dfbecaccb9016e21e11dac7966e4f2de825e5de3b6.nl.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.fi.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.fi.png
new file mode 100644
index 00000000..4c00e798
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.fi.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.he.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.he.png
new file mode 100644
index 00000000..b848bea0
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.he.png differ
diff --git a/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.nl.png b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.nl.png
new file mode 100644
index 00000000..15731393
Binary files /dev/null and b/translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.nl.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.fi.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.fi.png
new file mode 100644
index 00000000..552a3364
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.fi.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.he.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.he.png
new file mode 100644
index 00000000..45da3aee
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.he.png differ
diff --git a/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.nl.png b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.nl.png
new file mode 100644
index 00000000..c25529d8
Binary files /dev/null and b/translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.nl.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.fi.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.fi.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.fi.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.he.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.he.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.he.png differ
diff --git a/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.nl.png b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.nl.png
new file mode 100644
index 00000000..75523088
Binary files /dev/null and b/translated_images/nebula.55c2933d36d035d359ef8d8422e7a7f260b3f6d15c026a18472bf8e71185d59c.nl.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.fi.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.fi.png
new file mode 100644
index 00000000..087b035d
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.fi.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.he.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.he.png
new file mode 100644
index 00000000..b6b3226d
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.he.png differ
diff --git a/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.nl.png b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.nl.png
new file mode 100644
index 00000000..5f1b1cb2
Binary files /dev/null and b/translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.nl.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.fi.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.fi.png
new file mode 100644
index 00000000..a1a328b5
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.fi.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.he.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.he.png
new file mode 100644
index 00000000..1621d7fa
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.he.png differ
diff --git a/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.nl.png b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.nl.png
new file mode 100644
index 00000000..99f5fe10
Binary files /dev/null and b/translated_images/open-palette-menu.46dda01084738da84fc55100956fcc915f33e9de8c19813148ac3b1803871cff.nl.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.fi.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.fi.png
new file mode 100644
index 00000000..8009157b
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.fi.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.he.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.he.png
new file mode 100644
index 00000000..0d201b1c
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.he.png differ
diff --git a/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.nl.png b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.nl.png
new file mode 100644
index 00000000..53650f83
Binary files /dev/null and b/translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.nl.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.fi.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.fi.png
new file mode 100644
index 00000000..1ad2c4f4
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.fi.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.he.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.he.png
new file mode 100644
index 00000000..ad89c643
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.he.png differ
diff --git a/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.nl.png b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.nl.png
new file mode 100644
index 00000000..6b3ca322
Binary files /dev/null and b/translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.nl.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.fi.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.fi.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.fi.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.he.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.he.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.he.png differ
diff --git a/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.nl.png b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.nl.png
new file mode 100644
index 00000000..88783500
Binary files /dev/null and b/translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.nl.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.fi.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.fi.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.fi.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.he.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.he.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.he.png differ
diff --git a/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.nl.png b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.nl.png
new file mode 100644
index 00000000..0632233d
Binary files /dev/null and b/translated_images/plant1.a876180d8659acb9a51f95b2466b207b95dec201fafa23efcd4137fb62d0acb1.nl.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.fi.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.fi.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.fi.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.he.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.he.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.he.png differ
diff --git a/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.nl.png b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.nl.png
new file mode 100644
index 00000000..209ee5d2
Binary files /dev/null and b/translated_images/plant10.2f2c47804ae52dd3550b3f97782a76629d5819bba30e8a8b79933a9ccde606d4.nl.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.fi.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.fi.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.fi.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.he.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.he.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.he.png differ
diff --git a/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.nl.png b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.nl.png
new file mode 100644
index 00000000..201bec9e
Binary files /dev/null and b/translated_images/plant11.0ce0081b0ef17aa1793cc5fe6d7de6f8cf7f8cfb24933c3c457386194fc10e77.nl.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.fi.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.fi.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.fi.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.he.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.he.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.he.png differ
diff --git a/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.nl.png b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.nl.png
new file mode 100644
index 00000000..593e1573
Binary files /dev/null and b/translated_images/plant12.6b934c4312a00228719509ac56cd568ec45672bfdcc732bac7f42391035d606c.nl.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.fi.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.fi.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.fi.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.he.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.he.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.he.png differ
diff --git a/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.nl.png b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.nl.png
new file mode 100644
index 00000000..0f69b814
Binary files /dev/null and b/translated_images/plant13.37d6ab2e2481421f0611f07685309cc07fe42d63e6abbaa963f972dbff7d176d.nl.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.fi.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.fi.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.fi.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.he.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.he.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.he.png differ
diff --git a/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.nl.png b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.nl.png
new file mode 100644
index 00000000..221277ef
Binary files /dev/null and b/translated_images/plant14.908791477a46eb7f40a85155f53861fa5734be5075443b5c19f78e758f64d286.nl.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.fi.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.fi.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.fi.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.he.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.he.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.he.png differ
diff --git a/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.nl.png b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.nl.png
new file mode 100644
index 00000000..331ca68d
Binary files /dev/null and b/translated_images/plant2.9e45efea224115b077fade85ce6871246bf85de20f419c57faed6b78e9ac7fcd.nl.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.fi.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.fi.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.fi.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.he.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.he.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.he.png differ
diff --git a/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.nl.png b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.nl.png
new file mode 100644
index 00000000..d94bd097
Binary files /dev/null and b/translated_images/plant3.06efdd0fa0c4b1152034312e11765b1a8fad48ebc00b72a3e7df657f66f45449.nl.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.fi.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.fi.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.fi.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.he.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.he.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.he.png differ
diff --git a/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.nl.png b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.nl.png
new file mode 100644
index 00000000..c60f756c
Binary files /dev/null and b/translated_images/plant4.3b78072b427727c6e6eb08eefc8451b248577412dd025002cefb707238e8bf46.nl.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.fi.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.fi.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.fi.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.he.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.he.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.he.png differ
diff --git a/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.nl.png b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.nl.png
new file mode 100644
index 00000000..f2fe32fb
Binary files /dev/null and b/translated_images/plant5.8ec58b18ac336fa8ec87ce1d5b433ee58c4918e67fdf0315d5407d80cbd97569.nl.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.fi.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.fi.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.fi.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.he.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.he.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.he.png differ
diff --git a/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.nl.png b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.nl.png
new file mode 100644
index 00000000..82e0db0d
Binary files /dev/null and b/translated_images/plant6.ca4ff8372e6676b1ffed650fba21cb2af52c70df969a8203e57fb5bedd81e9f0.nl.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.fi.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.fi.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.fi.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.he.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.he.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.he.png differ
diff --git a/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.nl.png b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.nl.png
new file mode 100644
index 00000000..07cb7054
Binary files /dev/null and b/translated_images/plant7.194d5a42fcf5a88c5dd4960c68e6f78707acdb4e21bf533a6a65f8d002ab660b.nl.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.fi.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.fi.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.fi.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.he.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.he.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.he.png differ
diff --git a/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.nl.png b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.nl.png
new file mode 100644
index 00000000..a0d261a9
Binary files /dev/null and b/translated_images/plant8.7b247809ab0eb492105cac4f42b79ac771ce56e401fdf3df170b3b6ef03c5642.nl.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.fi.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.fi.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.fi.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.he.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.he.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.he.png differ
diff --git a/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.nl.png b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.nl.png
new file mode 100644
index 00000000..bc09a050
Binary files /dev/null and b/translated_images/plant9.8fe614c01ded1b1ec05d1b4d6d527047b1ece5edba299c1c516aaf4b05eb19ed.nl.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.fi.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.fi.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.fi.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.he.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.he.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.he.png differ
diff --git a/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.nl.png b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.nl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.137ee0e47f895ffcdb50ba1b316936715ec8decfd6cee3258332a6c60e5d0d04.nl.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.fi.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.fi.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.fi.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.he.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.he.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.he.png differ
diff --git a/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.nl.png b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.nl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.2887422f6982c3cd284b2bafd7551ff073a7b7b8a66edd2f0c2c722f94acfd5c.nl.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.fi.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.fi.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.fi.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.he.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.he.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.he.png differ
diff --git a/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.nl.png b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.nl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.391fed427ede24f513d4b559cff8ff60f00818b31c81268b783a7f89054fda90.nl.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.fi.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.fi.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.fi.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.he.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.he.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.he.png differ
diff --git a/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.nl.png b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.nl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.3c4f50182552a73a2b22542c75209c57231da2f51d88d571f198382e2fb3b45b.nl.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.fi.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.fi.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.fi.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.he.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.he.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.he.png differ
diff --git a/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.nl.png b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.nl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.47bc9de0714c723dfe0705c328fb8769de71c87b99d340921c2247674d9d631a.nl.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.fi.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.fi.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.fi.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.he.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.he.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.he.png differ
diff --git a/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.nl.png b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.nl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.57b3107c03012695cedb271fdda06900e2d0d9580ae5fab5c563fdb029ba8584.nl.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.fi.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.fi.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.fi.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.he.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.he.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.he.png differ
diff --git a/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.nl.png b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.nl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.606f85953e5e564e7711d22697724750fdcc661d5f7c5295e2da7e46905fd322.nl.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.fi.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.fi.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.fi.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.he.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.he.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.he.png differ
diff --git a/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.nl.png b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.nl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.680ea4c619b54fe160261abdfe2e68139dedacb8d884b6cb405b9a6ab162940d.nl.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.fi.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.fi.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.fi.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.he.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.he.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.he.png differ
diff --git a/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.nl.png b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.nl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.bfe14f110bddf56d10a1989066d170af2ce6b1412626c37a7e184963e54c7ef4.nl.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.fi.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.fi.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.fi.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.he.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.he.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.he.png differ
diff --git a/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.nl.png b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.nl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.c99c25d54a615ca088fc55515a6ee76c766fba0e31b167816062f3ab3d22fbcd.nl.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.fi.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.fi.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.fi.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.he.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.he.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.he.png differ
diff --git a/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.nl.png b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.nl.png
new file mode 100644
index 00000000..13fc0247
Binary files /dev/null and b/translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.nl.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.fi.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.fi.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.fi.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.he.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.he.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.he.png differ
diff --git a/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.nl.png b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.nl.png
new file mode 100644
index 00000000..91d73b26
Binary files /dev/null and b/translated_images/playerDamaged.181703f652fd5176d25dbc286cdab2b79c9d7470dfd95af344dbb024780b6176.nl.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.fi.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.fi.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.fi.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.he.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.he.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.he.png differ
diff --git a/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.nl.png b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.nl.png
new file mode 100644
index 00000000..941cd3ac
Binary files /dev/null and b/translated_images/playerLeft.0f928412e66ba5d9455ccc99ef113088d2510843b23f8dbcd3106425b221979f.nl.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.fi.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.fi.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.fi.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.he.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.he.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.he.png differ
diff --git a/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.nl.png b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.nl.png
new file mode 100644
index 00000000..4e69314c
Binary files /dev/null and b/translated_images/playerRight.e4825f489e29f73719f8e3197ba0e5742e2ffbc178641009b57fe254c6abdc38.nl.png differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.fi.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.fi.jpg
new file mode 100644
index 00000000..67b13b24
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.fi.jpg differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.he.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.he.jpg
new file mode 100644
index 00000000..897095f0
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.he.jpg differ
diff --git a/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.nl.jpg b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.nl.jpg
new file mode 100644
index 00000000..353ef70a
Binary files /dev/null and b/translated_images/preview.9215f0a010074476f8ab66e6becf3c1b594a30cca0a28b88fb4f3f4821594dc0.nl.jpg differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.fi.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.fi.png
new file mode 100644
index 00000000..0fa86d8d
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.fi.png differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.he.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.he.png
new file mode 100644
index 00000000..fc399660
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.he.png differ
diff --git a/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.nl.png b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.nl.png
new file mode 100644
index 00000000..bf916080
Binary files /dev/null and b/translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.nl.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.fi.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.fi.png
new file mode 100644
index 00000000..5ade13fd
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.fi.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.he.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.he.png
new file mode 100644
index 00000000..c367d63f
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.he.png differ
diff --git a/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.nl.png b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.nl.png
new file mode 100644
index 00000000..2c0714da
Binary files /dev/null and b/translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.nl.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.fi.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.fi.png
new file mode 100644
index 00000000..c7c9afb7
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.fi.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.he.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.he.png
new file mode 100644
index 00000000..e7e1bf70
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.he.png differ
diff --git a/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.nl.png b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.nl.png
new file mode 100644
index 00000000..02aecc92
Binary files /dev/null and b/translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.nl.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.fi.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.fi.png
new file mode 100644
index 00000000..9b836f5f
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.fi.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.he.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.he.png
new file mode 100644
index 00000000..3a49cc7d
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.he.png differ
diff --git a/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.nl.png b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.nl.png
new file mode 100644
index 00000000..ed883632
Binary files /dev/null and b/translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.nl.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.fi.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.fi.png
new file mode 100644
index 00000000..bf761663
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.fi.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.he.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.he.png
new file mode 100644
index 00000000..55282705
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.he.png differ
diff --git a/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.nl.png b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.nl.png
new file mode 100644
index 00000000..8833f040
Binary files /dev/null and b/translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.nl.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.fi.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.fi.png
new file mode 100644
index 00000000..eb8464e4
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.fi.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.he.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.he.png
new file mode 100644
index 00000000..c591f07d
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.he.png differ
diff --git a/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.nl.png b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.nl.png
new file mode 100644
index 00000000..4f2b48f2
Binary files /dev/null and b/translated_images/screenshot.e7a5ad659e3645682a7d44bd944af8147012dc403b4965712a052214b42e77c1.nl.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.fi.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.fi.png
new file mode 100644
index 00000000..8b5f572b
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.fi.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.he.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.he.png
new file mode 100644
index 00000000..ede537e6
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.he.png differ
diff --git a/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.nl.png b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.nl.png
new file mode 100644
index 00000000..3c7ea0cd
Binary files /dev/null and b/translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.nl.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.fi.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.fi.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.fi.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.he.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.he.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.he.png differ
diff --git a/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.nl.png b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.nl.png
new file mode 100644
index 00000000..b962a2f1
Binary files /dev/null and b/translated_images/shield.1b9412b7ca6610ab21f8836483f4e1ec7835b7fe61617f2cead3ff3317ddd56f.nl.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.fi.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.fi.png
new file mode 100644
index 00000000..89d3d671
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.fi.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.he.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.he.png
new file mode 100644
index 00000000..eab1ff59
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.he.png differ
diff --git a/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.nl.png b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.nl.png
new file mode 100644
index 00000000..cd80c482
Binary files /dev/null and b/translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.nl.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.fi.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.fi.png
new file mode 100644
index 00000000..3954f79e
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.fi.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.he.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.he.png
new file mode 100644
index 00000000..98171855
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.he.png differ
diff --git a/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.nl.png b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.nl.png
new file mode 100644
index 00000000..e82c1900
Binary files /dev/null and b/translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.nl.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.fi.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.fi.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.fi.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.he.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.he.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.he.png differ
diff --git a/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.nl.png b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.nl.png
new file mode 100644
index 00000000..03018e7f
Binary files /dev/null and b/translated_images/speedLine.5bcabb93f48b5ae1fe081a6b8832ed314636560b7bb228889bfbeb75a0322490.nl.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.fi.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.fi.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.fi.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.he.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.he.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.he.png differ
diff --git a/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.nl.png b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.nl.png
new file mode 100644
index 00000000..c7f6f709
Binary files /dev/null and b/translated_images/spritesheet.bec82852290b14ee8f814b4173f8d823658151a2402c2be8f15b17159290d1ab.nl.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.fi.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.fi.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.fi.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.he.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.he.png
new file mode 100644
index 00000000..6c9a0c6b
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.he.png differ
diff --git a/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.nl.png b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.nl.png
new file mode 100644
index 00000000..7344ae88
Binary files /dev/null and b/translated_images/starBackground.a897b8acb1b0587dbb2cdbf8beeaa388269510bb3ac3b4165f0141dc893045a2.nl.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.fi.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.fi.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.fi.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.he.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.he.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.he.png differ
diff --git a/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.nl.png b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.nl.png
new file mode 100644
index 00000000..e38c77b7
Binary files /dev/null and b/translated_images/starBig.72e9c6d0d18f363d485fd26a32c346d269d465f6a87bc0ca5e94ecd34fcd7362.nl.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.fi.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.fi.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.fi.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.he.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.he.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.he.png differ
diff --git a/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.nl.png b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.nl.png
new file mode 100644
index 00000000..56bcfd58
Binary files /dev/null and b/translated_images/starSmall.ed78b961dbcd0898e8b9b721cbaaa8d54a0a1165a52a13f19650064add273eec.nl.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.fi.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.fi.png
new file mode 100644
index 00000000..8b5f572b
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.fi.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.he.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.he.png
new file mode 100644
index 00000000..ede537e6
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.he.png differ
diff --git a/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.nl.png b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.nl.png
new file mode 100644
index 00000000..3c7ea0cd
Binary files /dev/null and b/translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.nl.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.fi.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.fi.png
new file mode 100644
index 00000000..5d6f287b
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.fi.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.he.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.he.png
new file mode 100644
index 00000000..5f9c0fd3
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.he.png differ
diff --git a/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.nl.png b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.nl.png
new file mode 100644
index 00000000..26283234
Binary files /dev/null and b/translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.nl.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.fi.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.fi.png
new file mode 100644
index 00000000..2fbdc396
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.fi.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.he.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.he.png
new file mode 100644
index 00000000..9b01043f
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.he.png differ
diff --git a/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.nl.png b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.nl.png
new file mode 100644
index 00000000..89150b55
Binary files /dev/null and b/translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.nl.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.fi.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.fi.png
new file mode 100644
index 00000000..9394c7fd
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.fi.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.he.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.he.png
new file mode 100644
index 00000000..009f4723
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.he.png differ
diff --git a/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.nl.png b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.nl.png
new file mode 100644
index 00000000..ee6b0f2f
Binary files /dev/null and b/translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.nl.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.fi.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.fi.png
new file mode 100644
index 00000000..d6511189
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.fi.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.he.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.he.png
new file mode 100644
index 00000000..15bd4899
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.he.png differ
diff --git a/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.nl.png b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.nl.png
new file mode 100644
index 00000000..a67951c7
Binary files /dev/null and b/translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.nl.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.fi.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.fi.png
new file mode 100644
index 00000000..612a488a
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.fi.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.he.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.he.png
new file mode 100644
index 00000000..1793fd17
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.he.png differ
diff --git a/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.nl.png b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.nl.png
new file mode 100644
index 00000000..940f2e59
Binary files /dev/null and b/translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.nl.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.fi.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.fi.png
new file mode 100644
index 00000000..cb623c0f
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.fi.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.he.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.he.png
new file mode 100644
index 00000000..ec760094
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.he.png differ
diff --git a/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.nl.png b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.nl.png
new file mode 100644
index 00000000..a7b211d7
Binary files /dev/null and b/translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.nl.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.fi.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.fi.png
new file mode 100644
index 00000000..a8e88899
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.fi.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.he.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.he.png
new file mode 100644
index 00000000..bae63677
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.he.png differ
diff --git a/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.nl.png b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.nl.png
new file mode 100644
index 00000000..df3811e6
Binary files /dev/null and b/translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.nl.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.fi.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.fi.png
new file mode 100644
index 00000000..de77b229
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.fi.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.he.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.he.png
new file mode 100644
index 00000000..5a08bd2b
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.he.png differ
diff --git a/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.nl.png b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.nl.png
new file mode 100644
index 00000000..5ffb137a
Binary files /dev/null and b/translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.nl.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.fi.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.fi.png
new file mode 100644
index 00000000..f89bccc7
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.fi.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.he.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.he.png
new file mode 100644
index 00000000..1f9ac48b
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.he.png differ
diff --git a/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.nl.png b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.nl.png
new file mode 100644
index 00000000..d6af3483
Binary files /dev/null and b/translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.nl.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.fi.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.fi.png
new file mode 100644
index 00000000..b572c87a
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.fi.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.he.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.he.png
new file mode 100644
index 00000000..727ac92e
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.he.png differ
diff --git a/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.nl.png b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.nl.png
new file mode 100644
index 00000000..766d988f
Binary files /dev/null and b/translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.nl.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.fi.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.fi.png
new file mode 100644
index 00000000..5b0a8644
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.fi.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.he.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.he.png
new file mode 100644
index 00000000..f2bd7a55
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.he.png differ
diff --git a/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.nl.png b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.nl.png
new file mode 100644
index 00000000..293594ba
Binary files /dev/null and b/translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.nl.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.fi.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.fi.png
new file mode 100644
index 00000000..e440bb04
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.fi.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.he.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.he.png
new file mode 100644
index 00000000..78270534
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.he.png differ
diff --git a/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.nl.png b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.nl.png
new file mode 100644
index 00000000..7fabad39
Binary files /dev/null and b/translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.nl.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.fi.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.fi.png
new file mode 100644
index 00000000..1f506b74
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.fi.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.he.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.he.png
new file mode 100644
index 00000000..92ee89ec
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.he.png differ
diff --git a/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.nl.png b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.nl.png
new file mode 100644
index 00000000..9d8c8f8e
Binary files /dev/null and b/translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.nl.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.fi.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.fi.png
new file mode 100644
index 00000000..8171cb97
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.fi.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.he.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.he.png
new file mode 100644
index 00000000..8be56800
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.he.png differ
diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.nl.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.nl.png
new file mode 100644
index 00000000..d2169b08
Binary files /dev/null and b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.nl.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.fi.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.fi.png
new file mode 100644
index 00000000..15e29048
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.fi.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.he.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.he.png
new file mode 100644
index 00000000..006f34ea
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.he.png differ
diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.nl.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.nl.png
new file mode 100644
index 00000000..4d3b0f91
Binary files /dev/null and b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.nl.png differ
diff --git a/translations/fi/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/fi/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..61585f87
--- /dev/null
+++ b/translations/fi/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -0,0 +1,216 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c63675cfaf1d223b37bb9fecbfe7c252",
+  "translation_date": "2025-08-27T20:37:29+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "fi"
+}
+-->
+# Johdanto ohjelmointikieliin ja työkaluihin
+
+Tässä oppitunnissa käsitellään ohjelmointikielten perusteita. Aiheet, joita käsitellään, pätevät useimpiin nykyaikaisiin ohjelmointikieliin. "Työkalut"-osiossa opit hyödyllisestä ohjelmistosta, joka auttaa sinua kehittäjänä.
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.fi.png)  
+> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Ennakkokysely
+[Ennakkokysely](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Johdanto
+
+Tässä oppitunnissa käsitellään:
+
+- Mitä ohjelmointi on?  
+- Ohjelmointikielten tyypit  
+- Ohjelman peruselementit  
+- Hyödylliset ohjelmistot ja työkalut ammattilaiskehittäjälle  
+
+> Voit suorittaa tämän oppitunnin [Microsoft Learnissa](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Mitä ohjelmointi on?
+
+Ohjelmointi (tunnetaan myös nimellä koodaus) on prosessi, jossa kirjoitetaan ohjeita laitteelle, kuten tietokoneelle tai mobiililaitteelle. Kirjoitamme nämä ohjeet ohjelmointikielellä, jonka laite tulkitsee. Näitä ohjesarjoja voidaan kutsua eri nimillä, kuten *ohjelma*, *tietokoneohjelma*, *sovellus (app)* tai *suoritettava tiedosto*.
+
+*Ohjelma* voi olla mitä tahansa, mikä on kirjoitettu koodilla; verkkosivustot, pelit ja puhelinsovellukset ovat ohjelmia. Vaikka ohjelman voi luoda ilman koodin kirjoittamista, laitteen tulkitsema logiikka on todennäköisesti kirjoitettu koodilla. Ohjelma, joka *ajaa* tai *suorittaa* koodia, toteuttaa ohjeita. Laite, jolla luet tätä oppituntia, suorittaa ohjelmaa, joka näyttää sen näytölläsi.
+
+✅ Tee hieman tutkimusta: Kuka on historian ensimmäinen tietokoneohjelmoija?
+
+## Ohjelmointikielet
+
+Ohjelmointikielet mahdollistavat kehittäjien kirjoittaa ohjeita laitteelle. Laitteet ymmärtävät vain binäärikoodia (1:t ja 0:t), ja *useimmille* kehittäjille se ei ole kovin tehokas tapa kommunikoida. Ohjelmointikielet toimivat välineenä ihmisten ja tietokoneiden välisessä viestinnässä.
+
+Ohjelmointikielet voivat olla eri muodoissa ja palvella eri tarkoituksia. Esimerkiksi JavaScriptiä käytetään pääasiassa verkkosovelluksissa, kun taas Bashia käytetään pääasiassa käyttöjärjestelmissä.
+
+*Matalan tason kielet* vaativat yleensä vähemmän vaiheita laitteen ohjeiden tulkitsemiseksi kuin *korkean tason kielet*. Korkean tason kielten suosio perustuu kuitenkin niiden luettavuuteen ja tukeen. JavaScriptiä pidetään korkean tason kielenä.
+
+Seuraava koodi havainnollistaa eroa korkean tason kielen (JavaScript) ja matalan tason kielen (ARM-assembly) välillä.
+
+```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
+```
+
+Uskokaa tai älkää, *ne tekevät saman asian*: tulostavat Fibonacci-sekvenssin luvut 10 asti.
+
+✅ Fibonacci-sekvenssi [määritellään](https://en.wikipedia.org/wiki/Fibonacci_number) joukoksi lukuja, joissa jokainen luku on kahden edeltävän luvun summa, alkaen 0:sta ja 1:stä. Ensimmäiset 10 Fibonacci-sekvenssin lukua ovat 0, 1, 1, 2, 3, 5, 8, 13, 21 ja 34.
+
+## Ohjelman elementit
+
+Yksittäistä ohjetta ohjelmassa kutsutaan *lauseeksi*, ja sillä on yleensä merkki tai riviväli, joka osoittaa, missä ohje päättyy eli *päättyy*. Ohjelman päättymistapa vaihtelee kielen mukaan.
+
+Ohjelman lauseet voivat perustua käyttäjän tai muun lähteen antamiin tietoihin ohjeiden suorittamiseksi. Tiedot voivat muuttaa ohjelman toimintaa, joten ohjelmointikielissä on tapa tallentaa tietoja väliaikaisesti myöhempää käyttöä varten. Näitä kutsutaan *muuttujiksi*. Muuttujat ovat lauseita, jotka ohjeistavat laitteen tallentamaan tietoja muistiinsa. Muuttujat ohjelmissa ovat samanlaisia kuin algebran muuttujat, joilla on yksilöllinen nimi ja joiden arvo voi muuttua ajan myötä.
+
+On mahdollista, että jotkin lauseet eivät tule suoritetuiksi laitteella. Tämä tapahtuu yleensä kehittäjän suunnitelman mukaisesti tai vahingossa odottamattoman virheen sattuessa. Tällainen sovelluksen hallinta tekee siitä kestävämmän ja helpommin ylläpidettävän. Tyypillisesti nämä hallinnan muutokset tapahtuvat, kun tietyt ehdot täyttyvät. Yksi yleinen lause modernissa ohjelmoinnissa ohjelman suorittamisen hallintaan on `if..else`-lause.
+
+✅ Opit lisää tämän tyyppisistä lauseista seuraavissa oppitunneissa.
+
+## Työkalut
+
+[![Työkalut](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Työkalut")
+
+> 🎥 Klikkaa yllä olevaa kuvaa katsoaksesi videon työkaluista
+
+Tässä osiossa opit ohjelmistoista, jotka voivat olla erittäin hyödyllisiä, kun aloitat ammatillisen kehittäjän urasi.
+
+**Kehitysympäristö** on ainutlaatuinen joukko työkaluja ja ominaisuuksia, joita kehittäjä käyttää usein ohjelmistoa kirjoittaessaan. Osa näistä työkaluista on räätälöity kehittäjän erityistarpeisiin ja voi muuttua ajan myötä, jos kehittäjä muuttaa työskentelyprioriteettejaan, henkilökohtaisia projektejaan tai käyttämäänsä ohjelmointikieltä. Kehitysympäristöt ovat yhtä ainutlaatuisia kuin kehittäjät itse.
+
+### Editorit
+
+Yksi tärkeimmistä ohjelmistokehityksen työkaluista on editori. Editoreissa kirjoitat koodisi ja joskus myös suoritat sen.
+
+Kehittäjät luottavat editoreihin useista syistä:
+
+- *Virheenkorjaus* auttaa löytämään virheitä ja ongelmia käymällä koodia läpi rivi riviltä. Joissakin editoreissa on virheenkorjausominaisuuksia, jotka voidaan mukauttaa ja lisätä tiettyjä ohjelmointikieliä varten.  
+- *Syntaksin korostus* lisää värejä ja tekstimuotoiluja koodiin, mikä helpottaa sen lukemista. Useimmat editorit sallivat mukautetun syntaksin korostuksen.  
+- *Laajennukset ja integraatiot* ovat kehittäjien kehittämiä erikoistyökaluja. Nämä työkalut eivät ole osa editorin perusominaisuuksia. Esimerkiksi monet kehittäjät dokumentoivat koodinsa selittääkseen, miten se toimii. He voivat asentaa oikeinkirjoituksen tarkistuslaajennuksen löytääkseen kirjoitusvirheitä dokumentaatiosta. Useimmat laajennukset on tarkoitettu tiettyyn editoriin, ja useimmissa editoreissa on tapa etsiä saatavilla olevia laajennuksia.  
+- *Mukauttaminen* mahdollistaa kehittäjien luoda ainutlaatuisen kehitysympäristön omiin tarpeisiinsa. Useimmat editorit ovat erittäin muokattavissa ja voivat myös sallia kehittäjien luoda omia laajennuksiaan.
+
+#### Suositut editorit ja verkkokehityslaajennukset
+
+- [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/)  
+
+### Selaimet
+
+Toinen tärkeä työkalu on selain. Verkkokehittäjät luottavat selaimeen nähdäkseen, miten heidän koodinsa toimii verkossa. Selainta käytetään myös näyttämään verkkosivun visuaaliset elementit, jotka on kirjoitettu editorissa, kuten HTML.
+
+Monissa selaimissa on *kehittäjätyökaluja* (DevTools), jotka sisältävät joukon hyödyllisiä ominaisuuksia ja tietoja, jotka auttavat kehittäjiä keräämään ja tallentamaan tärkeitä tietoja sovelluksestaan. Esimerkiksi: Jos verkkosivulla on virheitä, on joskus hyödyllistä tietää, milloin ne tapahtuivat. Selaimen kehittäjätyökalut voidaan määrittää tallentamaan nämä tiedot.
+
+#### Suositut selaimet ja kehittäjätyökalut
+
+- [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)  
+
+### Komentorivityökalut
+
+Jotkut kehittäjät suosivat vähemmän graafista näkymää päivittäisiin tehtäviinsä ja luottavat komentoriviin niiden suorittamisessa. Koodin kirjoittaminen vaatii paljon kirjoittamista, ja jotkut kehittäjät haluavat olla keskeyttämättä työskentelyään näppäimistöllä. He käyttävät näppäinoikoteitä vaihtaakseen työpöytäikkunoiden välillä, työskennelläkseen eri tiedostoissa ja käyttää työkaluja. Useimmat tehtävät voidaan suorittaa hiirellä, mutta yksi komentorivin eduista on, että paljon voidaan tehdä komentorivityökaluilla ilman tarvetta vaihtaa hiiren ja näppäimistön välillä. Toinen komentorivin etu on, että se on muokattavissa, ja voit tallentaa mukautetun kokoonpanon, muuttaa sitä myöhemmin ja tuoda sen muihin kehityskoneisiin. Koska kehitysympäristöt ovat niin ainutlaatuisia jokaiselle kehittäjälle, jotkut välttävät komentorivin käyttöä, jotkut luottavat siihen täysin, ja jotkut suosivat näiden kahden yhdistelmää.
+
+### Suositut komentorivivaihtoehdot
+
+Komentorivivaihtoehdot vaihtelevat käyttämäsi käyttöjärjestelmän mukaan.
+
+*💻 = esiasennettu käyttöjärjestelmään.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻  
+- [Komentorivi](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (tunnetaan myös nimellä 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)  
+
+#### Suositut komentorivityökalut
+
+- [Git](https://git-scm.com/) (💻 useimmissa käyttöjärjestelmissä)  
+- [NPM](https://www.npmjs.com/)  
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)  
+
+### Dokumentaatio
+
+Kun kehittäjä haluaa oppia jotain uutta, hän todennäköisesti kääntyy dokumentaation puoleen oppiakseen, miten sitä käytetään. Kehittäjät luottavat usein dokumentaatioon oppiakseen käyttämään työkaluja ja kieliä oikein sekä saadakseen syvempää tietoa niiden toiminnasta.
+
+#### Suosittu verkkokehityksen dokumentaatio
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozillalta, [Firefox](https://www.mozilla.org/firefox/)-selaimen julkaisijoilta  
+- [Frontend Masters](https://frontendmasters.com/learn/)  
+- [Web.dev](https://web.dev), Googlelta, [Chrome](https://www.google.com/chrome/)-selaimen julkaisijoilta  
+- [Microsoftin oma kehittäjädokumentaatio](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [Microsoft Edge](https://www.microsoft.com/edge)-selaimelle  
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)  
+
+✅ Tee tutkimusta: Nyt kun tiedät verkkokehittäjän ympäristön perusteet, vertaa sitä verkkosuunnittelijan ympäristöön.
+
+---
+
+## 🚀 Haaste
+
+Vertaa joitakin ohjelmointikieliä. Mitkä ovat JavaScriptin ja Javan ainutlaatuiset piirteet? Entä COBOL ja Go?
+
+## Oppitunnin jälkeinen kysely
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Kertaus ja itseopiskelu
+
+Tutki hieman eri kieliä, joita ohjelmoija voi käyttää. Yritä kirjoittaa rivi yhdellä kielellä ja kirjoita se sitten kahdella muulla. Mitä opit?
+
+## Tehtävä
+
+[Dokumentaation lukeminen](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/fi/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..442c23c0
--- /dev/null
+++ b/translations/fi/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-27T20:39:33+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Dokumentaation lukeminen
+
+## Ohjeet
+
+Verkkokehittäjällä voi olla tarvetta monille työkaluille, jotka löytyvät [MDN-dokumentaatiosta asiakaspuolen työkaluille](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Valitse 3 työkalua, joita ei käsitelty oppitunnilla, selitä miksi verkkokehittäjä käyttäisi niitä, ja etsi työkalu, joka kuuluu tähän kategoriaan ja jaa sen dokumentaatio. Älä käytä samaa työkaluesimerkkiä kuin MDN-dokumentaatiossa.
+
+## Arviointikriteerit
+
+Erinomainen | Riittävä | Parannettavaa
+--- | --- | -- |
+|Selitetty, miksi verkkokehittäjä käyttäisi työkalua| Selitetty miten, mutta ei miksi kehittäjä käyttäisi työkalua| Ei mainittu miten tai miksi kehittäjä käyttäisi työkalua  |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/1-getting-started-lessons/2-github-basics/README.md b/translations/fi/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..7075a7df
--- /dev/null
+++ b/translations/fi/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,339 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-27T20:31:24+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "fi"
+}
+-->
+# Johdanto GitHubiin
+
+Tässä oppitunnissa käsitellään GitHubin perusteita, joka on alusta koodin isännöintiin ja muutosten hallintaan.
+
+![Johdanto GitHubiin](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.fi.png)
+> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Ennakkokysely
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Johdanto
+
+Tässä oppitunnissa käsitellään:
+
+- työn seuraamista omalla koneellasi
+- projektien tekemistä yhdessä muiden kanssa
+- avoimen lähdekoodin ohjelmistojen kehittämistä
+
+### Esivaatimukset
+
+Ennen kuin aloitat, tarkista, onko Git asennettu. Kirjoita terminaaliin:  
+`git --version`
+
+Jos Git ei ole asennettu, [lataa Git](https://git-scm.com/downloads). Sen jälkeen määritä paikallinen Git-profiilisi terminaalissa:
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+Voit tarkistaa, onko Git jo määritetty, kirjoittamalla:  
+`git config --list`
+
+Tarvitset myös GitHub-tilin, koodieditorin (esim. Visual Studio Code) ja pääsyn terminaaliin (tai komentokehotteeseen).
+
+Siirry osoitteeseen [github.com](https://github.com/) ja luo tili, jos sinulla ei vielä ole sellaista, tai kirjaudu sisään ja täytä profiilisi.
+
+✅ GitHub ei ole ainoa koodivarasto maailmassa; niitä on muitakin, mutta GitHub on tunnetuin.
+
+### Valmistelut
+
+Tarvitset sekä koodiprojektin sisältävän kansion paikallisella koneellasi (kannettava tai PC) että julkisen GitHub-repositorion, joka toimii esimerkkinä siitä, miten voit osallistua muiden projekteihin.
+
+---
+
+## Koodin hallinta
+
+Oletetaan, että sinulla on paikallinen kansio, jossa on koodiprojekti, ja haluat alkaa seurata edistymistäsi käyttämällä git-versiohallintajärjestelmää. Jotkut vertaavat gitin käyttöä rakkauskirjeen kirjoittamiseen tulevaisuuden itsellesi. Kun luet commit-viestejäsi päivien, viikkojen tai kuukausien kuluttua, pystyt muistamaan, miksi teit tietyn päätöksen, tai "perumaan" muutoksen – kunhan kirjoitat hyviä commit-viestejä.
+
+### Tehtävä: Luo repository ja commitoi koodi  
+
+> Katso video  
+> 
+> [![Git ja GitHub perusteet -video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Luo repository GitHubissa**. GitHub.com-sivustolla, repositories-välilehdellä tai oikean yläkulman navigointipalkista, etsi **new repo** -painike.
+
+   1. Anna repositoryllesi (kansiollesi) nimi.
+   1. Valitse **create repository**.
+
+1. **Siirry työskentelykansioon**. Terminaalissa siirry kansioon (tunnetaan myös hakemistona), jota haluat alkaa seurata. Kirjoita:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Alusta git-repository**. Projektissasi kirjoita:
+
+   ```bash
+   git init
+   ```
+
+1. **Tarkista tila**. Tarkista repositoryn tila kirjoittamalla:
+
+   ```bash
+   git status
+   ```
+
+   Tuloste voi näyttää tältä:
+
+   ```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
+   ```
+
+   Tyypillisesti `git status` -komento kertoo esimerkiksi, mitkä tiedostot ovat valmiita _tallennettavaksi_ repositoryyn tai sisältävät muutoksia, jotka haluat säilyttää.
+
+1. **Lisää kaikki tiedostot seurattavaksi**  
+   Tätä kutsutaan myös tiedostojen "stagingiksi" tai lisäämiseksi staging-alueelle.
+
+   ```bash
+   git add .
+   ```
+
+   `git add` ja `.` -argumentti tarkoittavat, että kaikki tiedostosi ja muutoksesi lisätään seurattavaksi.
+
+1. **Lisää valitut tiedostot seurattavaksi**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Tämä auttaa lisäämään vain valitut tiedostot staging-alueelle, kun et halua commitata kaikkia tiedostoja kerralla.
+
+1. **Poista kaikkien tiedostojen staging**
+
+   ```bash
+   git reset
+   ```
+
+   Tämä komento auttaa poistamaan kaikkien tiedostojen stagingin kerralla.
+
+1. **Poista tietyn tiedoston staging**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Tämä komento auttaa poistamaan vain tietyn tiedoston stagingin, jota et halua sisällyttää seuraavaan commit-viestiin.
+
+1. **Työn tallentaminen**. Tässä vaiheessa olet lisännyt tiedostot niin sanotulle _staging-alueelle_. Paikka, jossa Git seuraa tiedostojasi. Muutoksen tekemiseksi pysyväksi sinun täytyy _commitata_ tiedostot. Luo _commit_ käyttämällä `git commit` -komentoa. _Commit_ edustaa tallennuspistettä repositoryn historiassa. Kirjoita seuraava komento luodaksesi _commit_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Tämä commitoi kaikki tiedostosi ja lisää viestin "first commit". Tulevaisuudessa commit-viestien tulisi olla kuvaavampia, jotta ne välittävät, millaisia muutoksia olet tehnyt.
+
+1. **Yhdistä paikallinen Git-repository GitHubiin**. Git-repository on hyödyllinen koneellasi, mutta jossain vaiheessa haluat varmuuskopioida tiedostosi ja kutsua muita ihmisiä työskentelemään kanssasi repositoryssäsi. Yksi loistava paikka tehdä tämä on GitHub. Muista, että olemme jo luoneet repositoryn GitHubissa, joten meidän tarvitsee vain yhdistää paikallinen Git-repository GitHubiin. Komento `git remote add` tekee juuri tämän. Kirjoita seuraava komento:
+
+   > Huomaa, ennen kuin kirjoitat komennon, siirry GitHub-repositoryn sivulle löytääksesi repositoryn URL-osoitteen. Käytä sitä alla olevassa komennossa. Korvaa ```https://github.com/username/repository_name.git``` GitHub-URL-osoitteellasi.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Tämä luo _remote_-yhteyden nimeltä "origin", joka osoittaa aiemmin luomaasi GitHub-repositoryyn.
+
+1. **Lähetä paikalliset tiedostot GitHubiin**. Tähän mennessä olet luonut _yhteyden_ paikallisen repositoryn ja GitHub-repositoryn välille. Lähetä nämä tiedostot GitHubiin seuraavalla komennolla `git push`, kuten näin:
+
+   > Huomaa, haaran nimi voi olla oletuksena eri kuin ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Tämä lähettää commitisi "main"-haaraan GitHubissa.
+
+2. **Lisää lisää muutoksia**. Jos haluat jatkaa muutosten tekemistä ja lähettää niitä GitHubiin, sinun tarvitsee vain käyttää seuraavia kolmea komentoa:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Vinkki: Saatat haluta käyttää `.gitignore`-tiedostoa estääksesi tiedostojen, joita et halua seurata, näkymisen GitHubissa – kuten muistiinpanotiedosto, jota säilytät samassa kansiossa, mutta jolla ei ole paikkaa julkisessa repositoryssä. Löydät `.gitignore`-tiedostojen malleja osoitteesta [.gitignore templates](https://github.com/github/gitignore).
+
+#### Commit-viestit
+
+Hyvä Git commit -aiherivi täydentää seuraavan lauseen:  
+Jos tämä commit toteutetaan, se <aiherivisi tähän>
+
+Aiherivissä käytä käskymuotoa ja nykyhetkeä: "muuta" eikä "muutettu" eikä "muuttaa".  
+Kuten aiherivissä, myös rungossa (valinnainen) käytä käskymuotoa ja nykyhetkeä. Rungon tulisi sisältää muutoksen motivaatio ja verrata sitä aiempaan käyttäytymiseen. Selität `miksi`, et `miten`.
+
+✅ Käytä muutama minuutti GitHubissa surffaamiseen. Löydätkö todella hyvän commit-viestin? Löydätkö todella minimaalisen? Mitä tietoa mielestäsi on tärkeintä ja hyödyllisintä välittää commit-viestissä?
+
+### Tehtävä: Tee yhteistyötä
+
+GitHubiin tiedostojen laittamisen pääsyy oli mahdollistaa yhteistyö muiden kehittäjien kanssa.
+
+## Työskentely projekteissa muiden kanssa
+
+> Katso video  
+>
+> [![Git ja GitHub perusteet -video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+Repositoryssäsi siirry kohtaan `Insights > Community` nähdäksesi, miten projektisi vertautuu suositeltuihin yhteisön standardeihin.
+
+   Tässä on joitain asioita, jotka voivat parantaa GitHub-repositoryäsi:
+   - **Kuvaus**. Lisäsitkö projektillesi kuvauksen?
+   - **README**. Lisäsitkö README-tiedoston? GitHub tarjoaa ohjeita [README-tiedoston kirjoittamiseen](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **Ohjeet osallistumiseen**. Onko projektissasi [ohjeet osallistumiseen](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
+   - **Toimintaohjeet**. Onko projektissasi [toimintaohjeet](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
+   - **Lisenssi**. Ehkä tärkeimpänä, onko projektissasi [lisenssi](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+Kaikki nämä resurssit hyödyttävät uusien tiimin jäsenten perehdyttämistä. Ja nämä ovat tyypillisesti asioita, joita uudet osallistujat tarkastelevat ennen kuin edes katsovat koodiasi, selvittääkseen, onko projektisi oikea paikka heidän ajankäytölleen.
+
+✅ README-tiedostot, vaikka niiden valmistelu vie aikaa, jäävät usein kiireisten ylläpitäjien huomiotta. Löydätkö esimerkin erityisen kuvaavasta README-tiedostosta? Huomaa: on olemassa joitain [työkaluja hyvien README-tiedostojen luomiseen](https://www.makeareadme.com/), joita saatat haluta kokeilla.
+
+### Tehtävä: Yhdistä koodia
+
+Osallistumisohjeet auttavat ihmisiä osallistumaan projektiin. Ne selittävät, millaisia osallistumisia etsit ja miten prosessi toimii. Osallistujien täytyy käydä läpi sarja vaiheita voidakseen osallistua repositoryysi GitHubissa:
+
+1. **Forkkaa repositorysi**. Haluat todennäköisesti ihmisten _forkkaavan_ projektisi. Forkkaaminen tarkoittaa repositoryn kopion luomista heidän GitHub-profiiliinsa.
+1. **Kloonaa**. Tämän jälkeen he kloonaavat projektin paikalliselle koneelleen.
+1. **Luo haara**. Pyydä heitä luomaan _haara_ työlleen.
+1. **Keskity yhteen alueeseen**. Pyydä osallistujia keskittymään yhteen asiaan kerrallaan – näin mahdollisuudet, että voit _yhdistää_ heidän työnsä, ovat suuremmat. Kuvittele, että he korjaavat virheen, lisäävät uuden ominaisuuden ja päivittävät useita testejä – entä jos haluat tai voit toteuttaa vain 2/3 tai 1/3 muutoksista?
+
+✅ Kuvittele tilanne, jossa haarat ovat erityisen kriittisiä hyvän koodin kirjoittamisessa ja julkaisemisessa. Mitä käyttötapauksia voit keksiä?
+
+> Huomaa, ole muutos, jonka haluat nähdä maailmassa, ja luo haaroja myös omalle työllesi. Kaikki commitit, jotka teet, tehdään haarassa, jossa olet tällä hetkellä "checkoutattuna". Käytä `git status` nähdäksesi, missä haarassa olet.
+
+Käydään läpi osallistujan työnkulku. Oletetaan, että osallistuja on jo _forkannut_ ja _kloonannut_ repositoryn, joten heillä on Git-repository valmiina työstettäväksi paikallisella koneellaan:
+
+1. **Luo haara**. Käytä komentoa `git branch` luodaksesi haaran, joka sisältää muutokset, joita he aikovat kontribuoida:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Vaihda työhaaraan**. Vaihda määritettyyn haaraan ja päivitä työhakemisto `git switch` -komennolla:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Tee työtä**. Tässä vaiheessa haluat lisätä muutoksesi. Älä unohda kertoa Gitille niistä seuraavilla komennoilla:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Varmista, että annat commitille hyvän nimen, omaksi hyödyksesi sekä repositoryn ylläpitäjän hyödyksi, jota autat.
+
+1. **Yhdistä työsi `main`-haaraan**. Jossain vaiheessa olet valmis työskentelemään ja haluat yhdistää työsi `main`-haaraan. `Main`-haara on saattanut muuttua sillä välin, joten varmista, että päivität sen ensin uusimpaan versioon seuraavilla komennoilla:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   Tässä vaiheessa haluat varmistaa, että mahdolliset _konfliktit_, tilanteet, joissa Git ei voi helposti _yhdistää_ muutoksia, tapahtuvat työhaarassasi. Siksi suorita seuraavat komennot:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Tämä tuo kaikki muutokset `main`-haarasta haaraasi, ja toivottavasti voit jatkaa. Jos et voi, VS Code kertoo, missä Git on _epävarma_, ja muokkaat kyseisiä tiedostoja ilmoittaaksesi, mikä sisältö on tarkin.
+
+1. **Lähetä työsi GitHubiin**. Työsi lähettäminen GitHubiin tarkoittaa kahta asiaa: haaran työntämistä repositoryysi ja PR:n (Pull Request) avaamista.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Yllä oleva komento luo haaran forkatussa repositoryssäsi.
+
+1. **Avaa PR**. Seuraavaksi haluat avata PR:n. Siirry forkattuun repositoryyn GitHubissa. Näet GitHubissa ilmoituksen, jossa kysytään, haluatko luoda uuden PR:n. Klikkaa sitä, ja sinut ohjataan käyttöliittymään, jossa voit muuttaa commit-viestin otsikkoa ja antaa sille sopivamman kuvauksen. Nyt repositoryn ylläpitäjä, jonka forkkasit, näkee tämän PR:n ja _sormet ristissä_ arvostaa ja _yhdistää_ PR:si. Olet nyt kontribuoija, jee :)
+
+1. **Siivoa**. On hyvä tapa _siivota_ onnistuneen PR:n yhdistämisen jälkeen. Haluat siivota sekä paikallisen haaran että haaran, jonka työnsit GitHubiin. Poista se ensin paikallisesti seuraavalla komennolla:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+Varmista, että siirryt forkattuun reposi GitHub-sivulle ja poistat etähaaran, jonka juuri työnsit sinne.
+
+`Pull request` voi kuulostaa hassulta termiltä, koska oikeastaan haluat työntää muutoksesi projektiin. Mutta ylläpitäjän (projektin omistajan) tai ydintiimin täytyy harkita muutoksiasi ennen kuin ne yhdistetään projektin "päähaaraan", joten oikeastaan pyydät ylläpitäjältä päätöstä muutoksesta.
+
+Pull request on paikka, jossa voidaan vertailla ja keskustella haaran tuomista eroista arvostelujen, kommenttien, integroituja testien ja muiden työkalujen avulla. Hyvä pull request noudattaa suurin piirtein samoja sääntöjä kuin commit-viesti. Voit lisätä viittauksen ongelmaan issue trackerissa, esimerkiksi kun työsi korjaa jonkin ongelman. Tämä tehdään käyttämällä `#`-merkkiä ja ongelman numeroa. Esimerkiksi `#97`.
+
+🤞Toivotaan, että kaikki tarkistukset menevät läpi ja projektin omistaja(t) yhdistävät muutoksesi projektiin🤞
+
+Päivitä nykyinen paikallinen työhaara kaikilla uusilla commit-viesteillä vastaavasta etähaarasta GitHubissa:
+
+`git pull`
+
+## Kuinka osallistua avoimen lähdekoodin projekteihin
+
+Aloitetaan etsimällä GitHubista sinua kiinnostava repository (tai **repo**), johon haluaisit tehdä muutoksen. Haluat kopioida sen sisällön koneellesi.
+
+✅ Hyvä tapa löytää 'aloittelijaystävällisiä' repoja on [etsiä tagilla 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Kopioi repo paikallisesti](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.fi.png)
+
+Koodin kopioimiseen on useita tapoja. Yksi tapa on "klonata" repositoryn sisältö HTTPS:n, SSH:n tai GitHub CLI:n (Command Line Interface) avulla.
+
+Avaa terminaali ja kloonaa repository näin:
+`git clone https://github.com/ProjectURL`
+
+Työskentelyä varten siirry oikeaan kansioon:
+`cd ProjectURL`
+
+Voit myös avata koko projektin käyttämällä [Codespacesia](https://github.com/features/codespaces), GitHubin sisäänrakennettua koodieditoria/pilvikehitysympäristöä, tai [GitHub Desktopia](https://desktop.github.com/).
+
+Lopuksi voit ladata koodin zipattuna kansiona.
+
+### Muutama mielenkiintoinen asia GitHubista
+
+Voit tähdittää, seurata ja/tai "forkata" minkä tahansa julkisen repositoryn GitHubissa. Löydät tähdittämäsi repositoryt oikean yläkulman pudotusvalikosta. Se on kuin kirjanmerkin lisääminen, mutta koodille.
+
+Projekteilla on issue tracker, yleensä GitHubissa "Issues"-välilehdellä, ellei toisin mainita, jossa ihmiset keskustelevat projektiin liittyvistä ongelmista. Pull Requests -välilehdellä ihmiset keskustelevat ja arvioivat meneillään olevia muutoksia.
+
+Projekteilla voi myös olla keskusteluja foorumeilla, postituslistoilla tai keskustelukanavilla, kuten Slack, Discord tai IRC.
+
+✅ Tutustu uuteen GitHub-repoosi ja kokeile muutamia asioita, kuten asetusten muokkaamista, tiedon lisäämistä repoosi ja projektin luomista (esim. Kanban-taulu). GitHubissa on paljon mahdollisuuksia!
+
+---
+
+## 🚀 Haaste
+
+Työskentele yhdessä ystävän kanssa toistenne koodin parissa. Luo projekti yhteistyössä, forkkaa koodi, luo haaroja ja yhdistä muutoksia.
+
+## Luentojälkeinen kysely
+[Luentojälkeinen kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Kertaus ja itseopiskelu
+
+Lue lisää [avoimen lähdekoodin projekteihin osallistumisesta](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git-pikaopas](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Harjoittele, harjoittele, harjoittele. GitHubilla on loistavia oppimispolkuja saatavilla osoitteessa [skills.github.com](https://skills.github.com):
+
+- [Ensimmäinen viikko GitHubissa](https://skills.github.com/#first-week-on-github)
+
+Löydät myös edistyneempiä kursseja.
+
+## Tehtävä
+
+Suorita [Ensimmäinen viikko GitHubissa -kurssi](https://skills.github.com/#first-week-on-github)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/1-getting-started-lessons/3-accessibility/README.md b/translations/fi/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..69164ca5
--- /dev/null
+++ b/translations/fi/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,244 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-27T20:34:02+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "fi"
+}
+-->
+# Luodaan saavutettavia verkkosivuja
+
+![Kaikki saavutettavuudesta](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.fi.png)  
+> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Ennakkokysely
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Verkon voima on sen universaalisuudessa. Pääsy kaikille, riippumatta vammaisuudesta, on olennainen osa.
+>
+> \- Sir Timothy Berners-Lee, W3C:n johtaja ja World Wide Webin keksijä
+
+Tämä lainaus korostaa täydellisesti saavutettavien verkkosivujen tärkeyttä. Sovellus, johon kaikki eivät pääse käsiksi, on määritelmällisesti poissulkeva. Verkkokehittäjinä meidän tulisi aina pitää saavutettavuus mielessä. Kun keskityt tähän alusta alkaen, olet hyvällä tiellä varmistaaksesi, että kaikki voivat käyttää luomiasi sivuja. Tässä oppitunnissa opit työkaluista, jotka auttavat varmistamaan verkkosivujesi saavutettavuuden, ja siitä, miten rakentaa saavutettavuus huomioiden.
+
+> Voit käydä tämän oppitunnin läpi [Microsoft Learnissa](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Käytettävät työkalut
+
+### Ruudunlukijat
+
+Yksi tunnetuimmista saavutettavuustyökaluista on ruudunlukijat.
+
+[Ruudunlukijat](https://en.wikipedia.org/wiki/Screen_reader) ovat yleisesti käytettyjä apuvälineitä näkövammaisille. Kun käytämme aikaa varmistaaksemme, että selain välittää haluamamme tiedot oikein, meidän on myös varmistettava, että ruudunlukija tekee samoin.
+
+Perustasolla ruudunlukija lukee sivun ylhäältä alas ääneen. Jos sivusi on pelkkää tekstiä, lukija välittää tiedot samalla tavalla kuin selain. Verkkosivut ovat kuitenkin harvoin pelkkää tekstiä; ne sisältävät linkkejä, grafiikkaa, värejä ja muita visuaalisia elementtejä. On tärkeää varmistaa, että ruudunlukija lukee nämä tiedot oikein.
+
+Jokaisen verkkokehittäjän tulisi tutustua ruudunlukijaan. Kuten yllä korostettiin, se on käyttäjiesi käyttämä asiakasohjelma. Samalla tavalla kuin tunnet selaimen toiminnan, sinun tulisi oppia, miten ruudunlukija toimii. Onneksi ruudunlukijat ovat sisäänrakennettuja useimpiin käyttöjärjestelmiin.
+
+Joissakin selaimissa on myös sisäänrakennettuja työkaluja ja laajennuksia, jotka voivat lukea tekstiä ääneen tai tarjota perusnavigointiominaisuuksia, kuten [nämä saavutettavuuteen keskittyvät Edge-selaimen työkalut](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Nämä ovat myös tärkeitä saavutettavuustyökaluja, mutta ne toimivat hyvin eri tavalla kuin ruudunlukijat, eikä niitä tule sekoittaa ruudunlukijoiden testityökaluihin.
+
+✅ Kokeile ruudunlukijaa ja selaimen tekstinlukijaa. Windowsissa [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) on oletuksena mukana, ja [JAWS](https://webaim.org/articles/jaws/) ja [NVDA](https://www.nvaccess.org/about-nvda/) voidaan asentaa. macOS:ssä ja iOS:ssä [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) on oletuksena asennettuna.
+
+### Zoomaus
+
+Toinen näkövammaisten yleisesti käyttämä työkalu on zoomaus. Yksinkertaisin zoomauksen muoto on staattinen zoomaus, jota ohjataan `Control + plus-merkki (+)` tai pienentämällä näytön resoluutiota. Tämä zoomaus suurentaa koko sivun, joten [responsiivisen suunnittelun](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) käyttäminen on tärkeää hyvän käyttökokemuksen tarjoamiseksi suurennetuilla zoomaustasoilla.
+
+Toinen zoomauksen tyyppi käyttää erikoisohjelmistoa suurentaakseen yhden alueen näytöstä ja liikkuakseen sen yli, aivan kuten oikeaa suurennuslasia käyttäen. Windowsissa [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) on sisäänrakennettu, ja [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) on kolmannen osapuolen suurennusohjelmisto, jossa on enemmän ominaisuuksia ja suurempi käyttäjäkunta. Sekä macOS:ssä että iOS:ssä on sisäänrakennettu suurennusohjelmisto nimeltä [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Kontrastin tarkistimet
+
+Verkkosivujen värit on valittava huolellisesti värisokeiden käyttäjien tai niiden henkilöiden tarpeisiin, joilla on vaikeuksia nähdä matalan kontrastin värejä.
+
+✅ Testaa suosikkisivustosi värien käyttöä selainlaajennuksella, kuten [WCAG:n värintarkistimella](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Mitä opit?
+
+### Lighthouse
+
+Selaimesi kehittäjätyökalujen alueelta löydät Lighthouse-työkalun. Tämä työkalu on tärkeä saadaksesi ensimmäisen näkymän verkkosivuston saavutettavuuteen (sekä muihin analyyseihin). Vaikka Lighthouseen ei pidä luottaa yksinomaan, 100 %:n tulos on erittäin hyödyllinen lähtökohta.
+
+✅ Etsi Lighthouse selaimesi kehittäjätyökalupaneelista ja suorita analyysi millä tahansa sivustolla. Mitä huomaat?
+
+## Saavutettavuuden huomioiminen suunnittelussa
+
+Saavutettavuus on suhteellisen laaja aihe. Avuksesi on saatavilla lukuisia resursseja.
+
+- [Accessible U - Minnesotan yliopisto](https://accessibility.umn.edu/your-role/web-developers)
+
+Vaikka emme voi kattaa kaikkia saavutettavien sivustojen luomisen osa-alueita, alla on joitakin keskeisiä periaatteita, jotka haluat toteuttaa. Saavutettavan sivun suunnittelu alusta alkaen on **aina** helpompaa kuin olemassa olevan sivun muuttaminen saavutettavaksi.
+
+## Hyvät näyttöperiaatteet
+
+### Väriystävälliset paletit
+
+Ihmiset näkevät maailman eri tavoin, ja tämä koskee myös värejä. Kun valitset sivustollesi värimaailmaa, sinun tulisi varmistaa, että se on kaikkien saavutettavissa. Yksi loistava [työkalu väripalettien luomiseen on Color Safe](http://colorsafe.co/).
+
+✅ Tunnista verkkosivusto, joka käyttää värejä erittäin ongelmallisesti. Miksi?
+
+### Käytä oikeaa HTML:ää
+
+CSS:n ja JavaScriptin avulla on mahdollista saada mikä tahansa elementti näyttämään miltä tahansa ohjausobjektilta. `<span>`-elementtiä voisi käyttää luomaan `<button>` ja `<b>` voisi muuttua hyperlinkiksi. Vaikka tämä saattaa olla helpompaa tyylitellä, se ei välitä mitään ruudunlukijalle. Käytä asianmukaista HTML:ää, kun luot ohjausobjekteja sivulle. Jos haluat hyperlinkin, käytä `<a>`. Oikean HTML:n käyttäminen oikeaan ohjausobjektiin tunnetaan nimellä semanttisen HTML:n käyttö.
+
+✅ Mene mille tahansa verkkosivustolle ja tarkista, käyttävätkö suunnittelijat ja kehittäjät HTML:ää oikein. Löydätkö painikkeen, jonka pitäisi olla linkki? Vihje: napsauta hiiren oikealla painikkeella ja valitse selaimessasi 'Näytä sivun lähdekoodi' nähdäksesi taustalla olevan koodin.
+
+### Luo kuvaileva otsikkohierarkia
+
+Ruudunlukijan käyttäjät [luottavat vahvasti otsikoihin](https://webaim.org/projects/screenreadersurvey8/#finding) löytääkseen tietoa ja navigoidakseen sivulla. Kuvailevien otsikkosisältöjen kirjoittaminen ja semanttisten otsikkotunnisteiden käyttäminen ovat tärkeitä helposti navigoitavan sivuston luomisessa ruudunlukijan käyttäjille.
+
+### Käytä hyviä visuaalisia vihjeitä
+
+CSS tarjoaa täydellisen hallinnan minkä tahansa elementin ulkonäöstä sivulla. Voit luoda tekstikenttiä ilman ääriviivoja tai hyperlinkkejä ilman alleviivausta. Valitettavasti näiden vihjeiden poistaminen voi tehdä siitä haastavampaa henkilöille, jotka ovat riippuvaisia niistä tunnistaakseen ohjaustyypin.
+
+## Linkkitekstin tärkeys
+
+Hyperlinkit ovat keskeisiä verkossa navigoimisessa. Siksi on tärkeää varmistaa, että ruudunlukija voi lukea linkit oikein, jotta kaikki käyttäjät voivat navigoida sivustollasi.
+
+### Ruudunlukijat ja linkit
+
+Kuten odotit, ruudunlukijat lukevat linkkitekstin samalla tavalla kuin ne lukevat muuta tekstiä sivulla. Tämän mielessä alla oleva teksti saattaa tuntua täysin hyväksyttävältä.
+
+> Pikkupingviini, jota joskus kutsutaan keijupingviiniksi, on maailman pienin pingviini. [Klikkaa tästä](https://en.wikipedia.org/wiki/Little_penguin) saadaksesi lisätietoja.
+
+> Pikkupingviini, jota joskus kutsutaan keijupingviiniksi, on maailman pienin pingviini. Vieraile https://en.wikipedia.org/wiki/Little_penguin saadaksesi lisätietoja.
+
+> **HUOM** Kuten kohta luet, sinun ei tulisi **koskaan** luoda linkkejä, jotka näyttävät yllä olevilta.
+
+Muista, että ruudunlukijat ovat erilainen käyttöliittymä kuin selaimet, ja niillä on erilainen ominaisuusjoukko.
+
+### Ongelma URL-osoitteen käytössä
+
+Ruudunlukijat lukevat tekstin. Jos tekstissä on URL-osoite, ruudunlukija lukee sen. Yleisesti ottaen URL-osoite ei välitä merkityksellistä tietoa ja voi kuulostaa ärsyttävältä. Olet ehkä kokenut tämän, jos puhelimesi on koskaan lukenut ääneen tekstiviestin, jossa on URL-osoite.
+
+### Ongelma "klikkaa tästä" -tekstissä
+
+Ruudunlukijoilla on myös kyky lukea vain sivun hyperlinkit, aivan kuten näkevä henkilö skannaa sivun linkkien varalta. Jos linkkiteksti on aina "klikkaa tästä", käyttäjä kuulee vain "klikkaa tästä, klikkaa tästä, klikkaa tästä, klikkaa tästä, klikkaa tästä, ..." Kaikki linkit ovat nyt erottamattomia toisistaan.
+
+### Hyvä linkkiteksti
+
+Hyvä linkkiteksti kuvailee lyhyesti, mitä linkin takana on. Yllä olevassa esimerkissä, joka käsittelee pikkupingviinejä, linkki vie Wikipedia-sivulle kyseisestä lajista. Ilmaus *pikkupingviinit* olisi täydellinen linkkiteksti, koska se tekee selväksi, mitä joku oppii, jos hän klikkaa linkkiä - pikkupingviineistä.
+
+> [Pikkupingviini](https://en.wikipedia.org/wiki/Little_penguin), jota joskus kutsutaan keijupingviiniksi, on maailman pienin pingviini.
+
+✅ Surffaa verkossa muutaman minuutin ajan löytääksesi sivuja, jotka käyttävät epäselviä linkkistrategioita. Vertaa niitä muihin, paremmin linkitettyihin sivustoihin. Mitä opit?
+
+#### Hakukonehuomioita
+
+Lisäbonuksena siitä, että varmistat sivustosi olevan kaikkien saavutettavissa, autat hakukoneita navigoimaan sivustollasi. Hakukoneet käyttävät linkkitekstiä oppiakseen sivujen aiheista. Hyvän linkkitekstin käyttäminen auttaa siis kaikkia!
+
+### ARIA
+
+Kuvittele seuraava sivu:
+
+| Tuote         | Kuvaus            | Tilaa         |
+| ------------- | ----------------- | ------------- |
+| Widget        | [Kuvaus](../../../../1-getting-started-lessons/3-accessibility/')     | [Tilaa](../../../../1-getting-started-lessons/3-accessibility/')  |
+| Super widget  | [Kuvaus](../../../../1-getting-started-lessons/3-accessibility/')     | [Tilaa](../../../../1-getting-started-lessons/3-accessibility/')  |
+
+Tässä esimerkissä kuvauksen ja tilauksen tekstin toistaminen on järkevää selainta käyttävälle henkilölle. Kuitenkin ruudunlukijaa käyttävä henkilö kuulisi vain sanat *kuvaus* ja *tilaa* toistettuna ilman kontekstia.
+
+Näiden tilanteiden tukemiseksi HTML tukee joukkoa attribuutteja, joita kutsutaan nimellä [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Näiden attribuuttien avulla voit tarjota lisätietoja ruudunlukijoille.
+
+> **HUOM**: Kuten monissa HTML:n osa-alueissa, selainten ja ruudunlukijoiden tuki voi vaihdella. Useimmat pääasiakkaat kuitenkin tukevat ARIA-attribuutteja.
+
+Voit käyttää `aria-label`-attribuuttia kuvaamaan linkkiä, kun sivun muoto ei sitä salli. Widgetin kuvaus voitaisiin asettaa seuraavasti:
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Yleisesti ottaen semanttisen merkkauskielen käyttö, kuten yllä on kuvattu, on ensisijaista ARIA:n käyttöön nähden, mutta joskus ei ole olemassa semanttista vastinetta tietyille HTML-widgeteille. Hyvä esimerkki on puu. HTML:ssä ei ole vastinetta puulle, joten tunnistat tämän elementin yleisen `<div>`-elementin oikealla roolilla ja ARIA-arvoilla. [MDN:n ARIA-dokumentaatio](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) sisältää lisää hyödyllistä tietoa.
+
+```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>
+```
+
+## Kuvat
+
+On sanomattakin selvää, että ruudunlukijat eivät pysty automaattisesti lukemaan, mitä kuvassa on. Kuvien saavutettavuuden varmistaminen ei vaadi paljon työtä - juuri tätä varten on olemassa `alt`-attribuutti. Kaikilla merkityksellisillä kuvilla tulisi olla `alt`, joka kuvailee, mitä ne ovat.  
+Kuvat, jotka ovat pelkästään koristeellisia, tulisi asettaa `alt`-attribuutilla tyhjäksi: `alt=""`. Tämä estää ruudunlukijoita ilmoittamasta tarpeettomasti koristeellista kuvaa.
+
+✅ Kuten saattaisit odottaa, hakukoneetkaan eivät pysty ymmärtämään, mitä kuvassa on. Ne käyttävät myös alt-tekstiä. Joten jälleen kerran, saavutettavuuden varmistaminen tuo lisäetuja!
+
+## Näppäimistö
+
+Jotkut käyttäjät eivät pysty käyttämään hiirtä tai kosketuslevyä, vaan luottavat näppäimistöön siirtyäkseen elementistä toiseen. On tärkeää, että verkkosivustosi esittää sisältösi loogisessa järjestyksessä, jotta näppäimistön käyttäjä voi käyttää jokaista interaktiivista elementtiä edetessään dokumentissa. Jos rakennat verkkosivusi semanttisella merkkauskielellä ja käytät CSS:ää niiden visuaalisen ulkoasun tyylittelyyn, sivustosi tulisi olla navigoitavissa näppäimistöllä, mutta on tärkeää testata tämä osa-alue manuaalisesti. Lue lisää [näppäimistönavigointistrategioista](https://webaim.org/techniques/keyboard/).
+
+✅ Mene mille tahansa verkkosivustolle ja yritä navigoida siinä pelkästään näppäimistöä käyttäen. Mikä toimii, mikä ei toimi? Miksi?
+
+## Yhteenveto
+
+Verkko, joka on saavutettavissa vain osalle, ei ole todellinen "maailmanlaajuinen verkko". Paras tapa varmistaa, että luomasi sivustot ovat saavutettavia, on sisällyttää saavutettavuuden parhaat käytännöt alusta alkaen. Vaikka ylimääräisiä vaiheita tarvitaan, näiden taitojen sisällyttäminen työnkulkuusi nyt tarkoittaa, että kaikki luomasi sivut ovat saavutettavia.
+
+---
+
+## 🚀 Haaste
+
+Ota tämä HTML ja kirjoita se uudelleen mahdollisimman saavutettavaksi käyttäen oppimiasi strategioita.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## Jälkikysely
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## Kertaus ja itseopiskelu
+Monilla hallituksilla on lakeja, jotka koskevat saavutettavuusvaatimuksia. Tutustu oman maasi saavutettavuuslakeihin. Mitä ne kattavat ja mitä eivät? Esimerkkinä on [tämä hallituksen verkkosivusto](https://accessibility.blog.gov.uk/).
+
+## Tehtävä
+
+[Analysoi ei-saavutettava verkkosivusto](assignment.md)
+
+Lähde: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/1-getting-started-lessons/3-accessibility/assignment.md b/translations/fi/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..7d8bb213
--- /dev/null
+++ b/translations/fi/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-27T20:37:10+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Analysoi esteetön sivusto
+
+## Ohjeet
+
+Tunnista verkkosivusto, jonka uskot olevan ESTEETÖN, ja luo toimintasuunnitelma sen esteettömyyden parantamiseksi. Ensimmäinen tehtäväsi on tunnistaa tämä sivusto, kuvata yksityiskohtaisesti, millä tavoin se mielestäsi ei ole esteetön ilman analyyttisiä työkaluja, ja sen jälkeen suorittaa Lighthouse-analyysi. Tallenna analyysin tulokset pdf-muodossa ja laadi yksityiskohtainen suunnitelma, jossa on vähintään kymmenen kohtaa, jotka osoittavat, miten sivustoa voitaisiin parantaa.
+
+## Taulukko sivuston esteettömyyden testaamiseen
+
+| Kriteeri | Erinomainen | Riittävä | Tarvitsee parannusta |
+|----------|-------------|----------|----------------------|
+|          | puuttuu <10 % vaaditusta | puuttuu 20 % vaaditusta | puuttuu 50 % vaaditusta |
+
+----
+Opiskelijan raportti: sisältää kappaleita siitä, kuinka esteetön sivusto on, Lighthouse-raportin pdf-muodossa, kymmenen parannuskohdan listan, jossa on yksityiskohtia siitä, miten parannukset toteutetaan
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/1-getting-started-lessons/README.md b/translations/fi/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..2c8eb99c
--- /dev/null
+++ b/translations/fi/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-27T20:31:06+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "fi"
+}
+-->
+# Web-kehityksen alkeet
+
+Tässä opintosuunnitelman osassa tutustut projektipohjaisiin käsitteisiin, jotka ovat tärkeitä ammattilaiskehittäjäksi ryhtymisessä.
+
+### Aiheet
+
+1. [Johdatus ohjelmointikieliin ja työkaluihin](1-intro-to-programming-languages/README.md)
+2. [Johdatus GitHubiin](2-github-basics/README.md)
+3. [Saavutettavuuden perusteet](3-accessibility/README.md)
+
+### Tekijät
+
+Johdatus ohjelmointikieliin ja työkaluihin on kirjoitettu ♥️:lla [Jasmine Greenaway](https://twitter.com/paladique)
+
+Johdatus GitHubiin on kirjoitettu ♥️:lla [Floor Drees](https://twitter.com/floordrees)
+
+Saavutettavuuden perusteet on kirjoitettu ♥️:lla [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/2-js-basics/1-data-types/README.md b/translations/fi/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..5643d598
--- /dev/null
+++ b/translations/fi/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-27T20:17:21+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "fi"
+}
+-->
+# JavaScriptin perusteet: Tietotyypit
+
+![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.fi.png)
+> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Ennakkokysely
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Tässä oppitunnissa käsitellään JavaScriptin perusteita, kieltä, joka tuo verkkosivuille vuorovaikutteisuutta.
+
+> Voit käydä tämän oppitunnin läpi [Microsoft Learnissa](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Muuttujat](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Muuttujat JavaScriptissä")
+
+[![Tietotyypit JavaScriptissä](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Tietotyypit JavaScriptissä")
+
+> 🎥 Klikkaa yllä olevia kuvia katsellaksesi videoita muuttujista ja tietotyypeistä
+
+Aloitetaan muuttujista ja niihin tallennettavista tietotyypeistä!
+
+## Muuttujat
+
+Muuttujat tallentavat arvoja, joita voidaan käyttää ja muuttaa koodin aikana.
+
+Muuttujan luominen ja **määrittely** tapahtuu seuraavalla syntaksilla **[avainsana] [nimi]**. Se koostuu kahdesta osasta:
+
+- **Avainsana**. Avainsanoja voivat olla `let` tai `var`.  
+
+✅ Avainsana `let` esiteltiin ES6:ssa ja se antaa muuttujalle niin sanotun _lohkoalueen_ (block scope). On suositeltavaa käyttää `let`-avainsanaa `var`-avainsanan sijaan. Lohkoalueita käsitellään tarkemmin myöhemmissä osissa.
+- **Muuttujan nimi**, jonka valitset itse.
+
+### Tehtävä - työskentely muuttujien kanssa
+
+1. **Määrittele muuttuja**. Määritellään muuttuja käyttäen `let`-avainsanaa:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` on nyt määritelty käyttäen `let`-avainsanaa. Sillä ei vielä ole arvoa.
+
+1. **Aseta arvo**. Tallenna arvo muuttujaan käyttämällä `=`-operaattoria ja odotettua arvoa.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Huom: tässä oppitunnissa `=` tarkoittaa "arvon asettamisen operaattoria", jota käytetään arvon asettamiseen muuttujalle. Se ei tarkoita yhtäsuuruutta.
+
+   `myVariable` on nyt *alustettu* arvolla 123.
+
+1. **Refaktoroi**. Korvaa koodisi seuraavalla lauseella.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Yllä oleva on esimerkki _eksplisiittisestä alustuksesta_, jossa muuttuja määritellään ja sille asetetaan arvo samanaikaisesti.
+
+1. **Muuta muuttujan arvoa**. Muuta muuttujan arvoa seuraavasti:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Kun muuttuja on määritelty, sen arvoa voidaan muuttaa missä tahansa koodin kohdassa käyttämällä `=`-operaattoria ja uutta arvoa.
+
+   ✅ Kokeile! Voit kirjoittaa JavaScriptiä suoraan selaimessasi. Avaa selainikkuna ja siirry kehittäjätyökaluihin. Konsolissa näet kehotteen; kirjoita `let myVariable = 123`, paina Enter ja kirjoita sitten `myVariable`. Mitä tapahtuu? Huomaa, että opit näistä käsitteistä lisää seuraavilla oppitunneilla.
+
+## Vakiot
+
+Vakion määrittely ja alustus noudattaa samoja periaatteita kuin muuttujan, mutta käytetään `const`-avainsanaa. Vakiot määritellään yleensä kokonaan isoilla kirjaimilla.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Vakiot ovat samankaltaisia kuin muuttujat, mutta niillä on kaksi poikkeusta:
+
+- **Täytyy olla arvo**. Vakiot on alustettava, muuten koodin suorittaminen aiheuttaa virheen.
+- **Viitettä ei voi muuttaa**. Vakion viitettä ei voi muuttaa alustuksen jälkeen, muuten koodin suorittaminen aiheuttaa virheen. Katsotaanpa kaksi esimerkkiä:
+   - **Yksinkertainen arvo**. Seuraava EI ole sallittua:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Olion viite on suojattu**. Seuraava EI ole sallittua.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Olion arvo ei ole suojattu**. Seuraava ON sallittua:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Yllä muutat olion arvoa, mutta et itse viitettä, mikä tekee siitä sallittua.
+
+   > Huomaa, että `const` tarkoittaa, että viite on suojattu uudelleenmäärittelyltä. Arvo ei kuitenkaan ole _muuttumaton_ ja voi muuttua, erityisesti jos kyseessä on monimutkainen rakenne, kuten olio.
+
+## Tietotyypit
+
+Muuttujat voivat tallentaa monenlaisia arvoja, kuten numeroita ja tekstiä. Näitä erilaisia arvoja kutsutaan **tietotyypeiksi**. Tietotyypit ovat tärkeä osa ohjelmistokehitystä, koska ne auttavat kehittäjiä päättämään, miten koodi tulisi kirjoittaa ja miten ohjelmiston tulisi toimia. Lisäksi joillakin tietotyypeillä on ainutlaatuisia ominaisuuksia, jotka auttavat muuntamaan tai hakemaan lisätietoja arvosta.
+
+✅ Tietotyyppejä kutsutaan myös JavaScriptin tietoprimitiiveiksi, koska ne ovat kielen tarjoamia alimmantason tietotyyppejä. Primitiiivejä on 7: string, number, bigint, boolean, undefined, null ja symbol. Mieti hetki, mitä kukin näistä primitiiveistä voisi edustaa. Mitä on `zebra`? Entä `0`? `true`?
+
+### Numerot
+
+Edellisessä osiossa `myVariable`-muuttujan arvo oli numerotyyppi.
+
+`let myVariable = 123;`
+
+Muuttujat voivat tallentaa kaikenlaisia numeroita, mukaan lukien desimaalit tai negatiiviset luvut. Numeroita voidaan myös käyttää aritmeettisten operaattorien kanssa, joita käsitellään [seuraavassa osiossa](../../../../2-js-basics/1-data-types).
+
+### Aritmeettiset operaattorit
+
+Aritmeettisten toimintojen suorittamiseen on useita operaattoreita, joista osa on listattu alla:
+
+| Symboli | Kuvaus                                                                 | Esimerkki                        |
+| ------- | ---------------------------------------------------------------------- | -------------------------------- |
+| `+`     | **Yhteenlasku**: Laskee kahden luvun summan                            | `1 + 2 //odotettu vastaus on 3`  |
+| `-`     | **Vähennyslasku**: Laskee kahden luvun erotuksen                       | `1 - 2 //odotettu vastaus on -1` |
+| `*`     | **Kertolasku**: Laskee kahden luvun tulon                              | `1 * 2 //odotettu vastaus on 2`  |
+| `/`     | **Jakolasku**: Laskee kahden luvun osamäärän                           | `1 / 2 //odotettu vastaus on 0.5`|
+| `%`     | **Jakojäännös**: Laskee kahden luvun jaon jakojäännöksen               | `1 % 2 //odotettu vastaus on 1`  |
+
+✅ Kokeile! Kokeile aritmeettista operaatiota selaimesi konsolissa. Yllättivätkö tulokset sinut?
+
+### Merkkijonot
+
+Merkkijonot ovat merkkejä, jotka sijaitsevat yksinkertaisten tai kaksoislainausmerkkien sisällä.
+
+- `'Tämä on merkkijono'`
+- `"Tämä on myös merkkijono"`
+- `let myString = 'Tämä on merkkijonoarvo, joka on tallennettu muuttujaan';`
+
+Muista käyttää lainausmerkkejä kirjoittaessasi merkkijonoa, muuten JavaScript olettaa sen olevan muuttujan nimi.
+
+### Merkkijonojen muotoilu
+
+Merkkijonot ovat tekstuaalisia ja vaativat ajoittain muotoilua.
+
+Kahden tai useamman merkkijonon **yhdistämiseen** käytetään `+`-operaattoria.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Miksi `1 + 1 = 2` JavaScriptissä, mutta `'1' + '1' = 11`? Mieti asiaa. Entä `'1' + 1`?
+
+**Mallimerkkijonot** ovat toinen tapa muotoilla merkkijonoja. Niissä käytetään lainausmerkkien sijaan takakenoa. Kaikki, mikä ei ole pelkkää tekstiä, on sijoitettava paikkamerkkeihin `${ }`. Tämä sisältää kaikki muuttujat, jotka voivat olla merkkijonoja.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Voit saavuttaa muotoilutavoitteesi kummallakin menetelmällä, mutta mallimerkkijonot säilyttävät kaikki välilyönnit ja rivinvaihdot.
+
+✅ Milloin käyttäisit mallimerkkijonoa tavallisen merkkijonon sijaan?
+
+### Totuusarvot
+
+Totuusarvot voivat olla vain kaksi arvoa: `true` tai `false`. Totuusarvot auttavat päättämään, mitkä koodirivit suoritetaan, kun tietyt ehdot täyttyvät. Monissa tapauksissa [operaattorit](../../../../2-js-basics/1-data-types) auttavat totuusarvon asettamisessa, ja huomaat usein muuttujien alustamisen tai niiden arvojen päivittämisen operaattorin avulla.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Muuttujaa voidaan pitää 'totuusarvoisena', jos se arvioidaan totuusarvoksi `true`. Mielenkiintoista on, että JavaScriptissä [kaikki arvot ovat totuusarvoisia, ellei niitä ole määritelty epätosiksi](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Haaste
+
+JavaScript on tunnettu yllättävistä tavoistaan käsitellä tietotyyppejä. Tee hieman tutkimusta näistä "ansakohdista". Esimerkiksi: kirjainkoolla on merkitystä! Kokeile tätä konsolissasi: `let age = 1; let Age = 2; age == Age` (tulos on `false` -- miksi?). Mitä muita ansakohtia löydät?
+
+## Oppitunnin jälkeinen kysely
+[Oppitunnin jälkeinen kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Kertaus ja itseopiskelu
+
+Tutustu [tähän JavaScript-harjoitusten listaan](https://css-tricks.com/snippets/javascript/) ja kokeile yhtä. Mitä opit?
+
+## Tehtävä
+
+[Tietotyyppiharjoitus](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinkäsityksistä tai virhetulkinnoista.
\ No newline at end of file
diff --git a/translations/fi/2-js-basics/1-data-types/assignment.md b/translations/fi/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..73dc2702
--- /dev/null
+++ b/translations/fi/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-27T20:19:31+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Tietotyyppien harjoittelu
+
+## Ohjeet
+
+Kuvittele, että olet rakentamassa ostoskoria. Kirjoita dokumentaatio niistä tietotyypeistä, joita tarvitsisit ostokokemuksen toteuttamiseen. Miten päädyit valitsemiisi vaihtoehtoihin?
+
+## Arviointikriteerit
+
+Kriteeri | Erinomainen | Riittävä | Parannettavaa
+--- | --- | --- | --- |
+||Kuusi tietotyyppiä on listattu ja tutkittu yksityiskohtaisesti, niiden käyttö dokumentoitu|Neljä tietotyyppiä on tutkittu|Kaksi tietotyyppiä on tutkittu|
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/2-js-basics/2-functions-methods/README.md b/translations/fi/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..2c6c57ed
--- /dev/null
+++ b/translations/fi/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-27T20:14:15+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "fi"
+}
+-->
+# JavaScriptin perusteet: Metodit ja funktiot
+
+![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.fi.png)
+> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Ennen luentoa - Kysely
+[Ennen luentoa - kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Kun ajattelemme koodin kirjoittamista, haluamme aina varmistaa, että koodi on luettavaa. Vaikka tämä kuulostaa vastoin intuitiota, koodia luetaan paljon useammin kuin sitä kirjoitetaan. Yksi keskeinen työkalu kehittäjän työkalupakissa ylläpidettävän koodin varmistamiseksi on **funktio**.
+
+[![Metodit ja funktiot](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Metodit ja funktiot")
+
+> 🎥 Klikkaa yllä olevaa kuvaa katsoaksesi videon metodeista ja funktioista.
+
+> Voit käydä tämän oppitunnin läpi myös [Microsoft Learnissa](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Funktiot
+
+Funktio on pohjimmiltaan koodilohko, jonka voimme suorittaa tarvittaessa. Tämä on täydellinen ratkaisu tilanteisiin, joissa meidän täytyy suorittaa sama tehtävä useita kertoja; sen sijaan, että kopioisimme logiikan useisiin paikkoihin (mikä vaikeuttaisi sen päivittämistä myöhemmin), voimme keskittää sen yhteen paikkaan ja kutsua sitä aina tarvittaessa – voit jopa kutsua funktioita toisista funktioista!
+
+Yhtä tärkeää on antaa funktiolle nimi. Vaikka tämä saattaa tuntua vähäpätöiseltä, nimi tarjoaa nopean tavan dokumentoida koodin osan. Voit ajatella sitä kuin painikkeen etikettinä. Jos painan painiketta, jossa lukee "Peruuta ajastin", tiedän, että se pysäyttää kellon.
+
+## Funktion luominen ja kutsuminen
+
+Funktion syntaksi näyttää seuraavalta:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Jos haluaisin luoda funktion, joka näyttää tervehdyksen, se voisi näyttää tältä:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Aina kun haluamme kutsua (tai suorittaa) funktiomme, käytämme funktion nimeä ja perään `()`. On hyvä huomata, että funktio voidaan määritellä ennen tai jälkeen sen kutsumisen; JavaScript-kääntäjä löytää sen puolestasi.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** On olemassa erityinen funktiotyyppi, jota kutsutaan **metodiksi**, ja olet jo käyttänyt sitä! Itse asiassa näimme tämän esimerkissämme, kun käytimme `console.log`. Metodin ja funktion ero on siinä, että metodi on liitetty objektiin (esimerkissämme `console`), kun taas funktio on irrallinen. Monet kehittäjät käyttävät näitä termejä kuitenkin keskenään.
+
+### Funktion parhaat käytännöt
+
+Kun luot funktioita, pidä mielessä muutama hyvä käytäntö:
+
+- Käytä aina kuvaavia nimiä, jotta tiedät, mitä funktio tekee
+- Käytä **camelCase**-tyyliä yhdistääksesi sanoja
+- Pidä funktiot keskittyneinä tiettyyn tehtävään
+
+## Tiedon välittäminen funktiolle
+
+Jotta funktio olisi monikäyttöisempi, haluat usein välittää sille tietoa. Jos tarkastelemme yllä olevaa `displayGreeting`-esimerkkiä, se näyttää aina **Hello, world!**. Ei kovin hyödyllinen funktio. Jos haluamme tehdä siitä hieman joustavamman, kuten antaa jonkun määrittää tervehdyksen kohteen nimen, voimme lisätä **parametrin**. Parametri (joskus myös **argumentti**) on lisätieto, joka lähetetään funktiolle.
+
+Parametrit luetellaan määrittelyosassa sulkujen sisällä ja erotetaan pilkuilla, kuten näin:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Voimme päivittää `displayGreeting`-funktion hyväksymään nimen ja näyttämään sen.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Kun haluamme kutsua funktiomme ja välittää parametrin, määritämme sen sulkeisiin.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Oletusarvot
+
+Voimme tehdä funktiostamme vielä joustavamman lisäämällä enemmän parametreja. Mutta entä jos emme halua vaatia kaikkien arvojen määrittämistä? Pysytään tervehdyksen esimerkissä: voisimme jättää nimen pakolliseksi (meidän täytyy tietää, ketä tervehdimme), mutta haluamme sallia tervehdyksen mukauttamisen haluttaessa. Jos joku ei halua mukauttaa sitä, tarjoamme oletusarvon. Oletusarvon määrittämiseksi parametrille asetamme sen samalla tavalla kuin määrittäisimme arvon muuttujalle - `parameterName = 'defaultValue'`. Tässä on esimerkki:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Kun kutsumme funktiota, voimme päättää, haluammeko määrittää arvon `salutation`-parametrille.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Paluuarvot
+
+Tähän asti rakentamamme funktiot tulostavat aina [konsoliin](https://developer.mozilla.org/docs/Web/API/console). Joskus tämä voi olla juuri sitä, mitä haluamme, erityisesti kun luomme funktioita, jotka kutsuvat muita palveluita. Mutta entä jos haluan luoda apufunktion, joka suorittaa laskelman ja palauttaa arvon, jotta voin käyttää sitä muualla?
+
+Tämä onnistuu käyttämällä **paluuarvoa**. Paluuarvo palautetaan funktiosta ja voidaan tallentaa muuttujaan samalla tavalla kuin voisimme tallentaa merkkijonon tai numeron.
+
+Jos funktio palauttaa jotain, käytetään avainsanaa `return`. `return`-avainsana odottaa arvoa tai viitettä siihen, mitä palautetaan, kuten näin:
+
+```javascript
+return myVariable;
+```  
+
+Voisimme luoda funktion, joka luo tervehdyksen ja palauttaa sen arvon kutsujalle.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Kun kutsumme tätä funktiota, tallennamme arvon muuttujaan. Tämä on hyvin samanlaista kuin jos määrittäisimme muuttujalle staattisen arvon (kuten `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Funktiot funktioiden parametreina
+
+Kun etenet ohjelmointitaidoissasi, tulet kohtaamaan funktioita, jotka hyväksyvät muita funktioita parametreina. Tämä kätevä temppu on yleinen, kun emme tiedä, milloin jokin tapahtuu tai valmistuu, mutta tiedämme, että meidän täytyy suorittaa jokin operaatio vastauksena.
+
+Esimerkiksi [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) aloittaa ajastimen ja suorittaa koodin, kun se valmistuu. Meidän täytyy kertoa sille, mitä koodia haluamme suorittaa. Kuulostaa täydelliseltä tehtävältä funktiolle!
+
+Jos suoritat alla olevan koodin, näet viestin **3 sekuntia kulunut** kolmen sekunnin kuluttua.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Nimettömät funktiot
+
+Katsotaanpa uudelleen, mitä olemme rakentaneet. Luomme funktion, jolla on nimi, mutta jota käytetään vain kerran. Kun sovelluksemme monimutkaistuu, voimme huomata luovamme paljon funktioita, joita käytetään vain kerran. Tämä ei ole ihanteellista. Kuten käy ilmi, meidän ei aina tarvitse antaa funktiolle nimeä!
+
+Kun välitämme funktion parametrina, voimme ohittaa sen etukäteen luomisen ja sen sijaan rakentaa sen osana parametria. Käytämme samaa `function`-avainsanaa, mutta rakennamme sen parametrina.
+
+Kirjoitetaan yllä oleva koodi uudelleen käyttämällä nimetöntä funktiota:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Jos suoritat uuden koodimme, huomaat saavasi samat tulokset. Olemme luoneet funktion, mutta emme joutuneet antamaan sille nimeä!
+
+### Fat arrow -funktiot
+
+Monissa ohjelmointikielissä (mukaan lukien JavaScript) on yleinen oikotie, jota kutsutaan **arrow**- tai **fat arrow** -funktioksi. Se käyttää erityistä merkintää `=>`, joka näyttää nuolelta – tästä nimi! Käyttämällä `=>` voimme ohittaa `function`-avainsanan.
+
+Kirjoitetaan koodimme vielä kerran uudelleen käyttämällä fat arrow -funktiota:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Milloin käyttää mitäkin strategiaa
+
+Olet nyt nähnyt kolme tapaa välittää funktio parametrina ja saatat miettiä, milloin käyttää mitäkin. Jos tiedät, että käytät funktiota useammin kuin kerran, luo se normaalisti. Jos käytät sitä vain yhdessä paikassa, on yleensä parasta käyttää nimetöntä funktiota. Se, käytätkö fat arrow -funktiota vai perinteisempää `function`-syntaksia, on sinusta kiinni, mutta huomaat, että useimmat modernit kehittäjät suosivat `=>`.
+
+---
+
+## 🚀 Haaste
+
+Osaatko selittää yhdessä lauseessa eron funktioiden ja metodien välillä? Kokeile!
+
+## Luentojälkeinen kysely
+[Luentojälkeinen kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Kertaus ja itseopiskelu
+
+Kannattaa [lukea lisää arrow-funktioista](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), sillä niitä käytetään yhä enemmän koodipohjissa. Harjoittele funktion kirjoittamista ja kirjoita se sitten uudelleen tällä syntaksilla.
+
+## Tehtävä
+
+[Hauskaa funktioiden parissa](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/2-js-basics/2-functions-methods/assignment.md b/translations/fi/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..88980f5f
--- /dev/null
+++ b/translations/fi/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-27T20:15:41+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Hauskaa funktioiden parissa
+
+## Ohjeet
+
+Luo erilaisia funktioita, sekä funktioita, jotka palauttavat jotain, että funktioita, jotka eivät palauta mitään.
+
+Katso, voitko luoda funktion, jossa on sekoitus parametreja ja parametreja, joilla on oletusarvot.
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                                                          | Riittävä                                                        | Parannettavaa     |
+| -------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------- | ----------------- |
+|          | Ratkaisu sisältää kaksi tai useampia hyvin toimivia funktioita, joissa on monipuoliset parametrit | Ratkaisu sisältää yhden toimivan funktion ja muutamia parametreja | Ratkaisussa on virheitä |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi katsoa ensisijaiseksi lähteeksi. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/2-js-basics/3-making-decisions/README.md b/translations/fi/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..47574e45
--- /dev/null
+++ b/translations/fi/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-27T20:12:44+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "fi"
+}
+-->
+# JavaScriptin perusteet: Päätöksenteko
+
+![JavaScriptin perusteet - Päätöksenteko](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.fi.png)
+
+> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Päätöksenteko ja koodin suoritusjärjestyksen hallinta tekevät koodistasi uudelleenkäytettävää ja luotettavaa. Tässä osiossa käsitellään JavaScriptin tietovirran hallinnan syntaksia ja sen merkitystä, erityisesti Boolean-tietotyyppien kanssa.
+
+[![Päätöksenteko](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Päätöksenteko")
+
+> 🎥 Klikkaa yllä olevaa kuvaa nähdäksesi videon päätöksenteosta.
+
+> Voit käydä tämän oppitunnin [Microsoft Learnissa](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## Lyhyt kertaus Booleaneista
+
+Boolean-arvot voivat olla vain kaksi: `true` tai `false`. Boolean-arvot auttavat päättämään, mitkä koodirivit suoritetaan, kun tietyt ehdot täyttyvät.
+
+Aseta Boolean-arvo trueksi tai falseksi näin:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Boolean-arvot on nimetty englantilaisen matemaatikon, filosofin ja loogikon George Boolen (1815–1864) mukaan.
+
+## Vertailuoperaattorit ja Boolean-arvot
+
+Operaattoreita käytetään ehtojen arvioimiseen tekemällä vertailuja, jotka tuottavat Boolean-arvon. Alla on luettelo usein käytetyistä operaattoreista.
+
+| Symboli | Kuvaus                                                                                                                                                       | Esimerkki          |
+| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ |
+| `<`     | **Pienempi kuin**: Vertaa kahta arvoa ja palauttaa `true`-Boolean-arvon, jos vasemman puolen arvo on pienempi kuin oikean puolen arvo                        | `5 < 6 // true`    |
+| `<=`    | **Pienempi tai yhtä suuri kuin**: Vertaa kahta arvoa ja palauttaa `true`-Boolean-arvon, jos vasemman puolen arvo on pienempi tai yhtä suuri kuin oikea       | `5 <= 6 // true`   |
+| `>`     | **Suurempi kuin**: Vertaa kahta arvoa ja palauttaa `true`-Boolean-arvon, jos vasemman puolen arvo on suurempi kuin oikean puolen arvo                        | `5 > 6 // false`   |
+| `>=`    | **Suurempi tai yhtä suuri kuin**: Vertaa kahta arvoa ja palauttaa `true`-Boolean-arvon, jos vasemman puolen arvo on suurempi tai yhtä suuri kuin oikea       | `5 >= 6 // false`  |
+| `===`   | **Tarkka yhtäsuuruus**: Vertaa kahta arvoa ja palauttaa `true`-Boolean-arvon, jos oikean ja vasemman puolen arvot ovat yhtäsuuret JA samaa tietotyyppiä      | `5 === 6 // false` |
+| `!==`   | **Epäyhtäsuuruus**: Vertaa kahta arvoa ja palauttaa päinvastaisen Boolean-arvon kuin tarkka yhtäsuuruusoperaattori                                           | `5 !== 6 // true`  |
+
+✅ Testaa osaamistasi kirjoittamalla vertailuja selaimesi konsoliin. Yllättääkö jokin palautettu tieto sinut?
+
+## If-lause
+
+If-lause suorittaa koodin lohkojensa sisällä, jos ehto on tosi.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Loogisia operaattoreita käytetään usein ehtojen muodostamiseen.
+
+```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-lause
+
+`else`-lause suorittaa koodin lohkojensa sisällä, kun ehto on epätosi. Se on valinnainen `if`-lauseen kanssa.
+
+```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!");
+}
+```
+
+✅ Testaa ymmärrystäsi tästä koodista ja seuraavasta koodista suorittamalla ne selaimen konsolissa. Muuta currentMoney- ja laptopPrice-muuttujien arvoja muuttaaksesi palautettua `console.log()`-tulosta.
+
+## Switch-lause
+
+`switch`-lausetta käytetään suorittamaan erilaisia toimintoja eri ehtojen perusteella. Käytä `switch`-lausetta valitaksesi yksi monista suoritettavista koodilohkoista.
+
+```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}`);
+```
+
+✅ Testaa ymmärrystäsi tästä koodista ja seuraavasta koodista suorittamalla ne selaimen konsolissa. Muuta muuttujan a arvoja muuttaaksesi palautettua `console.log()`-tulosta.
+
+## Loogiset operaattorit ja Boolean-arvot
+
+Päätökset saattavat vaatia useamman kuin yhden vertailun, ja ne voidaan yhdistää loogisilla operaattoreilla tuottamaan Boolean-arvon.
+
+| Symboli | Kuvaus                                                                                     | Esimerkki                                                                 |
+| ------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
+| `&&`    | **Looginen JA**: Vertaa kahta Boolean-lauseketta. Palauttaa true **vain**, jos molemmat puolet ovat tosi | `(5 > 6) && (5 < 6 ) //Toinen puoli on epätosi, toinen tosi. Palauttaa false` |
+| `\|\|`  | **Looginen TAI**: Vertaa kahta Boolean-lauseketta. Palauttaa true, jos vähintään yksi puoli on tosi     | `(5 > 6) \|\| (5 < 6) //Toinen puoli on epätosi, toinen tosi. Palauttaa true` |
+| `!`     | **Looginen EI**: Palauttaa Boolean-lausekkeen vastakkaisen arvon                             | `!(5 > 6) // 5 ei ole suurempi kuin 6, mutta "!" palauttaa true`          |
+
+## Ehdot ja päätökset loogisilla operaattoreilla
+
+Loogisia operaattoreita voidaan käyttää ehtojen muodostamiseen if..else-lauseissa.
+
+```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!");
+}
+```
+
+### Negaatio-operaattori
+
+Olet tähän mennessä nähnyt, kuinka voit käyttää `if...else`-lausetta luomaan ehdollista logiikkaa. Kaiken, mikä menee `if`-lauseeseen, täytyy arvioitua todeksi tai epätodeksi. Käyttämällä `!`-operaattoria voit _kumota_ lausekkeen. Se näyttäisi tältä:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Ternäärilausekkeet
+
+`if...else` ei ole ainoa tapa ilmaista päätöksentekologiikkaa. Voit myös käyttää niin sanottua ternäärioperaattoria. Sen syntaksi näyttää tältä:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Alla on konkreettisempi esimerkki:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Käytä hetki aikaa tämän koodin lukemiseen muutaman kerran. Ymmärrätkö, miten nämä operaattorit toimivat?
+
+Yllä oleva koodi sanoo:
+
+- jos `firstNumber` on suurempi kuin `secondNumber`
+- silloin `firstNumber` asetetaan `biggestNumber`-muuttujaan
+- muuten asetetaan `secondNumber`.
+
+Ternäärilauseke on vain tiivis tapa kirjoittaa alla oleva koodi:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Haaste
+
+Luo ohjelma, joka kirjoitetaan ensin loogisilla operaattoreilla ja sitten uudelleen ternäärilausekkeella. Mikä syntaksi on mielestäsi parempi?
+
+---
+
+## Jälkikysely
+
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Kertaus ja itseopiskelu
+
+Lue lisää käyttäjän käytettävissä olevista operaattoreista [MDN:ssä](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Tutustu Josh Comeaun upeaan [operaattorihakemistoon](https://joshwcomeau.com/operator-lookup/)!
+
+## Tehtävä
+
+[Operaattorit](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/2-js-basics/3-making-decisions/assignment.md b/translations/fi/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..14f6a4c3
--- /dev/null
+++ b/translations/fi/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-27T20:13:52+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Operaattorit
+
+## Ohjeet
+
+Kokeile operaattoreita. Tässä on ehdotus ohjelmasta, jonka voit toteuttaa:
+
+Sinulla on joukko opiskelijoita kahdesta eri arvostelujärjestelmästä.
+
+### Ensimmäinen arvostelujärjestelmä
+
+Yksi arvostelujärjestelmä määrittelee arvosanat välillä 1-5, jossa 3 ja sitä korkeammat arvosanat tarkoittavat kurssin läpäisyä.
+
+### Toinen arvostelujärjestelmä
+
+Toisessa arvostelujärjestelmässä arvosanat ovat `A, A-, B, B-, C, C-`, jossa `A` on paras arvosana ja `C` on alin hyväksytty arvosana.
+
+### Tehtävä
+
+Annettuna seuraava taulukko `allStudents`, joka edustaa kaikkia opiskelijoita ja heidän arvosanojaan, rakenna uusi taulukko `studentsWhoPass`, joka sisältää kaikki kurssin läpäisseet opiskelijat.
+
+> TIP, käytä for-silmukkaa, if...else-rakennetta ja vertailuoperaattoreita:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                   | Riittävä                     | Parannusta vaativa              |
+| -------- | ----------------------------- | ---------------------------- | ------------------------------- |
+|          | Esitetty täydellinen ratkaisu | Esitetty osittainen ratkaisu | Esitetty ratkaisu sisältää virheitä |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/2-js-basics/4-arrays-loops/README.md b/translations/fi/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..8dcfb5c5
--- /dev/null
+++ b/translations/fi/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-27T20:15:58+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "fi"
+}
+-->
+# JavaScriptin perusteet: Taulukot ja silmukat
+
+![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.fi.png)
+> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Ennakkokysely
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Tässä oppitunnissa käsitellään JavaScriptin perusteita, kieltä, joka tuo interaktiivisuutta verkkoon. Opit taulukoista ja silmukoista, joita käytetään datan käsittelyyn.
+
+[![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")
+
+> 🎥 Klikkaa yllä olevia kuvia nähdäksesi videoita taulukoista ja silmukoista.
+
+> Voit käydä tämän oppitunnin [Microsoft Learnissa](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Taulukot
+
+Datan käsittely on yleinen tehtävä kaikissa ohjelmointikielissä, ja se on paljon helpompaa, kun data on järjestetty rakenteelliseen muotoon, kuten taulukkoon. Taulukoiden avulla data tallennetaan rakenteeseen, joka muistuttaa listaa. Yksi taulukoiden suurista eduista on, että voit tallentaa eri tyyppistä dataa yhteen taulukkoon.
+
+✅ Taulukot ovat kaikkialla ympärillämme! Voitko keksiä tosielämän esimerkin taulukosta, kuten aurinkopaneelijärjestelmästä?
+
+Taulukon syntaksi koostuu hakasuluista.
+
+```javascript
+let myArray = [];
+```
+
+Tämä on tyhjä taulukko, mutta taulukot voidaan määritellä jo valmiiksi datalla täytettyinä. Taulukon arvot erotetaan toisistaan pilkulla.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+Taulukon arvoille annetaan yksilöllinen arvo, jota kutsutaan **indeksiksi**. Indeksi on kokonaisluku, joka määritetään sen etäisyyden perusteella taulukon alusta. Yllä olevassa esimerkissä merkkijonoarvolla "Chocolate" on indeksi 0, ja "Rocky Road" -arvon indeksi on 4. Käytä indeksiä hakasulkeiden kanssa arvojen hakemiseen, muuttamiseen tai lisäämiseen.
+
+✅ Yllättääkö sinua, että taulukot alkavat indeksistä nolla? Joissakin ohjelmointikielissä indeksit alkavat ykkösestä. Tällä on mielenkiintoinen historia, josta voit [lukea Wikipediassa](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Voit käyttää indeksiä arvon muuttamiseen, kuten tässä:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+Ja voit lisätä uuden arvon tiettyyn indeksiin näin:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Yleisempi tapa lisätä arvoja taulukkoon on käyttää taulukko-operaattoreita, kuten array.push()
+
+Voit selvittää, kuinka monta arvoa taulukossa on, käyttämällä `length`-ominaisuutta.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Kokeile itse! Käytä selaimesi konsolia luodaksesi ja muokataksesi omaa taulukkoasi.
+
+## Silmukat
+
+Silmukoiden avulla voimme suorittaa toistuvia tai **iteratiivisia** tehtäviä, mikä säästää paljon aikaa ja koodia. Jokainen iteraatio voi vaihdella muuttujien, arvojen ja ehtojen osalta. JavaScriptissä on erilaisia silmukoita, joilla on pieniä eroja, mutta ne tekevät pohjimmiltaan saman asian: käyvät dataa läpi.
+
+### For-silmukka
+
+`for`-silmukka vaatii kolme osaa iteraatioon:
+- `counter` Muuttuja, joka yleensä alustetaan numerolla ja laskee iteraatioiden määrän
+- `condition` Lauseke, joka käyttää vertailuoperaattoreita ja pysäyttää silmukan, kun se on `false`
+- `iteration-expression` Suoritetaan jokaisen iteraation lopussa, yleensä laskurin arvon muuttamiseen
+  
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Suorita tämä koodi selaimesi konsolissa. Mitä tapahtuu, kun teet pieniä muutoksia laskuriin, ehtoon tai iteraatiolausekkeeseen? Voitko saada sen toimimaan taaksepäin, luoden lähtölaskennan?
+
+### While-silmukka
+
+Toisin kuin `for`-silmukan syntaksi, `while`-silmukka vaatii vain ehdon, joka pysäyttää silmukan, kun ehto muuttuu `false`. Silmukoiden ehdot yleensä riippuvat muista arvoista, kuten laskureista, ja niitä on hallittava silmukan aikana. Laskureiden alkuarvot on luotava silmukan ulkopuolella, ja kaikki lausekkeet, jotka täyttävät ehdon, mukaan lukien laskurin muuttaminen, on ylläpidettävä silmukan sisällä.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Miksi valitsisit for-silmukan vs. while-silmukan? 17 000 katsojaa pohti samaa kysymystä StackOverflowssa, ja jotkut mielipiteet [voivat olla mielenkiintoisia sinulle](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Silmukat ja taulukot
+
+Taulukoita käytetään usein silmukoiden kanssa, koska useimmat ehdot vaativat taulukon pituuden silmukan pysäyttämiseksi, ja indeksi voi myös toimia laskurin arvona.
+
+```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
+```
+
+✅ Kokeile silmukoida oma taulukkosi selaimesi konsolissa.
+
+---
+
+## 🚀 Haaste
+
+Taulukoiden silmukoimiseen on muitakin tapoja kuin for- ja while-silmukat. Esimerkiksi [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) ja [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Kirjoita taulukkosilmukkasi uudelleen käyttäen yhtä näistä tekniikoista.
+
+## Jälkikysely
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Kertaus ja itseopiskelu
+
+JavaScriptin taulukoilla on monia menetelmiä, jotka ovat erittäin hyödyllisiä datan käsittelyssä. [Lue näistä menetelmistä](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) ja kokeile joitakin niistä (kuten push, pop, slice ja splice) omalla taulukollasi.
+
+## Tehtävä
+
+[Silmukoi taulukko](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/2-js-basics/4-arrays-loops/assignment.md b/translations/fi/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..fcee5805
--- /dev/null
+++ b/translations/fi/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-27T20:17:05+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Käy läpi taulukko
+
+## Ohjeet
+
+Luo ohjelma, joka listaa jokaisen 3. numeron välillä 1-20 ja tulostaa sen konsoliin.
+
+> VINKKI: käytä for-silmukkaa ja muokkaa iteraatioilmaisua
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                            | Riittävä                 | Parannusta tarvitaan           |
+| -------- | -------------------------------------- | ------------------------ | ------------------------------ |
+|          | Ohjelma toimii oikein ja on kommentoitu | Ohjelma ei ole kommentoitu | Ohjelma on keskeneräinen tai virheellinen |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/2-js-basics/README.md b/translations/fi/2-js-basics/README.md
new file mode 100644
index 00000000..ee7bcf05
--- /dev/null
+++ b/translations/fi/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-27T20:12:26+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "fi"
+}
+-->
+# Johdanto JavaScriptiin
+
+JavaScript on verkon kieli. Näissä neljässä oppitunnissa opit sen perusteet.
+
+### Aihealueet
+
+1. [Muuttujat ja tietotyypit](1-data-types/README.md)  
+2. [Funktiot ja metodit](2-functions-methods/README.md)  
+3. [Päätöksenteko JavaScriptillä](3-making-decisions/README.md)  
+4. [Taulukot ja silmukat](4-arrays-loops/README.md)  
+
+### Tekijät
+
+Nämä oppitunnit on kirjoitettu ♥️:lla [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) ja [Chris Noring](https://twitter.com/chris_noring).
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/3-terrarium/1-intro-to-html/README.md b/translations/fi/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..ee2825fd
--- /dev/null
+++ b/translations/fi/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-27T20:05:09+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "fi"
+}
+-->
+# Terrarium-projekti Osa 1: Johdatus HTML:ään
+
+![Johdatus HTML:ään](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.fi.png)  
+> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+> Katso video
+
+> 
+> [![Git- ja GitHub-perusteet -video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Johdanto
+
+HTML eli HyperText Markup Language on verkkosivujen "luuranko". Jos CSS "pukee" HTML:n ja JavaScript tuo sen eloon, HTML on verkkosovelluksesi runko. HTML:n syntaksi heijastaa tätä ajatusta, sillä se sisältää "head"-, "body"- ja "footer"-tagit.
+
+Tässä oppitunnissa käytämme HTML:ää rakentaaksemme virtuaalisen terraariomme käyttöliittymän "luurangon". Siinä on otsikko ja kolme saraketta: oikea ja vasen sarake, joissa siirrettävät kasvit sijaitsevat, sekä keskialue, joka toimii lasimaisena terraariona. Tämän oppitunnin lopussa näet kasvit sarakkeissa, mutta käyttöliittymä näyttää hieman oudolta; älä huoli, seuraavassa osiossa lisäät CSS-tyylejä, jotta käyttöliittymä näyttää paremmalta.
+
+### Tehtävä
+
+Luo tietokoneellesi kansio nimeltä 'terrarium' ja sen sisälle tiedosto nimeltä 'index.html'. Voit tehdä tämän Visual Studio Codessa avaamalla uuden VS Code -ikkunan, klikkaamalla 'open folder' ja navigoimalla uuteen kansioosi. Klikkaa pientä 'file'-painiketta Explorer-paneelissa ja luo uusi tiedosto:
+
+![Explorer VS Codessa](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.fi.png)
+
+Tai
+
+Käytä näitä komentoja git bashissa:  
+* `mkdir terrarium`  
+* `cd terrarium`  
+* `touch index.html`  
+* `code index.html` tai `nano index.html`
+
+> index.html-tiedostot kertovat selaimelle, että kyseessä on kansion oletustiedosto; URL-osoitteet, kuten `https://anysite.com/test`, voivat perustua kansiorakenteeseen, jossa on kansio nimeltä `test` ja sen sisällä `index.html`; `index.html` ei välttämättä näy URL-osoitteessa.
+
+---
+
+## DocType ja html-tagit
+
+HTML-tiedoston ensimmäinen rivi on sen doctype. On hieman yllättävää, että tämä rivi täytyy olla aivan tiedoston yläosassa, mutta se kertoo vanhemmille selaimille, että sivu täytyy renderöidä standarditilassa nykyisen HTML-spesifikaation mukaisesti.
+
+> Vinkki: VS Codessa voit viedä hiiren tagin päälle ja saada tietoa sen käytöstä MDN Reference -oppaista.
+
+Toinen rivi on `<html>`-tagin avaus, jota seuraa sen sulkeva tagi `</html>`. Nämä tagit ovat käyttöliittymäsi juurielementit.
+
+### Tehtävä
+
+Lisää nämä rivit `index.html`-tiedostosi alkuun:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ On olemassa muutamia eri tiloja, jotka voidaan määrittää asettamalla DocType kyselymerkkijonolla: [Quirks Mode ja Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Näitä tiloja käytettiin tukemaan todella vanhoja selaimia, joita ei nykyään juuri käytetä (kuten Netscape Navigator 4 ja Internet Explorer 5). Voit pysyä standardin doctype-määrittelyn käytössä.
+
+---
+
+## Dokumentin 'head'
+
+HTML-dokumentin 'head'-alue sisältää tärkeitä tietoja verkkosivustasi, joita kutsutaan myös [metatiedoiksi](https://developer.mozilla.org/docs/Web/HTML/Element/meta). Meidän tapauksessamme kerromme verkkopalvelimelle, jolle tämä sivu lähetetään renderöitäväksi, nämä neljä asiaa:
+
+-   sivun otsikko  
+-   sivun metatiedot, mukaan lukien:  
+    -   'merkistö', joka kertoo, mitä merkistökoodausta sivulla käytetään  
+    -   selaintiedot, mukaan lukien `x-ua-compatible`, joka osoittaa, että IE=edge-selain on tuettu  
+    -   tietoa siitä, miten näkymäportin tulisi käyttäytyä, kun se ladataan. Näkymäportin asettaminen alkuperäiseen mittakaavaan 1 hallitsee zoomaustasoa, kun sivu ladataan ensimmäisen kerran.
+
+### Tehtävä
+
+Lisää 'head'-lohko dokumenttiisi `<html>`-tagien väliin.
+
+```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>
+```
+
+✅ Mitä tapahtuisi, jos asettaisit näkymäportin meta-tagin näin: `<meta name="viewport" content="width=600">`? Lue lisää [näkymäportista](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## Dokumentin `body`
+
+### HTML-tagit
+
+HTML:ssä lisäät tageja .html-tiedostoosi luodaksesi verkkosivun elementtejä. Jokaisella tagilla on yleensä avaus- ja sulkutagi, kuten tämä: `<p>hello</p>` kappaleen merkitsemiseksi. Luo käyttöliittymäsi runko lisäämällä `<body>`-tagit `<html>`-tagiparin sisään; merkintäsi näyttää nyt tältä:
+
+### Tehtävä
+
+```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>
+```
+
+Nyt voit alkaa rakentaa sivuasi. Yleensä käytät `<div>`-tageja luodaksesi erillisiä elementtejä sivulle. Luomme sarjan `<div>`-elementtejä, jotka sisältävät kuvia.
+
+### Kuvat
+
+Yksi HTML-tagi, joka ei tarvitse sulkutagia, on `<img>`-tagi, koska sillä on `src`-elementti, joka sisältää kaiken tarvittavan tiedon kohteen renderöimiseksi.
+
+Luo sovellukseesi kansio nimeltä `images` ja lisää siihen kaikki kuvat [lähdekoodikansiosta](../../../../3-terrarium/solution/images); (siellä on 14 kasvikuvan tiedostoa).
+
+### Tehtävä
+
+Lisää nämä kasvikuvat kahteen sarakkeeseen `<body></body>`-tagien väliin:
+
+```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>
+```
+
+> Huom: Spanit vs. Divit. Divit ovat 'block'-elementtejä, ja Spanit ovat 'inline'-elementtejä. Mitä tapahtuisi, jos muuttaisit nämä divit spaneiksi?
+
+Näillä merkinnöillä kasvit näkyvät nyt ruudulla. Ne näyttävät melko huonoilta, koska niitä ei ole vielä tyylitelty CSS:llä, mutta teemme sen seuraavassa oppitunnissa.
+
+Jokaisella kuvalla on alt-teksti, joka näkyy, vaikka et voisi nähdä tai renderöidä kuvaa. Tämä on tärkeä ominaisuus saavutettavuuden kannalta. Opit lisää saavutettavuudesta tulevissa oppitunneissa; toistaiseksi muista, että alt-attribuutti tarjoaa vaihtoehtoista tietoa kuvalle, jos käyttäjä ei jostain syystä voi nähdä sitä (hitaan yhteyden, src-attribuutin virheen tai ruudunlukijan käytön vuoksi).
+
+✅ Huomasitko, että jokaisella kuvalla on sama alt-tagi? Onko tämä hyvä käytäntö? Miksi tai miksi ei? Voitko parantaa tätä koodia?
+
+---
+
+## Semanttinen merkintä
+
+Yleisesti ottaen on suositeltavaa käyttää merkityksellistä 'semantiikkaa', kun kirjoitat HTML:ää. Mitä tämä tarkoittaa? Se tarkoittaa, että käytät HTML-tageja edustamaan sitä tietotyyppiä tai vuorovaikutusta, johon ne on suunniteltu. Esimerkiksi sivun pääotsikkotekstin tulisi käyttää `<h1>`-tagia.
+
+Lisää seuraava rivi heti avaus-`<body>`-tagisi alle:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Semanttisen merkinnän käyttäminen, kuten otsikoiden merkitseminen `<h1>`-tageilla ja järjestämättömien listojen merkitseminen `<ul>`-tageilla, auttaa ruudunlukijoita navigoimaan sivulla. Yleisesti ottaen painikkeet tulisi kirjoittaa `<button>`-tageina ja listat `<li>`-tageina. Vaikka on _mahdollista_ käyttää erityisesti tyyliteltyjä `<span>`-elementtejä klikkaustoimintojen kanssa painikkeiden jäljittelemiseksi, on parempi, että vammaiset käyttäjät voivat käyttää teknologioita määrittämään, missä painike sijaitsee sivulla ja vuorovaikuttamaan sen kanssa, jos elementti näkyy painikkeena. Tästä syystä yritä käyttää semanttista merkintää mahdollisimman paljon.
+
+✅ Katso ruudunlukijaa ja [miten se vuorovaikuttaa verkkosivun kanssa](https://www.youtube.com/watch?v=OUDV1gqs9GA). Näetkö, miksi epäsemanttinen merkintä saattaisi turhauttaa käyttäjää?
+
+## Terraario
+
+Käyttöliittymän viimeinen osa sisältää merkinnän, joka tyylitellään terraarioksi.
+
+### Tehtävä:
+
+Lisää tämä merkintä viimeisen `</div>`-tagin yläpuolelle:
+
+```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>
+```
+
+✅ Vaikka lisäsit tämän merkinnän ruudulle, et näe mitään renderöityvän. Miksi?
+
+---
+
+## 🚀Haaste
+
+HTML:ssä on joitakin vanhoja "villikortti"-tageja, joita on edelleen hauska kokeilla, vaikka sinun ei pitäisi käyttää vanhentuneita tageja, kuten [näitä tageja](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) merkinnöissäsi. Voitko käyttää vanhaa `<marquee>`-tagia saadaksesi h1-otsikon vierimään vaakasuunnassa? (jos teet sen, muista poistaa se myöhemmin)
+
+## Jälkikysely
+
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Kertaus ja itseopiskelu
+
+HTML on "koeteltu ja hyväksi havaittu" rakennusjärjestelmä, joka on auttanut rakentamaan verkon sellaiseksi kuin se on tänään. Opi hieman sen historiasta tutkimalla vanhoja ja uusia tageja. Voitko selvittää, miksi jotkut tagit vanhentuivat ja toiset lisättiin? Mitä tageja voisi tulla tulevaisuudessa?
+
+Lisätietoja verkkosivustojen ja mobiililaitteille suunnattujen sivustojen rakentamisesta löydät [Microsoft Learnista](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+## Tehtävä
+
+[Harjoittele HTML:ää: Rakenna blogin mallipohja](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinkäsityksistä tai virhetulkinnoista.
\ No newline at end of file
diff --git a/translations/fi/3-terrarium/1-intro-to-html/assignment.md b/translations/fi/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..85bd26ce
--- /dev/null
+++ b/translations/fi/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-27T20:06:43+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Harjoittele HTML: Rakenna blogin mallipohja
+
+## Ohjeet
+
+Kuvittele, että suunnittelet tai uudelleensuunnittelet henkilökohtaista verkkosivustoasi. Luo sivustostasi graafinen mallipohja ja kirjoita sitten HTML-koodi, jota käyttäisit sivuston eri elementtien rakentamiseen. Voit tehdä tämän paperilla ja skannata sen tai käyttää valitsemaasi ohjelmistoa, mutta varmista, että kirjoitat HTML-koodin käsin.
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                                                       | Riittävä                                                                       | Parannusta tarvitaan                                                             |
+| -------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
+|          | Blogimallipohja on esitetty visuaalisesti, ja siinä on vähintään 10 HTML-elementtiä | Blogimallipohja on esitetty visuaalisesti, ja siinä on noin 5 HTML-elementtiä   | Blogimallipohja on esitetty visuaalisesti, ja siinä on enintään 3 HTML-elementtiä |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/3-terrarium/2-intro-to-css/README.md b/translations/fi/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..4554e77a
--- /dev/null
+++ b/translations/fi/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-27T20:09:59+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "fi"
+}
+-->
+# Terrarium-projekti, osa 2: Johdatus CSS:ään
+
+![Johdatus CSS:ään](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.fi.png)  
+> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Johdanto
+
+CSS eli Cascading Style Sheets ratkaisee tärkeän ongelman verkkokehityksessä: miten saada verkkosivustosi näyttämään hyvältä. Sovellusten tyylittely tekee niistä käytettävämpiä ja visuaalisesti miellyttävämpiä; CSS:ää voidaan myös käyttää luomaan responsiivista verkkosuunnittelua (Responsive Web Design, RWD), jolloin sovellukset näyttävät hyviltä riippumatta siitä, minkä kokoisella näytöllä niitä käytetään. CSS ei ole pelkästään ulkonäön parantamista varten; sen määrittely sisältää myös animaatioita ja muunnoksia, jotka mahdollistavat kehittyneitä vuorovaikutuksia sovelluksissasi. CSS Working Group ylläpitää nykyisiä CSS-määrittelyjä; voit seurata heidän työtään [World Wide Web Consortiumin sivustolla](https://www.w3.org/Style/CSS/members).
+
+> Huomaa, että CSS on kieli, joka kehittyy kuten kaikki muutkin verkkoteknologiat, eikä kaikki selaimet tue uusimpia määrittelyn osia. Tarkista aina toteutuksesi [CanIUse.com](https://caniuse.com)-sivustolta.
+
+Tässä oppitunnissa lisäämme tyylejä verkkoterrariumiimme ja opimme lisää useista CSS-käsitteistä: kaskadista, periytymisestä sekä valitsimien, asemoinnin ja CSS:n avulla tehtävien asettelujen käytöstä. Samalla rakennamme terrariumin asettelun ja luomme itse terrariumin.
+
+### Esitiedot
+
+Sinulla tulisi olla terrariumisi HTML valmiina tyylittelyä varten.
+
+> Katso video
+
+> 
+> [![Git- ja GitHub-perusteet -video](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Tehtävä
+
+Luo terrarium-kansioosi uusi tiedosto nimeltä `style.css`. Tuo tämä tiedosto `<head>`-osioon:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## Kaskadi
+
+Cascading Style Sheets sisältää ajatuksen siitä, että tyylit "kaskadoituvat", eli tyylin soveltaminen määräytyy sen prioriteetin mukaan. Verkkosivuston tekijän määrittämät tyylit ovat etusijalla selaimen oletustyyleihin nähden. "Inline"-tyylit ovat etusijalla ulkoisessa tyylitiedostossa määritettyihin tyyleihin nähden.
+
+### Tehtävä
+
+Lisää "inline"-tyyli "color: red" `<h1>`-tagiisi:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Lisää sitten seuraava koodi `style.css`-tiedostoosi:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Mikä väri näkyy verkkosovelluksessasi? Miksi? Voitko löytää tavan ohittaa tyylit? Milloin haluaisit tehdä näin, tai miksi et?
+
+---
+
+## Periytyminen
+
+Tyylit periytyvät esivanhemmalta jälkeläiselle, eli sisäkkäiset elementit perivät vanhempiensa tyylit.
+
+### Tehtävä
+
+Aseta bodylle tietty fontti ja tarkista, periytyykö fontti sisäkkäiselle elementille:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Avaa selaimesi konsolista 'Elements'-välilehti ja tarkkaile H1:n fonttia. Se perii fonttinsa bodysta, kuten selain ilmoittaa:
+
+![peritty fontti](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.fi.png)
+
+✅ Voitko saada sisäkkäisen tyylin perimään eri ominaisuuden?
+
+---
+
+## CSS-valitsimet
+
+### Tagit
+
+Tähän mennessä `style.css`-tiedostossasi on vain muutama tagi tyyliteltynä, ja sovellus näyttää melko oudolta:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Tällä tavalla tagin tyylittely antaa sinulle hallinnan yksittäisiin elementteihin, mutta sinun täytyy hallita monien kasvien tyylejä terrariumissasi. Tätä varten sinun täytyy hyödyntää CSS-valitsimia.
+
+### Id:t
+
+Lisää tyyliä asettelemaan vasen ja oikea säilö. Koska merkinnässä on vain yksi vasen säilö ja yksi oikea säilö, niille on annettu id:t. Tyylittele niitä käyttämällä `#`:
+
+```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;
+}
+```
+
+Tässä olet asettanut nämä säilöt absoluuttisella asemoinnilla aivan näytön vasempaan ja oikeaan reunaan ja käyttänyt prosentteja niiden leveydelle, jotta ne voivat mukautua pienille mobiilinäytöille.
+
+✅ Tämä koodi on melko toistuvaa, joten se ei ole "DRY" (Don't Repeat Yourself); voitko löytää paremman tavan tyylitellä näitä id:itä, ehkä yhdistämällä id:n ja luokan? Sinun täytyisi muuttaa merkintää ja refaktoroida CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Luokat
+
+Yllä olevassa esimerkissä tyylittelit kahta ainutlaatuista elementtiä näytöllä. Jos haluat tyylien koskevan monia elementtejä näytöllä, voit käyttää CSS-luokkia. Tee näin asettelemaan kasvit vasemmassa ja oikeassa säilössä.
+
+Huomaa, että jokaisella kasvilla HTML-merkinnässä on yhdistelmä id:itä ja luokkia. Id:tä käytetään tässä myöhemmin lisättävän JavaScriptin avulla manipuloimaan terrariumin kasvien sijoittelua. Luokat taas antavat kaikille kasveille tietyn tyylin.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Lisää seuraava `style.css`-tiedostoosi:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Tässä koodinpätkässä on huomionarvoista suhteellisen ja absoluuttisen asemoinnin yhdistelmä, jota käsitellään seuraavassa osiossa. Tarkastele tapaa, jolla korkeuksia käsitellään prosentteina:
+
+Olet asettanut kasvien säilön korkeudeksi 13 %, mikä on hyvä luku varmistaaksesi, että kaikki kasvit näkyvät pystysuorassa säilössä ilman tarvetta vierittää.
+
+Olet siirtänyt kasvien säilöä vasemmalle, jotta kasvit olisivat paremmin keskitettyjä säilöönsä. Kuvilla on paljon läpinäkyvää taustaa, jotta ne olisivat helpommin vedettäviä, joten ne täytyy siirtää vasemmalle, jotta ne sopivat paremmin näytölle.
+
+Kasville itselleen on annettu enimmäisleveys 150 %. Tämä mahdollistaa sen skaalautumisen alaspäin selaimen pienentyessä. Kokeile muuttaa selaimesi kokoa; kasvit pysyvät säilöissään mutta skaalautuvat sopimaan.
+
+Huomionarvoista on myös z-indeksin käyttö, joka hallitsee elementin suhteellista korkeutta (jotta kasvit istuvat säilön päällä ja näyttävät olevan terrariumin sisällä).
+
+✅ Miksi tarvitset sekä kasvien säilön että kasvin CSS-valitsimen?
+
+## CSS-asemointi
+
+Eri asemointiominaisuuksien (staattinen, suhteellinen, kiinteä, absoluuttinen ja tahmea asemointi) yhdistäminen voi olla hieman hankalaa, mutta kun se tehdään oikein, se antaa sinulle hyvän hallinnan sivujesi elementteihin.
+
+Absoluuttisesti asemoidut elementit asemoidaan lähimpään asemoituun esivanhempaansa nähden, ja jos sellaista ei ole, ne asemoidaan dokumentin runkoon nähden.
+
+Suhteellisesti asemoidut elementit asemoidaan CSS:n ohjeiden mukaan siirtymään pois alkuperäisestä sijainnistaan.
+
+Esimerkissämme `plant-holder` on suhteellisesti asemoitu elementti, joka on asemoitu absoluuttisesti asemoidun säilön sisällä. Tuloksena on, että sivupalkkisäilöt on kiinnitetty vasemmalle ja oikealle, ja `plant-holder` on sisäkkäinen, mukautuen sivupalkkien sisällä ja antaen tilaa kasvien sijoittamiselle pystysuoraan riviin.
+
+> Itse `plant` on myös absoluuttisesti asemoitu, mikä on tarpeen sen vedettävyyden mahdollistamiseksi, kuten huomaat seuraavassa oppitunnissa.
+
+✅ Kokeile vaihtaa sivusäilöjen ja `plant-holder`-elementin asemointityyppejä. Mitä tapahtuu?
+
+## CSS-asettelut
+
+Nyt käytät oppimaasi rakentaaksesi itse terrariumin, täysin CSS:n avulla!
+
+Tyylittele ensin `.terrarium`-divin lapset pyöristetyksi suorakulmioksi CSS:n avulla:
+
+```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;
+}
+```
+
+Huomaa prosenttien käyttö tässä. Jos pienennät selaintasi, näet, kuinka purkki skaalautuu. Huomaa myös purkkielementtien leveys- ja korkeuspisteet sekä se, kuinka jokainen elementti on absoluuttisesti asemoitu keskelle ja kiinnitetty näkymän alareunaan.
+
+Käytämme myös `rem`-yksikköä border-radius-ominaisuudessa, joka on fonttiin suhteutettu mitta. Lue lisää tästä suhteellisesta mittayksiköstä [CSS-määrittelystä](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Kokeile muuttaa purkin värejä ja läpinäkyvyyttä verrattuna maahan. Mitä tapahtuu? Miksi?
+
+---
+
+## 🚀Haaste
+
+Lisää "kuplamainen" kiilto purkin vasempaan alareunaan, jotta se näyttäisi lasimaisemmalta. Tyylittele `.jar-glossy-long` ja `.jar-glossy-short` näyttämään heijastavalta kiillolta. Tässä on esimerkki lopputuloksesta:
+
+![valmis terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.fi.png)
+
+Suorita jälkikysely käymällä läpi tämä Learn-moduuli: [Tyylittele HTML-sovelluksesi CSS:llä](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Jälkikysely
+
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Kertaus ja itseopiskelu
+
+CSS vaikuttaa petollisen yksinkertaiselta, mutta täydellisen sovelluksen tyylittely kaikille selaimille ja kaikille näytön kokoille voi olla haastavaa. CSS-Grid ja Flexbox ovat työkaluja, jotka on kehitetty tekemään työstä hieman rakenteellisempaa ja luotettavampaa. Opi näistä työkaluista pelaamalla [Flexbox Froggy](https://flexboxfroggy.com/) ja [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Tehtävä
+
+[CSS Refaktorointi](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/3-terrarium/2-intro-to-css/assignment.md b/translations/fi/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..5ca0511c
--- /dev/null
+++ b/translations/fi/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-27T20:11:41+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "fi"
+}
+-->
+# CSS-uudelleenjärjestely
+
+## Ohjeet
+
+Muotoile terrarium uudelleen käyttämällä joko Flexboxia tai CSS Gridia ja ota kuvakaappauksia osoittaaksesi, että olet testannut sen useilla selaimilla. Saatat joutua muuttamaan merkkausta, joten luo sovelluksesta uusi versio, jossa taideteos on paikallaan uudelleenjärjestelyä varten. Älä huolehdi elementtien vedettäväksi tekemisestä; keskity tässä vaiheessa vain HTML:n ja CSS:n uudelleenjärjestelyyn.
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                                      | Riittävä                     | Parannusta tarvitaan                 |
+| -------- | ---------------------------------------------------------------- | ---------------------------- | ------------------------------------ |
+|          | Esitä täysin uudelleen muotoiltu terrarium Flexboxin tai CSS Gridin avulla | Muotoile muutamia elementtejä uudelleen | Epäonnistuu terrariumin uudelleenmuotoilussa kokonaan |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/fi/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..48dc73b0
--- /dev/null
+++ b/translations/fi/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-27T20:07:02+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "fi"
+}
+-->
+# Terrarium-projekti Osa 3: DOM-manipulointi ja sulkeuma
+
+![DOM ja sulkeuma](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.fi.png)
+> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Johdanto
+
+DOM-manipulointi eli "Document Object Modelin" käsittely on keskeinen osa verkkokehitystä. [MDN:n](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) mukaan "Document Object Model (DOM) on verkkosivun rakenteen ja sisällön muodostavien objektien tietoesitys." DOM-manipuloinnin haasteet ovat usein johtaneet siihen, että JavaScript-kehyksiä käytetään sen hallintaan sen sijaan, että käytettäisiin pelkkää JavaScriptiä. Tässä projektissa pärjäämme kuitenkin ilman kehyksiä!
+
+Lisäksi tässä oppitunnissa esitellään [JavaScript-sulkeuma](https://developer.mozilla.org/docs/Web/JavaScript/Closures), jonka voi ajatella olevan funktio, joka on suljettu toisen funktion sisään, jolloin sisempi funktio pääsee käsiksi ulomman funktion laajuuteen.
+
+> JavaScript-sulkeumat ovat laaja ja monimutkainen aihe. Tässä oppitunnissa käsitellään perusidea, jossa terrariumin koodissa on sulkeuma: sisempi funktio ja ulompi funktio on rakennettu siten, että sisempi funktio pääsee käsiksi ulomman funktion laajuuteen. Lisätietoja aiheesta löytyy [laajasta dokumentaatiosta](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
+
+Käytämme sulkeumaa DOM-manipulointiin.
+
+Ajattele DOM:ia puuna, joka edustaa kaikkia tapoja, joilla verkkosivun dokumenttia voidaan manipuloida. Erilaisia API:ja (Application Program Interfaces) on kirjoitettu, jotta ohjelmoijat voivat käyttää DOM:ia ja muokata, järjestellä ja hallita sitä haluamallaan tavalla.
+
+![DOM-puun esitys](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.fi.png)
+
+> DOM:n ja siihen viittaavan HTML-merkinnän esitys. Lähde: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+Tässä oppitunnissa viimeistelemme interaktiivisen terrarium-projektimme luomalla JavaScriptin, joka mahdollistaa kasvien siirtämisen sivulla.
+
+### Esitietovaatimukset
+
+Sinulla tulisi olla terrariumin HTML ja CSS valmiina. Oppitunnin lopussa pystyt siirtämään kasveja terrariumiin ja sieltä pois vetämällä niitä.
+
+### Tehtävä
+
+Luo terrarium-kansioon uusi tiedosto nimeltä `script.js`. Tuo tämä tiedosto `<head>`-osioon:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Huomio: käytä `defer`-attribuuttia tuodessasi ulkoista JavaScript-tiedostoa HTML-tiedostoon, jotta JavaScript suoritetaan vasta, kun HTML-tiedosto on täysin ladattu. Voisit myös käyttää `async`-attribuuttia, joka sallii skriptin suorittamisen HTML-tiedoston jäsentämisen aikana, mutta tässä tapauksessa on tärkeää, että HTML-elementit ovat täysin saatavilla ennen kuin vetämistoiminto suoritetaan.
+---
+
+## DOM-elementit
+
+Ensimmäinen tehtäväsi on luoda viittaukset DOM:n elementteihin, joita haluat manipuloida. Meidän tapauksessamme nämä ovat 14 kasvia, jotka odottavat sivupalkissa.
+
+### Tehtävä
+
+```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'));
+```
+
+Mitä tässä tapahtuu? Viittaat dokumenttiin ja etsit sen DOM:ista elementin, jolla on tietty Id. Muista, että ensimmäisessä HTML-oppitunnissa annoit yksilölliset Id:t jokaiselle kasvikuvalle (`id="plant1"`). Nyt hyödynnät tätä työtä. Kun olet tunnistanut jokaisen elementin, välität sen funktiolle nimeltä `dragElement`, jonka rakennat hetken kuluttua. Näin HTML-elementti on nyt vedettävissä, tai tulee olemaan pian.
+
+✅ Miksi viittaamme elementteihin Id:n avulla? Miksi emme CSS-luokan avulla? Voit palata edelliseen CSS-oppituntiin vastataksesi tähän kysymykseen.
+
+---
+
+## Sulkeuma
+
+Nyt olet valmis luomaan `dragElement`-sulkeuman, joka on ulompi funktio, joka sulkee sisemmän funktion tai funktiot (meidän tapauksessamme kolme).
+
+Sulkeumat ovat hyödyllisiä, kun yksi tai useampi funktio tarvitsee pääsyn ulomman funktion laajuuteen. Tässä esimerkki:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+Tässä esimerkissä `displayCandy`-funktio ympäröi funktion, joka lisää uuden karkkityypin jo olemassa olevaan taulukkoon. Jos suorittaisit tämän koodin, `candy`-taulukko olisi määrittelemätön, koska se on paikallinen muuttuja (paikallinen sulkeumalle).
+
+✅ Kuinka voit tehdä `candy`-taulukosta saavutettavan? Kokeile siirtää se sulkeuman ulkopuolelle. Näin taulukosta tulee globaali, eikä se jää vain sulkeuman paikalliseen laajuuteen.
+
+### Tehtävä
+
+Luo `script.js`-tiedostoon funktio elementtien määrittelyjen alle:
+
+```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` saa `terrariumElement`-objektinsa skriptin yläosassa tehdyistä määrittelyistä. Sitten asetat joitakin paikallisia sijainteja `0`:ksi funktiolle välitetylle objektille. Nämä ovat paikallisia muuttujia, joita manipuloidaan jokaiselle elementille, kun lisäät vetämis- ja pudotustoiminnallisuutta sulkeuman sisällä. Terrarium täytetään näillä vedettävillä elementeillä, joten sovelluksen täytyy pitää kirjaa siitä, mihin ne sijoitetaan.
+
+Lisäksi funktiolle välitetty `terrariumElement`-objekti saa `pointerdown`-tapahtuman, joka on osa [web API:ja](https://developer.mozilla.org/docs/Web/API), jotka on suunniteltu auttamaan DOM:n hallinnassa. `onpointerdown` aktivoituu, kun painiketta painetaan, tai meidän tapauksessamme, kun vedettävää elementtiä kosketetaan. Tämä tapahtumankäsittelijä toimii sekä [web- että mobiiliselaimissa](https://caniuse.com/?search=onpointerdown), muutamia poikkeuksia lukuun ottamatta.
+
+✅ [Tapahtumankäsittelijä `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) on paljon laajemmin tuettu eri selaimissa; miksi et käyttäisi sitä tässä? Mieti tarkasti, millaista ruutukosketusta yrität luoda tässä.
+
+---
+
+## Pointerdrag-funktio
+
+`terrariumElement` on valmis vedettäväksi; kun `onpointerdown`-tapahtuma aktivoituu, funktio `pointerDrag` kutsutaan. Lisää tämä funktio heti tämän rivin alle: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Tehtävä 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Useita asioita tapahtuu. Ensinnäkin estät oletustapahtumat, jotka normaalisti tapahtuvat pointerdown-tapahtumassa, käyttämällä `e.preventDefault();`. Näin sinulla on enemmän hallintaa käyttöliittymän käyttäytymisestä.
+
+> Palaa tähän riviin, kun olet rakentanut skriptitiedoston kokonaan, ja kokeile ilman `e.preventDefault()` - mitä tapahtuu?
+
+Toiseksi, avaa `index.html` selaimessa ja tarkastele käyttöliittymää. Kun napsautat kasvia, näet kuinka 'e'-tapahtuma tallennetaan. Tutki tapahtumaa nähdäksesi, kuinka paljon tietoa kerätään yhdestä pointerdown-tapahtumasta!  
+
+Seuraavaksi huomaa, kuinka paikalliset muuttujat `pos3` ja `pos4` asetetaan arvoon e.clientX. Voit löytää `e`-arvot tarkastelupaneelista. Nämä arvot tallentavat kasvin x- ja y-koordinaatit sillä hetkellä, kun napsautat tai kosketat sitä. Tarvitset tarkkaa hallintaa kasvien käyttäytymisestä, kun napsautat ja vedät niitä, joten pidät kirjaa niiden koordinaateista.
+
+✅ Alkaako olla selvempää, miksi koko sovellus rakennetaan yhdellä suurella sulkeumalla? Jos ei olisi, kuinka ylläpitäisit laajuutta jokaiselle 14 vedettävälle kasville?
+
+Täydennä alkuperäinen funktio lisäämällä kaksi muuta pointer-tapahtumien käsittelyä `pos4 = e.clientY`-rivin alle:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Nyt ilmoitat, että haluat kasvin liikkuvan osoittimen mukana, kun siirrät sitä, ja että vetämisliike pysähtyy, kun lopetat kasvin valinnan. `onpointermove` ja `onpointerup` ovat kaikki osa samaa API:ta kuin `onpointerdown`. Käyttöliittymä heittää nyt virheitä, koska et ole vielä määritellyt `elementDrag`- ja `stopElementDrag`-funktioita, joten rakenna ne seuraavaksi.
+
+## elementDrag- ja stopElementDrag-funktiot
+
+Täydennät sulkeumasi lisäämällä kaksi sisäistä funktiota, jotka käsittelevät, mitä tapahtuu, kun vedät kasvia ja lopetat sen vetämisen. Haluttu käyttäytyminen on, että voit vetää mitä tahansa kasvia milloin tahansa ja sijoittaa sen mihin tahansa ruudulla. Tämä käyttöliittymä on melko joustava (esimerkiksi pudotusaluetta ei ole), jotta voit suunnitella terrariumin juuri haluamallasi tavalla lisäämällä, poistamalla ja siirtämällä kasveja.
+
+### Tehtävä
+
+Lisää `elementDrag`-funktio heti `pointerDrag`-funktion sulkevan aaltosulkeen jälkeen:
+
+```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';
+}
+```
+Tässä funktiossa teet paljon muokkauksia alkuperäisiin sijainteihin 1-4, jotka asetit paikallisiksi muuttujiksi ulommassa funktiossa. Mitä tässä tapahtuu?
+
+Kun vedät, määrität uudelleen `pos1`:n tekemällä siitä yhtä kuin `pos3` (jonka asetit aiemmin arvoksi `e.clientX`) miinus nykyinen `e.clientX`-arvo. Teet samanlaisen operaation `pos2`:lle. Sitten asetat `pos3`:n ja `pos4`:n uudelleen elementin uusiin X- ja Y-koordinaatteihin. Voit seurata näitä muutoksia konsolissa vetämisen aikana. Sitten muokkaat kasvin CSS-tyyliä asettaaksesi sen uuden sijainnin perustuen uusiin `pos1`- ja `pos2`-sijainteihin, laskemalla kasvin ylä- ja vasemman X- ja Y-koordinaatit vertaamalla sen offset-arvoa näihin uusiin sijainteihin.
+
+> `offsetTop` ja `offsetLeft` ovat CSS-ominaisuuksia, jotka asettavat elementin sijainnin sen vanhemman elementin perusteella; vanhempi elementti voi olla mikä tahansa, joka ei ole asetettu `static`-sijaintiin. 
+
+Kaikki tämä sijainnin uudelleenlaskenta mahdollistaa terrariumin ja sen kasvien käyttäytymisen hienosäädön.
+
+### Tehtävä 
+
+Viimeinen tehtävä käyttöliittymän täydentämiseksi on lisätä `stopElementDrag`-funktio `elementDrag`-funktion sulkevan aaltosulkeen jälkeen:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Tämä pieni funktio nollaa `onpointerup`- ja `onpointermove`-tapahtumat, jotta voit joko aloittaa kasvin siirtämisen uudelleen tai aloittaa uuden kasvin vetämisen.
+
+✅ Mitä tapahtuu, jos et aseta näitä tapahtumia nulliksi?
+
+Nyt olet valmis projektisi kanssa!
+
+🥇Onnittelut! Olet viimeistellyt kauniin terrariumisi. ![valmis terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.fi.png)
+
+---
+
+## 🚀Haaste
+
+Lisää uusi tapahtumankäsittelijä sulkeumaasi tekemään jotain muuta kasveille; esimerkiksi kaksoisnapsauta kasvia tuodaksesi sen etualalle. Ole luova!
+
+## Jälkikysely
+
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Kertaus ja itseopiskelu
+
+Vaikka elementtien vetäminen ruudulla vaikuttaa yksinkertaiselta, on monia tapoja tehdä tämä ja monia sudenkuoppia riippuen halutusta vaikutuksesta. Itse asiassa on olemassa kokonainen [drag and drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API), jota voit kokeilla. Emme käyttäneet sitä tässä moduulissa, koska haluamamme vaikutus oli hieman erilainen, mutta kokeile tätä API:a omassa projektissasi ja katso, mitä voit saavuttaa.
+
+Lisätietoja pointer-tapahtumista löytyy [W3C-dokumentaatiosta](https://www.w3.org/TR/pointerevents1/) ja [MDN-web-dokumentaatiosta](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Tarkista aina selainten yhteensopivuus [CanIUse.com](https://caniuse.com/)-sivustolla.
+
+## Tehtävä
+
+[Työskentele hieman lisää DOM:n kanssa](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/fi/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..9ada204a
--- /dev/null
+++ b/translations/fi/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-27T20:09:41+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Työskentele hieman enemmän DOM:n kanssa
+
+## Ohjeet
+
+Tutki DOM:ia hieman lisää 'adoptoimalla' DOM-elementti. Käy MDN:n [DOM-rajapintojen listalla](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) ja valitse yksi. Etsi esimerkki sen käytöstä verkkosivustolla ja kirjoita selitys siitä, miten sitä käytetään.
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                  | Riittävä                                         | Parannusta tarvitaan    |
+| -------- | -------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|          | Kirjoitettu kappale esimerkin kanssa         | Kirjoitettu kappale ilman esimerkkiä            | Ei kirjoitusta          |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/3-terrarium/README.md b/translations/fi/3-terrarium/README.md
new file mode 100644
index 00000000..e0237660
--- /dev/null
+++ b/translations/fi/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-27T20:04:42+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "fi"
+}
+-->
+# Minun Terraarioni: Projekti HTML:n, CSS:n ja DOM-manipulaation oppimiseen JavaScriptin avulla 🌵🌱
+
+Pieni drag and drop -koodimeditaatio. Vähän HTML:ää, JS:ää ja CSS:ää käyttäen voit rakentaa verkkokäyttöliittymän, tyylitellä sen ja lisätä siihen useita haluamiasi vuorovaikutuksia.
+
+![minun terraarioni](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.fi.png)
+
+# Oppitunnit
+
+1. [Johdanto HTML:ään](./1-intro-to-html/README.md)
+2. [Johdanto CSS:ään](./2-intro-to-css/README.md)
+3. [Johdanto DOM:iin ja JS Closures -toimintoihin](./3-intro-to-DOM-and-closures/README.md)
+
+## Tekijät
+
+Kirjoitettu ♥️:lla [Jen Looperin](https://www.twitter.com/jenlooper) toimesta.
+
+CSS:n avulla luotu terraario on saanut inspiraationsa Jakub Mandran lasipurkki [codepenistä](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Taide on käsin piirretty [Jen Looperin](http://jenlooper.com) toimesta Procreate-sovelluksen avulla.
+
+## Julkaise Terraariosi
+
+Voit julkaista terraariosi verkossa käyttämällä Azure Static Web Apps -palvelua.
+
+1. Haarauta tämä repo
+
+2. Paina tätä painiketta
+
+[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Käy läpi ohjattu toiminto sovelluksesi luomiseksi. Varmista, että asetat sovelluksen juuren joko `/solution`-kansioon tai koodipohjasi juureen. Tässä sovelluksessa ei ole API:ta, joten siitä ei tarvitse huolehtia. Haarautettuun repositorioosi luodaan GitHub-kansio, joka auttaa Azure Static Web Apps -rakennuspalveluita rakentamaan ja julkaisemaan sovelluksesi uuteen URL-osoitteeseen.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/3-terrarium/solution/README.md b/translations/fi/3-terrarium/solution/README.md
new file mode 100644
index 00000000..63ad2025
--- /dev/null
+++ b/translations/fi/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-27T20:11:59+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "fi"
+}
+-->
+# Minun Terraarioni: Projekti HTML:n, CSS:n ja DOM-manipulaation oppimiseen JavaScriptin avulla 🌵🌱
+
+Pieni vedä ja pudota -koodimeditaatio. Vähän HTML:ää, JS:ää ja CSS:ää käyttäen voit rakentaa verkkokäyttöliittymän, tyylitellä sen ja lisätä siihen vuorovaikutteisuutta.
+
+![minun terraarioni](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.fi.png)
+
+## Tekijät
+
+Kirjoitettu ♥️:lla [Jen Looperin](https://www.twitter.com/jenlooper) toimesta.
+
+CSS:n avulla luotu terraario sai inspiraationsa Jakub Mandran lasipurkki [codepenistä](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Taide on käsin piirretty [Jen Looperin](http://jenlooper.com) toimesta Procreate-sovelluksella.
+
+## Julkaise Terraariosi
+
+Voit julkaista terraariosi verkkoon käyttämällä Azure Static Web Appsia.
+
+1. Haarauta tämä repo
+
+2. Paina tätä painiketta
+
+[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. Käy läpi ohjattu toiminto sovelluksesi luomiseksi. Varmista, että asetat sovelluksen juuren joko `/solution`-kansioon tai koodipohjasi juureen. Tässä sovelluksessa ei ole API:ta, joten siitä ei tarvitse huolehtia. Haarautettuun repoosi luodaan .github-kansio, joka auttaa Azure Static Web Appsin rakennuspalvelua rakentamaan ja julkaisemaan sovelluksesi uuteen URL-osoitteeseen.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/4-typing-game/README.md b/translations/fi/4-typing-game/README.md
new file mode 100644
index 00000000..bab7720c
--- /dev/null
+++ b/translations/fi/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-27T21:07:27+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "fi"
+}
+-->
+# Tapahtumapohjainen ohjelmointi - Rakenna kirjoituspeli
+
+## Johdanto
+
+Kirjoittaminen on yksi aliarvostetuimmista taidoista kehittäjälle. Kyky siirtää ajatukset nopeasti päästä editoriin antaa luovuuden virrata vapaasti. Yksi parhaista tavoista oppia on pelata peliä!
+
+> Joten, tehdään kirjoituspeli!
+
+Käytät tähän asti oppimiasi JavaScript-, HTML- ja CSS-taitoja luodaksesi kirjoituspelin. Peli esittää pelaajalle satunnaisen lainauksen (käytämme [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) -lainauksia) ja mittaa, kuinka kauan pelaajalta kestää kirjoittaa se tarkasti. Käytät tähän asti oppimiasi JavaScript-, HTML- ja CSS-taitoja luodaksesi kirjoituspelin.
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## Esitiedot
+
+Tämä oppitunti olettaa, että olet perehtynyt seuraaviin käsitteisiin:
+
+- Tekstikentän ja painikkeiden luominen
+- CSS ja tyylien asettaminen luokkien avulla
+- JavaScriptin perusteet
+  - Taulukon luominen
+  - Satunnaisen numeron luominen
+  - Nykyisen ajan hakeminen
+
+## Oppitunti
+
+[Kirjoituspelin luominen tapahtumapohjaisen ohjelmoinnin avulla](./typing-game/README.md)
+
+## Kiitokset
+
+Kirjoitettu ♥️:lla [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/4-typing-game/solution/README.md b/translations/fi/4-typing-game/solution/README.md
new file mode 100644
index 00000000..1949bff9
--- /dev/null
+++ b/translations/fi/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T21:07:51+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "fi"
+}
+-->
+Tämä on paikkamerkki, jätetty tarkoituksella tyhjäksi
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/4-typing-game/typing-game/README.md b/translations/fi/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..41fc258d
--- /dev/null
+++ b/translations/fi/4-typing-game/typing-game/README.md
@@ -0,0 +1,353 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-27T21:08:03+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "fi"
+}
+-->
+# Pelin luominen tapahtumien avulla
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Tapahtumapohjainen ohjelmointi
+
+Kun luomme selainpohjaisen sovelluksen, tarjoamme käyttäjälle graafisen käyttöliittymän (GUI), jonka avulla hän voi olla vuorovaikutuksessa rakentamamme kanssa. Yleisin tapa olla vuorovaikutuksessa selaimen kanssa on klikkaaminen ja kirjoittaminen eri elementteihin. Kehittäjänä kohtaamme haasteen: emme tiedä, milloin käyttäjä suorittaa nämä toiminnot!
+
+[Tapahtumapohjainen ohjelmointi](https://en.wikipedia.org/wiki/Event-driven_programming) on ohjelmointityyppi, jota tarvitsemme GUI:n luomiseen. Jos pilkomme tämän termin osiin, huomaamme, että ydin on sana **tapahtuma**. [Tapahtuma](https://www.merriam-webster.com/dictionary/event) määritellään Merriam-Websterin mukaan "joksikin, joka tapahtuu". Tämä kuvaa tilannettamme täydellisesti. Tiedämme, että jotain tulee tapahtumaan, johon haluamme reagoida koodilla, mutta emme tiedä, milloin se tapahtuu.
+
+Tapa, jolla merkitsemme koodin osan, jonka haluamme suorittaa, on luoda funktio. Kun ajattelemme [proseduraalista ohjelmointia](https://en.wikipedia.org/wiki/Procedural_programming), funktiot suoritetaan tietyssä järjestyksessä. Sama pätee tapahtumapohjaiseen ohjelmointiin. Ero on siinä, **miten** funktiot kutsutaan.
+
+Tapahtumien (napin painaminen, kirjoittaminen jne.) käsittelemiseksi rekisteröimme **tapahtumakuuntelijoita**. Tapahtumakuuntelija on funktio, joka odottaa tapahtuman tapahtumista ja suorittaa koodia vastauksena. Tapahtumakuuntelijat voivat päivittää käyttöliittymää, tehdä palvelinkutsuja tai mitä tahansa muuta, mitä käyttäjän toiminta vaatii. Lisäämme tapahtumakuuntelijan käyttämällä [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)-metodia ja tarjoamalla suoritettavan funktion.
+
+> **NOTE:** On syytä korostaa, että tapahtumakuuntelijoiden luomiseen on monia tapoja. Voit käyttää anonyymejä funktioita tai luoda nimettyjä. Voit käyttää erilaisia oikoteitä, kuten asettamalla `click`-ominaisuuden tai käyttämällä `addEventListener`-metodia. Harjoituksessamme keskitymme `addEventListener`-metodiin ja anonyymeihin funktioihin, koska se on todennäköisesti yleisin tekniikka, jota web-kehittäjät käyttävät. Se on myös joustavin, koska `addEventListener` toimii kaikille tapahtumille, ja tapahtuman nimi voidaan antaa parametrina.
+
+### Yleisiä tapahtumia
+
+Sovellusta luodessasi voit kuunnella [kymmeniä tapahtumia](https://developer.mozilla.org/docs/Web/Events). Käytännössä kaikki, mitä käyttäjä tekee sivulla, laukaisee tapahtuman, mikä antaa sinulle paljon valtaa varmistaa, että käyttäjä saa haluamasi kokemuksen. Onneksi tarvitset yleensä vain pienen osan tapahtumista. Tässä muutamia yleisiä (mukaan lukien kaksi, joita käytämme pelimme luomisessa):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Käyttäjä klikkasi jotain, yleensä painiketta tai hyperlinkkiä
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Käyttäjä klikkasi hiiren oikeaa painiketta
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Käyttäjä valitsi tekstiä
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Käyttäjä syötti tekstiä
+
+## Pelin luominen
+
+Luomme pelin tutkiaksemme, miten tapahtumat toimivat JavaScriptissä. Pelimme testaa pelaajan kirjoitustaitoa, joka on yksi aliarvostetuimmista taidoista, joita kaikilla kehittäjillä tulisi olla. Meidän kaikkien tulisi harjoitella kirjoittamista! Pelin yleinen kulku näyttää tältä:
+
+- Pelaaja klikkaa aloituspainiketta ja saa kirjoitettavakseen lainauksen
+- Pelaaja kirjoittaa lainauksen mahdollisimman nopeasti tekstikenttään
+  - Jokaisen sanan valmistuttua seuraava korostetaan
+  - Jos pelaaja tekee kirjoitusvirheen, tekstikenttä muuttuu punaiseksi
+  - Kun pelaaja suorittaa lainauksen, näytetään onnistumisviesti ja kulunut aika
+
+Rakennetaan peli ja opitaan tapahtumista!
+
+### Tiedostorakenne
+
+Tarvitsemme yhteensä kolme tiedostoa: **index.html**, **script.js** ja **style.css**. Aloitetaan niiden luomisesta, jotta työskentely olisi helpompaa.
+
+- Luo uusi kansio työllesi avaamalla konsoli tai terminaali ja suorittamalla seuraava komento:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Avaa Visual Studio Code
+
+```bash
+code .
+```
+
+- Lisää kansioon kolme tiedostoa Visual Studio Codessa seuraavilla nimillä:
+  - index.html
+  - script.js
+  - style.css
+
+## Käyttöliittymän luominen
+
+Jos tarkastelemme vaatimuksia, tiedämme, että tarvitsemme HTML-sivullemme muutamia elementtejä. Tämä on vähän kuin resepti, jossa tarvitsemme ainesosia:
+
+- Paikka, jossa näytetään käyttäjälle kirjoitettava lainaus
+- Paikka, jossa näytetään viestejä, kuten onnistumisviesti
+- Tekstikenttä kirjoittamista varten
+- Aloituspainike
+
+Jokaiselle näistä tarvitaan ID:t, jotta voimme käsitellä niitä JavaScriptissä. Lisäämme myös viittaukset luotaviin CSS- ja JavaScript-tiedostoihin.
+
+Luo uusi tiedosto nimeltä **index.html**. Lisää seuraava 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>
+```
+
+### Sovelluksen käynnistäminen
+
+On aina parasta kehittää iteratiivisesti ja tarkistaa, miltä asiat näyttävät. Käynnistetään sovellus. Visual Studio Codessa on upea laajennus nimeltä [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), joka isännöi sovellustasi paikallisesti ja päivittää selaimen aina, kun tallennat.
+
+- Asenna [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) seuraamalla linkkiä ja klikkaamalla **Install**
+  - Selaimesi kehottaa sinua avaamaan Visual Studio Coden, ja Visual Studio Code kehottaa sinua suorittamaan asennuksen
+  - Käynnistä Visual Studio Code uudelleen, jos sitä pyydetään
+- Kun laajennus on asennettu, paina Visual Studio Codessa Ctrl-Shift-P (tai Cmd-Shift-P) avataksesi komentopaletti
+- Kirjoita **Live Server: Open with Live Server**
+  - Live Server alkaa isännöidä sovellustasi
+- Avaa selain ja siirry osoitteeseen **https://localhost:5500**
+- Näet nyt luomasi sivun!
+
+Lisätään toiminnallisuutta.
+
+## Lisää CSS
+
+Kun HTML on luotu, lisätään CSS ydinmuotoilua varten. Meidän täytyy korostaa sana, jonka pelaajan tulisi kirjoittaa, ja värjätä tekstikenttä punaiseksi, jos kirjoitus on virheellinen. Teemme tämän kahdella luokalla.
+
+Luo uusi tiedosto nimeltä **style.css** ja lisää seuraava syntaksi.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ CSS:n osalta voit asettaa sivusi ulkoasun haluamallasi tavalla. Käytä hetki aikaa ja tee sivusta houkuttelevampi:
+
+- Valitse eri fontti
+- Väritä otsikot
+- Muuta elementtien kokoa
+
+## JavaScript
+
+Kun käyttöliittymä on luotu, keskitytään JavaScriptiin, joka tarjoaa logiikan. Jaamme tämän muutamaan vaiheeseen:
+
+- [Määritä vakioarvot](../../../../4-typing-game/typing-game)
+- [Tapahtumakuuntelija pelin aloittamiseen](../../../../4-typing-game/typing-game)
+- [Tapahtumakuuntelija kirjoittamiseen](../../../../4-typing-game/typing-game)
+
+Mutta ensin, luo uusi tiedosto nimeltä **script.js**.
+
+### Lisää vakioarvot
+
+Tarvitsemme muutamia asioita, jotka helpottavat ohjelmointia. Jälleen, kuten reseptissä, tässä on, mitä tarvitsemme:
+
+- Taulukko, joka sisältää kaikki lainaukset
+- Tyhjä taulukko, johon tallennetaan nykyisen lainauksen sanat
+- Tila, jossa säilytetään pelaajan kirjoittaman sanan indeksi
+- Aika, jolloin pelaaja klikkasi aloituspainiketta
+
+Tarvitsemme myös viittaukset käyttöliittymäelementteihin:
+
+- Tekstikenttä (**typed-value**)
+- Lainauksen näyttö (**quote**)
+- Viesti (**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');
+```
+
+✅ Lisää peliisi lisää lainauksia
+
+> **NOTE:** Voimme hakea elementit koodissa milloin tahansa käyttämällä `document.getElementById`. Koska viittaamme näihin elementteihin säännöllisesti, vältämme kirjoitusvirheitä merkkijonoissa käyttämällä vakioita. Kehykset, kuten [Vue.js](https://vuejs.org/) tai [React](https://reactjs.org/), voivat auttaa sinua hallitsemaan koodin keskittämistä paremmin.
+
+Katso minuutin mittainen video `const`, `let` ja `var` -muuttujien käytöstä
+
+[![Muuttujatyypit](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Muuttujatyypit")
+
+> 🎥 Klikkaa yllä olevaa kuvaa katsoaksesi videon muuttujista.
+
+### Lisää aloituslogiikka
+
+Pelin aloittamiseksi pelaaja klikkaa aloituspainiketta. Tietenkään emme tiedä, milloin hän klikkaa sitä. Tässä kohtaa [tapahtumakuuntelija](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) astuu kuvaan. Tapahtumakuuntelija antaa meidän kuunnella jotain tapahtumaa ja suorittaa koodia vastauksena. Meidän tapauksessamme haluamme suorittaa koodia, kun käyttäjä klikkaa aloituspainiketta.
+
+Kun käyttäjä klikkaa **start**, meidän täytyy valita lainaus, asettaa käyttöliittymä ja aloittaa sanan ja ajan seuranta. Alla on JavaScript, joka sinun täytyy lisätä; käsittelemme sitä tarkemmin koodilohkon jälkeen.
+
+```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();
+});
+```
+
+Käydään koodi läpi!
+
+- Sanan seurannan asettaminen
+  - [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)- ja [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random)-metodien avulla voimme valita satunnaisesti lainauksen `quotes`-taulukosta
+  - Muunnamme `quote`-muuttujan `words`-taulukoksi, jotta voimme seurata pelaajan kirjoittamaa sanaa
+  - `wordIndex` asetetaan arvoon 0, koska pelaaja aloittaa ensimmäisestä sanasta
+- Käyttöliittymän asettaminen
+  - Luodaan `spanWords`-taulukko, joka sisältää jokaisen sanan `span`-elementissä
+    - Tämä mahdollistaa sanan korostamisen näytöllä
+  - `join`-metodilla luodaan merkkijono, jota käytetään `quoteElement`-elementin `innerHTML`-arvon päivittämiseen
+    - Tämä näyttää lainauksen pelaajalle
+  - Asetetaan ensimmäisen `span`-elementin `className` arvoksi `highlight`, jotta se korostuu keltaiseksi
+  - Tyhjennetään `messageElement` asettamalla `innerText` arvoksi `''`
+- Tekstikentän asettaminen
+  - Tyhjennetään nykyinen `value` `typedValueElement`-elementistä
+  - Asetetaan `focus` `typedValueElement`-elementtiin
+- Ajastimen käynnistäminen kutsumalla `getTime`
+
+### Lisää kirjoituslogiikka
+
+Kun pelaaja kirjoittaa, `input`-tapahtuma laukaistaan. Tämä tapahtumakuuntelija tarkistaa, kirjoittaako pelaaja sanan oikein, ja käsittelee pelin nykytilan. Lisää **script.js**-tiedoston loppuun seuraava koodi. Käsittelemme sitä tarkemmin koodilohkon jälkeen.
+
+```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';
+  }
+});
+```
+
+Käydään koodi läpi! Aloitamme hakemalla nykyisen sanan ja pelaajan tähän mennessä kirjoittaman arvon. Sitten käytämme "vesiputouslogiikkaa", jossa tarkistamme, onko lainaus valmis, sana valmis, sana oikein vai onko kyseessä virhe.
+
+- Lainaus on valmis, jos `typedValue` on yhtä kuin `currentWord` ja `wordIndex` on yhtä kuin `words`-taulukon pituus miinus yksi
+  - Lasketaan `elapsedTime` vähentämällä `startTime` nykyisestä ajasta
+  - Jaetaan `elapsedTime` luvulla 1 000, jotta se muunnetaan millisekunneista sekunneiksi
+  - Näytetään onnistumisviesti
+- Sana on valmis, jos `typedValue` päättyy välilyöntiin (sanan loppu) ja `typedValue` on yhtä kuin `currentWord`
+  - Asetetaan `typedElement`-elementin `value` arvoksi `''`, jotta seuraava sana voidaan kirjoittaa
+  - Kasvatetaan `wordIndex`-arvoa siirtyäksemme seuraavaan sanaan
+  - Käydään läpi kaikki `quoteElement`-elementin `childNodes`-solmut ja asetetaan niiden `className` arvoksi `''`, jotta ne palautuvat oletusnäkymään
+  - Asetetaan nykyisen sanan `className` arvoksi `highlight`, jotta se merkitään seuraavaksi kirjoitettavaksi sanaksi
+- Sana on tällä hetkellä kirjoitettu oikein (mutta ei valmis), jos `currentWord` alkaa `typedValue`-arvolla
+  - Varmistetaan, että `typedValueElement` näkyy oletuksena tyhjentämällä `className`
+- Jos pääsemme tähän asti, kyseessä on virhe
+  - Asetetaan `typedValueElement`-elementin `className` arvoksi `error`
+
+## Testaa sovellustasi
+
+Olet päässyt loppuun! Viimeinen vaihe on varmistaa, että sovelluksemme toimii. Kokeile sitä! Älä huoli, jos virheitä ilmenee; **kaikilla kehittäjillä** on virheitä. Tutki viestejä ja debuggaa tarvittaessa.
+
+Klikkaa **start** ja ala kirjoittaa! Sen pitäisi näyttää hieman samalta kuin aiemmin näkemämme animaatio.
+
+![Pelin animaatio toiminnassa](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Haaste
+
+Lisää toiminnallisuutta
+
+- Poista `input`-tapahtumakuuntelija käytöstä, kun peli on valmis, ja ota se uudelleen käyttöön, kun painiketta klikataan
+- Poista tekstikenttä käytöstä, kun pelaaja suorittaa lainauksen
+- Näytä modaalidialogi onnistumisviestillä
+- Tallenna huippupisteet käyttämällä [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Luentojälkeinen kysely
+
+[Luentojälkeinen kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Kertaus ja itseopiskelu
+
+Lue lisää [kaikista tapahtumista](https://developer.mozilla.org/docs/Web/Events), jotka ovat kehittäjän käytettävissä verkkoselaimen kautta, ja pohdi tilanteita, joissa käyttäisit kutakin niistä.
+
+## Tehtävä
+
+[Luo uusi näppäimistöpeli](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/4-typing-game/typing-game/assignment.md b/translations/fi/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..5dd38030
--- /dev/null
+++ b/translations/fi/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-27T21:10:05+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Luo uusi näppäimistöpeli
+
+## Ohjeet
+
+Luo pieni peli, joka käyttää näppäimistötapahtumia tehtävien suorittamiseen. Se voi olla erilainen kirjoituspeli tai taidetyyppinen peli, joka maalaa pikseleitä näytölle näppäinpainalluksilla. Ole luova!
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen             | Riittävä                 | Parannettavaa      |
+| -------- | ----------------------- | ------------------------ | ------------------ |
+|          | Täydellinen peli esitetty | Peli on hyvin minimaalinen | Pelissä on virheitä |
+|          |                         |                          |                    |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/1-about-browsers/README.md b/translations/fi/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..860f112d
--- /dev/null
+++ b/translations/fi/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-27T20:46:46+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "fi"
+}
+-->
+# Selaimen laajennusprojekti Osa 1: Kaikki selaimista
+
+![Selaimen luonnoskuva](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.fi.jpg)
+> Luonnoskuva: [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Johdanto
+
+Selaimen laajennukset lisäävät selaimeen lisätoimintoja. Ennen kuin alat rakentaa sellaista, sinun kannattaa oppia hieman siitä, miten selaimet toimivat.
+
+### Selaimista
+
+Tässä oppituntisarjassa opit rakentamaan selaimen laajennuksen, joka toimii Chrome-, Firefox- ja Edge-selaimissa. Tässä osassa tutustut siihen, miten selaimet toimivat, ja hahmottelet selaimen laajennuksen osat.
+
+Mutta mitä selain oikeastaan on? Se on ohjelmistosovellus, joka mahdollistaa käyttäjän pääsyn palvelimen sisältöön ja sen näyttämisen verkkosivuilla.
+
+✅ Pieni historia: ensimmäinen selain oli nimeltään 'WorldWideWeb', ja sen loi Sir Timothy Berners-Lee vuonna 1990.
+
+![varhaiset selaimet](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.fi.jpg)
+> Joitakin varhaisia selaimia, lähde: [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Kun käyttäjä yhdistää internetiin URL-osoitteen (Uniform Resource Locator) avulla, yleensä Hypertext Transfer Protocolin kautta `http`- tai `https`-osoitteella, selain kommunikoi verkkopalvelimen kanssa ja hakee verkkosivun.
+
+Tässä vaiheessa selaimen renderöintimoottori näyttää sen käyttäjän laitteella, joka voi olla matkapuhelin, pöytätietokone tai kannettava tietokone.
+
+Selaimet voivat myös välimuistittaa sisältöä, jotta sitä ei tarvitse hakea palvelimelta joka kerta. Ne voivat tallentaa käyttäjän selaushistorian, säilyttää 'evästeitä', jotka ovat pieniä tietopaloja käyttäjän toiminnan tallentamiseen, ja paljon muuta.
+
+On erittäin tärkeää muistaa, että kaikki selaimet eivät ole samanlaisia! Jokaisella selaimella on omat vahvuutensa ja heikkoutensa, ja ammattimaisen web-kehittäjän täytyy ymmärtää, miten verkkosivut saadaan toimimaan hyvin eri selaimilla. Tämä sisältää pienet näyttökoot, kuten matkapuhelimen näytön, sekä käyttäjän, joka on offline-tilassa.
+
+Hyödyllinen verkkosivusto, joka kannattaa lisätä kirjanmerkkeihin käyttämässäsi selaimessa, on [caniuse.com](https://www.caniuse.com). Kun rakennat verkkosivuja, caniuse-sivuston tukemien teknologioiden listat auttavat sinua tukemaan käyttäjiäsi parhaalla mahdollisella tavalla.
+
+✅ Miten voit selvittää, mitkä selaimet ovat suosituimpia verkkosivustosi käyttäjien keskuudessa? Tarkista analytiikkasi - voit asentaa erilaisia analytiikkatyökaluja osana verkkokehitysprosessia, ja ne kertovat, mitä selaimia käytetään eniten.
+
+## Selaimen laajennukset
+
+Miksi haluaisit rakentaa selaimen laajennuksen? Se on kätevä lisä selaimeen, kun tarvitset nopean pääsyn tehtäviin, joita toistat usein. Esimerkiksi, jos sinun täytyy tarkistaa värejä eri verkkosivuilla, joita käytät, voit asentaa värinvalitsimen selaimen laajennuksen. Jos sinulla on vaikeuksia muistaa salasanoja, voit käyttää salasanojen hallintaan tarkoitettua selaimen laajennusta.
+
+Selaimen laajennusten kehittäminen on myös hauskaa. Ne keskittyvät yleensä rajattuun määrään tehtäviä, jotka ne suorittavat hyvin.
+
+✅ Mitkä ovat suosikkiselaimen laajennuksesi? Mitä tehtäviä ne suorittavat?
+
+### Laajennusten asentaminen
+
+Ennen kuin alat rakentaa, tutustu selaimen laajennuksen rakentamisen ja käyttöönoton prosessiin. Vaikka jokainen selain hallinnoi tätä tehtävää hieman eri tavalla, prosessi on samankaltainen Chromessa ja Firefoxissa kuin tässä Edge-esimerkissä:
+
+![kuvakaappaus Edge-selaimesta, jossa näkyy avoin edge://extensions-sivu ja avoin asetusten valikko](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.fi.png)
+
+> Huomio: Varmista, että kehittäjätila on kytketty päälle ja salli laajennukset muista kaupoista.
+
+Yksinkertaisuudessaan prosessi on seuraava:
+
+- rakenna laajennuksesi käyttämällä `npm run build` 
+- siirry selaimessa laajennusten paneeliin käyttämällä "Asetukset ja lisää" -painiketta (kolmen pisteen kuvake) oikeassa yläkulmassa
+- jos kyseessä on uusi asennus, valitse `load unpacked` ladataksesi uuden laajennuksen sen rakennuskansiosta (meidän tapauksessamme se on `/dist`) 
+- tai, napsauta `reload`, jos olet lataamassa jo asennettua laajennusta uudelleen
+
+✅ Nämä ohjeet koskevat itse rakentamiasi laajennuksia; jos haluat asentaa laajennuksia, jotka on julkaistu selaimen laajennuskauppaan, sinun tulee siirtyä näihin [kauppoihin](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) ja asentaa haluamasi laajennus.
+
+### Aloita
+
+Rakennat selaimen laajennuksen, joka näyttää alueesi hiilijalanjäljen, energian käytön ja energian lähteen. Laajennuksessa on lomake, joka kerää API-avaimen, jotta voit käyttää CO2 Signal -API:a.
+
+**Tarvitset:**
+
+- [API-avain](https://www.co2signal.com/); syötä sähköpostiosoitteesi sivuston laatikkoon, ja avain lähetetään sinulle
+- [aluekoodi](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän 'US-NEISO').
+- [aloituskoodi](../../../../5-browser-extension/start). Lataa `start`-kansio; täydennät koodia tässä kansiossa.
+- [NPM](https://www.npmjs.com) - NPM on pakettienhallintatyökalu; asenna se paikallisesti, ja `package.json`-tiedostossa luetellut paketit asennetaan verkkovarojesi käyttöön
+
+✅ Lue lisää pakettienhallinnasta tästä [erinomaisesta oppimismoduulista](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Tutustu koodikantaan:
+
+dist
+    -|manifest.json (oletusasetukset täällä)
+    -|index.html (HTML-merkintä täällä)
+    -|background.js (taustalla toimiva JS täällä)
+    -|main.js (koottu JS)
+src
+    -|index.js (JS-koodisi menee tänne)
+
+✅ Kun sinulla on API-avain ja aluekoodi valmiina, tallenna ne muistiinpanoon tulevaa käyttöä varten.
+
+### Rakenna HTML laajennukselle
+
+Tässä laajennuksessa on kaksi näkymää. Yksi API-avaimen ja aluekoodin keräämiseen:
+
+![kuvakaappaus valmiista laajennuksesta avoinna selaimessa, jossa näkyy lomake alueen nimen ja API-avaimen syöttämiseen.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.fi.png)
+
+Ja toinen alueen hiilidioksidipäästöjen näyttämiseen:
+
+![kuvakaappaus valmiista laajennuksesta, joka näyttää hiilidioksidipäästöt ja fossiilisten polttoaineiden prosenttiosuuden US-NEISO-alueella.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.fi.png)
+
+Aloitetaan rakentamalla HTML lomakkeelle ja muotoilemalla se CSS:llä.
+
+`/dist`-kansiossa rakennat lomakkeen ja tulosalueen. `index.html`-tiedostossa täytä lomakealue:
+
+```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>	
+```
+Tämä on lomake, jossa tallennettu tieto syötetään ja tallennetaan paikalliseen muistiin.
+
+Seuraavaksi luo tulosalue; lisää lopullisen lomaketagin alle joitakin div-elementtejä:
+
+```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>
+```
+Tässä vaiheessa voit kokeilla rakennusta. Varmista, että asennat tämän laajennuksen pakettiriippuvuudet:
+
+```
+npm install
+```
+
+Tämä komento käyttää npm:ää, Node Package Manageria, laajennuksen rakennusprosessin webpackin asentamiseen. Webpack on niputtaja, joka käsittelee koodin kokoamista. Voit nähdä tämän prosessin tuloksen katsomalla `/dist/main.js` -tiedostoa - näet, että koodi on niputettu.
+
+Tällä hetkellä laajennuksen pitäisi rakentua, ja jos otat sen käyttöön Edgessä laajennuksena, näet siististi näytetyn lomakkeen.
+
+Onnittelut, olet ottanut ensimmäiset askeleet selaimen laajennuksen rakentamisessa. Seuraavissa oppitunneissa teet siitä toimivamman ja hyödyllisemmän.
+
+---
+
+## 🚀 Haaste
+
+Tutustu selaimen laajennuskauppaan ja asenna yksi selaimeesi. Voit tarkastella sen tiedostoja mielenkiintoisilla tavoilla. Mitä huomaat?
+
+## Jälkikysely
+
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Kertaus ja itseopiskelu
+
+Tässä oppitunnissa opit hieman verkkoselaimen historiasta; käytä tilaisuutta hyväksesi ja opi lisää World Wide Webin keksijöiden visioista lukemalla sen historiasta. Joitakin hyödyllisiä sivustoja ovat:
+
+[Verkkoselainten historia](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[Verkon historia](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Haastattelu Tim Berners-Leen kanssa](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)
+
+## Tehtävä 
+
+[Muotoile laajennuksesi uudelleen](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/1-about-browsers/assignment.md b/translations/fi/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..7e33e41a
--- /dev/null
+++ b/translations/fi/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-27T20:48:01+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Muokkaa laajennuksesi tyyliä
+
+## Ohjeet
+
+Tämän laajennuksen koodipohja sisältää valmiita tyylejä, mutta sinun ei tarvitse käyttää niitä; tee laajennuksesta omannäköisesi muokkaamalla sen css-tiedostoa.
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                 | Riittävä              | Parannettavaa      |
+| -------- | ------------------------------------------- | --------------------- | ------------------ |
+|          | Koodi sisältää toimivat uudet tyylit        | Tyylit ovat keskeneräiset | Tyylit ovat virheelliset |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/fi/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..ec095ffc
--- /dev/null
+++ b/translations/fi/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-27T20:43:41+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "fi"
+}
+-->
+# Selaimen laajennusprojekti osa 2: API:n kutsuminen, Local Storagen käyttö
+
+## Ennen luentoa -kysely
+
+[Ennen luentoa -kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Johdanto
+
+Tässä oppitunnissa kutsut API:a lähettämällä selaimen laajennuksen lomakkeen ja näytät tulokset laajennuksessa. Lisäksi opit, kuinka voit tallentaa tietoja selaimen paikalliseen tallennustilaan myöhempää käyttöä varten.
+
+✅ Seuraa numeroituja osioita oikeissa tiedostoissa tietääksesi, mihin koodi sijoitetaan.
+
+### Aseta laajennuksessa käsiteltävät elementit:
+
+Tässä vaiheessa olet rakentanut HTML:n lomakkeelle ja tulosten `<div>`-elementille selaimen laajennusta varten. Tästä eteenpäin sinun tulee työskennellä `/src/index.js`-tiedostossa ja rakentaa laajennusta pala palalta. Viittaa [edelliseen oppituntiin](../1-about-browsers/README.md) projektin asennuksesta ja rakennusprosessista.
+
+Työskennellessäsi `index.js`-tiedostossa aloita luomalla joitakin `const`-muuttujia, jotka pitävät arvot eri kentille:
+
+```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');
+```
+
+Kaikki nämä kentät viittaavat niiden CSS-luokkaan, kuten määritit HTML:ssä edellisessä oppitunnissa.
+
+### Lisää kuuntelijat
+
+Seuraavaksi lisää tapahtumakuuntelijat lomakkeelle ja tyhjennä-painikkeelle, joka nollaa lomakkeen. Näin käyttäjän lähettäessä lomakkeen tai klikatessa tyhjennä-painiketta tapahtuu jotain. Lisää myös kutsu sovelluksen alustamiseen tiedoston loppuun:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Huomaa lyhyt tapa kuunnella submit- tai click-tapahtumaa ja kuinka tapahtuma välitetään handleSubmit- tai reset-funktioille. Voitko kirjoittaa tämän lyhyen muodon pidemmässä muodossa? Kumpaa tapaa suosittelet?
+
+### Rakenna init()- ja reset()-funktiot:
+
+Nyt rakennat funktiota, joka alustaa laajennuksen, nimeltään 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();
+}
+
+```
+
+Tässä funktiossa on mielenkiintoista logiikkaa. Kun luet sen läpi, näetkö mitä tapahtuu?
+
+- Kaksi `const`-muuttujaa tarkistaa, onko käyttäjä tallentanut API-avaimen ja aluekoodin paikalliseen tallennustilaan.
+- Jos jompikumpi näistä on null, näytä lomake muuttamalla sen tyyliä 'block'-näkyväksi.
+- Piilota tulokset, lataus ja clearBtn sekä aseta virheteksti tyhjäksi.
+- Jos avain ja aluekoodi ovat olemassa, aloita rutiini:
+  - kutsu API saadaksesi hiilidioksidinkäyttötiedot
+  - piilota tulosalue
+  - piilota lomake
+  - näytä tyhjennä-painike
+
+Ennen kuin jatkat, on hyödyllistä oppia tärkeästä selaimissa saatavilla olevasta käsitteestä: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage on hyödyllinen tapa tallentaa merkkijonoja selaimeen `key-value`-parina. Tämäntyyppistä verkkotallennusta voidaan manipuloida JavaScriptillä hallitsemaan tietoja selaimessa. LocalStorage ei vanhene, kun taas SessionStorage, toinen verkkotallennustyyppi, tyhjennetään selaimen sulkemisen yhteydessä. Eri tallennustyypeillä on hyvät ja huonot puolensa.
+
+> Huomio - selaimen laajennuksella on oma paikallinen tallennustilansa; pääselaimen ikkuna on eri instanssi ja käyttäytyy erillisesti.
+
+Asetat API-avaimellesi merkkijonoarvon, esimerkiksi, ja voit nähdä sen Edgessä "tarkastamalla" verkkosivua (voit klikata selainta oikealla tarkastaaksesi) ja siirtymällä Sovellukset-välilehteen nähdäksesi tallennustilan.
+
+![Paikallisen tallennustilan näkymä](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.fi.png)
+
+✅ Mieti tilanteita, joissa et haluaisi tallentaa tietoja LocalStorageen. Yleisesti ottaen API-avainten tallentaminen LocalStorageen on huono idea! Näetkö miksi? Meidän tapauksessamme, koska sovelluksemme on tarkoitettu vain oppimiseen eikä sitä julkaista sovelluskaupassa, käytämme tätä menetelmää.
+
+Huomaa, että käytät Web API:a manipuloidaksesi LocalStoragea joko `getItem()`, `setItem()` tai `removeItem()`-metodeilla. Se on laajasti tuettu eri selaimissa.
+
+Ennen kuin rakennat `displayCarbonUsage()`-funktion, joka kutsutaan `init()`-funktiossa, rakennetaan toiminnallisuus alkuperäisen lomakkeen lähettämisen käsittelemiseksi.
+
+### Käsittele lomakkeen lähetys
+
+Luo funktio nimeltä `handleSubmit`, joka hyväksyy tapahtuma-argumentin `(e)`. Estä tapahtuman eteneminen (tässä tapauksessa haluamme estää selainta päivittämästä) ja kutsu uutta funktiota, `setUpUser`, välittäen argumentit `apiKey.value` ja `region.value`. Näin käytät kahta arvoa, jotka tuodaan alkuperäisen lomakkeen kautta, kun asianmukaiset kentät täytetään.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Kertaa muistiasi - HTML, jonka loit viime oppitunnilla, sisältää kaksi syöttökenttää, joiden `values`-arvot tallennetaan `const`-muuttujiin tiedoston alussa, ja ne ovat molemmat `required`, joten selain estää käyttäjiä syöttämästä tyhjiä arvoja.
+
+### Käyttäjän asettaminen
+
+Siirrytään `setUpUser`-funktioon, jossa asetetaan paikallisen tallennustilan arvot apiKey:lle ja regionName:lle. Lisää uusi funktio:
+
+```JavaScript
+function setUpUser(apiKey, regionName) {
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	//make initial call
+	displayCarbonUsage(apiKey, regionName);
+}
+```
+
+Tämä funktio näyttää latausviestin, kun API:a kutsutaan. Tässä vaiheessa olet saapunut selaimen laajennuksen tärkeimmän funktion luomiseen!
+
+### Näytä hiilidioksidinkäyttö
+
+Lopuksi on aika kysyä API:lta!
+
+Ennen kuin jatkamme, meidän tulisi keskustella API:ista. API:t eli [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html) ovat kriittinen osa web-kehittäjän työkalupakkia. Ne tarjoavat standardoituja tapoja ohjelmien vuorovaikutukseen ja rajapintaan keskenään. Esimerkiksi, jos rakennat verkkosivustoa, joka tarvitsee kysyä tietokantaa, joku on saattanut luoda API:n, jota voit käyttää. Vaikka API:ita on monenlaisia, yksi suosituimmista on [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ Termi 'REST' tarkoittaa 'Representational State Transfer' ja sisältää erilaisten URL-osoitteiden käyttämisen datan hakemiseen. Tutki hieman eri tyyppisiä API:ita, jotka ovat kehittäjien saatavilla. Mikä formaatti miellyttää sinua?
+
+Tässä funktiossa on tärkeää huomioida [`async`-avainsana](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Kirjoittamalla funktiosi niin, että ne toimivat asynkronisesti, ne odottavat toiminnon, kuten datan palauttamisen, valmistumista ennen jatkamista.
+
+Tässä on lyhyt video `async`-avainsanasta:
+
+[![Async ja Await lupauksien hallintaan](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async ja Await lupauksien hallintaan")
+
+> 🎥 Klikkaa yllä olevaa kuvaa nähdäksesi videon async/awaitista.
+
+Luo uusi funktio kysyäksesi C02Signal API:lta:
+
+```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.';
+	}
+}
+```
+
+Tämä on iso funktio. Mitä tässä tapahtuu?
+
+- Parhaiden käytäntöjen mukaisesti käytät `async`-avainsanaa, jotta funktio toimii asynkronisesti. Funktio sisältää `try/catch`-lohkon, koska se palauttaa lupauksen, kun API palauttaa dataa. Koska et voi hallita API:n vastausnopeutta (se ei ehkä vastaa ollenkaan!), sinun täytyy käsitellä tämä epävarmuus kutsumalla sitä asynkronisesti.
+- Kysyt co2signal API:lta saadaksesi alueesi tiedot, käyttäen API-avaintasi. Käyttääksesi avainta sinun täytyy käyttää eräänlaista autentikointia header-parametreissa.
+- Kun API vastaa, määrität sen vastausdatan eri elementit näytön osiin, jotka loit näyttämään nämä tiedot.
+- Jos tapahtuu virhe tai tulosta ei ole, näytät virheilmoituksen.
+
+✅ Asynkronisten ohjelmointimallien käyttö on toinen erittäin hyödyllinen työkalu työkalupakissasi. Lue [eri tavoista](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function), joilla voit konfiguroida tämän tyyppistä koodia.
+
+Onnittelut! Jos rakennat laajennuksesi (`npm run build`) ja päivität sen laajennusten paneelissa, sinulla on toimiva laajennus! Ainoa asia, joka ei toimi, on kuvake, ja korjaat sen seuraavassa oppitunnissa.
+
+---
+
+## 🚀 Haaste
+
+Olemme keskustelleet useista API-tyypeistä näissä oppitunneissa. Valitse verkkosovellusrajapinta ja tutki syvällisesti, mitä se tarjoaa. Esimerkiksi tutustu selaimissa saatavilla oleviin API:ihin, kuten [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Mikä tekee API:sta mielestäsi hyvän?
+
+## Luentojälkeinen kysely
+
+[Luentojälkeinen kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Kertaus ja itseopiskelu
+
+Tässä oppitunnissa opit LocalStoragesta ja API:ista, jotka molemmat ovat erittäin hyödyllisiä ammattimaiselle web-kehittäjälle. Voitko miettiä, kuinka nämä kaksi asiaa toimivat yhdessä? Mieti, kuinka suunnittelisit verkkosivuston, joka tallentaisi kohteita API:n käytettäväksi.
+
+## Tehtävä
+
+[Adoptoi API](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/fi/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..6ac2a4e5
--- /dev/null
+++ b/translations/fi/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-27T20:46:01+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Ota API käyttöön
+
+## Ohjeet
+
+API:t voivat olla todella hauskoja käyttää. Tässä on [lista monista ilmaisista API:sta](https://github.com/public-apis/public-apis). Valitse yksi API ja rakenna selainlaajennus, joka ratkaisee jonkin ongelman. Se voi olla niin pieni ongelma kuin lemmikkikuvien puute (kokeile esimerkiksi [dog CEO API:ta](https://dog.ceo/dog-api/)) tai jotain suurempaa – pidä hauskaa!
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                                               | Riittävä                                | Parannettavaa           |
+| -------- | ------------------------------------------------------------------------- | --------------------------------------- | ----------------------- |
+|          | Täydellinen selainlaajennus on toimitettu käyttäen yllä mainittua API:ta  | Osittainen selainlaajennus on toimitettu | Toimituksessa on virheitä |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/fi/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..d8f6eb78
--- /dev/null
+++ b/translations/fi/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-27T20:48:51+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "fi"
+}
+-->
+# Selaimen laajennusprojekti, osa 3: Taustatehtävät ja suorituskyky
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Johdanto
+
+Moduulin kahdessa viimeisessä oppitunnissa opit rakentamaan lomakkeen ja näyttöalueen API:sta haetuille tiedoille. Tämä on hyvin yleinen tapa luoda verkkosivusto. Opit myös käsittelemään tietojen asynkronista hakua. Selaimen laajennuksesi on melkein valmis.
+
+Jäljellä on vielä taustatehtävien hallinta, kuten laajennuksen kuvakkeen värin päivittäminen. Tämä on hyvä hetki keskustella siitä, miten selain hallitsee tällaisia tehtäviä. Pohditaan näitä selaimen tehtäviä verkkosivustosi suorituskyvyn näkökulmasta.
+
+## Verkkosuorituskyvyn perusteet
+
+> "Verkkosivuston suorituskyky tarkoittaa kahta asiaa: kuinka nopeasti sivu latautuu ja kuinka nopeasti sen koodi suoritetaan." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Se, miten verkkosivustot saadaan toimimaan salamannopeasti kaikenlaisilla laitteilla, kaikenlaisille käyttäjille ja kaikenlaisissa tilanteissa, on laaja aihe. Tässä muutamia huomioitavia asioita, kun rakennat joko tavallista verkkoprojektia tai selaimen laajennusta.
+
+Ensimmäinen asia, joka sinun tulee tehdä varmistaaksesi sivustosi tehokkuuden, on kerätä tietoa sen suorituskyvystä. Ensimmäinen paikka, jossa voit tehdä tämän, on verkkoselaimesi kehittäjätyökalut. Edgessä voit valita "Asetukset ja muuta" -painikkeen (kolmen pisteen kuvake selaimen oikeassa yläkulmassa), siirtyä kohtaan Lisää työkaluja > Kehittäjätyökalut ja avata Suorituskyky-välilehden. Voit myös käyttää pikanäppäimiä `Ctrl` + `Shift` + `I` Windowsilla tai `Option` + `Command` + `I` Macilla avataksesi kehittäjätyökalut.
+
+Suorituskyky-välilehdellä on Profilointi-työkalu. Avaa verkkosivusto (kokeile esimerkiksi [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ja napsauta 'Tallenna'-painiketta, sitten päivitä sivu. Voit lopettaa tallennuksen milloin tahansa, ja näet rutiinit, jotka liittyvät sivuston 'skriptaamiseen', 'renderöintiin' ja 'maalaamiseen':
+
+![Edge-profilointi](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.fi.png)
+
+✅ Tutustu [Microsoftin dokumentaatioon](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) Edgen Suorituskyky-paneelista.
+
+> Vinkki: saadaksesi tarkat lukemat sivustosi käynnistysajasta, tyhjennä selaimesi välimuisti.
+
+Valitse profiilin aikajanasta elementtejä zoomataksesi tapahtumiin, jotka tapahtuvat sivusi latautuessa.
+
+Saat yleiskuvan sivusi suorituskyvystä valitsemalla osan profiilin aikajanasta ja tarkastelemalla yhteenvetopaneelia:
+
+![Edge-profiloinnin yhteenveto](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.fi.png)
+
+Tarkista Tapahtumaloki-paneeli nähdäksesi, kestikö jokin tapahtuma yli 15 ms:
+
+![Edge-tapahtumaloki](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.fi.png)
+
+✅ Tutustu profilointityökaluun! Avaa tämän sivuston kehittäjätyökalut ja katso, onko siellä pullonkauloja. Mikä on hitain latautuva resurssi? Entä nopein?
+
+## Profilointitarkistukset
+
+Yleisesti ottaen on olemassa joitakin "ongelma-alueita", joita jokaisen verkkokehittäjän tulisi tarkkailla rakentaessaan sivustoa, jotta vältytään ikäviltä yllätyksiltä tuotantoon siirryttäessä.
+
+**Resurssien koot**: Verkkosivustot ovat viime vuosina "raskautuneet" ja siten hidastuneet. Osa tästä painosta liittyy kuvien käyttöön.
+
+✅ Tutustu [Internet-arkistoon](https://httparchive.org/reports/page-weight) saadaksesi historiallista näkökulmaa sivustojen painoon ja muihin tietoihin.
+
+Hyvä käytäntö on varmistaa, että kuvasi ovat optimoituja ja toimitetaan oikeassa koossa ja resoluutiossa käyttäjillesi.
+
+**DOM-läpikäynnit**: Selaimen on rakennettava dokumenttiobjektimalli (DOM) kirjoittamasi koodin perusteella, joten hyvän suorituskyvyn kannalta on tärkeää pitää tagit minimissä ja käyttää vain sitä, mitä sivu tarvitsee. Esimerkiksi ylimääräinen CSS, joka liittyy sivuun, voidaan optimoida; tyylit, joita tarvitaan vain yhdellä sivulla, eivät tarvitse olla mukana päätyylitiedostossa.
+
+**JavaScript**: Jokaisen JavaScript-kehittäjän tulisi tarkkailla 'renderöintiä estäviä' skriptejä, jotka on ladattava ennen kuin muu DOM voidaan käydä läpi ja maalata selaimeen. Harkitse `defer`-attribuutin käyttöä sisäisissä skripteissäsi (kuten tehtiin Terrarium-moduulissa).
+
+✅ Kokeile joitakin sivustoja [Site Speed Test -sivustolla](https://www.webpagetest.org/) oppiaksesi lisää yleisistä tarkistuksista, joita tehdään sivuston suorituskyvyn määrittämiseksi.
+
+Nyt kun sinulla on käsitys siitä, miten selain renderöi lähettämäsi resurssit, katsotaan viimeiset asiat, jotka sinun täytyy tehdä laajennuksesi viimeistelemiseksi:
+
+### Luo funktio värin laskemiseen
+
+Työskentele tiedostossa `/src/index.js` ja lisää funktio nimeltä `calculateColor()` niiden `const`-muuttujien jälkeen, jotka määrittelit saadaksesi pääsyn DOM:iin:
+
+```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 } });
+}
+```
+
+Mitä tässä tapahtuu? Annat funktion parametriksi arvon (hiili-intensiteetti), joka saadaan API-kutsusta, jonka teit edellisessä oppitunnissa, ja sitten lasket, kuinka lähellä sen arvo on värien taulukossa esitettyä indeksiä. Tämän jälkeen lähetät lähimmän värin arvon Chrome-runtimeen.
+
+Chrome.runtime sisältää [API:n](https://developer.chrome.com/extensions/runtime), joka käsittelee kaikenlaisia taustatehtäviä, ja laajennuksesi hyödyntää sitä:
+
+> "Käytä chrome.runtime API:a hakeaksesi taustasivun, saadaksesi tietoja manifestista ja kuunnellaksesi sekä vastataksesi sovelluksen tai laajennuksen elinkaaren tapahtumiin. Voit myös käyttää tätä API:a muuntaaksesi URL-osoitteiden suhteelliset polut täysin määritellyiksi URL-osoitteiksi."
+
+✅ Jos kehität tätä selaimen laajennusta Edgelle, saatat yllättyä siitä, että käytät Chrome-API:a. Uudemmat Edge-selaimen versiot toimivat Chromium-selainmoottorilla, joten voit hyödyntää näitä työkaluja.
+
+> Huomaa, että jos haluat profiloida selaimen laajennusta, avaa kehittäjätyökalut suoraan laajennuksesta, sillä se toimii omana erillisenä selaininstanssinaan.
+
+### Aseta oletusväri kuvakkeelle
+
+Nyt, `init()`-funktiossa, aseta kuvakkeen väriksi aluksi yleinen vihreä kutsumalla jälleen Chromen `updateIcon`-toimintoa:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Kutsu funktio ja suorita kutsu
+
+Seuraavaksi kutsu juuri luomasi funktio lisäämällä se C02Signal API:n palauttamaan lupaukseen:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+Ja lopuksi, tiedostossa `/dist/background.js`, lisää kuuntelija näille taustatehtäväkutsuille:
+
+```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);
+}
+```
+
+Tässä koodissa lisäät kuuntelijan kaikille viesteille, jotka tulevat taustatehtävien hallintaan. Jos viestin nimi on 'updateIcon', seuraava koodi suoritetaan, ja oikean värinen kuvake piirretään Canvas API:n avulla.
+
+✅ Opit lisää Canvas API:sta [Avaruuspeli-oppitunneilla](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Nyt, rakenna laajennuksesi uudelleen (`npm run build`), päivitä ja käynnistä laajennuksesi, ja katso värin muuttuvan. Onko hyvä hetki käydä asioilla tai tiskata? Nyt tiedät!
+
+Onnittelut, olet rakentanut hyödyllisen selaimen laajennuksen ja oppinut lisää siitä, miten selain toimii ja miten sen suorituskykyä voidaan profiloida.
+
+---
+
+## 🚀 Haaste
+
+Tutki joitakin avoimen lähdekoodin verkkosivustoja, jotka ovat olleet olemassa jo pitkään, ja selvitä niiden GitHub-historian perusteella, onko niiden suorituskykyä optimoitu vuosien varrella. Mikä on yleisin ongelmakohta?
+
+## Jälkikysely
+
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Kertaus ja itseopiskelu
+
+Harkitse liittymistä [suorituskykyuutiskirjeen](https://perf.email/) tilaajaksi.
+
+Tutki, miten selaimet arvioivat verkkosivustojen suorituskykyä tarkastelemalla niiden kehittäjätyökalujen suorituskyky-välilehtiä. Löydätkö merkittäviä eroja?
+
+## Tehtävä
+
+[Analysoi sivuston suorituskyky](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/fi/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..717b6985
--- /dev/null
+++ b/translations/fi/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-27T20:51:12+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Analysoi sivuston suorituskykyä
+
+Laadi yksityiskohtainen raportti verkkosivustosta, jossa osoitetaan suorituskykyongelmat. Analysoi, miksi sivusto on hidas ja mitä voisit tehdä sen nopeuttamiseksi. Älä luota pelkästään selaimen työkaluihin, vaan tutki myös muita työkaluja, jotka voivat auttaa raportin laatimisessa.
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                                                                               | Riittävä                   | Parannettavaa                 |
+| -------- | --------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------------------- |
+|          | Raportti sisältää yksityiskohtia, jotka on kerätty paitsi selaintyökaluista myös kolmannen osapuolen työkaluista, jos saatavilla | Perusraportti on esitetty  | Vähimmäistasoinen raportti on esitetty |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/README.md b/translations/fi/5-browser-extension/README.md
new file mode 100644
index 00000000..9c53c1c0
--- /dev/null
+++ b/translations/fi/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-27T20:42:33+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "fi"
+}
+-->
+# Selaimen laajennuksen rakentaminen
+
+Selaimen laajennusten rakentaminen on hauska ja mielenkiintoinen tapa pohtia sovellustesi suorituskykyä samalla kun luot erilaisen verkkovarannon. Tämä moduuli sisältää oppitunteja siitä, miten selaimet toimivat ja miten selaimen laajennus otetaan käyttöön, miten lomake rakennetaan, API kutsutaan ja paikallista tallennusta käytetään, sekä miten verkkosivustosi suorituskykyä arvioidaan ja parannetaan.
+
+Rakennat selaimen laajennuksen, joka toimii Edgessä, Chromessa ja Firefoxissa. Tämä laajennus, joka on kuin pieni verkkosivusto, joka on räätälöity hyvin spesifiseen tehtävään, tarkistaa [C02 Signal API:n](https://www.co2signal.com) tietyn alueen sähkönkulutuksen ja hiilijalanjäljen, ja palauttaa lukeman alueen hiilijalanjäljestä.
+
+Tätä laajennusta käyttäjä voi kutsua ad hoc -tyyliin, kun API-avain ja aluekoodi syötetään lomakkeeseen, jotta paikallinen sähkönkulutus voidaan määrittää ja tarjota dataa, joka voi vaikuttaa käyttäjän sähkönkäyttöpäätöksiin. Esimerkiksi voi olla suositeltavaa lykätä pyykin kuivausrummun käyttöä (hiili-intensiivinen toiminta) ajankohtaan, jolloin alueesi sähkönkulutus on korkealla.
+
+### Aiheet
+
+1. [Tietoa selaimesta](1-about-browsers/README.md)
+2. [Lomakkeet ja paikallinen tallennus](2-forms-browsers-local-storage/README.md)
+3. [Taustatehtävät ja suorituskyky](3-background-tasks-and-performance/README.md)
+
+### Kiitokset
+
+![vihreä selaimen laajennus](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png)
+
+## Kiitokset
+
+Tämän verkkohiilitriggerin idea tuli Asim Hussainilta, Microsoftin Green Cloud Advocacy -tiimin johtajalta ja [Green Principles](https://principles.green/) -kirjoittajalta. Alun perin se oli [verkkosivustoprojekti](https://github.com/jlooper/green).
+
+Selaimen laajennuksen rakenne sai vaikutteita [Adebola Adeniranin COVID-laajennuksesta](https://github.com/onedebos/covtension).
+
+'Piste'-kuvakkeiden järjestelmän konsepti sai inspiraationsa [Energy Lollipop](https://energylollipop.com/) -selaimen laajennuksen kuvakerakenteesta, joka on suunniteltu Kalifornian päästöille.
+
+Nämä oppitunnit kirjoitettiin ♥️:lla [Jen Looperin](https://www.twitter.com/jenlooper) toimesta.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/solution/README.md b/translations/fi/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..7a889530
--- /dev/null
+++ b/translations/fi/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-27T20:51:28+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "fi"
+}
+-->
+# Carbon Trigger -selainlaajennus: Valmis koodi
+
+Käyttämällä tmrow:n CO2 Signal -API:ta sähkönkulutuksen seuraamiseen voit rakentaa selainlaajennuksen, joka muistuttaa sinua suoraan selaimessa siitä, kuinka kuormittavaa alueesi sähkönkulutus on. Tämän laajennuksen satunnainen käyttö auttaa sinua tekemään päätöksiä toimistasi tämän tiedon perusteella.
+
+![laajennuksen kuvakaappaus](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png)
+
+## Aloittaminen
+
+Sinun tulee asentaa [npm](https://npmjs.com). Lataa kopio tästä koodista tietokoneesi kansioon.
+
+Asenna kaikki tarvittavat paketit:
+
+```
+npm install
+```
+
+Rakenna laajennus webpackilla:
+
+```
+npm run build
+```
+
+Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikean yläkulman 'kolmen pisteen' valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä 'Lataa purkamaton' ladataksesi uuden laajennuksen. Avaa 'dist'-kansio kehotteessa, ja laajennus latautuu. Käyttääksesi sitä tarvitset API-avaimen CO2 Signal -API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi tämän sivun laatikkoon) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän koodia 'US-NEISO').
+
+![asennus](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png)
+
+Kun API-avain ja alueen koodi on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillinen piste muuttuu heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeitä siitä, mitkä energiaintensiiviset toiminnot olisivat sopivia suorittaa. Tämän 'pistejärjestelmän' konsepti tuli minulle [Energy Lollipop -laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen seuraamiseen.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/solution/translation/README.es.md b/translations/fi/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..5fb9b52b
--- /dev/null
+++ b/translations/fi/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-27T20:51:54+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "fi"
+}
+-->
+# Carbon Trigger -selaimen laajennus: Täydellinen koodi
+
+Käyttämällä tmrow'n CO2 Signal -API:ta sähkönkulutuksen seuraamiseen, luo selaimen laajennus, joka tarjoaa suoraan selaimessasi muistutuksen alueesi sähkönkulutuksesta. Tämän ad hoc -laajennuksen käyttö auttaa sinua tekemään päätöksiä toimistasi perustuen tähän tietoon.
+
+![laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.fi.png)
+
+## Aloittaminen
+
+Sinulla tulee olla [npm](https://npmjs.com) asennettuna. Lataa kopio tästä koodista tietokoneesi kansioon.
+
+Asenna kaikki tarvittavat paketit:
+
+```
+npm install
+```
+
+Rakenna laajennus webpackilla:
+
+```
+npm run build
+```
+
+Asentaaksesi Edge-selaimeen, käytä selaimen oikeassa yläkulmassa olevaa 'kolmen pisteen' valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä 'Lataa purkamaton' ladataksesi uuden laajennuksen. Avaa 'dist'-kansio, kun sitä pyydetään, ja laajennus ladataan. Käyttääksesi sitä tarvitset API-avaimen CO2 Signal -API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi tämän sivun laatikkoon) sekä [sähköaluekoodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän 'US-NEISO').
+
+![asennus](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.fi.png)
+
+Kun API-avain ja alue on syötetty laajennuksen käyttöliittymään, väripiste selaimen laajennuspalkissa muuttuu heijastamaan alueesi energiankulutusta ja antaa sinulle indikaattorin siitä, mitkä korkean energiankulutuksen toiminnot olisivat sinulle sopivia. Tämän "pistejärjestelmän" konseptin sain [Energy Lollipop -laajennuksesta](https://energylollipop.com/) Kalifornian päästöille.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/solution/translation/README.fr.md b/translations/fi/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..df8f14ea
--- /dev/null
+++ b/translations/fi/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-27T20:53:15+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "fi"
+}
+-->
+# Carbon Trigger -selainlaajennus: Valmis koodi
+
+Käyttämällä tmrow'n CO2 Signal -API:ta sähkönkulutuksen seuraamiseen, luo selainlaajennus, joka muistuttaa sinua suoraan selaimessasi alueesi sähkönkulutuksesta. Tämän ad hoc -laajennuksen käyttö auttaa sinua tekemään päätöksiä toimintasi suhteen näiden tietojen perusteella.
+
+![laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png)
+
+## Aloittaminen
+
+Sinulla tulee olla [npm](https://npmjs.com) asennettuna. Lataa kopio tästä koodista tietokoneesi kansioon.
+
+Asenna kaikki tarvittavat paketit:
+
+```
+npm install
+```
+
+Rakenna laajennus webpackilla
+
+```
+npm run build
+```
+
+Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikean yläkulman 'kolmen pisteen' valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä 'Lataa purkamaton laajennus' ladataksesi uuden laajennuksen. Avaa 'dist'-kansio kehotteessa, ja laajennus latautuu. Käyttääksesi laajennusta tarvitset API-avaimen CO2 Signal -API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi sivun laatikkoon) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map -karttaa](https://www.electricitymap.org/map) (esimerkiksi Bostonissa käytän 'US-NEISO').
+
+![asennus](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png)
+
+Kun API-avain ja alue on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillisen pisteen tulisi muuttua heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeen siitä, millaisia energiaintensiivisiä toimintoja olisi sopivaa tehdä. Tämän 'pistejärjestelmän' konsepti on saanut inspiraationsa [Energy Lollipop -laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen osalta.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/solution/translation/README.hi.md b/translations/fi/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..0d4ab73f
--- /dev/null
+++ b/translations/fi/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-27T20:52:21+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "fi"
+}
+-->
+# Carbon Trigger -selainlaajennus: Valmis koodi
+
+Tmrow:n CO2 Signal API:n avulla seurataan sähkönkulutusta ja luodaan selainlaajennus, joka muistuttaa sinua siitä, kuinka kuormittavaa alueesi sähkönkäyttö on selaimessasi. Tämän laajennuksen käyttö auttaa sinua tekemään päätöksiä toiminnastasi tämän tiedon perusteella.
+
+![Laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png)
+
+## Aloittaminen
+
+Sinun täytyy asentaa [npm](https://npmjs.com). Lataa tämän koodin kopio tietokoneellesi kansioon.
+
+Asenna kaikki tarvittavat paketit:
+
+```
+npm install
+```
+
+Luo laajennus Webpackilla:
+
+```
+npm run build
+```
+
+Asentaaksesi sen Edge-selaimeen, käytä selaimen oikeassa yläkulmassa olevaa "kolmen pisteen" valikkoa löytääksesi laajennuspaneelin. Valitse sieltä "Lataa purkamaton" ladataksesi uuden laajennuksen. Avaa kehotteessa "dist"-kansio, ja laajennus latautuu. Käyttääksesi sitä, tarvitset CO2 Signal API -avaimen ([saatavilla sähköpostitse täältä](https://www.co2snal.com/) - syötä sähköpostiosoitteesi sivun laatikkoon) ja [alueesi koodin](http://api.electricitymap.org/v3/zones) [Electricity Map](https://www.electricitymap.org/map) -sivustolta (esimerkiksi Bostonissa käytän "US-NEISO").
+
+![Asennus](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png)
+
+Kun API-avain ja alue on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkissa oleva värillinen piste muuttuu heijastamaan alueesi energiankäyttöä ja antaa sinulle indikaattorin siitä, mitkä energiaintensiiviset toiminnot sopivat parhaiten suoritettavaksi. Tämän "piste"-järjestelmän idea tuli minulle Kalifornian päästöjen [Energy Lollipop -laajennuksesta](https://energylollipop.com/).
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/solution/translation/README.it.md b/translations/fi/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..3add3775
--- /dev/null
+++ b/translations/fi/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-27T20:53:45+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "fi"
+}
+-->
+# Carbon Trigger -selainlaajennus: koodi alkuun pääsemiseksi
+
+Tässä projektissa käytetään tmrow:n Signal CO2 -rajapintaa sähköenergian käytön seuraamiseen. Tarkoituksena on luoda selainlaajennus, joka muistuttaa suoraan selaimessa, kuinka kuormittavaa sähköenergian käyttö on omalla alueella. Tämän laajennuksen avulla voi arvioida omia toimintojaan näiden tietojen perusteella.
+
+![laajennuksen näkymä](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png)
+
+## Aloittaminen
+
+Varmista, että [npm](https://npmjs.com) on asennettu. Lataa tämän koodin kopio tietokoneellesi.
+
+Asenna kaikki tarvittavat paketit:
+
+```
+npm install
+```
+
+Luo laajennus webpackilla:
+
+```
+npm run build
+```
+
+Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikeassa yläkulmassa olevaa "kolmen pisteen" valikkoa ja etsi Laajennukset-paneeli. Jos kehittäjätila ei ole vielä käytössä, ota se käyttöön (vasemmassa alakulmassa). Valitse "Lataa purkamaton" lisätäksesi uuden laajennuksen. Avaa "dist"-kansio kehotteessa, ja laajennus ladataan. Käyttöä varten tarvitset API-avaimen CO2 Signal -rajapintaan (voit [hankkia sen sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi sivulla olevaan kenttään) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [sähkökarttaa](https://www.electricitymap.org/map) (esimerkiksi Bostonissa "US-NEISO").
+
+![asennus](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png)
+
+Kun API-avain ja alue on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkissa oleva väripiste muuttuu heijastamaan alueen energiankäyttöä. Se antaa myös vihjeitä siitä, mitkä korkean energiankulutuksen toiminnot olisivat sopivia suorittaa. Tämän "pistejärjestelmän" konsepti on peräisin [Energy Lollipop -laajennuksesta](https://energylollipop.com/), joka seuraa Kalifornian päästöjä.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/solution/translation/README.ja.md b/translations/fi/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..4c5db2b7
--- /dev/null
+++ b/translations/fi/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-27T20:54:15+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "fi"
+}
+-->
+# Carbon Trigger - selainlaajennus: Valmis koodi
+
+Rakennetaan selainlaajennus, joka käyttää tmrow:n CO2 Signal API:ta seuratakseen energiankulutusta ja näyttää muistutuksena, kuinka paljon sähköä alueellasi käytetään. Tämän laajennuksen avulla voit tehdä päätöksiä toiminnastasi tämän tiedon perusteella.
+
+![laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png)
+
+## Aloitus
+
+Sinulla tulee olla [npm](https://npmjs.com) asennettuna. Lataa tämän koodin kopio tietokoneesi kansioon.
+
+Asenna kaikki tarvittavat paketit.
+
+```
+npm install
+```
+
+Rakenna laajennus webpackin avulla.
+
+```
+npm run build
+```
+
+Asentaaksesi laajennuksen Edge-selaimeen, etsi selaimen oikeasta yläkulmasta "kolmen pisteen" valikosta "Laajennukset"-paneeli. Valitse sieltä "Load Unpacked" ja lataa uusi laajennus. Kun sinua kehotetaan, avaa "dist"-kansio, jolloin laajennus latautuu. Käyttääksesi laajennusta tarvitset CO2 Signal API:n API-avaimen ([hanki yksi sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostisi tämän sivun laatikkoon) sekä [Electricity Map](https://www.electricitymap.org/map) -sivuston mukaisen [aluekoodin](http://api.electricitymap.org/v3/zones) (esimerkiksi Bostonissa käytetään 'US-NEISO').
+
+![asennus](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png)
+
+Kun syötät API-avaimen ja aluekoodin laajennuksen käyttöliittymään, selainlaajennuspalkissa näkyvä värillinen piste muuttuu ja heijastaa alueesi energiankulutusta. Tämä auttaa sinua arvioimaan, millaisia energiaa vaativia toimintoja on sopivaa tehdä. Tämän "piste"-järjestelmän idea tuli minulle Kalifornian päästöjen [Energy Lollipop -laajennuksesta](https://energylollipop.com/).
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/solution/translation/README.ms.md b/translations/fi/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..f4326af7
--- /dev/null
+++ b/translations/fi/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-27T20:52:48+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "fi"
+}
+-->
+# Carbon Trigger - Selaimen laajennus: Täydellinen koodi
+
+Käyttämällä tmrow:n CO2 Signal -API:ta sähkönkulutuksen seuraamiseen, rakenna selaimen laajennus, joka antaa sinulle ilmoituksia siitä, kuinka raskasta alueesi sähkönkulutus on. Tämän laajennuksen käyttö auttaa sinua tekemään tietoisempia päätöksiä toiminnastasi näiden tietojen perusteella.
+
+![selaimen laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png)
+
+## Aloita tästä
+
+Sinun täytyy asentaa [npm](https://npmjs.com). Lataa kopio tästä koodista tietokoneesi kansioon.
+
+Asenna kaikki tarvittavat paketit:
+
+```
+npm install
+```
+
+Rakenna laajennus webpackilla:
+
+```
+npm run build
+```
+
+Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikeassa yläkulmassa olevaa "kolmen pisteen" valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä 'Load Unpacked' ladataksesi uuden laajennuksen. Avaa 'dist'-kansio pyynnön mukaisesti, ja laajennus latautuu. Käyttääksesi sitä tarvitset API-avaimen CO2 Signal -API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi sivun laatikkoon) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän 'US-NEISO').
+
+![lataus käynnissä](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png)
+
+Kun API-avain ja aluekoodi on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillinen piste muuttuu heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeitä siitä, millaisia raskaita toimintoja kannattaa tehdä. Tämän "pistejärjestelmän" konsepti tuli minulle [Energy Lollipop -selaimen laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen seuraamiseen.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/5-browser-extension/start/README.md b/translations/fi/5-browser-extension/start/README.md
new file mode 100644
index 00000000..ade089da
--- /dev/null
+++ b/translations/fi/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-27T20:46:19+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "fi"
+}
+-->
+# Carbon Trigger - Selaimen laajennus: Aloituskoodi
+
+Käyttämällä tmrow'n CO2 Signal API:ta sähkönkulutuksen seuraamiseen, voit rakentaa selaimen laajennuksen, joka muistuttaa sinua suoraan selaimessa siitä, kuinka kuormittavaa alueesi sähkönkulutus on. Tämän laajennuksen satunnainen käyttö auttaa sinua tekemään harkittuja päätöksiä toimistasi tämän tiedon perusteella.
+
+![laajennuksen kuvakaappaus](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png)
+
+## Aloittaminen
+
+Sinun tulee asentaa [npm](https://npmjs.com). Lataa kopio tästä koodista tietokoneesi kansioon.
+
+Asenna kaikki tarvittavat paketit:
+
+```
+npm install
+```
+
+Rakenna laajennus webpackilla:
+
+```
+npm run build
+```
+
+Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikean yläkulman "kolmen pisteen" valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä "Lataa purkamaton" ladataksesi uuden laajennuksen. Avaa kehotteessa "dist"-kansio, ja laajennus latautuu. Käyttääksesi sitä, tarvitset API-avaimen CO2 Signal API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi tämän sivun laatikkoon) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän koodia 'US-NEISO').
+
+![asennus](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png)
+
+Kun API-avain ja alueen koodi on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillinen piste muuttuu heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeitä siitä, mitkä energiaintensiiviset toiminnot olisivat sopivia suorittaa. Tämän "piste"-järjestelmän konsepti on peräisin [Energy Lollipop -laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen seurantaan.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/1-introduction/README.md b/translations/fi/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..73db0fca
--- /dev/null
+++ b/translations/fi/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-27T20:28:00+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna avaruuspeli Osa 1: Johdanto
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Ennakko-oppituntivisa
+
+[Ennakko-oppituntivisa](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Periytyminen ja koostaminen pelikehityksessä
+
+Aiemmissa oppitunneissa ei ollut juurikaan tarvetta huolehtia sovellusten suunnitteluarkkitehtuurista, koska projektit olivat hyvin pienimuotoisia. Kuitenkin, kun sovelluksesi kasvavat kooltaan ja laajuudeltaan, arkkitehtuuriset päätökset tulevat tärkeämmiksi. JavaScriptissä on kaksi pääasiallista lähestymistapaa suurempien sovellusten luomiseen: *koostaminen* tai *periytyminen*. Molemmilla on omat hyvät ja huonot puolensa, mutta selitetään ne pelin kontekstissa.
+
+✅ Yksi kuuluisimmista ohjelmointikirjoista käsittelee [suunnittelumalleja](https://en.wikipedia.org/wiki/Design_Patterns).
+
+Pelissä sinulla on `pelin objektit`, jotka ovat näytöllä näkyviä objekteja. Tämä tarkoittaa, että niillä on sijainti kartesisessa koordinaatistossa, joka määritellään `x`- ja `y`-koordinaateilla. Kun kehität peliä, huomaat, että kaikilla pelin objekteilla on yhteinen ominaisuus, joka on standardi jokaisessa pelissä, nimittäin elementit, jotka ovat:
+
+- **sijaintiin perustuvia** Useimmat, ellei kaikki, pelin elementit perustuvat sijaintiin. Tämä tarkoittaa, että niillä on sijainti, `x` ja `y`.
+- **liikkuvia** Nämä ovat objekteja, jotka voivat siirtyä uuteen sijaintiin. Tyypillisesti tämä on sankari, hirviö tai NPC (ei-pelaajahahmo), mutta ei esimerkiksi staattinen objekti kuten puu.
+- **itse tuhoutuvia** Nämä objektit ovat olemassa vain tietyn ajan ennen kuin ne asettavat itsensä poistettaviksi. Yleensä tämä esitetään `kuollut` tai `tuhottu` boolean-arvolla, joka ilmoittaa pelimoottorille, että tätä objektia ei enää pitäisi renderöidä.
+- **viiveellä katoavia** 'Viive' on tyypillinen ominaisuus lyhytikäisille objekteille. Tyypillinen esimerkki on tekstinpätkä tai graafinen efekti, kuten räjähdys, joka näkyy vain muutaman millisekunnin ajan.
+
+✅ Mieti peliä kuten Pac-Man. Voitko tunnistaa yllä mainitut neljä objektityyppiä tässä pelissä?
+
+### Käyttäytymisen ilmaiseminen
+
+Kaikki yllä kuvattu ovat pelin objektien käyttäytymistä. Kuinka siis koodata nämä? Voimme ilmaista tämän käyttäytymisen metodeina, jotka liittyvät joko luokkiin tai objekteihin.
+
+**Luokat**
+
+Ajatus on käyttää `luokkia` yhdessä `periytymisen` kanssa tietyn käyttäytymisen lisäämiseksi luokkaan.
+
+✅ Periytyminen on tärkeä käsite ymmärtää. Lue lisää [MDN:n artikkelista periytymisestä](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Koodilla ilmaistuna pelin objekti voi tyypillisesti näyttää tältä:
+
+```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();
+```
+
+✅ Käytä muutama minuutti miettiäksesi, kuinka Pac-Manin sankari (esimerkiksi Inky, Pinky tai Blinky) kirjoitettaisiin JavaScriptissä.
+
+**Koostaminen**
+
+Toinen tapa käsitellä objektien periytymistä on käyttää *koostamista*. Tällöin objektit ilmaisevat käyttäytymisensä näin:
+
+```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'); 
+```
+
+**Minkä mallin valitsen?**
+
+Valinta on sinun. JavaScript tukee molempia paradigmoja.
+
+--
+
+Toinen pelikehityksessä yleinen malli käsittelee pelin käyttäjäkokemuksen ja suorituskyvyn hallintaa.
+
+## Pub/sub-malli
+
+✅ Pub/Sub tarkoittaa 'julkaise-tilaa'
+
+Tämä malli käsittelee ajatusta, että sovelluksesi eri osien ei pitäisi tietää toisistaan. Miksi näin? Se tekee yleiskuvan hahmottamisesta paljon helpompaa, jos eri osat ovat erillisiä. Se myös helpottaa käyttäytymisen äkillistä muuttamista tarvittaessa. Kuinka tämä saavutetaan? Tämä tehdään luomalla seuraavat käsitteet:
+
+- **viesti**: Viesti on yleensä tekstijono, johon voi liittyä valinnainen lisätieto (data, joka selventää, mistä viestissä on kyse). Tyypillinen viesti pelissä voi olla `KEY_PRESSED_ENTER`.
+- **julkaisija**: Tämä elementti *julkaisee* viestin ja lähettää sen kaikille tilaajille.
+- **tilaaja**: Tämä elementti *kuuntelee* tiettyjä viestejä ja suorittaa jonkin tehtävän viestin vastaanottamisen seurauksena, kuten laserin ampumisen.
+
+Toteutus on kooltaan melko pieni, mutta se on erittäin tehokas malli. Näin se voidaan toteuttaa:
+
+```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))
+    }
+  }
+}
+
+```
+
+Yllä olevaa koodia voidaan käyttää hyvin pienessä toteutuksessa:
+
+```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)
+  }
+});
+```
+
+Yllä yhdistämme näppäimistötapahtuman, `ArrowLeft`, ja lähetämme `HERO_MOVE_LEFT`-viestin. Kuuntelemme tätä viestiä ja siirrämme `sankaria` sen seurauksena. Tämän mallin vahvuus on, että tapahtumankuuntelija ja sankari eivät tiedä toisistaan. Voit uudelleenmäärittää `ArrowLeft`-näppäimen `A`-näppäimeksi. Lisäksi olisi mahdollista tehdä jotain täysin erilaista `ArrowLeft`-näppäimellä tekemällä muutamia muokkauksia eventEmitterin `on`-funktioon:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Kun pelisi kasvaa monimutkaisemmaksi, tämä malli pysyy yhtä yksinkertaisena ja koodisi pysyy siistinä. On todella suositeltavaa omaksua tämä malli.
+
+---
+
+## 🚀 Haaste
+
+Mieti, kuinka pub-sub-malli voi parantaa peliä. Mitkä osat pitäisi lähettää tapahtumia, ja kuinka pelin pitäisi reagoida niihin? Nyt on tilaisuutesi olla luova ja miettiä uutta peliä ja sen osien käyttäytymistä.
+
+## Oppitunnin jälkeinen visa
+
+[Oppitunnin jälkeinen visa](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Kertaus ja itseopiskelu
+
+Lue lisää Pub/Sub-mallista [tutustumalla siihen](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Tehtävä
+
+[Luonnostele peli](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/1-introduction/assignment.md b/translations/fi/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..5e59bdf8
--- /dev/null
+++ b/translations/fi/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-27T20:28:58+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Luo pelin mallinnus
+
+## Ohjeet
+
+Käytä oppitunnin koodiesimerkkejä ja kirjoita kuvaus pelistä, josta pidät. Sen täytyy olla yksinkertainen peli, mutta tavoitteena on käyttää joko luokkapohjaista tai koostumuspohjaista mallia sekä pub/sub-mallia osoittamaan, miten peli voisi käynnistyä. Ole luova!
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                            | Riittävä                                              | Parannettavaa                                      |
+| -------- | ------------------------------------------------------ | ----------------------------------------------------- | ------------------------------------------------- |
+|          | Kolme elementtiä asetetaan näytölle ja niitä muokataan | Kaksi elementtiä asetetaan näytölle ja niitä muokataan | Yksi elementti asetetaan näytölle ja sitä muokataan |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/2-drawing-to-canvas/README.md b/translations/fi/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..c3a98cf2
--- /dev/null
+++ b/translations/fi/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-27T20:24:36+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna avaruuspeli, osa 2: Piirrä sankari ja hirviöt kankaalle
+
+## Ennen luentoa -kysely
+
+[Ennen luentoa -kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Canvas
+
+Canvas on HTML-elementti, joka oletuksena ei sisällä mitään sisältöä; se on tyhjä pohja. Sinun täytyy lisätä siihen sisältöä piirtämällä.
+
+✅ Lue [lisää Canvas API:sta](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN:ssä.
+
+Näin se yleensä määritellään osana sivun body-elementtiä:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Yllä asetamme `id`, `width` ja `height`.
+
+- `id`: määritä tämä, jotta voit viitata siihen, kun tarvitset vuorovaikutusta sen kanssa.
+- `width`: tämä on elementin leveys.
+- `height`: tämä on elementin korkeus.
+
+## Yksinkertaisen geometrian piirtäminen
+
+Canvas käyttää kartesiolaista koordinaatistoa asioiden piirtämiseen. Se käyttää x- ja y-akselia ilmaistakseen, missä jokin sijaitsee. Sijainti `0,0` on vasen yläkulma, ja oikea alakulma on se, mitä määritit CANVAS-elementin leveys- ja korkeusasetuksiksi.
+
+![Canvasin ruudukko](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.fi.png)  
+> Kuva [MDN:stä](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Piirtääksesi canvas-elementtiin sinun täytyy käydä läpi seuraavat vaiheet:
+
+1. **Hanki viittaus** Canvas-elementtiin.
+2. **Hanki viittaus** Context-elementtiin, joka sijaitsee Canvas-elementissä.
+3. **Suorita piirto-operaatio** käyttäen Context-elementtiä.
+
+Yllä olevien vaiheiden koodi näyttää yleensä tältä:
+
+```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 keskittyy pääasiassa 2D-muotoihin, mutta voit myös piirtää 3D-elementtejä verkkosivulle; tähän voit käyttää [WebGL API:ta](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+Canvas API:lla voit piirtää kaikenlaisia asioita, kuten:
+
+- **Geometrisia muotoja**, olemme jo näyttäneet, kuinka piirtää suorakulmio, mutta voit piirtää paljon muutakin.
+- **Tekstiä**, voit piirtää tekstiä millä tahansa fontilla ja värillä.
+- **Kuvia**, voit piirtää kuvan esimerkiksi .jpg- tai .png-tiedostosta.
+
+✅ Kokeile! Tiedät, kuinka piirtää suorakulmio, mutta osaatko piirtää ympyrän sivulle? Katso joitakin mielenkiintoisia Canvas-piirroksia CodePenissä. Tässä on [erityisen vaikuttava esimerkki](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Lataa ja piirrä kuvatiedosto
+
+Voit ladata kuvatiedoston luomalla `Image`-objektin ja asettamalla sen `src`-ominaisuuden. Sitten kuuntelet `load`-tapahtumaa tietääksesi, milloin se on valmis käytettäväksi. Koodi näyttää tältä:
+
+### Lataa tiedosto
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Latausmalli
+
+On suositeltavaa kääriä yllä oleva rakenne seuraavanlaiseen muotoon, jotta sitä on helpompi käyttää ja yrität manipuloida sitä vain, kun se on täysin ladattu:
+
+```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')
+}
+
+```
+
+Piirtääksesi pelin elementtejä ruudulle, koodisi näyttäisi tältä:
+
+```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);
+}
+```
+
+## Nyt on aika aloittaa pelin rakentaminen
+
+### Mitä rakentaa
+
+Rakennat verkkosivun, jossa on Canvas-elementti. Sen pitäisi näyttää musta ruutu, jonka koko on `1024*768`. Olemme antaneet sinulle kaksi kuvaa:
+
+- Sankarialus
+
+   ![Sankarialus](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.fi.png)
+
+- 5*5 hirviöalus
+
+   ![Hirviöalus](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.fi.png)
+
+### Suositellut kehitysvaiheet
+
+Etsi tiedostot, jotka on luotu sinulle `your-work`-alikansiossa. Sen pitäisi sisältää seuraavat:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Avaa tämän kansion kopio Visual Studio Codessa. Sinulla pitäisi olla paikallinen kehitysympäristö asennettuna, mieluiten Visual Studio Code, NPM ja Node asennettuna. Jos sinulla ei ole `npm`-asetuksia tietokoneellasi, [tässä ohjeet sen asentamiseen](https://www.npmjs.com/get-npm).
+
+Aloita projektisi siirtymällä `your_work`-kansioon:
+
+```bash
+cd your-work
+npm start
+```
+
+Yllä oleva käynnistää HTTP-palvelimen osoitteessa `http://localhost:5000`. Avaa selain ja syötä tämä osoite. Se on tällä hetkellä tyhjä sivu, mutta se muuttuu.
+
+> Huom: nähdäksesi muutokset ruudulla, päivitä selaimesi.
+
+### Lisää koodi
+
+Lisää tarvittava koodi `your-work/app.js`-tiedostoon ratkaistaksesi alla olevat tehtävät:
+
+1. **Piirrä** canvas mustalla taustalla  
+   > vinkki: lisää kaksi riviä oikean TODO-kohdan alle `/app.js`-tiedostossa, asettaen `ctx`-elementin mustaksi ja ylä-/vasen koordinaatit 0,0 sekä korkeus ja leveys vastaamaan canvasin kokoa.
+2. **Lataa** tekstuurit  
+   > vinkki: lisää pelaajan ja vihollisen kuvat käyttämällä `await loadTexture` ja välittämällä kuvan polku. Et näe niitä vielä ruudulla!
+3. **Piirrä** sankari ruudun keskelle alaosaan  
+   > vinkki: käytä `drawImage`-API:a piirtääksesi heroImg ruudulle, asettaen `canvas.width / 2 - 45` ja `canvas.height - canvas.height / 4)`.
+4. **Piirrä** 5*5 hirviöt  
+   > vinkki: nyt voit poistaa kommentit koodista, joka piirtää viholliset ruudulle. Seuraavaksi siirry `createEnemies`-funktioon ja rakenna se.
+
+   Ensin, määritä joitakin vakioita:
+
+    ```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;
+    ```
+
+    sitten, luo silmukka, joka piirtää hirviöiden taulukon ruudulle:
+
+    ```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);
+        }
+      }
+    ```
+
+## Lopputulos
+
+Valmis tulos näyttää tältä:
+
+![Musta ruutu, jossa sankari ja 5*5 hirviöt](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.fi.png)
+
+## Ratkaisu
+
+Yritä ratkaista tehtävä itse ensin, mutta jos jäät jumiin, katso [ratkaisu](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Haaste
+
+Olet oppinut piirtämään 2D-keskeisellä Canvas API:lla; tutustu [WebGL API:iin](https://developer.mozilla.org/docs/Web/API/WebGL_API) ja yritä piirtää 3D-objekti.
+
+## Luentojälkeinen kysely
+
+[Luentojälkeinen kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Kertaus ja itseopiskelu
+
+Lue lisää Canvas API:sta [tutustumalla siihen](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Tehtävä
+
+[Leiki Canvas API:n kanssa](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/2-drawing-to-canvas/assignment.md b/translations/fi/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..737c12b5
--- /dev/null
+++ b/translations/fi/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-27T20:25:43+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Leiki Canvas API:n kanssa
+
+## Ohjeet
+
+Valitse yksi Canvas API:n elementti ja luo jotain mielenkiintoista sen ympärille. Voitko luoda pienen galaksin toistuvista tähdistä? Voitko luoda mielenkiintoisen tekstuurin värillisistä viivoista? Voit etsiä inspiraatiota CodePenistä (mutta älä kopioi).
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                              | Riittävä                          | Parannettavaa          |
+| -------- | -------------------------------------------------------- | --------------------------------- | ---------------------- |
+|          | Koodi on lähetetty ja siinä näkyy mielenkiintoinen tekstuuri tai muoto | Koodi on lähetetty, mutta se ei toimi | Koodia ei ole lähetetty |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinkäsityksistä tai virhetulkinnoista.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/3-moving-elements-around/README.md b/translations/fi/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..50e69829
--- /dev/null
+++ b/translations/fi/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,402 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-27T20:22:38+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna avaruuspeli, osa 3: Liikkeen lisääminen
+
+## Ennen luentoa -kysely
+
+[Ennen luentoa -kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Pelit eivät ole kovin hauskoja, ennen kuin ruudulla alkaa liikkua avaruusolentoja! Tässä pelissä käytämme kahta erilaista liikettä:
+
+- **Näppäimistö/hiiriliike**: kun käyttäjä käyttää näppäimistöä tai hiirtä liikuttaakseen objektia ruudulla.
+- **Pelin aiheuttama liike**: kun peli liikuttaa objektia tietyin aikavälein.
+
+Miten siis saamme asiat liikkumaan ruudulla? Kaikki perustuu koordinaatistoon: muutamme objektin sijaintia (x, y) ja piirrämme ruudun uudelleen.
+
+Tyypillisesti liikkeen toteuttamiseen ruudulla tarvitaan seuraavat vaiheet:
+
+1. **Aseta uusi sijainti** objektille; tämä on tarpeen, jotta objekti näyttää liikkuvan.
+2. **Tyhjennä ruutu**, ruutu täytyy tyhjentää piirtokertojen välillä. Tämä voidaan tehdä piirtämällä suorakulmio, joka täytetään taustavärillä.
+3. **Piirrä objekti uudelleen** uuteen sijaintiin. Näin saamme lopulta objektin siirtymään paikasta toiseen.
+
+Tältä se voi näyttää koodissa:
+
+```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);
+```
+
+✅ Voitko keksiä syyn, miksi sankarin piirtäminen monta kertaa sekunnissa voi aiheuttaa suorituskykyongelmia? Lue lisää [vaihtoehdoista tälle mallille](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Näppäimistötapahtumien käsittely
+
+Tapahtumia käsitellään liittämällä tiettyjä tapahtumia koodiin. Näppäimistötapahtumat laukaistaan koko ikkunassa, kun taas hiiritapahtumat, kuten `click`, voidaan liittää tiettyyn elementtiin. Käytämme näppäimistötapahtumia koko projektin ajan.
+
+Tapahtuman käsittelemiseksi sinun täytyy käyttää ikkunan `addEventListener()`-metodia ja antaa sille kaksi syöteparametria. Ensimmäinen parametri on tapahtuman nimi, esimerkiksi `keyup`. Toinen parametri on funktio, joka suoritetaan tapahtuman tapahtuessa.
+
+Tässä esimerkki:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+Näppäimistötapahtumissa on kaksi ominaisuutta, joiden avulla voit tarkistaa, mitä näppäintä painettiin:
+
+- `key`, joka on painetun näppäimen merkkijonoesitys, esimerkiksi `ArrowUp`
+- `keyCode`, joka on numeerinen esitys, esimerkiksi `37`, vastaa `ArrowLeft`.
+
+✅ Näppäimistötapahtumien käsittely on hyödyllistä myös pelikehityksen ulkopuolella. Mihin muihin tarkoituksiin voisit käyttää tätä tekniikkaa?
+
+### Erikoisnäppäimet: huomioitavaa
+
+On olemassa joitakin *erikoisnäppäimiä*, jotka vaikuttavat ikkunaan. Tämä tarkoittaa, että jos kuuntelet `keyup`-tapahtumaa ja käytät näitä erikoisnäppäimiä liikuttaaksesi sankaria, ne voivat myös aiheuttaa vaakasuuntaista vieritystä. Tästä syystä saatat haluta *poistaa käytöstä* tämän sisäänrakennetun selaimen toiminnan pelin kehittämisen aikana. Tarvitset koodia, kuten tämä:
+
+```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);
+```
+
+Yllä oleva koodi varmistaa, että nuolinäppäimillä ja välilyöntinäppäimellä ei ole *oletuskäyttäytymistä*. *Poistomekanismi* tapahtuu, kun kutsumme `e.preventDefault()`-metodia.
+
+## Pelin aiheuttama liike
+
+Voimme saada asiat liikkumaan itsestään käyttämällä ajastimia, kuten `setTimeout()`- tai `setInterval()`-funktiota, jotka päivittävät objektin sijaintia jokaisella aikavälillä. Tältä se voi näyttää:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## Pelisilmukka
+
+Pelisilmukka on käsite, joka tarkoittaa funktiota, joka kutsutaan säännöllisin väliajoin. Sitä kutsutaan pelisilmukaksi, koska kaikki, mikä pitäisi näkyä käyttäjälle, piirretään silmukassa. Pelisilmukka käyttää kaikkia pelin osia, jotka ovat osa peliä, ja piirtää ne, elleivät ne jostain syystä enää kuulu peliin. Esimerkiksi jos objekti on vihollinen, joka osuu laseriin ja räjähtää, se ei enää kuulu nykyiseen pelisilmukkaan (opit tästä lisää myöhemmissä oppitunneissa).
+
+Tältä pelisilmukka voi tyypillisesti näyttää koodissa:
+
+```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);
+```
+
+Yllä oleva silmukka kutsutaan joka `200` millisekunnin välein piirtämään canvas uudelleen. Voit valita pelillesi sopivimman aikavälin.
+
+## Avaruuspeli jatkuu
+
+Otat olemassa olevan koodin ja laajennat sitä. Voit joko aloittaa koodilla, jonka olet tehnyt osassa I, tai käyttää [osan II aloituskoodia](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **Sankarin liikuttaminen**: lisäät koodia, jotta voit liikuttaa sankaria nuolinäppäimillä.
+- **Vihollisten liikuttaminen**: lisäät myös koodia, jotta viholliset liikkuvat ylhäältä alas tietyllä nopeudella.
+
+## Suositellut vaiheet
+
+Etsi tiedostot, jotka on luotu sinulle `your-work`-alikansioon. Sen pitäisi sisältää seuraavat:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Aloita projektisi `your_work`-kansiossa kirjoittamalla:
+
+```bash
+cd your-work
+npm start
+```
+
+Yllä oleva käynnistää HTTP-palvelimen osoitteessa `http://localhost:5000`. Avaa selain ja syötä tämä osoite. Tällä hetkellä sen pitäisi näyttää sankari ja kaikki viholliset; mikään ei kuitenkaan liiku – vielä!
+
+### Lisää koodia
+
+1. **Lisää omistetut objektit** `hero`, `enemy` ja `game object` -objekteille, joilla on `x`- ja `y`-ominaisuudet. (Muista osio [Perintä tai koostaminen](../README.md)).
+
+   *VINKKI*: `game object` on se, jolla on `x` ja `y` sekä kyky piirtää itsensä canvasille.
+
+   >vinkki: aloita lisäämällä uusi GameObject-luokka, jonka konstruktori on määritelty alla, ja piirrä se sitten canvasille:
+  
+    ```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);
+      }
+    }
+    ```
+
+    Laajenna nyt tätä GameObjectia luodaksesi Hero ja 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. **Lisää näppäintapahtumien käsittelijät** sankarin liikkumiseen (ylös/alas, vasemmalle/oikealle).
+
+   *MUISTA*: kyseessä on koordinaatisto, jonka vasen yläkulma on `0,0`. Muista myös lisätä koodi oletuskäyttäytymisen estämiseksi.
+
+   >vinkki: luo oma onKeyDown-funktio ja liitä se ikkunaan:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Tarkista selaimen konsoli tässä vaiheessa ja katso, kuinka näppäinpainallukset kirjautuvat.
+
+3. **Toteuta** [Pub sub -malli](../README.md), tämä pitää koodisi siistinä, kun jatkat seuraaviin osiin.
+
+   Tämän viimeisen osan tekemiseksi voit:
+
+   1. **Lisätä tapahtumakuuntelijan** ikkunaan:
+
+       ```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. **Luo EventEmitter-luokka** viestien julkaisemiseen ja tilaamiseen:
+
+        ```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. **Lisää vakioita** ja määritä 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. **Alusta peli**
+
+    ```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. **Määritä pelisilmukka**
+
+   Refaktoroi window.onload-funktio alustamaan peli ja määrittämään pelisilmukka sopivalla aikavälillä. Lisää myös laser:
+
+    ```javascript
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      let gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100)
+      
+    };
+    ```
+
+5. **Lisää koodi** vihollisten liikuttamiseen tietyin aikavälein.
+
+    Refaktoroi `createEnemies()`-funktio luomaan viholliset ja lisäämään ne uuteen gameObjects-luokkaan:
+
+    ```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);
+        }
+      }
+    }
+    ```
+    
+    ja lisää `createHero()`-funktio tekemään saman sankarille.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    ja lopuksi lisää `drawGameObjects()`-funktio piirtämisen aloittamiseksi:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Vihollisten pitäisi alkaa edetä kohti sankarialustasi!
+
+---
+
+## 🚀 Haaste
+
+Kuten huomaat, koodisi voi muuttua "spagettikoodiksi", kun alat lisätä funktioita, muuttujia ja luokkia. Miten voisit paremmin organisoida koodisi, jotta se olisi luettavampaa? Suunnittele järjestelmä koodisi organisoimiseksi, vaikka se pysyisi yhdessä tiedostossa.
+
+## Luentojälkeinen kysely
+
+[Luentojälkeinen kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Kertaus ja itseopiskelu
+
+Vaikka kirjoitamme pelimme ilman kehyksiä, on olemassa monia JavaScript-pohjaisia canvas-kehyksiä pelikehitykseen. Käytä aikaa [lukemalla näistä](https://github.com/collections/javascript-game-engines).
+
+## Tehtävä
+
+[Kommentoi koodisi](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/3-moving-elements-around/assignment.md b/translations/fi/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..b7d90d65
--- /dev/null
+++ b/translations/fi/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-27T20:24:20+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Kommentoi koodisi
+
+## Ohjeet
+
+Käy läpi nykyinen /app.js-tiedostosi pelin kansiossa ja etsi tapoja kommentoida ja siistiä sitä. Koodi voi helposti lähteä käsistä, joten nyt on hyvä tilaisuus lisätä kommentteja varmistaaksesi, että koodisi on luettavaa ja käyttökelpoista myöhemmin.
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                                       | Riittävä                              | Parannusta tarvitaan                                           |
+| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
+|          | `app.js`-koodi on täysin kommentoitu ja järjestetty loogisiin osiin | `app.js`-koodi on riittävästi kommentoitu | `app.js`-koodi on osittain epäjärjestyksessä ja kommentit puutteellisia |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/4-collision-detection/README.md b/translations/fi/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..3ff87aae
--- /dev/null
+++ b/translations/fi/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-27T20:25:59+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna avaruuspeli, osa 4: Lisää laser ja tunnista törmäykset
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+Tässä osiossa opit ampumaan lasereita JavaScriptillä! Lisäämme peliimme kaksi asiaa:
+
+- **Laser**: tämä laser ammutaan sankarisi aluksesta pystysuoraan ylöspäin
+- **Törmäyksen tunnistus**, osana ampumisen toteutusta lisäämme myös seuraavat pelisäännöt:
+   - **Laser osuu viholliseen**: Vihollinen tuhoutuu, jos laser osuu siihen
+   - **Laser osuu ruudun yläreunaan**: Laser tuhoutuu, jos se osuu ruudun yläosaan
+   - **Vihollinen ja sankari törmäävät**: Vihollinen ja sankari tuhoutuvat, jos ne törmäävät toisiinsa
+   - **Vihollinen osuu ruudun alareunaan**: Vihollinen ja sankari tuhoutuvat, jos vihollinen osuu ruudun alareunaan
+
+Lyhyesti sanottuna, sinä -- *sankari* -- sinun täytyy tuhota kaikki viholliset laserilla ennen kuin ne ehtivät liikkua ruudun alareunaan.
+
+✅ Tee hieman tutkimusta ensimmäisestä koskaan kirjoitetusta tietokonepelistä. Mitä toiminnallisuuksia siinä oli?
+
+Ollaan sankarillisia yhdessä!
+
+## Törmäyksen tunnistus
+
+Miten toteutamme törmäyksen tunnistuksen? Meidän täytyy ajatella pelin objekteja suorakulmioina, jotka liikkuvat ympäriinsä. Miksi näin, saatat kysyä? No, pelin objektin piirtämiseen käytetty kuva on suorakulmio: sillä on `x`, `y`, `leveys` ja `korkeus`.
+
+Jos kaksi suorakulmiota, esimerkiksi sankari ja vihollinen, *leikkaavat* toisiaan, tapahtuu törmäys. Mitä sen jälkeen tapahtuu, riippuu pelin säännöistä. Törmäyksen tunnistuksen toteuttamiseen tarvitset seuraavat asiat:
+
+1. Tavan saada pelin objektista suorakulmion esitys, esimerkiksi näin:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Vertailufunktion, joka voi näyttää tältä:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Miten tuhoamme asioita
+
+Asioiden tuhoaminen pelissä tarkoittaa, että pelille kerrotaan, ettei sen enää tarvitse piirtää kyseistä objektia pelisilmukassa, joka käynnistyy tietyin väliajoin. Tämän voi tehdä merkitsemällä pelin objektin *kuolleeksi*, kun jotain tapahtuu, esimerkiksi näin:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Sen jälkeen voit poistaa *kuolleet* objektit ennen ruudun uudelleenpiirtämistä, esimerkiksi näin:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Miten ammutaan laser
+
+Laserin ampuminen tarkoittaa näppäintapahtumaan reagoimista ja objektin luomista, joka liikkuu tiettyyn suuntaan. Meidän täytyy siis suorittaa seuraavat vaiheet:
+
+1. **Luo laser-objekti**: sankarisi aluksen yläosasta, joka alkaa liikkua ylöspäin kohti ruudun yläosaa heti luomisen jälkeen.
+2. **Liitä koodi näppäintapahtumaan**: meidän täytyy valita näppäin, joka edustaa pelaajan laserin ampumista.
+3. **Luo pelin objekti, joka näyttää laserilta**, kun näppäintä painetaan.
+
+## Laserin viive
+
+Laserin täytyy ampua joka kerta, kun painat näppäintä, esimerkiksi *välilyöntiä*. Jotta peli ei tuottaisi liian monta laseria lyhyessä ajassa, meidän täytyy korjata tämä. Korjaus tehdään toteuttamalla niin sanottu *viive*, ajastin, joka varmistaa, että laser voidaan ampua vain tietyn ajan välein. Voit toteuttaa sen seuraavasti:
+
+```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.
+    }
+  }
+}
+```
+
+✅ Palaa avaruuspelisarjan ensimmäiseen osaan muistuttaaksesi itseäsi *viiveistä*.
+
+## Mitä rakennetaan
+
+Otat käyttöön olemassa olevan koodin (jonka olet siivonnut ja refaktoroinut) edellisestä osasta ja laajennat sitä. Voit joko aloittaa osan II koodista tai käyttää koodia [Osa III - aloitus](../../../../../../../../../your-work).
+
+> vinkki: laser, jonka kanssa työskentelet, on jo omaisuuskansiossasi ja viitattu koodissasi
+
+- **Lisää törmäyksen tunnistus**, kun laser törmää johonkin, seuraavat säännöt pätevät:
+   1. **Laser osuu viholliseen**: vihollinen tuhoutuu, jos laser osuu siihen
+   2. **Laser osuu ruudun yläreunaan**: laser tuhoutuu, jos se osuu ruudun yläosaan
+   3. **Vihollinen ja sankari törmäävät**: vihollinen ja sankari tuhoutuvat, jos ne törmäävät toisiinsa
+   4. **Vihollinen osuu ruudun alareunaan**: vihollinen ja sankari tuhoutuvat, jos vihollinen osuu ruudun alareunaan
+
+## Suositellut vaiheet
+
+Etsi tiedostot, jotka on luotu sinulle `your-work`-alikansiossa. Sen pitäisi sisältää seuraavat:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Aloita projektisi `your_work`-kansiossa kirjoittamalla:
+
+```bash
+cd your-work
+npm start
+```
+
+Yllä oleva käynnistää HTTP-palvelimen osoitteessa `http://localhost:5000`. Avaa selain ja syötä kyseinen osoite, tällä hetkellä sen pitäisi näyttää sankari ja kaikki viholliset, mutta mikään ei vielä liiku :).
+
+### Lisää koodia
+
+1. **Määritä pelin objektin suorakulmion esitys törmäyksen käsittelyä varten** Alla oleva koodi mahdollistaa suorakulmion esityksen `GameObject`-luokasta. Muokkaa GameObject-luokkaasi laajentaaksesi sitä:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Lisää koodi, joka tarkistaa törmäyksen** Tämä on uusi funktio, joka testaa, leikkaavatko kaksi suorakulmiota toisiaan:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Lisää laserin ampumiskyky**
+   1. **Lisää näppäintapahtuman viesti**. *Välilyönti*-näppäimen pitäisi luoda laser juuri sankarialuksen yläpuolelle. Lisää kolme vakioarvoa Messages-objektiin:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Käsittele välilyöntinäppäin**. Muokkaa `window.addEventListener`-keyup-funktiota käsittelemään välilyöntiä:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Lisää kuuntelijat**. Muokkaa `initGame()`-funktiota varmistaaksesi, että sankari voi ampua, kun välilyöntiä painetaan:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       ja lisää uusi `eventEmitter.on()`-funktio varmistaaksesi toiminnan, kun vihollinen törmää laseriin:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Liikuta objektia**, Varmista, että laser liikkuu vähitellen ruudun yläosaan. Luo uusi Laser-luokka, joka laajentaa `GameObject`-luokkaa, kuten aiemmin:
+
+      ```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. **Käsittele törmäykset**, Toteuta laserin törmäyssäännöt. Lisää `updateGameObjects()`-funktio, joka testaa törmäävät objektit:
+
+      ```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);
+      }  
+      ```
+
+      Varmista, että lisäät `updateGameObjects()`-funktion pelisilmukkaan `window.onload`-kohdassa.
+
+   4. **Toteuta viive** laserille, jotta sitä voidaan ampua vain tietyn ajan välein.
+
+      Lopuksi, muokkaa Hero-luokkaa niin, että se voi käyttää viivettä:
+
+       ```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;
+        }
+      }
+      ```
+
+Tässä vaiheessa pelissäsi on joitakin toiminnallisuuksia! Voit liikkua nuolinäppäimillä, ampua laserin välilyöntinäppäimellä, ja viholliset katoavat, kun osut niihin. Hyvin tehty!
+
+---
+
+## 🚀 Haaste
+
+Lisää räjähdys! Katso pelin omaisuuksia [Space Art -repo](../../../../6-space-game/solution/spaceArt/readme.txt) ja yritä lisätä räjähdys, kun laser osuu avaruusolioon.
+
+## Jälkikysely
+
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Kertaus ja itseopiskelu
+
+Kokeile pelisi aikavälejä tähän mennessä. Mitä tapahtuu, kun muutat niitä? Lue lisää [JavaScriptin ajoitustapahtumista](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Tehtävä
+
+[Tutki törmäyksiä](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/4-collision-detection/assignment.md b/translations/fi/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..c3be5b62
--- /dev/null
+++ b/translations/fi/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-27T20:27:16+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Tutki Törmäyksiä
+
+## Ohjeet
+
+Ymmärtääksesi paremmin, miten törmäykset toimivat, rakenna hyvin pieni peli, jossa on muutamia törmääviä esineitä. Tee niistä liikuteltavia näppäinpainalluksilla tai hiiren klikkauksilla, ja saa jotain tapahtumaan yhdelle esineistä, kun se osuu toiseen. Se voi olla esimerkiksi meteori, joka osuu maahan, tai törmäilyautoja. Ole luova!
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                                                                                              | Riittävä                       | Parannettavaa     |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
+|          | Täydellinen toimiva koodiesimerkki on tuotettu, esineet on piirretty kankaalle, perus-törmäykset tapahtuvat ja reaktiot näkyvät | Koodi on jollain tapaa keskeneräinen | Koodi ei toimi    |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/4-collision-detection/solution/README.md b/translations/fi/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..04ff4656
--- /dev/null
+++ b/translations/fi/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:27:48+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "fi"
+}
+-->
+Tämä on paikkamerkki, jätetty tarkoituksella tyhjäksi
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/4-collision-detection/your-work/README.md b/translations/fi/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..6b909dda
--- /dev/null
+++ b/translations/fi/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-27T20:27:36+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "fi"
+}
+-->
+Tämä on paikkamerkki, jätetty tarkoituksella tyhjäksi
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/5-keeping-score/README.md b/translations/fi/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..d67b39f2
--- /dev/null
+++ b/translations/fi/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-27T20:20:57+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna avaruuspeli Osa 5: Pisteet ja elämät
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+Tässä oppitunnissa opit lisäämään pisteytyksen peliin ja laskemaan elämiä.
+
+## Piirrä teksti ruudulle
+
+Jotta pelin pisteet voidaan näyttää ruudulla, sinun täytyy tietää, miten teksti sijoitetaan ruudulle. Vastaus on käyttämällä `fillText()`-metodia canvas-objektissa. Voit myös hallita muita ominaisuuksia, kuten mitä fonttia käytetään, tekstin väriä ja sen kohdistusta (vasen, oikea, keskitetty). Alla on koodia, joka piirtää tekstiä ruudulle.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Lue lisää [tekstin lisäämisestä canvasille](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ja voit halutessasi tehdä omasta versiostasi näyttävämmän!
+
+## Elämä pelikonseptina
+
+Elämä pelissä on vain numero. Avaruuspeliä ajatellen on yleistä antaa tietty määrä elämiä, jotka vähenevät yksi kerrallaan, kun aluksesi ottaa vahinkoa. On mukavaa, jos voit näyttää graafisen esityksen tästä, kuten pienet alukset tai sydämet numeron sijaan.
+
+## Mitä rakennetaan
+
+Lisätään peliin seuraavat ominaisuudet:
+
+- **Pelin pisteet**: Jokaisesta tuhotusta vihollisaluksesta sankarille tulisi antaa pisteitä, esimerkiksi 100 pistettä per alus. Pelin pisteet tulisi näyttää vasemmassa alakulmassa.
+- **Elämä**: Aluksellasi on kolme elämää. Menetät yhden elämän aina, kun vihollisalus törmää sinuun. Elämäpisteet tulisi näyttää oikeassa alakulmassa ja niiden tulisi koostua seuraavasta grafiikasta ![elämäkuva](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.fi.png).
+
+## Suositellut vaiheet
+
+Etsi tiedostot, jotka on luotu sinulle `your-work`-alikansiossa. Sen pitäisi sisältää seuraavat:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Aloita projektisi `your_work`-kansiossa kirjoittamalla:
+
+```bash
+cd your-work
+npm start
+```
+
+Yllä oleva käynnistää HTTP-palvelimen osoitteessa `http://localhost:5000`. Avaa selain ja syötä kyseinen osoite. Tällä hetkellä sen pitäisi näyttää sankari ja kaikki viholliset, ja kun painat vasenta ja oikeaa nuolinäppäintä, sankari liikkuu ja voi ampua vihollisia.
+
+### Lisää koodia
+
+1. **Kopioi tarvittavat resurssit** `solution/assets/`-kansiosta `your-work`-kansioon; lisää `life.png`-resurssi. Lisää lifeImg `window.onload`-funktioon:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Lisää `lifeImg` resurssien listaan:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Lisää muuttujia**. Lisää koodi, joka edustaa kokonaispisteitä (0) ja jäljellä olevia elämiä (3), ja näytä nämä pisteet ruudulla.
+
+3. **Laajenna `updateGameObjects()`-funktiota**. Laajenna `updateGameObjects()`-funktiota käsittelemään vihollisten törmäyksiä:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Lisää elämä ja pisteet**. 
+   1. **Alusta muuttujat**. Aseta elämä ja pisteet `this.cooldown = 0`-kohdan alle `Hero`-luokassa:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Piirrä muuttujat ruudulle**. Näytä nämä arvot ruudulla:
+
+        ```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. **Lisää metodit pelisilmukkaan**. Varmista, että lisäät nämä funktiot `window.onload`-funktioon `updateGameObjects()`-kohdan alle:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Toteuta pelisäännöt**. Toteuta seuraavat pelisäännöt:
+
+   1. **Jokaisesta sankarin ja vihollisen törmäyksestä** vähennä yksi elämä.
+   
+      Laajenna `Hero`-luokkaa tekemään tämä vähennys:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Jokaisesta laserista, joka osuu viholliseen**, lisää pelin pisteisiin 100 pistettä.
+
+      Laajenna Hero-luokkaa tekemään tämä lisäys:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Lisää nämä funktiot törmäystapahtumien lähettäjiin:
+
+        ```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();
+        });
+        ```
+
+✅ Tee hieman tutkimusta ja selvitä, mitä muita pelejä on luotu JavaScriptillä/Canvasilla. Mitkä ovat niiden yhteiset piirteet?
+
+Kun olet saanut tämän työn valmiiksi, sinun pitäisi nähdä pienet "elämä"-alukset oikeassa alakulmassa, pisteet vasemmassa alakulmassa, ja sinun pitäisi nähdä elämäsi vähenevän, kun törmäät vihollisiin, sekä pisteiden kasvavan, kun ammut vihollisia. Hyvä työ! Pelisi on melkein valmis.
+
+---
+
+## 🚀 Haaste
+
+Koodisi on melkein valmis. Voitko kuvitella seuraavat askeleesi?
+
+## Jälkikysely
+
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Kertaus ja itseopiskelu
+
+Tutki tapoja, joilla voit lisätä ja vähentää pelin pisteitä ja elämiä. On olemassa mielenkiintoisia pelimoottoreita, kuten [PlayFab](https://playfab.com). Miten yhden näistä käyttö voisi parantaa peliäsi?
+
+## Tehtävä
+
+[Rakenna pisteytyspeli](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/5-keeping-score/assignment.md b/translations/fi/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..0761f0ce
--- /dev/null
+++ b/translations/fi/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-27T20:21:54+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Luo pisteytyspeli
+
+## Ohjeet
+
+Luo peli, jossa esität elämät ja pisteet luovalla tavalla. Yksi ehdotus on näyttää elämät sydäminä ja pisteet suurena numerona näytön alareunan keskiosassa. Katso täältä [Ilmaisia peliresursseja](https://www.kenney.nl/)
+
+# Arviointikriteerit
+
+| Kriteeri | Erinomainen            | Riittävä                    | Parannusta tarvitaan       |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | koko peli on esitetty  | peli on osittain esitetty   | osittainen peli sisältää virheitä |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinkäsityksistä tai virhetulkinnoista.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/5-keeping-score/solution/README.md b/translations/fi/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..3aa731ed
--- /dev/null
+++ b/translations/fi/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:22:25+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "fi"
+}
+-->
+Tämä on paikkamerkki, jätetty tarkoituksella tyhjäksi
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/5-keeping-score/your-work/README.md b/translations/fi/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..63026171
--- /dev/null
+++ b/translations/fi/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-27T20:22:12+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "fi"
+}
+-->
+Tämä on paikkamerkki, jätetty tarkoituksella tyhjäksi
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/6-end-condition/README.md b/translations/fi/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..71b5d3c3
--- /dev/null
+++ b/translations/fi/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-27T20:29:17+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna avaruuspeli Osa 6: Lopetus ja uudelleenkäynnistys
+
+## Ennakkoquiz
+
+[Ennakkoquiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Pelissä on erilaisia tapoja ilmaista *lopetusehto*. Pelin luojana sinun tehtäväsi on määrittää, miksi peli päättyy. Tässä muutamia syitä, olettaen että puhumme avaruuspelistä, jota olet tähän mennessä rakentanut:
+
+- **`N` Vihollisalusta on tuhottu**: On melko yleistä, että peli jaetaan eri tasoihin, joissa sinun täytyy tuhota `N` vihollisalusta päästäksesi tasosta läpi.
+- **Aluksesi on tuhottu**: On pelejä, joissa häviät pelin, jos aluksesi tuhoutuu. Toinen yleinen lähestymistapa on elämien käsite. Joka kerta kun aluksesi tuhoutuu, menetät yhden elämän. Kun kaikki elämät on menetetty, peli päättyy.
+- **Olet kerännyt `N` pistettä**: Toinen yleinen lopetusehto on pisteiden kerääminen. Miten pisteitä kerätään, on sinun päätettävissäsi, mutta on melko yleistä antaa pisteitä erilaisista toiminnoista, kuten vihollisaluksen tuhoamisesta tai esineiden keräämisestä, joita tuhotut esineet *pudottavat*.
+- **Taso on suoritettu**: Tämä voi sisältää useita ehtoja, kuten `X` vihollisalusta tuhottu, `Y` pistettä kerätty tai ehkä tietty esine on kerätty.
+
+## Uudelleenkäynnistys
+
+Jos ihmiset pitävät pelistäsi, he todennäköisesti haluavat pelata sen uudelleen. Kun peli päättyy mistä tahansa syystä, sinun tulisi tarjota vaihtoehto käynnistää peli uudelleen.
+
+✅ Mieti hetki, millä ehdoilla peli mielestäsi päättyy ja miten sinua kehotetaan käynnistämään peli uudelleen.
+
+## Mitä rakentaa
+
+Lisäät nämä säännöt peliisi:
+
+1. **Pelin voittaminen**. Kun kaikki vihollisalukset on tuhottu, voitat pelin. Lisäksi näytä jonkinlainen voittoviesti.
+1. **Uudelleenkäynnistys**. Kun kaikki elämät on menetetty tai peli on voitettu, sinun tulisi tarjota tapa käynnistää peli uudelleen. Muista! Sinun täytyy alustaa peli uudelleen ja tyhjentää edellinen pelitila.
+
+## Suositellut vaiheet
+
+Etsi tiedostot, jotka on luotu sinulle `your-work`-alikansiossa. Sen pitäisi sisältää seuraavat:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Käynnistä projektisi `your_work`-kansiossa kirjoittamalla:
+
+```bash
+cd your-work
+npm start
+```
+
+Yllä oleva käynnistää HTTP-palvelimen osoitteessa `http://localhost:5000`. Avaa selain ja syötä kyseinen osoite. Pelisi pitäisi olla pelattavassa tilassa.
+
+> vinkki: välttääksesi varoituksia Visual Studio Codessa, muokkaa `window.onload`-funktiota kutsumaan `gameLoopId` sellaisenaan (ilman `let`-määrittelyä) ja määritä `gameLoopId` tiedoston yläosassa erikseen: `let gameLoopId;`
+
+### Lisää koodia
+
+1. **Seuraa lopetusehtoa**. Lisää koodia, joka seuraa vihollisten määrää tai sitä, onko sankarialus tuhottu, lisäämällä nämä kaksi funktiota:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Lisää logiikkaa viestinkäsittelijöihin**. Muokkaa `eventEmitter` käsittelemään näitä ehtoja:
+
+    ```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. **Lisää uusia viestityyppejä**. Lisää nämä viestit constants-objektiin:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Lisää uudelleenkäynnistyskoodi**, joka käynnistää pelin uudelleen valitun painikkeen painalluksella.
+
+   1. **Kuuntele Enter-näppäimen painallusta**. Muokkaa ikkunasi eventListeneria kuuntelemaan tätä painallusta:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Lisää uudelleenkäynnistysviesti**. Lisää tämä viesti Messages-constanttiin:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Toteuta pelisäännöt**. Toteuta seuraavat pelisäännöt:
+
+   1. **Pelaajan voittamisehto**. Kun kaikki vihollisalukset on tuhottu, näytä voittoviesti.
+
+      1. Luo ensin `displayMessage()`-funktio:
+
+        ```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. Luo `endGame()`-funktio:
+
+        ```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. **Uudelleenkäynnistyslogiikka**. Kun kaikki elämät on menetetty tai pelaaja on voittanut pelin, näytä, että peli voidaan käynnistää uudelleen. Lisäksi käynnistä peli uudelleen, kun *uudelleenkäynnistys*-näppäintä painetaan (voit päättää, mikä näppäin vastaa uudelleenkäynnistystä).
+
+      1. Luo `resetGame()`-funktio:
+
+        ```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. Lisää kutsu `eventEmitter`-objektiin pelin alustamisessa `initGame()`-funktiossa:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Lisää `clear()`-funktio EventEmitteriin:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Onnittelut, Kapteeni! Pelisi on valmis! Hyvin tehty! 🚀 💥 👽
+
+---
+
+## 🚀 Haaste
+
+Lisää ääni! Voitko lisätä äänen parantaaksesi pelikokemusta, esimerkiksi kun laser osuu, sankari kuolee tai voittaa? Tutustu tähän [sandboxiin](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) oppiaksesi, miten ääntä toistetaan JavaScriptillä.
+
+## Jälkiquiz
+
+[Jälkiquiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Kertaus ja itseopiskelu
+
+Tehtäväsi on luoda uusi näytepeli, joten tutki joitakin mielenkiintoisia pelejä nähdäksesi, millaisen pelin voisit rakentaa.
+
+## Tehtävä
+
+[Rakenna näytepeli](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/6-end-condition/assignment.md b/translations/fi/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..349448e8
--- /dev/null
+++ b/translations/fi/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-27T20:30:11+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna esimerkkipeli
+
+## Ohjeet
+
+Kokeile rakentaa pieni peli, jossa harjoittelet erilaisia lopetusehtoja. Vaihtele esimerkiksi pisteiden saavuttamisen, sankarin kaikkien elämien menettämisen tai kaikkien hirviöiden voittamisen välillä. Rakenna jotain yksinkertaista, kuten konsolipohjainen seikkailupeli. Käytä alla olevaa pelin kulkua inspiraationa:
+
+```
+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****
+```
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen            | Riittävä                    | Parantamisen varaa          |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | koko peli esitetty     | peli osittain esitetty      | osittainen peli sisältää virheitä |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/6-end-condition/solution/README.md b/translations/fi/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..1260d754
--- /dev/null
+++ b/translations/fi/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:30:40+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "fi"
+}
+-->
+Tämä on paikkamerkki, jätetty tarkoituksella tyhjäksi
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/6-end-condition/your-work/README.md b/translations/fi/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..5f604f69
--- /dev/null
+++ b/translations/fi/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-27T20:30:28+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "fi"
+}
+-->
+Tämä on paikkamerkki, jätetty tarkoituksella tyhjäksi
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/README.md b/translations/fi/6-space-game/README.md
new file mode 100644
index 00000000..8be1e162
--- /dev/null
+++ b/translations/fi/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-27T20:20:32+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna avaruuspeli
+
+Avaruuspeli, joka opettaa edistyneempiä JavaScriptin perusteita
+
+Tässä oppitunnissa opit rakentamaan oman avaruuspelisi. Jos olet koskaan pelannut peliä "Space Invaders", tämä peli perustuu samaan ideaan: ohjata avaruusalusta ja ampua hirviöitä, jotka tulevat ylhäältä alas. Valmis peli näyttää tältä:
+
+![Valmis peli](../../../6-space-game/images/pewpew.gif)
+
+Näiden kuuden oppitunnin aikana opit seuraavaa:
+
+- **Vuorovaikuttamaan** Canvas-elementin kanssa piirtääksesi asioita näytölle
+- **Ymmärtämään** karteesista koordinaatistojärjestelmää
+- **Oppimaan** Pub-Sub-mallin luodaksesi selkeän pelirakenteen, jota on helpompi ylläpitää ja laajentaa
+- **Hyödyntämään** Async/Awaitia pelin resurssien lataamiseen
+- **Käsittelemään** näppäimistötapahtumia
+
+## Yleiskatsaus
+
+- Teoria
+   - [Johdanto pelien rakentamiseen JavaScriptillä](1-introduction/README.md)
+- Käytäntö
+   - [Piirtäminen canvasille](2-drawing-to-canvas/README.md)
+   - [Elementtien liikuttaminen näytöllä](3-moving-elements-around/README.md)
+   - [Törmäyksentunnistus](4-collision-detection/README.md)
+   - [Pisteiden laskeminen](5-keeping-score/README.md)
+   - [Pelin lopettaminen ja uudelleenkäynnistäminen](6-end-condition/README.md)
+
+## Kiitokset
+
+Tässä käytetyt resurssit ovat peräisin osoitteesta https://www.kenney.nl/.  
+Jos olet kiinnostunut pelien rakentamisesta, nämä ovat todella hyviä resursseja. Monet niistä ovat ilmaisia, ja osa on maksullisia.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/6-space-game/solution/README.md b/translations/fi/6-space-game/solution/README.md
new file mode 100644
index 00000000..e7a7d1d7
--- /dev/null
+++ b/translations/fi/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:30:53+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "fi"
+}
+-->
+Tämä on paikkamerkki, jätetty tarkoituksella tyhjäksi
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/7-bank-project/1-template-route/README.md b/translations/fi/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..f85a6a84
--- /dev/null
+++ b/translations/fi/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-27T21:01:12+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna pankkisovellus Osa 1: HTML-mallit ja reitit verkkosovelluksessa
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Johdanto
+
+JavaScriptin tulon myötä selaimiin, verkkosivustot ovat muuttuneet entistä interaktiivisemmiksi ja monimutkaisemmiksi. Verkkoteknologioita käytetään nykyään yleisesti täysin toimivien sovellusten luomiseen, jotka toimivat suoraan selaimessa ja joita kutsumme [verkkosovelluksiksi](https://en.wikipedia.org/wiki/Web_application). Koska verkkosovellukset ovat erittäin interaktiivisia, käyttäjät eivät halua odottaa koko sivun latautumista jokaisen toiminnon jälkeen. Siksi JavaScriptiä käytetään päivittämään HTML suoraan DOM:n avulla, jotta käyttäjäkokemus olisi sujuvampi.
+
+Tässä oppitunnissa luomme perustan pankkisovelluksen rakentamiselle, käyttämällä HTML-malleja useiden näyttöjen luomiseen, jotka voidaan näyttää ja päivittää ilman, että koko HTML-sivua tarvitsee ladata uudelleen.
+
+### Esivaatimukset
+
+Tarvitset paikallisen verkkopalvelimen testataksesi verkkosovellusta, jonka rakennamme tässä oppitunnissa. Jos sinulla ei ole sellaista, voit asentaa [Node.js:n](https://nodejs.org) ja käyttää komentoa `npx lite-server` projektikansiossasi. Tämä luo paikallisen verkkopalvelimen ja avaa sovelluksesi selaimessa.
+
+### Valmistelu
+
+Luo tietokoneellesi kansio nimeltä `bank` ja sen sisälle tiedosto nimeltä `index.html`. Aloitamme tästä HTML-[pohjakoodista](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-mallit
+
+Jos haluat luoda useita näyttöjä verkkosivulle, yksi ratkaisu olisi luoda yksi HTML-tiedosto jokaiselle näytölle, jonka haluat näyttää. Tämä ratkaisu tuo kuitenkin mukanaan joitakin haittoja:
+
+- Koko HTML täytyy ladata uudelleen näytön vaihdon yhteydessä, mikä voi olla hidasta.
+- Tietojen jakaminen eri näyttöjen välillä on vaikeaa.
+
+Toinen lähestymistapa on käyttää vain yhtä HTML-tiedostoa ja määritellä useita [HTML-malleja](https://developer.mozilla.org/docs/Web/HTML/Element/template) käyttämällä `<template>`-elementtiä. Malli on uudelleenkäytettävä HTML-lohko, jota selain ei näytä, ja joka täytyy luoda ajonaikaisesti JavaScriptin avulla.
+
+### Tehtävä
+
+Luomme pankkisovelluksen, jossa on kaksi näyttöä: kirjautumissivu ja hallintapaneeli. Aloitetaan lisäämällä HTML-runkoon paikkamerkkielementti, jota käytämme sovelluksemme eri näyttöjen luomiseen:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Annamme sille `id`-tunnisteen, jotta sen löytäminen JavaScriptillä olisi helpompaa myöhemmin.
+
+> Vinkki: Koska tämän elementin sisältö korvataan, voimme laittaa siihen latausviestin tai -ilmaisimen, joka näytetään sovelluksen latautuessa.
+
+Seuraavaksi lisätään HTML-malli kirjautumissivulle. Laitamme siihen toistaiseksi vain otsikon ja osion, joka sisältää linkin navigointia varten.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Lisätään sitten toinen HTML-malli hallintapaneelisivulle. Tämä sivu sisältää eri osioita:
+
+- Otsikon, jossa on otsikko ja uloskirjautumislinkki
+- Pankkitilin nykyisen saldon
+- Tapahtumaluettelon, joka näytetään taulukossa
+
+```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>
+```
+
+> Vinkki: Kun luot HTML-malleja, jos haluat nähdä miltä ne näyttävät, voit kommentoida `<template>` ja `</template>`-rivien ympärille `<!-- -->`.
+
+✅ Miksi käytämme `id`-attribuutteja malleissa? Voisimmeko käyttää jotain muuta, kuten luokkia?
+
+## Mallien näyttäminen JavaScriptillä
+
+Jos kokeilet nykyistä HTML-tiedostoasi selaimessa, näet, että se jää näyttämään `Loading...`. Tämä johtuu siitä, että meidän täytyy lisätä JavaScript-koodia mallien luomiseksi ja näyttämiseksi.
+
+Mallin luominen tapahtuu yleensä kolmessa vaiheessa:
+
+1. Haetaan mallielementti DOM:sta, esimerkiksi käyttämällä [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Kopioidaan mallielementti, käyttämällä [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Liitetään se DOM:iin näkyvän elementin alle, esimerkiksi käyttämällä [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Miksi meidän täytyy kopioida malli ennen sen liittämistä DOM:iin? Mitä luulet tapahtuvan, jos jättäisimme tämän vaiheen väliin?
+
+### Tehtävä
+
+Luo uusi tiedosto nimeltä `app.js` projektikansioosi ja tuo tämä tiedosto HTML:n `<head>`-osioon:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Nyt `app.js`-tiedostossa luomme uuden funktion `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);
+}
+```
+
+Tässä teemme juuri yllä kuvatut kolme vaihetta. Luomme mallin, jonka `id` on `templateId`, ja laitamme sen kopioidun sisällön sovelluksemme paikkamerkkiin. Huomaa, että meidän täytyy käyttää `cloneNode(true)` kopioidaksemme koko mallin alipuuston.
+
+Kutsu nyt tätä funktiota yhdellä mallilla ja katso tulosta.
+
+```js
+updateRoute('login');
+```
+
+✅ Mikä on tämän koodin tarkoitus `app.innerHTML = '';`? Mitä tapahtuu ilman sitä?
+
+## Reittien luominen
+
+Kun puhumme verkkosovelluksesta, kutsumme *reititykseksi* tarkoitusta yhdistää **URL-osoitteet** tiettyihin näyttöihin, jotka pitäisi näyttää. Verkkosivustolla, jossa on useita HTML-tiedostoja, tämä tapahtuu automaattisesti, koska tiedostopolut heijastuvat URL-osoitteeseen. Esimerkiksi, jos projektikansiossasi on nämä tiedostot:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Jos luot verkkopalvelimen, jonka juurena on `mywebsite`, URL-reititys on:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Kuitenkin verkkosovelluksessamme käytämme yhtä HTML-tiedostoa, joka sisältää kaikki näytöt, joten tämä oletuskäyttäytyminen ei auta meitä. Meidän täytyy luoda tämä kartta manuaalisesti ja päivittää näytettävä malli JavaScriptin avulla.
+
+### Tehtävä
+
+Käytämme yksinkertaista objektia toteuttaaksemme [kartan](https://en.wikipedia.org/wiki/Associative_array) URL-polkujen ja malliemme välillä. Lisää tämä objekti `app.js`-tiedoston alkuun.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Muokataan nyt hieman `updateRoute`-funktiota. Sen sijaan, että välittäisimme suoraan `templateId`-argumentin, haluamme hakea sen ensin nykyisestä URL-osoitteesta ja käyttää sitten karttaamme saadaksemme vastaavan mallin `id`-arvon. Voimme käyttää [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) saadaksemme vain polkuosan URL-osoitteesta.
+
+```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);
+}
+```
+
+Tässä kartoitimme määritetyt reitit vastaaviin malleihin. Voit kokeilla, että tämä toimii oikein muuttamalla URL-osoitetta selaimessasi.
+
+✅ Mitä tapahtuu, jos syötät tuntemattoman polun URL-osoitteeseen? Miten voisimme ratkaista tämän?
+
+## Navigoinnin lisääminen
+
+Sovelluksemme seuraava askel on lisätä mahdollisuus navigoida sivujen välillä ilman, että URL-osoitetta täytyy muuttaa manuaalisesti. Tämä tarkoittaa kahta asiaa:
+
+1. Päivitetään nykyinen URL-osoite
+2. Päivitetään näytettävä malli uuden URL-osoitteen perusteella
+
+Olemme jo huolehtineet toisesta osasta `updateRoute`-funktiolla, joten meidän täytyy selvittää, miten päivittää nykyinen URL-osoite.
+
+Meidän täytyy käyttää JavaScriptiä ja tarkemmin [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), joka mahdollistaa URL-osoitteen päivittämisen ja uuden merkinnän luomisen selaimen historiassa ilman HTML:n uudelleenlatausta.
+
+> Huomio: Vaikka HTML:n ankkurielementti [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) voidaan käyttää itsenäisesti hyperlinkkien luomiseen eri URL-osoitteisiin, se lataa HTML:n uudelleen oletuksena. Tämä käyttäytyminen täytyy estää, kun käsitellään reititystä mukautetulla JavaScriptillä, käyttämällä preventDefault()-funktiota klikkaustapahtumassa.
+
+### Tehtävä
+
+Luodaan uusi funktio, jota voimme käyttää navigointiin sovelluksessamme:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Tämä metodi päivittää ensin nykyisen URL-osoitteen annetun polun perusteella, sitten päivittää mallin. Ominaisuus `window.location.origin` palauttaa URL-juuren, mikä mahdollistaa täydellisen URL-osoitteen rakentamisen annetusta polusta.
+
+Nyt kun meillä on tämä funktio, voimme huolehtia ongelmasta, joka meillä on, jos polku ei vastaa mitään määritettyä reittiä. Muokkaamme `updateRoute`-funktiota lisäämällä varasuunnitelman yhteen olemassa olevista reiteistä, jos emme löydä vastaavuutta.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Jos reittiä ei löydy, ohjaamme nyt `login`-sivulle.
+
+Luodaan nyt funktio, joka hakee URL-osoitteen, kun linkkiä klikataan, ja estää selaimen oletuslinkkikäyttäytymisen:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Viimeistellään navigointijärjestelmä lisäämällä sidonnat HTML:n *Login*- ja *Logout*-linkkeihin.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Yllä oleva `event`-objekti tallentaa `click`-tapahtuman ja välittää sen `onLinkClick`-funktiollemme.
+
+Käyttämällä [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick)-attribuuttia sidotaan `click`-tapahtuma JavaScript-koodiin, tässä `navigate()`-funktion kutsuun.
+
+Kokeile klikkaamalla näitä linkkejä, sinun pitäisi nyt pystyä navigoimaan sovelluksesi eri näyttöjen välillä.
+
+✅ `history.pushState`-metodi on osa HTML5-standardia ja toteutettu [kaikissa moderneissa selaimissa](https://caniuse.com/?search=pushState). Jos rakennat verkkosovellusta vanhemmille selaimille, voit käyttää tämän API:n sijasta kikkaa: käyttämällä [hash-merkkiä (`#`)](https://en.wikipedia.org/wiki/URI_fragment) ennen polkua voit toteuttaa reitityksen, joka toimii tavallisella ankkurinavigoinnilla eikä lataa sivua uudelleen, koska sen tarkoitus oli luoda sisäisiä linkkejä sivun sisällä.
+
+## Selaimen takaisin- ja eteenpäin-painikkeiden käsittely
+
+`history.pushState`-käyttö luo uusia merkintöjä selaimen navigointihistoriaan. Voit tarkistaa tämän pitämällä selaimesi *takaisin-painiketta* painettuna, sen pitäisi näyttää jotain tällaista:
+
+![Navigointihistorian kuvakaappaus](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.fi.png)
+
+Jos yrität klikata takaisin-painiketta muutaman kerran, näet, että nykyinen URL-osoite muuttuu ja historia päivittyy, mutta sama malli pysyy näytettynä.
+
+Tämä johtuu siitä, että sovellus ei tiedä, että meidän täytyy kutsua `updateRoute()` joka kerta, kun historia muuttuu. Jos katsot [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState)-dokumentaatiota, näet, että jos tila muuttuu - eli siirryimme eri URL-osoitteeseen - [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event)-tapahtuma laukaistaan. Käytämme tätä korjataksemme ongelman.
+
+### Tehtävä
+
+Varmistaaksemme, että näytettävä malli päivitetään, kun selaimen historia muuttuu, liitämme uuden funktion, joka kutsuu `updateRoute()`. Teemme tämän `app.js`-tiedoston lopussa:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Huomio: Käytimme [nuolifunktiota](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) tässä `popstate`-tapahtumankäsittelijän määrittämiseen lyhyyden vuoksi, mutta tavallinen funktio toimisi samalla tavalla.
+
+Tässä on kertausvideo nuolifunktioista:
+
+[![Nuolifunktiot](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Nuolifunktiot")
+
+> 🎥 Klikkaa yllä olevaa kuvaa katsoaksesi videon nuolifunktioista.
+
+Kokeile nyt selaimesi takaisin- ja eteenpäin-painikkeita ja tarkista, että näytettävä reitti päivittyy oikein tällä kertaa.
+
+---
+
+## 🚀 Haaste
+
+Lisää uusi malli ja reitti kolmannelle sivulle, joka näyttää tämän sovelluksen tekijätiedot.
+
+## Jälkikysely
+
+[Jälkikysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Kertaus ja itseopiskelu
+
+Reititys on yksi yllättävän hankalista osista verkkokehityksessä, erityisesti kun verkkosivut siirtyvät sivun uudelleenlatauskäyttäytymisestä yhden sivun sovellusten sivun päivityksiin. Lue hieman [miten Azure Static Web App -palvelu](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) käsittelee reititystä. Voitko selittää, miksi jotkut dokumentissa kuvatut päätökset ovat välttämättömiä?
+
+## Tehtävä
+
+[Paranna reititystä](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinkäsityksistä tai virhetulkinnoista.
\ No newline at end of file
diff --git a/translations/fi/7-bank-project/1-template-route/assignment.md b/translations/fi/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..4710e02a
--- /dev/null
+++ b/translations/fi/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-27T21:03:17+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Paranna reititystä
+
+## Ohjeet
+
+Reittien määrittely sisältää tällä hetkellä vain käytettävän mallin tunnisteen. Uuden sivun näyttäminen vaatii kuitenkin joskus hieman enemmän. Parannetaan reitityksen toteutusta kahdella lisäominaisuudella:
+
+- Anna jokaiselle mallille otsikko ja päivitä selainikkunan otsikko tällä uudella otsikolla, kun malli vaihtuu.
+- Lisää vaihtoehto suorittaa koodia mallin vaihtumisen jälkeen. Haluamme tulostaa `'Dashboard is shown'` kehittäjäkonsoliin aina, kun hallintapaneelin sivu näytetään.
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                                                                                                        | Riittävä                                                                                                                                                                                  | Parannettavaa                                         |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
+|          | Molemmat ominaisuudet on toteutettu ja toimivat. Otsikon ja koodin lisäys toimii myös uudelle reitille, joka on lisätty `routes`-määrittelyyn. | Molemmat ominaisuudet toimivat, mutta toiminta on kovakoodattu eikä konfiguroitavissa `routes`-määrittelyn kautta. Kolmannen reitin lisääminen otsikon ja koodin lisäyksellä ei toimi tai toimii osittain. | Jompikumpi ominaisuus puuttuu tai ei toimi kunnolla. |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/7-bank-project/2-forms/README.md b/translations/fi/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..89488ab9
--- /dev/null
+++ b/translations/fi/7-bank-project/2-forms/README.md
@@ -0,0 +1,306 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-27T20:55:33+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna pankkisovellus Osa 2: Luo kirjautumis- ja rekisteröintilomake
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Johdanto
+
+Lähes kaikissa moderneissa verkkosovelluksissa voit luoda tilin saadaksesi oman yksityisen tilan. Koska useat käyttäjät voivat käyttää verkkosovellusta samanaikaisesti, tarvitset mekanismin, jolla tallennat kunkin käyttäjän henkilökohtaiset tiedot erikseen ja valitset, mitä tietoja näytetään. Emme käsittele [käyttäjän identiteetin turvallista hallintaa](https://en.wikipedia.org/wiki/Authentication), koska se on laaja aihe itsessään, mutta varmistamme, että jokainen käyttäjä voi luoda yhden (tai useamman) pankkitilin sovelluksessamme.
+
+Tässä osassa käytämme HTML-lomakkeita lisätäksemme kirjautumis- ja rekisteröintitoiminnot verkkosovellukseemme. Opimme lähettämään tietoja palvelimen API:lle ohjelmallisesti ja määrittelemään perusvalidaatiosäännöt käyttäjän syötteille.
+
+### Esitiedot
+
+Sinun tulee olla suorittanut verkkosovelluksen [HTML-mallien ja reitityksen](../1-template-route/README.md) osio ennen tämän oppitunnin aloittamista. Sinun tulee myös asentaa [Node.js](https://nodejs.org) ja [käynnistää palvelimen API](../api/README.md) paikallisesti, jotta voit lähettää tietoja tilien luomista varten.
+
+**Huomioi**
+Sinulla tulee olla kaksi terminaalia käynnissä samanaikaisesti seuraavasti:
+1. Pääpankkisovellukselle, jonka rakensimme [HTML-mallien ja reitityksen](../1-template-route/README.md) oppitunnissa.
+2. [Pankkisovelluksen palvelimen API:lle](../api/README.md), jonka juuri asensimme.
+
+Molempien palvelimien tulee olla käynnissä, jotta voit jatkaa oppituntia. Ne kuuntelevat eri porteilla (portti `3000` ja portti `5000`), joten kaiken pitäisi toimia ongelmitta.
+
+Voit testata, että palvelin toimii oikein suorittamalla tämän komennon terminaalissa:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Lomake ja ohjaimet
+
+`<form>`-elementti kapseloi HTML-dokumentin osan, jossa käyttäjä voi syöttää ja lähettää tietoja interaktiivisten ohjainten avulla. Lomakkeessa voi käyttää monenlaisia käyttöliittymäohjaimia, joista yleisimpiä ovat `<input>`- ja `<button>`-elementit.
+
+`<input>`-elementillä on monia [tyyppejä](https://developer.mozilla.org/docs/Web/HTML/Element/input). Esimerkiksi käyttäjänimen syöttökentän luomiseen voit käyttää seuraavaa:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+`name`-attribuuttia käytetään ominaisuuden nimenä, kun lomaketiedot lähetetään. `id`-attribuuttia käytetään yhdistämään `<label>` lomakeohjaimeen.
+
+> Tutustu [`<input>`-tyyppien](https://developer.mozilla.org/docs/Web/HTML/Element/input) ja [muiden lomakeohjainten](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) luetteloon saadaksesi käsityksen kaikista natiivielementeistä, joita voit käyttää käyttöliittymän rakentamisessa.
+
+✅ Huomaa, että `<input>` on [tyhjä elementti](https://developer.mozilla.org/docs/Glossary/Empty_element), jolle ei tule lisätä sulkevaa tagia. Voit kuitenkin käyttää itse sulkevaa `<input/>`-merkintää, mutta se ei ole pakollista.
+
+`<button>`-elementti lomakkeessa on hieman erityinen. Jos et määritä sen `type`-attribuuttia, se lähettää lomaketiedot palvelimelle, kun sitä painetaan. Mahdolliset `type`-arvot ovat:
+
+- `submit`: Oletusarvo lomakkeessa, painike käynnistää lomakkeen lähetyksen.
+- `reset`: Painike palauttaa kaikki lomakeohjaimet alkuarvoihinsa.
+- `button`: Ei määritä oletuskäyttäytymistä painettaessa. Voit määrittää sille mukautettuja toimintoja JavaScriptin avulla.
+
+### Tehtävä
+
+Aloitetaan lisäämällä lomake `login`-malliin. Tarvitsemme *käyttäjänimi*-kentän ja *Kirjaudu sisään* -painikkeen.
+
+```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>
+```
+
+Jos katsot tarkemmin, huomaat, että lisäsimme myös `<label>`-elementin. `<label>`-elementtejä käytetään lisäämään nimi käyttöliittymäohjaimille, kuten käyttäjänimikentällemme. Tunnisteet ovat tärkeitä lomakkeiden luettavuuden kannalta, mutta niillä on myös muita etuja:
+
+- Yhdistämällä tunniste lomakeohjaimeen se auttaa avustavia teknologioita (kuten ruudunlukijoita) ymmärtämään, mitä tietoja käyttäjältä odotetaan.
+- Voit klikata tunnistetta asettaaksesi kohdistuksen suoraan siihen liittyvään syöttökenttään, mikä helpottaa käyttöä kosketusnäytöllisillä laitteilla.
+
+> [Saavutettavuus](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) verkossa on erittäin tärkeä aihe, jota usein laiminlyödään. [Semanttisten HTML-elementtien](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) ansiosta saavutettavan sisällön luominen ei ole vaikeaa, jos käytät niitä oikein. Voit [lukea lisää saavutettavuudesta](https://developer.mozilla.org/docs/Web/Accessibility) välttääksesi yleiset virheet ja tullaksesi vastuulliseksi kehittäjäksi.
+
+Lisätään nyt toinen lomake rekisteröintiä varten, heti edellisen alle:
+
+```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`-attribuutilla voimme määrittää oletusarvon tietylle syöttökentälle. Huomaa myös, että `balance`-kentällä on `number`-tyyppi. Näyttääkö se erilaiselta kuin muut syöttökentät? Kokeile vuorovaikuttaa sen kanssa.
+
+✅ Voitko navigoida ja käyttää lomakkeita pelkällä näppäimistöllä? Miten tekisit sen?
+
+## Tietojen lähettäminen palvelimelle
+
+Nyt kun meillä on toimiva käyttöliittymä, seuraava askel on lähettää tiedot palvelimelle. Tehdään nopea testi nykyisellä koodillamme: mitä tapahtuu, kun klikkaat *Kirjaudu sisään* tai *Rekisteröidy* -painiketta?
+
+Huomasitko muutoksen selaimen URL-osoiteosiossa?
+
+![Kuvakaappaus selaimen URL-osoitteen muutoksesta Rekisteröidy-painikkeen klikkauksen jälkeen](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.fi.png)
+
+Lomakkeen oletustoiminto on lähettää tiedot nykyiseen palvelimen URL-osoitteeseen [GET-metodilla](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), liittämällä lomaketiedot suoraan URL-osoitteeseen. Tässä metodissa on kuitenkin joitakin rajoituksia:
+
+- Lähetettävien tietojen koko on hyvin rajallinen (noin 2000 merkkiä).
+- Tiedot näkyvät suoraan URL-osoitteessa (ei hyvä salasanoille).
+- Se ei toimi tiedostojen latausten kanssa.
+
+Siksi voit vaihtaa sen käyttämään [POST-metodia](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5), joka lähettää lomaketiedot palvelimelle HTTP-pyynnön rungossa ilman edellä mainittuja rajoituksia.
+
+> Vaikka POST on yleisimmin käytetty metodi tietojen lähettämiseen, [tietyissä tilanteissa](https://www.w3.org/2001/tag/doc/whenToUseGet.html) on suositeltavaa käyttää GET-metodia, esimerkiksi hakukentän toteutuksessa.
+
+### Tehtävä
+
+Lisää `action`- ja `method`-ominaisuudet rekisteröintilomakkeeseen:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Yritä nyt rekisteröidä uusi tili omalla nimelläsi. Kun klikkaat *Rekisteröidy*-painiketta, sinun pitäisi nähdä jotain tällaista:
+
+![Selaimen ikkuna osoitteessa localhost:5000/api/accounts, jossa näkyy JSON-merkkijono käyttäjätiedoilla](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.fi.png)
+
+Jos kaikki toimii oikein, palvelin vastaa pyyntöösi [JSON](https://www.json.org/json-en.html)-vastauksella, joka sisältää luodun tilin tiedot.
+
+✅ Yritä rekisteröityä uudelleen samalla nimellä. Mitä tapahtuu?
+
+## Tietojen lähettäminen ilman sivun uudelleenlatausta
+
+Kuten olet ehkä huomannut, edellisessä lähestymistavassa on pieni ongelma: kun lomake lähetetään, poistumme sovelluksestamme ja selain ohjautuu palvelimen URL-osoitteeseen. Yritämme välttää kaikki sivun uudelleenlataukset verkkosovelluksessamme, koska teemme [yksisivuisen sovelluksen (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+Jotta voimme lähettää lomaketiedot palvelimelle ilman sivun uudelleenlatausta, meidän on käytettävä JavaScript-koodia. Sen sijaan, että asettaisimme URL-osoitteen `<form>`-elementin `action`-ominaisuuteen, voimme käyttää mitä tahansa JavaScript-koodia, joka alkaa `javascript:`-merkkijonolla suorittaaksemme mukautetun toiminnon. Tämä tarkoittaa myös sitä, että meidän on toteutettava joitakin tehtäviä, jotka selain hoiti aiemmin automaattisesti:
+
+- Lomaketietojen hakeminen.
+- Lomaketietojen muuntaminen ja koodaaminen sopivaan muotoon.
+- HTTP-pyynnön luominen ja lähettäminen palvelimelle.
+
+### Tehtävä
+
+Korvaa rekisteröintilomakkeen `action` seuraavalla:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Avaa `app.js` ja lisää uusi funktio nimeltä `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Tässä haemme lomake-elementin `getElementById()`-metodilla ja käytämme [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData)-apuvälinettä lomakeohjaimien arvojen hakemiseen avain/arvo-pareina. Sitten muunnamme tiedot tavalliseksi objektiksi [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)-metodilla ja lopuksi sarjoitamme tiedot [JSON](https://www.json.org/json-en.html)-muotoon, joka on yleisesti käytetty tiedonvaihtomuoto verkossa.
+
+Tiedot ovat nyt valmiita lähetettäväksi palvelimelle. Luo uusi funktio nimeltä `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' };
+  }
+}
+```
+
+Mitä tämä funktio tekee? Huomaa ensin `async`-avainsana. Tämä tarkoittaa, että funktio sisältää koodia, joka suoritetaan [**asynkronisesti**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Kun sitä käytetään yhdessä `await`-avainsanan kanssa, se mahdollistaa odottamisen asynkronisen koodin suorittamiselle - kuten tässä palvelimen vastauksen odottamiselle - ennen kuin jatketaan.
+
+Tässä käytämme `fetch()`-API:a JSON-tietojen lähettämiseen palvelimelle. Tämä metodi ottaa kaksi parametria:
+
+- Palvelimen URL-osoitteen, joten laitamme tähän `//localhost:5000/api/accounts`.
+- Pyynnön asetukset. Tässä asetamme metodiksi `POST` ja annamme pyynnön `body`-sisällön. Koska lähetämme JSON-tietoja palvelimelle, meidän on myös asetettava `Content-Type`-otsikko arvoksi `application/json`, jotta palvelin tietää, miten sisältö tulkitaan.
+
+Koska palvelin vastaa pyyntöön JSON-muodossa, voimme käyttää `await response.json()`-metodia JSON-sisällön jäsentämiseen ja tuloksena olevan objektin palauttamiseen. Huomaa, että tämä metodi on asynkroninen, joten käytämme `await`-avainsanaa varmistaaksemme, että mahdolliset virheet jäsentämisen aikana havaitaan.
+
+Lisää nyt koodia `register`-funktioon kutsumaan `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Koska käytämme `await`-avainsanaa tässä, meidän on lisättävä `async`-avainsana ennen `register`-funktiota:
+
+```js
+async function register() {
+```
+
+Lopuksi lisätään lokit tarkistamaan tulos. Lopullisen funktion tulisi näyttää tältä:
+
+```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);
+}
+```
+
+Se oli hieman pitkä, mutta pääsimme perille! Jos avaat [selaimen kehittäjätyökalut](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) ja yrität rekisteröidä uuden tilin, et näe muutosta verkkosivulla, mutta konsolissa näkyy viesti, joka vahvistaa kaiken toimivan.
+
+![Kuvakaappaus selaimen konsolissa näkyvästä lokiviestistä](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.fi.png)
+
+✅ Onko mielestäsi tiedot lähetetty palvelimelle turvallisesti? Entä jos joku pystyisi sieppaamaan pyynnön? Voit lukea lisää [HTTPS:stä](https://en.wikipedia.org/wiki/HTTPS) saadaksesi tietoa turvallisesta tiedonsiirrosta.
+
+## Tietojen validointi
+
+Jos yrität rekisteröidä uuden tilin ilman, että asetat käyttäjänimeä ensin, näet, että palvelin palauttaa virheen tilakoodilla [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Ennen tietojen lähettämistä palvelimelle on hyvä käytäntö [validoida lomaketiedot](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) etukäteen, kun se on mahdollista, varmistaaksesi, että lähetät kelvollisen pyynnön. HTML5-lomakeohjaimet tarjoavat sisäänrakennetun validoinnin eri attribuuttien avulla:
+
+- `required`: kenttä on täytettävä, muuten lomaketta ei voi lähettää.
+- `minlength` ja `maxlength`: määrittävät tekstikenttien vähimmäis- ja enimmäismerkkimäärän.
+- `min` ja `max`: määrittävät numeerisen kentän vähimmäis- ja enimmäisarvon.
+- `type`: määrittää odotetun tietotyypin, kuten `number`, `email`, `file` tai [muut sisäänrakennetut tyypit](https://developer.mozilla.org/docs/Web/HTML/Element/input). Tämä attribuutti voi myös muuttaa lomakeohjaimen visuaalista ulkoasua.
+- `pattern`: mahdollistaa [säännöllisen lausekkeen](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) määrittämisen, jolla testataan, onko syötetty tieto kelvollinen vai ei.
+> Vinkki: Voit mukauttaa lomakekontrolliesi ulkoasua sen mukaan, ovatko ne kelvollisia vai eivät, käyttämällä CSS-pseudoluokkia `:valid` ja `:invalid`.
+### Tehtävä
+
+Uuden tilin luomiseen vaaditaan kaksi pakollista kenttää: käyttäjänimi ja valuutta. Muut kentät ovat vapaaehtoisia. Päivitä lomakkeen HTML niin, että käytät sekä `required`-attribuuttia että tekstiä kentän nimikkeessä:
+
+```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>
+```
+
+Vaikka tämä palvelinimplementaatio ei aseta erityisiä rajoituksia kenttien maksimipituudelle, on aina hyvä käytäntö määritellä kohtuulliset rajat käyttäjän syöttämälle tekstille.
+
+Lisää `maxlength`-attribuutti tekstikenttiin:
+
+```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">
+```
+
+Kun nyt painat *Rekisteröidy*-painiketta ja jokin kenttä ei täytä määriteltyjä validointisääntöjä, näet jotain tällaista:
+
+![Kuvakaappaus, jossa näkyy validointivirhe lomakkeen lähetysyrityksen yhteydessä](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.fi.png)
+
+Tällaista validointia, joka suoritetaan *ennen* datan lähettämistä palvelimelle, kutsutaan **asiakaspuolen** validoinniksi. On kuitenkin hyvä huomata, että kaikkia tarkistuksia ei voida tehdä ilman datan lähettämistä. Esimerkiksi emme voi tarkistaa tässä, onko käyttäjänimellä jo olemassa tili, ilman että lähetämme pyynnön palvelimelle. Lisävalidointi, joka suoritetaan palvelimella, tunnetaan nimellä **palvelinpuolen** validointi.
+
+Yleensä molemmat validointitavat on syytä toteuttaa. Asiakaspuolen validointi parantaa käyttäjäkokemusta tarjoamalla välitöntä palautetta, mutta palvelinpuolen validointi on välttämätöntä, jotta käsittelemäsi käyttäjätiedot ovat luotettavia ja turvallisia.
+
+---
+
+## 🚀 Haaste
+
+Näytä virheilmoitus HTML:ssä, jos käyttäjä on jo olemassa.
+
+Tässä on esimerkki siitä, miltä lopullinen kirjautumissivu voi näyttää pienen tyylittelyn jälkeen:
+
+![Kuvakaappaus kirjautumissivusta CSS-tyylien lisäämisen jälkeen](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.fi.png)
+
+## Luentojälkeinen Kysely
+
+[Luentojälkeinen kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Kertaus & Itseopiskelu
+
+Kehittäjät ovat olleet erittäin luovia lomakkeiden rakentamisessa, erityisesti validointistrategioiden osalta. Tutustu erilaisiin lomakevirtoihin selaamalla [CodePen](https://codepen.com); löydätkö mielenkiintoisia ja inspiroivia lomakkeita?
+
+## Tehtävä
+
+[Tyylittele pankkisovelluksesi](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/7-bank-project/2-forms/assignment.md b/translations/fi/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..1db78746
--- /dev/null
+++ b/translations/fi/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-27T20:57:56+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Muotoile pankkisovelluksesi
+
+## Ohjeet
+
+Luo uusi `styles.css`-tiedosto ja lisää linkki siihen nykyiseen `index.html`-tiedostoosi. Lisää juuri luomaasi CSS-tiedostoon tyylit, jotka tekevät *Kirjautumis*- ja *Hallintapaneeli*-sivuista siistejä ja selkeitä. Yritä luoda värimaailma, joka antaa sovelluksellesi oman brändäyksen.
+
+> Vinkki: voit muokata HTML-tiedostoa ja lisätä uusia elementtejä ja luokkia tarpeen mukaan.
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                                                                                             | Riittävä                                                                       | Parannettavaa                                                                                 |
+| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+|          | Kaikki sivut näyttävät siisteiltä ja luettavilta, värimaailma on yhtenäinen ja eri osiot erottuvat selkeästi.           | Sivut on tyylitelty, mutta ilman teemaa tai osiot eivät erotu selkeästi.       | Sivuilla ei ole tyylittelyä, osiot näyttävät sekavilta ja tiedot ovat vaikeasti luettavissa.   |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/7-bank-project/3-data/README.md b/translations/fi/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..f1aa47bc
--- /dev/null
+++ b/translations/fi/7-bank-project/3-data/README.md
@@ -0,0 +1,347 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-27T20:58:15+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna pankkisovellus Osa 3: Datan hakeminen ja käyttäminen
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Johdanto
+
+Jokaisen verkkosovelluksen ytimessä on *data*. Data voi esiintyä monessa muodossa, mutta sen pääasiallinen tarkoitus on aina näyttää tietoa käyttäjälle. Verkkosovellusten tullessa yhä vuorovaikutteisemmiksi ja monimutkaisemmiksi, siitä, miten käyttäjä pääsee käsiksi tietoon ja käyttää sitä, on tullut keskeinen osa verkkokehitystä.
+
+Tässä oppitunnissa opimme, miten dataa haetaan palvelimelta asynkronisesti ja miten sitä käytetään tietojen näyttämiseen verkkosivulla ilman HTML:n uudelleenlatausta.
+
+### Esitiedot
+
+Sinun tulee olla rakentanut [kirjautumis- ja rekisteröintilomake](../2-forms/README.md) osana verkkosovellusta ennen tämän oppitunnin aloittamista. Sinun tulee myös asentaa [Node.js](https://nodejs.org) ja [ajaa palvelin-API](../api/README.md) paikallisesti, jotta saat tilitiedot.
+
+Voit testata, että palvelin toimii oikein suorittamalla tämän komennon terminaalissa:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX ja datan hakeminen
+
+Perinteiset verkkosivustot päivittävät näytettävän sisällön, kun käyttäjä valitsee linkin tai lähettää tietoja lomakkeella, lataamalla koko HTML-sivun uudelleen. Joka kerta, kun uutta dataa täytyy ladata, verkkopalvelin palauttaa täysin uuden HTML-sivun, joka selaimen täytyy käsitellä. Tämä keskeyttää käyttäjän nykyisen toiminnan ja rajoittaa vuorovaikutusta latauksen aikana. Tätä työnkulkua kutsutaan myös nimellä *Multi-Page Application* eli *MPA*.
+
+![Päivitysprosessi monisivuisessa sovelluksessa](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.fi.png)
+
+Kun verkkosovellukset alkoivat muuttua monimutkaisemmiksi ja vuorovaikutteisemmiksi, syntyi uusi tekniikka nimeltä [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)). Tämä tekniikka mahdollistaa datan lähettämisen ja hakemisen palvelimelta asynkronisesti JavaScriptin avulla ilman HTML-sivun uudelleenlatausta, mikä johtaa nopeampiin päivityksiin ja sujuvampaan käyttäjäkokemukseen. Kun palvelimelta saadaan uutta dataa, nykyistä HTML-sivua voidaan päivittää JavaScriptin avulla käyttämällä [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)-rajapintaa. Ajan myötä tämä lähestymistapa on kehittynyt siihen, mitä nykyään kutsutaan [*Single-Page Application* eli *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Päivitysprosessi yksisivuisessa sovelluksessa](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.fi.png)
+
+Kun AJAX esiteltiin ensimmäisen kerran, ainoa käytettävissä oleva API datan asynkroniseen hakemiseen oli [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Nykyään modernit selaimet tukevat myös kätevämpää ja tehokkaampaa [`Fetch` APIa](https://developer.mozilla.org/docs/Web/API/Fetch_API), joka käyttää promiseja ja soveltuu paremmin JSON-datan käsittelyyn.
+
+> Vaikka kaikki modernit selaimet tukevat `Fetch APIa`, jos haluat verkkosovelluksesi toimivan vanhoissa selaimissa, on aina hyvä idea tarkistaa [yhteensopivuustaulukko caniuse.com-sivustolta](https://caniuse.com/fetch).
+
+### Tehtävä
+
+[Edellisessä oppitunnissa](../2-forms/README.md) toteutimme rekisteröintilomakkeen tilin luomista varten. Nyt lisäämme koodia kirjautumiseen olemassa olevaa tiliä käyttäen ja datan hakemiseen. Avaa `app.js`-tiedosto ja lisää uusi `login`-funktio:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Aloitamme hakemalla lomake-elementin `getElementById()`-metodilla ja saamme käyttäjänimen syötteestä `loginForm.user.value`. Jokainen lomakekenttä voidaan hakea sen nimen (asetettu HTML:ssä `name`-attribuutilla) avulla lomakkeen ominaisuutena.
+
+Samalla tavalla kuin rekisteröinnissä, luomme toisen funktion palvelinpyyntöä varten, mutta tällä kertaa tilitietojen hakemiseen:
+
+```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' };
+  }
+}
+```
+
+Käytämme `fetch` APIa datan asynkroniseen hakemiseen palvelimelta, mutta tällä kertaa emme tarvitse muita parametreja kuin kutsuttavan URL-osoitteen, koska haemme vain dataa. Oletuksena `fetch` luo [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET)-HTTP-pyynnön, mikä on juuri se, mitä tarvitsemme tässä.
+
+✅ `encodeURIComponent()` on funktio, joka koodaa erikoismerkit URL-osoitteeseen. Mitä ongelmia voisi ilmetä, jos emme kutsuisi tätä funktiota ja käyttäisimme suoraan `user`-arvoa URL-osoitteessa?
+
+Päivitetään nyt `login`-funktiomme käyttämään `getAccount`-funktiota:
+
+```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');
+}
+```
+
+Koska `getAccount` on asynkroninen funktio, meidän täytyy käyttää `await`-avainsanaa odottaaksemme palvelimen vastausta. Kuten kaikissa palvelinpyynnöissä, meidän täytyy myös käsitellä virhetilanteet. Toistaiseksi lisäämme vain lokiviestin virheen näyttämiseksi ja palaamme tähän myöhemmin.
+
+Seuraavaksi meidän täytyy tallentaa data johonkin, jotta voimme käyttää sitä myöhemmin kojelaudan tietojen näyttämiseen. Koska `account`-muuttujaa ei vielä ole, luomme globaalin muuttujan tiedoston alkuun:
+
+```js
+let account = null;
+```
+
+Kun käyttäjätiedot on tallennettu muuttujaan, voimme siirtyä *kirjautumissivulta* *kojelaudalle* käyttämällä `navigate()`-funktiota, joka meillä jo on.
+
+Lopuksi meidän täytyy kutsua `login`-funktiota, kun kirjautumislomake lähetetään, muokkaamalla HTML:ää:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Testaa, että kaikki toimii oikein rekisteröimällä uusi tili ja yrittämällä kirjautua sisään samalla tilillä.
+
+Ennen kuin siirrymme seuraavaan osaan, voimme myös täydentää `register`-funktiota lisäämällä tämän funktion loppuun:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Tiesitkö, että oletuksena voit kutsua palvelin-APIa vain *samasta domainista ja portista*, josta katsot verkkosivua? Tämä on selainten pakottama tietoturvamekanismi. Mutta hetkinen, verkkosovelluksemme pyörii `localhost:3000`-osoitteessa, kun taas palvelin-API pyörii `localhost:5000`-osoitteessa. Miksi se toimii? Käyttämällä tekniikkaa nimeltä [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) on mahdollista suorittaa cross-origin HTTP-pyyntöjä, jos palvelin lisää erityisiä otsikoita vastaukseen, sallien poikkeuksia tietyille domaineille.
+
+> Opi lisää APIsta tämän [oppitunnin](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) avulla.
+
+## Päivitä HTML näyttämään dataa
+
+Nyt kun meillä on käyttäjätiedot, meidän täytyy päivittää olemassa oleva HTML näyttämään ne. Tiedämme jo, miten elementti haetaan DOMista esimerkiksi `document.getElementById()`-metodilla. Kun sinulla on peruselementti, tässä on joitakin rajapintoja, joita voit käyttää sen muokkaamiseen tai lapsielementtien lisäämiseen:
+
+- [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent)-ominaisuutta käyttämällä voit muuttaa elementin tekstiä. Huomaa, että tämän arvon muuttaminen poistaa kaikki elementin lapset (jos niitä on) ja korvaa ne annetulla tekstillä. Näin ollen se on myös tehokas tapa poistaa kaikki annetun elementin lapset asettamalla arvoksi tyhjä merkkijono `''`.
+
+- [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement)-metodia yhdessä [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append)-metodin kanssa käyttämällä voit luoda ja liittää yhden tai useamman uuden lapsielementin.
+
+✅ [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML)-ominaisuutta käyttämällä on myös mahdollista muuttaa elementin HTML-sisältöä, mutta tätä tulisi välttää, koska se on altis [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting)-hyökkäyksille.
+
+### Tehtävä
+
+Ennen kuin siirrymme kojelautanäkymään, meidän täytyy tehdä vielä yksi asia kirjautumissivulla. Tällä hetkellä, jos yrität kirjautua käyttäjänimellä, jota ei ole olemassa, viesti näytetään konsolissa, mutta tavalliselle käyttäjälle ei tapahdu mitään, eikä hän tiedä, mitä tapahtuu.
+
+Lisätään paikkamerkki-elementti kirjautumislomakkeeseen, jossa voimme näyttää virheilmoituksen tarvittaessa. Hyvä paikka olisi juuri ennen kirjautumis-`<button>`-elementtiä:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Tämä `<div>`-elementti on tyhjä, mikä tarkoittaa, että mitään ei näytetä näytöllä, ennen kuin lisäämme siihen sisältöä. Annamme sille myös `id`-tunnisteen, jotta voimme hakea sen helposti JavaScriptillä.
+
+Palaa `app.js`-tiedostoon ja luo uusi apufunktio `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Tämä on melko suoraviivainen: annettuaan elementin *id*:n ja *tekstin*, se päivittää vastaavan DOM-elementin tekstisisällön. Käytetään tätä metodia aiemman virheilmoituksen tilalla `login`-funktiossa:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Nyt, jos yrität kirjautua virheellisellä tilillä, sinun pitäisi nähdä jotain tällaista:
+
+![Näyttökuva, jossa virheilmoitus näkyy kirjautumisen aikana](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.fi.png)
+
+Nyt meillä on visuaalisesti näkyvä virheteksti, mutta jos kokeilet sitä ruudunlukijalla, huomaat, että mitään ei ilmoiteta. Jotta dynaamisesti lisätty teksti sivulle ilmoitettaisiin ruudunlukijoilla, sen täytyy käyttää jotain, jota kutsutaan [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)-alueeksi. Tässä käytämme erityistä live-aluetta nimeltä alert:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Toteuta sama toiminnallisuus myös `register`-funktion virheille (älä unohda päivittää HTML:ää).
+
+## Näytä tietoja kojelaudalla
+
+Käyttämällä samoja tekniikoita, joita olemme juuri nähneet, huolehdimme myös tilitietojen näyttämisestä kojelautasivulla.
+
+Tältä palvelimelta saatu tilitieto-objekti näyttää:
+
+```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 }
+  ],
+}
+```
+
+> Huom: elämän helpottamiseksi voit käyttää valmiiksi luotua `test`-tiliä, joka on jo täytetty tiedoilla.
+
+### Tehtävä
+
+Aloitetaan korvaamalla "Saldo"-osio HTML:ssä lisäämällä paikkamerkki-elementit:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+Lisätään myös uusi osio heti tämän alapuolelle tilin kuvauksen näyttämistä varten:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Koska tilin kuvaus toimii otsikkona sen alapuolella olevalle sisällölle, se on merkitty semanttisesti otsikoksi. Opi lisää, miksi [otsikkorakenne](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) on tärkeä saavutettavuuden kannalta, ja tarkastele kriittisesti sivua päättääksesi, mitä muuta voisi olla otsikko.
+
+Seuraavaksi luomme uuden funktion `app.js`-tiedostoon paikkamerkkien täyttämiseksi:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Ensin tarkistamme, että meillä on tarvittavat tilitiedot ennen kuin jatkamme eteenpäin. Sitten käytämme aiemmin luomaamme `updateElement()`-funktiota HTML:n päivittämiseen.
+
+> Jotta saldon näyttö olisi siistimpi, käytämme metodia [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) pakottaaksemme arvon näyttämään kaksi desimaalia.
+
+Nyt meidän täytyy kutsua `updateDashboard()`-funktiota aina, kun kojelautasivu ladataan. Jos olet jo suorittanut [oppitunnin 1 tehtävän](../1-template-route/assignment.md), tämän pitäisi olla suoraviivaista, muuten voit käyttää seuraavaa toteutusta.
+
+Lisää tämä koodi `updateRoute()`-funktion loppuun:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+Ja päivitä reittimäärittelyt seuraavasti:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+Tämän muutoksen myötä aina, kun kojelautasivu näytetään, `updateDashboard()`-funktio kutsutaan. Kirjautumisen jälkeen sinun pitäisi nähdä tilin saldo, valuutta ja kuvaus.
+
+## Luo taulukkorivejä dynaamisesti HTML-mallien avulla
+
+[Ensimmäisessä oppitunnissa](../1-template-route/README.md) käytimme HTML-malleja yhdessä [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild)-metodin kanssa toteuttaaksemme sovelluksen navigoinnin. Mallit voivat olla myös pienempiä ja niitä voidaan käyttää dynaamisesti toistuvien osien täyttämiseen sivulla.
+
+Käytämme samanlaista lähestymistapaa näyttääksemme tapahtumaluettelon HTML-taulukossa.
+
+### Tehtävä
+
+Lisää uusi malli HTML-`<body>`-osioon:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Tämä malli edustaa yksittäistä taulukkoriviä, jossa on kolme saraketta: tapahtuman *päivämäärä*, *kohde* ja *summa*.
+
+Lisää sitten tämä `id`-ominaisuus taulukon `<tbody>`-elementtiin kojelautamallin sisällä, jotta se on helpompi löytää JavaScriptillä:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+HTML on valmis, siirrytään JavaScript-koodiin ja luodaan uusi funktio `createTransactionRow`:
+
+```js
+function createTransactionRow(transaction) {
+  const template = document.getElementById('transaction');
+  const transactionRow = template.content.cloneNode(true);
+  const tr = transactionRow.querySelector('tr');
+  tr.children[0].textContent = transaction.date;
+  tr.children[1].textContent = transaction.object;
+  tr.children[2].textContent = transaction.amount.toFixed(2);
+  return transactionRow;
+}
+```
+
+Tämä funktio tekee juuri sen, mitä sen nimi viittaa: käyttämällä aiemmin luomaamme mallia se luo uuden taulukkorivin ja täyttää sen sisällön tapahtumatiedoilla. Käytämme tätä `updateDashboard()`-funktiossamme taulukon täyttämiseen:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Tässä käytämme metodia [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), joka luo uuden DOM-fragmentin, johon voimme tehdä muutoksia ennen sen liittämistä HTML-taulukkoon.
+
+On vielä yksi asia, joka meidän täytyy tehdä ennen kuin tämä koodi toimii, sillä `updateElement()`-funktiomme tukee tällä hetkellä vain tekstisisältöä. Muutetaan sen koodia hieman:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+```
+
+Käytämme [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append)-metodia, koska sen avulla voimme liittää joko tekstiä tai [DOM Nodeja](https://developer.mozilla.org/docs/Web/API/Node) vanhempaan elementtiin, mikä sopii täydellisesti kaikkiin käyttötapauksiimme.
+Jos yrität kirjautua sisään käyttämällä `test`-tiliä, sinun pitäisi nyt nähdä tapahtumaluettelo hallintapaneelissa 🎉.
+
+---
+
+## 🚀 Haaste
+
+Työskennelkää yhdessä saadaksenne hallintapaneelisivun näyttämään oikealta pankkisovellukselta. Jos olet jo muotoillut sovelluksesi, yritä käyttää [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) -ominaisuutta luodaksesi [responsiivisen suunnittelun](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), joka toimii hyvin sekä työpöytä- että mobiililaitteilla.
+
+Tässä esimerkki muotoillusta hallintapaneelisivusta:
+
+![Esimerkkikuva hallintapaneelin ulkoasusta muotoilun jälkeen](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.fi.png)
+
+## Luentojälkeinen visailu
+
+[Luentojälkeinen visailu](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Tehtävä
+
+[Refaktoroi ja kommentoi koodisi](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/7-bank-project/3-data/assignment.md b/translations/fi/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..eecd60ac
--- /dev/null
+++ b/translations/fi/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-27T21:00:44+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Refaktoroi ja kommentoi koodisi
+
+## Ohjeet
+
+Kun koodipohjasi kasvaa, on tärkeää refaktoroida koodia säännöllisesti, jotta se pysyy luettavana ja ylläpidettävänä ajan mittaan. Lisää kommentteja ja refaktoroi `app.js`-tiedostosi parantaaksesi koodin laatua:
+
+- Erota vakioarvot, kuten palvelimen API:n perus-URL
+- Yhdistä samankaltaista koodia: esimerkiksi voit luoda `sendRequest()`-funktion, joka kokoaa yhteen sekä `createAccount()`- että `getAccount()`-funktioissa käytetyn koodin
+- Järjestä koodi uudelleen, jotta se on helpompi lukea, ja lisää kommentteja
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                                                                                                                                   | Riittävä                                                                                         | Parantamisen varaa                                                                     |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
+|          | Koodi on kommentoitu, jaettu selkeisiin osioihin ja helppolukuinen. Vakioarvot on erotettu ja yhdistetty `sendRequest()`-funktio on luotu.                     | Koodi on siistiä, mutta sitä voisi vielä parantaa lisäämällä kommentteja, erottamalla vakioarvoja tai yhdistämällä koodia.          | Koodi on sekavaa, kommentoimatonta, vakioarvoja ei ole erotettu eikä koodia ole yhdistetty. |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinkäsityksistä tai virhetulkinnoista.
\ No newline at end of file
diff --git a/translations/fi/7-bank-project/4-state-management/README.md b/translations/fi/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..e632170a
--- /dev/null
+++ b/translations/fi/7-bank-project/4-state-management/README.md
@@ -0,0 +1,294 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-27T21:04:05+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "fi"
+}
+-->
+# Rakenna pankkisovellus Osa 4: Tilanhallinnan periaatteet
+
+## Ennakkokysely
+
+[Ennakkokysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Johdanto
+
+Kun verkkosovellus kasvaa, datavirtojen hallinta muuttuu haastavaksi. Mikä koodi hakee tiedot, mikä sivu käyttää niitä, missä ja milloin niitä pitää päivittää... on helppo päätyä sekavaan koodiin, jota on vaikea ylläpitää. Tämä on erityisen totta, kun sinun täytyy jakaa tietoja sovelluksen eri sivujen välillä, esimerkiksi käyttäjätietoja. *Tilanhallinnan* käsite on aina ollut olemassa kaikenlaisissa ohjelmissa, mutta verkkosovellusten monimutkaisuuden kasvaessa siitä on tullut keskeinen kehityksen osa-alue.
+
+Tässä viimeisessä osassa tarkastelemme rakentamaamme sovellusta uudelleen ja mietimme, miten tila hallitaan, jotta voimme tukea selaimen päivityksiä milloin tahansa ja säilyttää tiedot käyttäjäistuntojen välillä.
+
+### Esitiedot
+
+Sinun tulee olla suorittanut verkkosovelluksen [datan haku](../3-data/README.md) -osio ennen tämän oppitunnin aloittamista. Sinun tulee myös asentaa [Node.js](https://nodejs.org) ja [ajaa palvelin-API](../api/README.md) paikallisesti, jotta voit hallita tilitietoja.
+
+Voit testata, että palvelin toimii oikein suorittamalla tämän komennon terminaalissa:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Mietitään tilanhallintaa uudelleen
+
+[Edellisessä oppitunnissa](../3-data/README.md) esittelimme sovelluksessamme tilan peruskäsitteen globaalin `account`-muuttujan avulla, joka sisältää kirjautuneen käyttäjän pankkitiedot. Nykyisessä toteutuksessamme on kuitenkin joitakin puutteita. Kokeile päivittää sivu, kun olet hallintapaneelissa. Mitä tapahtuu?
+
+Nykyisessä koodissa on kolme ongelmaa:
+
+- Tila ei säily, sillä selaimen päivitys vie sinut takaisin kirjautumissivulle.
+- Useat funktiot muuttavat tilaa. Sovelluksen kasvaessa tämä voi tehdä muutosten seuraamisesta vaikeaa, ja on helppo unohtaa päivittää jokin osa.
+- Tila ei tyhjene, joten kun napsautat *Kirjaudu ulos*, tilitiedot ovat yhä olemassa, vaikka olet kirjautumissivulla.
+
+Voisimme päivittää koodiamme ratkaistaksemme nämä ongelmat yksi kerrallaan, mutta se lisäisi koodin toistoa ja tekisi sovelluksesta monimutkaisemman ja vaikeamman ylläpitää. Tai voisimme pysähtyä hetkeksi ja miettiä strategiaamme uudelleen.
+
+> Mitä ongelmia yritämme oikeastaan ratkaista?
+
+[Tilanhallinta](https://en.wikipedia.org/wiki/State_management) tarkoittaa hyvän lähestymistavan löytämistä näiden kahden erityisen ongelman ratkaisemiseksi:
+
+- Miten pitää sovelluksen datavirrat ymmärrettävinä?
+- Miten varmistaa, että tila ja käyttöliittymä ovat aina synkronissa (ja päinvastoin)?
+
+Kun nämä asiat on hoidettu, muut mahdolliset ongelmat saattavat joko ratketa itsestään tai niiden ratkaiseminen helpottuu. Näiden ongelmien ratkaisemiseksi on monia mahdollisia lähestymistapoja, mutta valitsemme yleisen ratkaisun, joka koostuu **datan ja sen muuttamistapojen keskittämisestä**. Datavirrat kulkisivat seuraavasti:
+
+![Kaavio, joka näyttää datavirrat HTML:n, käyttäjän toimien ja tilan välillä](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.fi.png)
+
+> Emme käsittele tässä osassa sitä, miten data automaattisesti päivittää näkymän, sillä se liittyy edistyneempiin [Reaktiivisen ohjelmoinnin](https://en.wikipedia.org/wiki/Reactive_programming) käsitteisiin. Tämä on hyvä jatkoaihe, jos haluat syventyä aiheeseen.
+
+✅ Markkinoilla on paljon kirjastoja, joilla on erilaisia lähestymistapoja tilanhallintaan, joista [Redux](https://redux.js.org) on suosittu vaihtoehto. Tutustu sen käsitteisiin ja malleihin, sillä ne tarjoavat usein hyvän tavan oppia, millaisia ongelmia saatat kohdata suurissa verkkosovelluksissa ja miten ne voidaan ratkaista.
+
+### Tehtävä
+
+Aloitamme pienellä refaktoroinnilla. Korvaa `account`-määrittely:
+
+```js
+let account = null;
+```
+
+Seuraavalla:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Ajatuksena on *keskittää* kaikki sovelluksen data yhteen tilan objektiin. Tällä hetkellä meillä on tilassa vain `account`, joten muutos ei ole suuri, mutta se luo pohjan tuleville kehityksille.
+
+Meidän täytyy myös päivittää sitä käyttävät funktiot. `register()`- ja `login()`-funktioissa korvaa `account = ...` seuraavalla: `state.account = ...`;
+
+Lisää `updateDashboard()`-funktion alkuun tämä rivi:
+
+```js
+const account = state.account;
+```
+
+Tämä refaktorointi ei itsessään tuonut suuria parannuksia, mutta sen tarkoituksena oli luoda perusta seuraaville muutoksille.
+
+## Seuraa datamuutoksia
+
+Nyt kun olemme ottaneet käyttöön `state`-objektin datan tallentamiseen, seuraava askel on keskittää päivitykset. Tavoitteena on helpottaa muutosten ja niiden ajankohdan seuraamista.
+
+Jotta `state`-objektiin ei tehtäisi suoria muutoksia, on myös hyvä käytäntö pitää se [*muuttumattomana*](https://en.wikipedia.org/wiki/Immutable_object), mikä tarkoittaa, että sitä ei voi muokata lainkaan. Tämä tarkoittaa myös, että sinun täytyy luoda uusi tilaobjekti, jos haluat muuttaa jotain siinä. Näin suojaudut mahdollisilta ei-toivotuilta [sivuvaikutuksilta](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) ja avaat mahdollisuuksia uusille ominaisuuksille, kuten kumoa/tee uudelleen -toiminnon toteuttamiselle, samalla kun virheiden jäljittäminen helpottuu. Esimerkiksi voit kirjata kaikki tilaan tehdyt muutokset ja pitää niistä historian ymmärtääksesi virheen lähteen.
+
+JavaScriptissä voit käyttää [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) luodaksesi muuttumattoman version objektista. Jos yrität tehdä muutoksia muuttumattomaan objektiin, syntyy poikkeus.
+
+✅ Tiedätkö eron *pintapuolisen* ja *syvän* muuttumattoman objektin välillä? Voit lukea siitä [täältä](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
+
+### Tehtävä
+
+Luodaan uusi `updateState()`-funktio:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+Tässä funktiossa luomme uuden tilaobjektin ja kopioimme tiedot edellisestä tilasta käyttämällä [*spread (`...`) -operaattoria*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Sitten ylikirjoitamme tietyn ominaisuuden tilaobjektista uudella datalla käyttämällä [hakasuljenotaatioita](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` määrittelyyn. Lopuksi lukitsemme objektin estääksemme muutokset käyttämällä `Object.freeze()`. Tällä hetkellä tilassa on vain `account`-ominaisuus, mutta tällä lähestymistavalla voit lisätä niin monta ominaisuutta kuin tarvitset.
+
+Päivitetään myös `state`-alustus varmistamaan, että alkuperäinen tila on myös jäädytetty:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Tämän jälkeen päivitä `register`-funktio korvaamalla `state.account = result;` seuraavalla:
+
+```js
+updateState('account', result);
+```
+
+Tee sama `login`-funktiolle korvaamalla `state.account = data;` seuraavalla:
+
+```js
+updateState('account', data);
+```
+
+Korjataan samalla ongelma, jossa tilitietoja ei tyhjennetä, kun käyttäjä napsauttaa *Kirjaudu ulos*.
+
+Luo uusi funktio `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+`updateDashboard()`-funktiossa korvaa uudelleenohjaus `return navigate('/login');` seuraavalla: `return logout();`
+
+Kokeile rekisteröidä uusi tili, kirjautua ulos ja takaisin sisään varmistaaksesi, että kaikki toimii oikein.
+
+> Vinkki: voit tarkastella kaikkia tilamuutoksia lisäämällä `console.log(state)` `updateState()`-funktion loppuun ja avaamalla selaimen kehitystyökalujen konsolin.
+
+## Tilan säilyttäminen
+
+Useimmat verkkosovellukset tarvitsevat datan säilyttämistä toimiakseen oikein. Kaikki kriittiset tiedot tallennetaan yleensä tietokantaan ja haetaan palvelin-API:n kautta, kuten käyttäjätilitiedot meidän tapauksessamme. Mutta joskus on myös hyödyllistä säilyttää joitakin tietoja selaimessa toimivassa asiakassovelluksessa paremman käyttökokemuksen tai latausnopeuden parantamiseksi.
+
+Kun haluat säilyttää tietoja selaimessa, on muutama tärkeä kysymys, jotka sinun tulisi kysyä itseltäsi:
+
+- *Ovatko tiedot arkaluonteisia?* Vältä arkaluonteisten tietojen, kuten käyttäjien salasanojen, tallentamista asiakaspuolelle.
+- *Kuinka kauan tarvitset näitä tietoja?* Aiotko käyttää tietoja vain nykyisen istunnon aikana vai haluatko tallentaa ne pysyvästi?
+
+Tietojen tallentamiseen verkkosovelluksessa on useita tapoja sen mukaan, mitä haluat saavuttaa. Esimerkiksi voit käyttää URL-osoitteita tallentaaksesi hakukyselyn ja tehdäksesi siitä jaettavan käyttäjien kesken. Voit myös käyttää [HTTP-evästeitä](https://developer.mozilla.org/docs/Web/HTTP/Cookies), jos tiedot täytyy jakaa palvelimen kanssa, kuten [autentikointitiedot](https://en.wikipedia.org/wiki/Authentication).
+
+Toinen vaihtoehto on käyttää jotakin selaimen monista API:sta tietojen tallentamiseen. Kaksi niistä on erityisen mielenkiintoisia:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): [Avain/Arvo-tietokanta](https://en.wikipedia.org/wiki/Key%E2%80%93value_database), joka mahdollistaa tietojen säilyttämisen tietylle verkkosivustolle eri istuntojen välillä. Tallennetut tiedot eivät koskaan vanhene.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): Tämä toimii samalla tavalla kuin `localStorage`, paitsi että siihen tallennetut tiedot poistetaan, kun istunto päättyy (kun selain suljetaan).
+
+Huomaa, että molemmat näistä API:sta sallivat vain [merkkijonojen](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) tallentamisen. Jos haluat tallentaa monimutkaisia objekteja, sinun täytyy sarjoittaa ne [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)-muotoon käyttämällä [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Jos haluat luoda verkkosovelluksen, joka ei toimi palvelimen kanssa, on myös mahdollista luoda tietokanta asiakaspuolelle käyttämällä [`IndexedDB` API:a](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Tämä on varattu edistyneisiin käyttötapauksiin tai jos sinun täytyy tallentaa merkittävä määrä tietoa, sillä sen käyttö on monimutkaisempaa.
+
+### Tehtävä
+
+Haluamme, että käyttäjät pysyvät kirjautuneina, kunnes he nimenomaisesti napsauttavat *Kirjaudu ulos* -painiketta, joten käytämme `localStoragea` tilitietojen tallentamiseen. Määritellään ensin avain, jota käytämme tietojen tallentamiseen.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Lisää sitten tämä rivi `updateState()`-funktion loppuun:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+Tämän avulla käyttäjän tilitiedot säilyvät ja pysyvät ajan tasalla, koska olemme aiemmin keskittäneet kaikki tilapäivitykset. Tässä kohtaa alamme hyötyä kaikista aiemmista refaktoroinneistamme 🙂.
+
+Koska tiedot tallennetaan, meidän täytyy myös huolehtia niiden palauttamisesta, kun sovellus ladataan. Koska alamme saada enemmän alustuskoodia, voi olla hyvä idea luoda uusi `init`-funktio, joka sisältää myös aiemman koodimme `app.js`-tiedoston lopussa:
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // Our previous initialization code
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+Tässä haemme tallennetut tiedot, ja jos niitä on, päivitämme tilan vastaavasti. On tärkeää tehdä tämä *ennen* reitin päivitystä, sillä sivun päivityksen aikana voi olla koodia, joka riippuu tilasta.
+
+Voimme myös tehdä *Hallintapaneeli*-sivusta sovelluksemme oletussivun, koska nyt säilytämme tilitiedot. Jos tietoja ei löydy, hallintapaneeli huolehtii uudelleenohjauksesta *Kirjautumissivulle*. `updateRoute()`-funktiossa korvaa oletus `return navigate('/login');` seuraavalla: `return navigate('/dashboard');`.
+
+Kirjaudu nyt sovellukseen ja kokeile päivittää sivu. Sinun pitäisi pysyä hallintapaneelissa. Tällä päivityksellä olemme ratkaisseet kaikki alkuperäiset ongelmamme...
+
+## Datan päivittäminen
+
+...Mutta saatamme myös olla luoneet uuden ongelman. Oho!
+
+Siirry hallintapaneeliin käyttäen `test`-tiliä, ja suorita sitten tämä komento terminaalissa luodaksesi uuden tapahtuman:
+
+```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
+```
+
+Kokeile päivittää hallintapaneelin sivu selaimessa nyt. Mitä tapahtuu? Näetkö uuden tapahtuman?
+
+Tila säilyy loputtomasti `localStorage`-ominaisuuden ansiosta, mutta se tarkoittaa myös, että sitä ei koskaan päivitetä, ennen kuin kirjaudut ulos sovelluksesta ja takaisin sisään!
+
+Yksi mahdollinen strategia tämän korjaamiseksi on ladata tilitiedot uudelleen aina, kun hallintapaneeli ladataan, jotta vältetään vanhentuneet tiedot.
+
+### Tehtävä
+
+Luo uusi funktio `updateAccountData`:
+
+```js
+async function updateAccountData() {
+  const account = state.account;
+  if (!account) {
+    return logout();
+  }
+
+  const data = await getAccount(account.user);
+  if (data.error) {
+    return logout();
+  }
+
+  updateState('account', data);
+}
+```
+
+Tämä metodi tarkistaa, että olet kirjautuneena sisään, ja lataa sitten tilitiedot palvelimelta uudelleen.
+
+Luo toinen funktio nimeltä `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Tämä funktio päivittää tilitiedot ja huolehtii sitten hallintapaneelin HTML:n päivittämisestä. Tätä meidän täytyy kutsua, kun hallintapaneelin reitti ladataan. Päivitä reittimäärittely seuraavalla:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+Kokeile päivittää hallintapaneeli nyt, sen pitäisi näyttää päivitetyt tilitiedot.
+
+---
+
+## 🚀 Haaste
+
+Nyt kun lataamme tilitiedot uudelleen aina, kun hallintapaneeli ladataan, luuletko, että meidän täytyy yhä säilyttää *kaikki tilitiedot*?
+
+Yrittäkää yhdessä muuttaa, mitä tallennetaan ja ladataan `localStoragesta`, niin että mukana on vain se, mikä on ehdottoman välttämätöntä sovelluksen toiminnan kannalta.
+
+## Jälkikysely
+[Luennon jälkeinen kysely](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Tehtävä
+
+[Toteuta "Lisää tapahtuma" -valintaikkuna](assignment.md)
+
+Tässä on esimerkkitulos tehtävän suorittamisen jälkeen:
+
+![Kuvakaappaus, jossa näkyy esimerkki "Lisää tapahtuma" -valintaikkunasta](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.fi.png)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinkäsityksistä tai virhetulkinnoista.
\ No newline at end of file
diff --git a/translations/fi/7-bank-project/4-state-management/assignment.md b/translations/fi/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..f1a8a5cd
--- /dev/null
+++ b/translations/fi/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-27T21:06:22+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Toteuta "Lisää tapahtuma" -dialogi
+
+## Ohjeet
+
+Pankkisovelluksestamme puuttuu vielä yksi tärkeä ominaisuus: mahdollisuus lisätä uusia tapahtumia. 
+Käyttäen kaikkea, mitä olet oppinut neljässä edellisessä oppitunnissa, toteuta "Lisää tapahtuma" -dialogi:
+
+- Lisää "Lisää tapahtuma" -painike hallintapaneelin sivulle
+- Luo joko uusi sivu HTML-mallilla tai käytä JavaScriptiä dialogin HTML:n näyttämiseen/piilottamiseen poistumatta hallintapaneelin sivulta (voit käyttää [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden)-ominaisuutta tai CSS-luokkia tähän)
+- Varmista, että käsittelet [näppäimistön ja ruudunlukijan saavutettavuuden](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) dialogille
+- Toteuta HTML-lomake syötettävien tietojen vastaanottamiseksi
+- Luo JSON-data lomakkeen tiedoista ja lähetä se API:lle
+- Päivitä hallintapaneelin sivu uusilla tiedoilla
+
+Katso [palvelimen API-määritykset](../api/README.md) nähdäksesi, mitä API:a sinun tulee kutsua ja mikä on odotettu JSON-muoto.
+
+Tässä on esimerkkitulos tehtävän suorittamisen jälkeen:
+
+![Näyttökuva, jossa näkyy esimerkki "Lisää tapahtuma" -dialogista](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.fi.png)
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen                                                                                       | Riittävä                                                                                                                | Parannettavaa                                |
+| -------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
+|          | Tapahtuman lisääminen on toteutettu täysin oppitunneilla nähtyjen parhaiden käytäntöjen mukaisesti. | Tapahtuman lisääminen on toteutettu, mutta ei oppitunneilla nähtyjen parhaiden käytäntöjen mukaisesti tai toimii vain osittain. | Tapahtuman lisääminen ei toimi lainkaan.     |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/7-bank-project/README.md b/translations/fi/7-bank-project/README.md
new file mode 100644
index 00000000..f9ac81d5
--- /dev/null
+++ b/translations/fi/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-27T20:54:43+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "fi"
+}
+-->
+# :dollar: Rakenna Pankki
+
+Tässä projektissa opit rakentamaan kuvitteellisen pankin. Näissä oppitunneissa annetaan ohjeita siitä, miten verkkosovellus suunnitellaan ja reitit määritetään, miten lomakkeita rakennetaan, tilaa hallitaan ja tietoja haetaan API:sta, josta voit hakea pankin tiedot.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.fi.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.fi.png) |
+|--------------------------------|--------------------------------|
+
+## Oppitunnit
+
+1. [HTML-mallit ja reitit verkkosovelluksessa](1-template-route/README.md)
+2. [Kirjautumis- ja rekisteröintilomakkeen rakentaminen](2-forms/README.md)
+3. [Tietojen hakemisen ja käyttämisen menetelmät](3-data/README.md)
+4. [Tilanhallinnan periaatteet](4-state-management/README.md)
+
+### Tekijät
+
+Nämä oppitunnit on kirjoitettu :hearts: [Yohan Lasorsan](https://twitter.com/sinedied) toimesta.
+
+Jos haluat oppia, miten näissä oppitunneissa käytetty [palvelin-API](/7-bank-project/api/README.md) rakennetaan, voit seurata [tätä videosarjaa](https://aka.ms/NodeBeginner) (erityisesti videot 17–21).
+
+Voit myös tutustua [tähän interaktiiviseen Learn-oppaaseen](https://aka.ms/learn/express-api).
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/7-bank-project/api/README.md b/translations/fi/7-bank-project/api/README.md
new file mode 100644
index 00000000..6d802103
--- /dev/null
+++ b/translations/fi/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-27T20:55:06+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "fi"
+}
+-->
+# Pankki API
+
+> Pankki API, rakennettu [Node.js](https://nodejs.org) + [Express](https://expressjs.com) -teknologioilla.
+
+API on jo valmiiksi rakennettu eikä ole osa tätä harjoitusta.
+
+Jos kuitenkin haluat oppia, miten rakentaa tällainen API, voit seurata tätä videosarjaa: https://aka.ms/NodeBeginner (videot 17–21 käsittelevät juuri tätä API:ta).
+
+Voit myös tutustua tähän interaktiiviseen opetusohjelmaan: https://aka.ms/learn/express-api
+
+## Palvelimen käynnistäminen
+
+Varmista, että sinulla on [Node.js](https://nodejs.org) asennettuna.
+
+1. Git kloonaa tämä repo [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. Avaa terminaali ja siirry `Web-Dev-For-Beginners/7-bank-project/api` -kansioon.
+3. Suorita `npm install` ja odota, että paketit asennetaan (voi kestää jonkin aikaa internet-yhteyden laadusta riippuen).
+4. Kun asennus on valmis, suorita `npm start` ja kaikki on valmista.
+
+Palvelimen pitäisi alkaa kuunnella porttia `5000`.
+*Tämä palvelin toimii yhdessä pääpankkisovelluksen palvelimen kanssa (kuuntelee porttia `3000`), älä sulje sitä.*
+
+> Huomio: kaikki tiedot tallennetaan muistiin eikä niitä säilytetä pysyvästi, joten kun palvelin sammutetaan, kaikki data menetetään.
+
+## API:n yksityiskohdat
+
+Reitti                                       | Kuvaus
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Hae palvelimen tiedot
+POST   /api/accounts/                        | Luo tili, esim: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Hae kaikki tiedot määritetylle tilille
+DELETE /api/accounts/:user                   | Poista määritetty tili
+POST   /api/accounts/:user/transactions      | Lisää tapahtuma, esim: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Poista määritetty tapahtuma
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/7-bank-project/solution/README.md b/translations/fi/7-bank-project/solution/README.md
new file mode 100644
index 00000000..8e51cb55
--- /dev/null
+++ b/translations/fi/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-27T21:03:43+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "fi"
+}
+-->
+# Pankkisovellus
+
+> Esimerkkiratkaisu pankkisovellusprojektille, rakennettu käyttäen pelkkää HTML5:ttä, CSS:ää ja JavaScriptiä (ei käytetty frameworkeja tai kirjastoja).
+
+## Sovelluksen käynnistäminen
+
+Varmista ensin, että [API-palvelin](../api/README.md) on käynnissä.
+
+Mikä tahansa verkkopalvelin voidaan käyttää sovelluksen ajamiseen, mutta koska sinulla pitäisi joka tapauksessa olla [Node.js](https://nodejs.org) asennettuna API:n ajamista varten, voit:
+
+1. Git kloonata tämän repositorion.
+2. Avaa terminaali, siirry tähän hakemistoon ja suorita `npx lite-server .`. Tämä käynnistää kehityskäyttöön tarkoitetun verkkopalvelimen portissa `3000`.
+3. Avaa `http://localhost:3000` selaimessa ajaaksesi sovelluksen.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinkäsityksistä tai virhetulkinnoista.
\ No newline at end of file
diff --git a/translations/fi/8-code-editor/1-using-a-code-editor/README.md b/translations/fi/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..28bf5745
--- /dev/null
+++ b/translations/fi/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,156 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-27T20:39:53+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "fi"
+}
+-->
+# Koodieditorin käyttö
+
+Tässä oppitunnissa käsitellään [VSCode.dev](https://vscode.dev)-verkkopohjaisen koodieditorin perusteita, jotta voit tehdä muutoksia koodiisi ja osallistua projektiin asentamatta mitään tietokoneellesi.
+
+## Oppimistavoitteet
+
+Tässä oppitunnissa opit:
+
+- Käyttämään koodieditoria koodiprojektissa
+- Seuraamaan muutoksia versionhallinnan avulla
+- Mukauttamaan editoria kehitystyötä varten
+
+### Esivaatimukset
+
+Ennen kuin aloitat, sinun tulee luoda tili [GitHubissa](https://github.com). Siirry [GitHubiin](https://github.com/) ja luo tili, jos sinulla ei vielä ole sellaista.
+
+### Johdanto
+
+Koodieditori on olennainen työkalu ohjelmien kirjoittamiseen ja yhteistyöhön olemassa olevien koodiprojektien parissa. Kun ymmärrät editorin perusteet ja osaat hyödyntää sen ominaisuuksia, voit soveltaa niitä koodin kirjoittamisessa.
+
+## Aloittaminen VSCode.devillä
+
+[VSCode.dev](https://vscode.dev) on verkkopohjainen koodieditori. Sen käyttö ei vaadi mitään asennuksia, aivan kuten minkä tahansa verkkosivun avaaminen. Aloittaaksesi editorin käytön, avaa seuraava linkki: [https://vscode.dev](https://vscode.dev). Jos et ole kirjautunut sisään [GitHubiin](https://github.com/), seuraa ohjeita kirjautuaksesi sisään tai luodaksesi uuden tilin ja kirjaudu sitten sisään.
+
+Kun editori latautuu, sen pitäisi näyttää suunnilleen tältä:
+
+![Oletusnäkymä VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.fi.png)
+
+Siinä on kolme pääosaa, vasemmalta oikealle:
+
+1. _Toimintopalkki_, joka sisältää joitakin kuvakkeita, kuten suurennuslasin 🔎, rattaan ⚙️ ja muutamia muita.
+2. Laajennettu toimintopalkki, joka oletuksena näyttää _Explorerin_, kutsutaan myös _sivupalkiksi_.
+3. Koodialue oikealla.
+
+Klikkaa kutakin kuvaketta nähdäksesi eri valikot. Kun olet valmis, klikkaa _Exploreria_, jotta palaat alkuun.
+
+Kun alat luoda koodia tai muokata olemassa olevaa koodia, se tapahtuu suurimmassa alueessa oikealla. Käytät tätä aluetta myös olemassa olevan koodin tarkasteluun, mitä teet seuraavaksi.
+
+## GitHub-repositorion avaaminen
+
+Ensimmäinen asia, mitä tarvitset, on GitHub-repositorion avaaminen. Repositorion avaamiseen on useita tapoja. Tässä osiossa näet kaksi erilaista tapaa avata repositorio, jotta voit aloittaa muutosten tekemisen.
+
+### 1. Editorin avulla
+
+Käytä editoria avataksesi etärepositorio. Kun siirryt [VSCode.dev](https://vscode.dev)-sivustolle, näet _"Open Remote Repository"_ -painikkeen:
+
+![Avaa etärepositorio](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.fi.png)
+
+Voit myös käyttää komentopalettia. Komentopaletti on syöttökenttä, johon voit kirjoittaa minkä tahansa komennon tai toiminnon löytääksesi oikean komennon suoritettavaksi. Käytä ylävasemman valikkoa, valitse _View_ ja sitten _Command Palette_, tai käytä seuraavaa pikanäppäintä: Ctrl-Shift-P (MacOS:lla Command-Shift-P).
+
+![Palettivalikko](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.fi.png)
+
+Kun valikko avautuu, kirjoita _open remote repository_ ja valitse ensimmäinen vaihtoehto. Näet useita repositorioita, joihin kuulut tai joita olet avannut äskettäin. Voit myös käyttää täydellistä GitHub-URL-osoitetta valitaksesi yhden. Käytä seuraavaa URL-osoitetta ja liitä se kenttään:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Jos onnistut, näet kaikki tämän repositorion tiedostot ladattuina tekstieditoriin.
+
+### 2. URL-osoitteen avulla
+
+Voit myös käyttää suoraan URL-osoitetta ladataksesi repositorion. Esimerkiksi nykyisen repositorion täydellinen URL-osoite on [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), mutta voit korvata GitHub-verkkotunnuksen `VSCode.dev/github`-osoitteella ja ladata repositorion suoraan. Tuloksena oleva URL-osoite olisi [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Tiedostojen muokkaaminen
+
+Kun olet avannut repositorion selaimessa/vscode.devissä, seuraava vaihe on tehdä päivityksiä tai muutoksia projektiin.
+
+### 1. Luo uusi tiedosto
+
+Voit luoda tiedoston joko olemassa olevan kansion sisälle tai juurihakemistoon/kansioon. Luodaksesi uuden tiedoston, avaa sijainti/hakemisto, johon haluat tiedoston tallennettavan, ja valitse _'New file ...'_ -kuvake toimintopalkista _(vasemmalla)_, anna tiedostolle nimi ja paina Enter.
+
+![Luo uusi tiedosto](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.fi.png)
+
+### 2. Muokkaa ja tallenna tiedosto repositoriossa
+
+VSCode.dev on hyödyllinen, kun haluat tehdä nopeita päivityksiä projektiisi lataamatta mitään ohjelmistoa paikallisesti. Päivittääksesi koodiasi, klikkaa 'Explorer'-kuvaketta, joka sijaitsee myös toimintopalkissa, nähdäksesi tiedostot ja kansiot repositoriossa. Valitse tiedosto avataksesi sen koodialueella, tee muutokset ja tallenna.
+
+![Muokkaa tiedostoa](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.fi.png)
+
+Kun olet valmis päivittämään projektisi, valitse _`source control`_ -kuvake, joka sisältää kaikki tekemäsi muutokset repositoriossa.
+
+Nähdäksesi tekemäsi muutokset projektiin, valitse tiedosto(t) `Changes`-kansiosta laajennetussa toimintopalkissa. Tämä avaa 'Working Tree', jossa voit visuaalisesti nähdä tekemäsi muutokset tiedostoon. Punainen osoittaa projektista poistettuja osia, kun taas vihreä merkitsee lisäyksiä.
+
+![Näytä muutokset](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.fi.png)
+
+Jos olet tyytyväinen tekemiisi muutoksiin, vie hiiri `Changes`-kansion päälle ja klikkaa `+`-painiketta lisätäksesi muutokset. Muutosten lisääminen tarkoittaa niiden valmistelua GitHubiin sitouttamista varten.
+
+Jos et kuitenkaan ole tyytyväinen joihinkin muutoksiin ja haluat hylätä ne, vie hiiri `Changes`-kansion päälle ja valitse `undo`-kuvake.
+
+Kirjoita sitten `commit message` _(Kuvaus tekemästäsi muutoksesta projektiin)_, klikkaa `check icon` sitouttaaksesi ja lähettääksesi muutokset.
+
+Kun olet valmis työskentelemään projektisi parissa, valitse vasemman yläkulman `hamburger menu icon` palataksesi repositorioon github.comissa.
+
+![Lisää & sitouta muutokset](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Laajennusten käyttö
+
+Laajennusten asentaminen VSCodeen mahdollistaa uusien ominaisuuksien lisäämisen ja mukautetut kehitysympäristöasetukset editoriisi, mikä parantaa kehitystyönkulkuasi. Nämä laajennukset auttavat myös lisäämään tukea useille ohjelmointikielille ja ovat usein joko yleisiä laajennuksia tai kielikohtaisia laajennuksia.
+
+Selaa kaikkia saatavilla olevia laajennuksia klikkaamalla _`Extensions icon`_ toimintopalkissa ja aloita kirjoittamalla laajennuksen nimi tekstikenttään, joka on merkitty _'Search Extensions in Marketplace'_.
+Näet listan laajennuksista, joista jokainen sisältää **laajennuksen nimen, julkaisijan nimen, yhden lauseen kuvauksen, latausten määrän** ja **tähtiluokituksen**.
+
+![Laajennuksen tiedot](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.fi.png)
+
+Voit myös tarkastella kaikkia aiemmin asennettuja laajennuksia laajentamalla _`Installed folder`_, suosittuja laajennuksia, joita useimmat kehittäjät käyttävät, _`Popular folder`_ ja sinulle suositeltuja laajennuksia joko saman työtilan käyttäjien tai äskettäin avattujen tiedostojen perusteella _`recommended folder`_.
+
+![Näytä laajennukset](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.fi.png)
+
+### 1. Asenna laajennuksia
+
+Asentaaksesi laajennuksen, kirjoita laajennuksen nimi hakukenttään ja klikkaa sitä nähdäksesi lisätietoja laajennuksesta koodialueella, kun se ilmestyy laajennettuun toimintopalkkiin.
+
+Voit joko klikata _sinistä asennuspainiketta_ laajennetussa toimintopalkissa tai käyttää asennuspainiketta, joka ilmestyy koodialueelle, kun valitset laajennuksen ladataksesi lisätietoja.
+
+![Asenna laajennuksia](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Mukauta laajennuksia
+
+Laajennuksen asentamisen jälkeen saatat haluta muokata sen toimintaa ja mukauttaa sitä mieltymystesi mukaan. Voit tehdä tämän valitsemalla Laajennukset-kuvakkeen, ja tällä kertaa laajennuksesi näkyy _Installed folder_-kansiossa, klikkaa _**Gear icon**_ ja siirry _Extensions Setting_.
+
+![Muokkaa laajennuksen asetuksia](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.fi.png)
+
+### 3. Hallitse laajennuksia
+
+Laajennuksen asentamisen ja käytön jälkeen vscode.dev tarjoaa vaihtoehtoja laajennuksen hallintaan eri tarpeiden mukaan. Esimerkiksi voit:
+
+- **Poistaa käytöstä:** _(Voit tilapäisesti poistaa laajennuksen käytöstä, kun et enää tarvitse sitä, mutta et halua poistaa sitä kokonaan)_
+
+    Valitse asennettu laajennus laajennetussa toimintopalkissa > klikkaa Gear-kuvaketta > valitse 'Disable' tai 'Disable (Workspace)' **TAI** Avaa laajennus koodialueella ja klikkaa sinistä Disable-painiketta.
+
+   
+- **Poista:** Valitse asennettu laajennus laajennetussa toimintopalkissa > klikkaa Gear-kuvaketta > valitse 'Uninstall' **TAI** Avaa laajennus koodialueella ja klikkaa sinistä Uninstall-painiketta.
+
+---
+
+## Tehtävä
+[Luo ansioluettelosivusto käyttämällä vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Kertaus & Itseopiskelu
+
+Lue lisää [VSCode.devistä](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) ja sen muista ominaisuuksista.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/8-code-editor/1-using-a-code-editor/assignment.md b/translations/fi/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..f4be873e
--- /dev/null
+++ b/translations/fi/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-27T20:41:14+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "fi"
+}
+-->
+# Luo ansioluettelosivusto käyttäen vscode.dev
+
+_Kuinka siistiä olisi, jos rekrytoija pyytäisi ansioluetteloasi ja voisit lähettää heille url-osoitteen?_ 😎
+
+## Tavoitteet
+
+Tämän tehtävän jälkeen opit:
+
+- Luomaan verkkosivuston ansioluettelosi esittelyä varten
+
+### Esivaatimukset
+
+1. GitHub-tili. Siirry [GitHubiin](https://github.com/) ja luo tili, jos sinulla ei vielä ole sellaista.
+
+## Vaiheet
+
+**Vaihe 1:** Luo uusi GitHub-repositorio ja anna sille nimeksi `my-resume`
+
+**Vaihe 2:** Luo `index.html`-tiedosto repositoriossasi. Lisäämme vähintään yhden tiedoston suoraan github.com-sivustolla, koska tyhjää repositoriota ei voi avata vscode.dev:ssä.
+
+Klikkaa linkkiä `creating a new file`, kirjoita nimeksi `index.html` ja valitse `Commit new file` -painike.
+
+![Luo uusi tiedosto github.com-sivustolla](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.fi.png)
+
+**Vaihe 3:** Avaa [VSCode.dev](https://vscode.dev) ja valitse `Open Remote Repository` -painike.
+
+Kopioi juuri luomasi repositorion url-osoite ja liitä se syöttökenttään:
+
+_Korvaa `your-username` GitHub-käyttäjänimelläsi._
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Jos onnistut, näet projektisi ja index.html-tiedoston avautuvan tekstieditorissa selaimessa.
+
+![Luo uusi tiedosto](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.fi.png)
+
+**Vaihe 4:** Avaa `index.html`-tiedosto, liitä alla oleva koodi koodialueelle ja tallenna.
+
+<details>
+    <summary><b>HTML-koodi, joka vastaa ansioluettelosivustosi sisällöstä.</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>Kirjoita nimesi tähän!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- ansioluettelon otsikko, jossa nimesi ja tittelisi -->
+                    <h1>Kirjoita nimesi tähän!</h1>
+                    <hr>
+                    Roolisi!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>YHTEYSTIEDOT</h2>
+                            <!-- yhteystiedot, mukaan lukien sosiaalinen media -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Kirjoita sähköpostiosoitteesi tähän</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Kirjoita käyttäjänimesi tähän!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Kirjoita käyttäjänimesi tähän!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>TAIDOT</h2>
+                            <!-- taitosi -->
+                            <ul>
+                                <li>Taito 1!</li>
+                                <li>Taito 2!</li>
+                                <li>Taito 3!</li>
+                                <li>Taito 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>KOULUTUS</h2>
+                            <!-- koulutuksesi -->
+                            <h3>Kirjoita kurssisi tähän!</h3>
+                            <p>
+                                Kirjoita oppilaitoksesi tähän!
+                            </p>
+                            <p>
+                                Aloitus- ja lopetuspäivämäärä
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>TIETOA</h2>
+                            <!-- tietoa sinusta -->
+                            <p>Kirjoita lyhyt kuvaus itsestäsi!</p>
+                        </section>
+                        <section>
+                            <h2>TYÖKOKEMUS</h2>
+                            <!-- työkokemuksesi -->
+                            <h3>Työnimike</h3>
+                            <p>
+                                Organisaation nimi | Aloituskuukausi – Lopetuskuukausi
+                            </p>
+                            <ul>
+                                    <li>Tehtävä 1 - Kirjoita mitä teit!</li>
+                                    <li>Tehtävä 2 - Kirjoita mitä teit!</li>
+                                    <li>Kirjoita panoksesi tulokset/vaikutukset</li>
+                                    
+                            </ul>
+                            <h3>Työnimike 2</h3>
+                            <p>
+                                Organisaation nimi | Aloituskuukausi – Lopetuskuukausi
+                            </p>
+                            <ul>
+                                    <li>Tehtävä 1 - Kirjoita mitä teit!</li>
+                                    <li>Tehtävä 2 - Kirjoita mitä teit!</li>
+                                    <li>Kirjoita panoksesi tulokset/vaikutukset</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Korvaa _paikkamerkkiteksti_ ansioluettelosi tiedoilla HTML-koodissa.
+
+**Vaihe 5:** Vie hiiri My-Resume-kansion päälle, klikkaa `New File ...` -ikonia ja luo projektiisi 2 uutta tiedostoa: `style.css` ja `codeswing.json`.
+
+**Vaihe 6:** Avaa `style.css`-tiedosto, liitä alla oleva koodi ja tallenna.
+
+<details>
+        <summary><b>CSS-koodi sivuston ulkoasun muotoiluun.</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>
+
+**Vaihe 6:** Avaa `codeswing.json`-tiedosto, liitä alla oleva koodi ja tallenna.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Vaihe 7:** Asenna `Codeswing-laajennus` nähdäksesi ansioluettelosivuston koodialueella.
+
+Klikkaa _`Extensions`_ -ikonia toimintopalkissa ja kirjoita Codeswing. Klikkaa joko _sinistä asennuspainiketta_ laajennetussa toimintopalkissa tai käytä asennuspainiketta, joka näkyy koodialueella, kun valitset laajennuksen lisätietojen lataamiseksi. Heti laajennuksen asentamisen jälkeen huomaat muutokset projektissasi 😃
+
+![Asenna laajennuksia](../../../../8-code-editor/images/install-extension.gif)
+
+Tältä projektisi näyttää näytölläsi laajennuksen asentamisen jälkeen.
+
+![Codeswing-laajennus toiminnassa](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.fi.png)
+
+Jos olet tyytyväinen tekemiisi muutoksiin, vie hiiri `Changes`-kansion päälle ja klikkaa `+`-painiketta lisätäksesi muutokset.
+
+Kirjoita commit-viesti _(kuvaus projektin muutoksista)_ ja commitoi muutokset klikkaamalla `check`. Kun olet valmis projektisi kanssa, valitse vasemman yläkulman hampurilaisvalikkoikoni palataksesi GitHub-repositorioon.
+
+Onnittelut 🎉 Olet juuri luonut ansioluettelosivuston käyttäen vscode.dev:ia muutamassa vaiheessa.
+
+## 🚀 Haaste
+
+Avaa etärepositorio, johon sinulla on muokkausoikeudet, ja päivitä joitakin tiedostoja. Seuraavaksi kokeile luoda uusi haara muutoksillasi ja tee Pull Request.
+
+## Tarkistus ja itseopiskelu
+
+Lue lisää [VSCode.devistä](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) ja sen muista ominaisuuksista.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/CODE_OF_CONDUCT.md b/translations/fi/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..14d45686
--- /dev/null
+++ b/translations/fi/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-27T20:03:03+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "fi"
+}
+-->
+# Microsoftin avoimen lähdekoodin toimintaohjeet
+
+Tämä projekti on ottanut käyttöön [Microsoftin avoimen lähdekoodin toimintaohjeet](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+Resurssit:
+
+- [Microsoftin avoimen lähdekoodin toimintaohjeet](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Microsoftin toimintaohjeiden usein kysytyt kysymykset](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Ota yhteyttä [opencode@microsoft.com](mailto:opencode@microsoft.com) kysymyksissä tai huolenaiheissa
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/CONTRIBUTING.md b/translations/fi/CONTRIBUTING.md
new file mode 100644
index 00000000..38a77c15
--- /dev/null
+++ b/translations/fi/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-27T20:04:19+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "fi"
+}
+-->
+# Osallistuminen
+
+Tämä projekti toivottaa tervetulleiksi osallistumiset ja ehdotukset. Useimmat osallistumiset edellyttävät, että hyväksyt Contributor License Agreementin (CLA), jossa vahvistat, että sinulla on oikeus ja todella annat meille oikeudet käyttää panostasi. Lisätietoja löydät osoitteesta [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Kun lähetät pull requestin, CLA-bot tarkistaa automaattisesti, tarvitsetko CLA:n ja merkitsee PR:n asianmukaisesti (esim. lisäämällä tunnisteen tai kommentin). Seuraa yksinkertaisesti botin antamia ohjeita. Sinun tarvitsee tehdä tämä vain kerran kaikissa CLA:ta käyttävissä repositorioissa. Yritä myös kertoa, miksi teit kyseisen muutoksen, jotta voimme paremmin ymmärtää pyyntöäsi.
+
+Tämä projekti on ottanut käyttöön [Microsoftin avoimen lähdekoodin käytännesäännöt](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).  
+Lisätietoja löydät [käytännesääntöjen usein kysytyistä kysymyksistä](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)  
+tai ota yhteyttä osoitteeseen [opencode@microsoft.com](mailto:opencode@microsoft.com), jos sinulla on lisäkysymyksiä tai kommentteja.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/README.md b/translations/fi/README.md
new file mode 100644
index 00000000..60f09f20
--- /dev/null
+++ b/translations/fi/README.md
@@ -0,0 +1,207 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b672130244189715ac084c3259f6ab58",
+  "translation_date": "2025-08-27T19:58:41+00:00",
+  "source_file": "README.md",
+  "language_code": "fi"
+}
+-->
+[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
+[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
+[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
+[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+
+[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
+[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
+
+[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)  
+
+[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)  
+
+# Web-kehitys aloittelijoille - Opintokokonaisuus  
+
+Opi web-kehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavalla kurssilla. Jokainen 24 oppitunnista käsittelee JavaScriptiä, CSS:ää ja HTML:ää käytännön projektien, kuten terraarioiden, selainlaajennusten ja avaruuspelien, kautta. Osallistu visailuihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella pedagogiikalla. Aloita koodausmatkasi jo tänään!  
+
+#### 🧑‍🎓 _Oletko opiskelija?_  
+
+Käy [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijoille suunnattuja resursseja, opiskelijapakkauksia ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä sisältöä vaihdetaan kuukausittain.  
+
+### 📣 Ilmoitus - _Uusi opintokokonaisuus_ Generatiivisesta tekoälystä JavaScriptille on juuri julkaistu  
+
+Älä missaa uutta Generatiivisen tekoälyn opintokokonaisuutta!  
+
+Käy osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) aloittaaksesi!  
+
+<div>  
+  <img src="./images/background.png" width="600px" />  
+</div>  
+
+- Oppitunnit kattavat kaiken perusteista RAG:iin.  
+- Keskustele historiallisten hahmojen kanssa GenAI:n ja kumppanisovelluksemme avulla.  
+- Hauska ja mukaansatempaava tarina, matkustat ajassa!  
+
+<div>  
+  <img src="./images/character.png" width="600px" />  
+</div>  
+
+Jokainen oppitunti sisältää tehtävän, tietotestin ja haasteen, jotka ohjaavat sinua oppimaan aiheita, kuten:  
+- Promptit ja promptien suunnittelu  
+- Teksti- ja kuvapohjaisten sovellusten luominen  
+- Hakusovellukset  
+
+Käy osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) aloittaaksesi!  
+
+## 🌱 Aloittaminen  
+
+> **Opettajat**, olemme [lisänneet joitakin ehdotuksia](for-teachers.md) siitä, miten tätä opintokokonaisuutta voi käyttää. Kuulemme mielellämme palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, aloita jokainen oppitunti ennakkovisalla ja jatka lukemalla oppituntimateriaali, suorittamalla erilaisia aktiviteetteja ja tarkistamalla ymmärryksesi jälkivisalla.  
+
+Parantaaksesi oppimiskokemustasi, yhdistä voimasi muiden kanssa ja työskentele projekteissa yhdessä! Keskustelut ovat tervetulleita [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme vastaa kysymyksiisi.  
+
+Lisäopiskelua varten suosittelemme tutustumaan [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) -sivustoon, josta löydät lisämateriaaleja.  
+
+### 📋 Ympäristön asettaminen  
+
+Tämä opintokokonaisuus sisältää valmiin kehitysympäristön! Aloittaessasi voit valita, haluatko käyttää opintokokonaisuutta [Codespacessa](https://github.com/features/codespaces/) (_selaimen kautta, ei asennuksia_) vai paikallisesti tietokoneellasi tekstieditorilla, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Luo oma repositoriosi  
+Jotta voit helposti tallentaa työsi, suosittelemme luomaan oman kopion tästä repositoriosta. Voit tehdä tämän napsauttamalla **Use this template** -painiketta sivun yläosassa. Tämä luo uuden repositorion GitHub-tilillesi opintokokonaisuuden kopion kanssa.  
+
+Seuraa näitä ohjeita:  
+1. **Haarauta repositorio**: Napsauta "Fork"-painiketta sivun oikeassa yläkulmassa.  
+2. **Kloonaa repositorio**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Opintokokonaisuuden suorittaminen Codespacessa  
+
+Kopioimassasi repositoriossa napsauta **Code**-painiketta ja valitse **Open with Codespaces**. Tämä luo uuden Codespacen, jossa voit työskennellä.  
+
+<img src="./images/createcodespace.png" alt="Luo Codespace" style="width:270px;"/>  
+
+#### Opintokokonaisuuden suorittaminen paikallisesti tietokoneellasi  
+
+Jos haluat suorittaa opintokokonaisuuden paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Johdatus ohjelmointikieliin ja työkaluihin](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehtojen läpi, jotta voit valita itsellesi parhaiten sopivat työkalut.  
+
+Suosituksemme on käyttää [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -editoria, jossa on myös sisäänrakennettu [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [täältä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Kloonaa repositoriosi tietokoneellesi. Voit tehdä tämän napsauttamalla **Code**-painiketta ja kopioimalla URL-osoitteen:  
+
+    <img src="./images/createcodespace.png" alt="Kopioi repositoriosi URL" style="width:270px;"/>  
+
+    Avaa sitten [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento, korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla **File** > **Open Folder** ja valitsemalla juuri kloonaamasi kansion.  
+
+>  Suositellut Visual Studio Code -laajennukset:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun Visual Studio Codessa  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttaa sinua kirjoittamaan koodia nopeammin  
+
+## 📂 Jokainen oppitunti sisältää:  
+
+- valinnainen luonnoskuva  
+- valinnainen lisävideo  
+- ennakkovisa  
+- kirjallinen oppitunti  
+- projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen  
+- tietotestit  
+- haaste  
+- lisälukemista  
+- tehtävä  
+- jälkivisa  
+
+> **Huomio visoista**: Kaikki visat löytyvät Quiz-app-kansiosta, yhteensä 48 visaa, joissa on kolme kysymystä kussakin. Ne on linkitetty oppitunneista, ja visasovelluksen voi suorittaa paikallisesti tai julkaista Azureen; seuraa ohjeita `quiz-app`-kansiossa. Visat lokalisoidaan vähitellen.  
+
+## 🗃️ Oppitunnit  
+
+|     |                       Projektin nimi                       |                            Opetettavat käsitteet                             | Oppimistavoitteet                                                                                                                 |                                                         Linkitetty oppitunti                                                          |         Tekijä          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Aloittaminen                      |           Johdatus ohjelmointiin ja työkaluihin           | Opi ohjelmointikielten perusperiaatteet ja ohjelmistoista, jotka auttavat ammattilaisia työssään | [Johdatus ohjelmointikieliin ja työkaluihin](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Aloittaminen                      |             GitHubin perusteet, sisältää tiimityöskentelyn             | Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa                                                    |                            [Johdatus GitHubiin](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Aloittaminen                      |                             Saavutettavuus                              | Opi web-saavutettavuuden perusteet                                                                                               |                       [Saavutettavuuden perusteet](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        JS-perusteet                         |                         JavaScriptin tietotyypit                          | JavaScriptin tietotyyppien perusteet                                                                                                 |                                       [Tietotyypit](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        JS-perusteet                         |                         Funktiot ja metodit                          | Opi funktioista ja metodeista, jotka hallitsevat sovelluksen logiikkaa                                                             |                              [Funktiot ja metodit](/2-js-basics/2-functions-methods/README.md)                               | Jasmine ja Christopher |  
+| 06  |                        JS-perusteet                         |                        Päätöksenteko JS:llä                        | Opi luomaan ehtoja koodissasi päätöksentekomenetelmien avulla                                                           |                                 [Päätöksenteko](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        JS-perusteet                         |                            Taulukot ja silmukat                            | Työskentele datan kanssa JavaScriptin taulukoiden ja silmukoiden avulla                                                                                 |                                   [Taulukot ja silmukat](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terraario](/3-terrarium/solution/README.md)       |                            HTML käytännössä                            | Rakenna HTML luodaksesi online-terraarion, keskittyen ulkoasun rakentamiseen                                                         |                                 [Johdatus HTML:ään](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terraario](/3-terrarium/solution/README.md)       |                            CSS käytännössä                             | Rakenna CSS tyylitelläksesi online-terraarion, keskittyen CSS:n perusteisiin, mukaan lukien sivun responsiivisuus                     |                                  [Johdatus CSS:ään](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terraario](/3-terrarium/solution/README.md)            |                 JavaScriptin sulkeet, DOM-manipulaatio                  | Rakenna JavaScript, joka tekee terraariosta toimivan drag/drop-käyttöliittymän, keskittyen sulkeisiin ja DOM-manipulaatioon             |                  [JavaScriptin sulkeet, DOM-manipulaatio](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
+| 11  |          [Kirjoituspeli](/4-typing-game/solution/README.md)          |                          Rakenna kirjoituspeli                           | Opi käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen                                                          |                                [Tapahtumapohjainen ohjelmointi](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
+| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Työskentely selainten kanssa                          | Opi, miten selaimet toimivat, niiden historia ja miten luoda ensimmäiset elementit selainlaajennukselle                               |                               [Tietoa selaimista](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API:n kutsuminen ja muuttujien tallentaminen paikalliseen muistiin | Rakenna selainlaajennuksesi JavaScript-elementit kutsumaan API:a käyttäen paikalliseen muistiin tallennettuja muuttujia                      |                [API:t, lomakkeet ja paikallinen muisti](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Taustaprosessit selaimessa, verkkosuorituskyky          | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimoinneista sen parantamiseksi   |             [Taustatehtävät ja suorituskyky](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Edistyneempi pelinkehitys JavaScriptillä             | Opi perinnästä sekä luokkien että koostamisen avulla ja Pub/Sub-mallista, valmistautuessasi pelin rakentamiseen              |                      [Johdatus edistyneeseen pelinkehitykseen](/6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Piirtäminen canvasille                            | Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle                                                                       |                                [Piirtäminen canvasille](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Elementtien liikuttaminen näytöllä                    | Tutustu siihen, miten elementit voivat saada liikettä koordinaatiston ja Canvas API:n avulla                                            |                           [Elementtien liikuttaminen](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Törmäysten tunnistaminen                           | Tee elementeistä törmääviä ja reagoivia toisiinsa näppäinpainallusten avulla ja tarjoa viivefunktio pelin suorituskyvyn varmistamiseksi    |                              [Törmäysten tunnistaminen](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Pisteiden laskeminen                              | Suorita matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella                                                                |                                    [Pisteiden laskeminen](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Pelin lopettaminen ja uudelleenkäynnistäminen                     | Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvojen palauttaminen                              |                                [Lopetusehto](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 HTML-mallipohjat ja reitit verkkosovelluksessa                 | Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusta reitityksen ja HTML-mallipohjien avulla                             |                            [HTML-mallipohjat ja reitit](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Kirjautumis- ja rekisteröintilomakkeen rakentaminen                   | Opi lomakkeiden rakentamisesta ja validointirutiinien käsittelystä                                                                          |                                           [Lomakkeet](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Tiedon hakemisen ja käyttämisen menetelmät                   | Miten tieto kulkee sovelluksessasi, miten sitä haetaan, tallennetaan ja hävitetään                                                 |                                            [Tiedot](/7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Tilanhallinnan käsitteet                      | Opi, miten sovelluksesi säilyttää tilan ja miten sitä hallitaan ohjelmallisesti                                                              |                                [Tilanhallinta](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+
+
+## 🏫 Pedagogiikka
+
+Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
+* projektipohjainen oppiminen
+* säännölliset tietovisat
+
+Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat työkalut ja tekniikat, joita nykypäivän web-kehittäjät käyttävät. Opiskelijat saavat mahdollisuuden kehittää käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terraarion, ympäristöystävällisen selainlaajennuksen, avaruuspelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijat ovat saavuttaneet vankan ymmärryksen web-kehityksestä.
+
+
+> 🎓 Voit ottaa tämän opetussuunnitelman ensimmäiset oppitunnit [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -muodossa Microsoft Learnissa!
+
+Varmistamalla, että sisältö liittyy projekteihin, prosessi muuttuu opiskelijoille kiinnostavammaksi ja käsitteiden muistaminen paranee. Kirjoitimme myös useita aloitusoppitunteja JavaScriptin perusteista käsitteiden esittelemiseksi, yhdistettynä videoon "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videotutoriaalikokoelmasta, joiden tekijät osallistuivat tämän opetussuunnitelman laatimiseen.
+
+Lisäksi matalan kynnyksen tietovisa ennen oppituntia suuntaa opiskelijan huomion aiheen oppimiseen, kun taas toinen tietovisa oppitunnin jälkeen varmistaa käsitteiden paremman muistamisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat pienistä ja muuttuvat yhä monimutkaisemmiksi 12 viikon jakson loppuun mennessä.
+
+Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme web-kehittäjän perustaitoihin ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman suorittamisen jälkeen olisi Node.js:n opiskelu toisen videokokoelman avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Tutustu [Code of Conduct](CODE_OF_CONDUCT.md) ja [Contributing](CONTRIBUTING.md) -ohjeisiin. Otamme mielellämme vastaan rakentavaa palautettasi!
+
+
+## 🧭 Offline-käyttö
+
+Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsify](https://docsify.js.org/#/). Haarauta tämä repo, [asenna Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja kirjoita tämän repon juurikansiossa `docsify serve`. Verkkosivusto palvelee portissa 3000 paikallisessa isännässäsi: `localhost:3000`.
+
+## 📘 PDF
+
+Kaikkien oppituntien PDF löytyy [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Muut kurssit
+
+Tiimimme tuottaa myös muita kursseja! Tutustu:
+
+- [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)
+
+## Lisenssi
+
+Tämä repo on lisensoitu MIT-lisenssillä. Katso lisätietoja [LICENSE](../../LICENSE) -tiedostosta.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/SECURITY.md b/translations/fi/SECURITY.md
new file mode 100644
index 00000000..a2b423a1
--- /dev/null
+++ b/translations/fi/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-27T20:03:36+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "fi"
+}
+-->
+## Tietoturva
+
+Microsoft suhtautuu vakavasti ohjelmistotuotteidensa ja palveluidensa tietoturvaan, mukaan lukien kaikki lähdekoodivarastot, joita hallinnoidaan GitHub-organisaatioidemme kautta, kuten [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) ja [GitHub-organisaatiomme](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Jos uskot löytäneesi tietoturvaheikkouden jossakin Microsoftin omistamassa varastossa, joka täyttää [Microsoftin tietoturvaheikkouden määritelmän](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), ilmoita siitä meille alla kuvatulla tavalla.
+
+## Tietoturvaongelmien ilmoittaminen
+
+**Älä ilmoita tietoturvaheikkouksista julkisten GitHub-ongelmien kautta.**
+
+Sen sijaan ilmoita niistä Microsoft Security Response Centerille (MSRC) osoitteessa [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Jos haluat lähettää ilmoituksen kirjautumatta sisään, lähetä sähköpostia osoitteeseen [secure@microsoft.com](mailto:secure@microsoft.com). Jos mahdollista, salaa viestisi PGP-avaimellamme; voit ladata sen [Microsoft Security Response Center PGP Key -sivulta](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Saat vastauksen 24 tunnin kuluessa. Jos et jostain syystä saa vastausta, seuraa tilannetta sähköpostitse varmistaaksesi, että alkuperäinen viestisi on vastaanotettu. Lisätietoja löytyy osoitteesta [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Sisällytä pyydetyt tiedot (niin paljon kuin mahdollista) auttaaksesi meitä ymmärtämään mahdollisen ongelman luonteen ja laajuuden:
+
+  * Ongelman tyyppi (esim. puskuriylivuoto, SQL-injektio, cross-site scripting jne.)
+  * Lähdetiedostojen täydet polut, jotka liittyvät ongelman ilmenemiseen
+  * Vaikuttavan lähdekoodin sijainti (tagi/haara/commit tai suora URL)
+  * Mahdolliset erityiskonfiguraatiot, jotka vaaditaan ongelman toistamiseen
+  * Vaiheittaiset ohjeet ongelman toistamiseen
+  * Proof-of-concept tai hyökkäyskoodi (jos mahdollista)
+  * Ongelman vaikutus, mukaan lukien miten hyökkääjä voisi hyödyntää sitä
+
+Nämä tiedot auttavat meitä käsittelemään raporttisi nopeammin.
+
+Jos ilmoitat ongelmasta palkkion toivossa, kattavammat raportit voivat johtaa suurempaan palkkioon. Käy [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) -sivulla saadaksesi lisätietoja aktiivisista ohjelmistamme.
+
+## Suositellut kielet
+
+Suosimme, että kaikki viestintä tapahtuu englanniksi.
+
+## Käytäntö
+
+Microsoft noudattaa [Koordinoidun haavoittuvuuden julkaisun](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon) periaatteita.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/SUPPORT.md b/translations/fi/SUPPORT.md
new file mode 100644
index 00000000..0d1d17d5
--- /dev/null
+++ b/translations/fi/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-27T20:02:12+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "fi"
+}
+-->
+# Tuki
+
+## Kuinka raportoida ongelmia ja saada apua  
+
+Tämä projekti käyttää GitHub Issues -toimintoa virheiden ja ominaisuuspyyntöjen seurantaan. Tarkista olemassa olevat ongelmat ennen uuden ongelman raportoimista, jotta vältät päällekkäisyydet. Uudet ongelmat, kuten virheet tai ominaisuuspyynnöt, tulee raportoida uutena Issue-tikettinä.
+
+Apua ja kysymyksiä tämän projektin käytöstä varten löydät [osallistumisohjeistamme](CONTRIBUTING.md).
+
+## Microsoftin tukikäytäntö  
+
+Tuki tälle projektille rajoittuu yllä lueteltuihin resursseihin.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa mahdollisista väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/_404.md b/translations/fi/_404.md
new file mode 100644
index 00000000..fc237105
--- /dev/null
+++ b/translations/fi/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-27T20:03:22+00:00",
+  "source_file": "_404.md",
+  "language_code": "fi"
+}
+-->
+# Työn alla
+
+Työskentelemme tämän sivun parissa. Tarkista myöhemmin uudelleen.
+
+Avaa [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose), jos sinulla on kysyttävää.
+
+**[Takaisin etusivulle](../../../../../../..)**
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/docs/_navbar.md b/translations/fi/docs/_navbar.md
new file mode 100644
index 00000000..2a23dd47
--- /dev/null
+++ b/translations/fi/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-27T20:20:14+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "fi"
+}
+-->
+- Käännökset
+  - [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)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/docs/_sidebar.md b/translations/fi/docs/_sidebar.md
new file mode 100644
index 00000000..99e71a8c
--- /dev/null
+++ b/translations/fi/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-27T20:19:47+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "fi"
+}
+-->
+- Johdanto
+  - [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 Perusteet
+  - [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)
+
+- Kirjoituspeli
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Selainlaajennus
+  - [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)
+
+- Avaruuspeli
+  - [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)
+
+- Pankkiprojekti
+  - [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)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/for-teachers.md b/translations/fi/for-teachers.md
new file mode 100644
index 00000000..dee5336c
--- /dev/null
+++ b/translations/fi/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-27T20:02:29+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "fi"
+}
+-->
+## Opettajille
+
+Haluaisitko käyttää tätä opetussuunnitelmaa luokassasi? Ole hyvä ja käytä vapaasti!
+
+Itse asiassa voit käyttää sitä suoraan GitHubissa hyödyntämällä GitHub Classroomia.
+
+Tätä varten haaroita tämä repositorio. Sinun täytyy luoda repositorio jokaiselle oppitunnille, joten sinun täytyy jakaa jokainen kansio erilliseen repositorioon. Näin [GitHub Classroom](https://classroom.github.com/classrooms) voi käsitellä jokaisen oppitunnin erikseen.
+
+Nämä [täydelliset ohjeet](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) antavat sinulle käsityksen siitä, miten luokkahuoneesi voi asettaa.
+
+## Käyttö Moodle-, Canvas- tai Blackboard-järjestelmissä
+
+Tämä opetussuunnitelma toimii hyvin näissä oppimisen hallintajärjestelmissä! Käytä [Moodle-tiedostoa](../../../../../../../teaching-files/webdev-moodle.mbz) saadaksesi koko sisällön, tai kokeile [Common Cartridge -tiedostoa](../../../../../../../teaching-files/webdev-common-cartridge.imscc), joka sisältää osan sisällöstä. Moodle Cloud ei tue täydellisiä Common Cartridge -vientejä, joten on suositeltavaa käyttää Moodle-lataustiedostoa, joka voidaan ladata Canvas-järjestelmään. Kerro meille, miten voimme parantaa tätä kokemusta.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.fi.png)
+> Opetussuunnitelma Moodle-luokkahuoneessa
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.fi.png)
+> Opetussuunnitelma Canvasissa
+
+## Repositorion käyttö sellaisenaan
+
+Jos haluat käyttää tätä repositoriota sellaisenaan ilman GitHub Classroomia, sekin onnistuu. Sinun täytyy vain kertoa opiskelijoillesi, minkä oppitunnin parissa työskennellään yhdessä.
+
+Verkko-opetuksessa (Zoom, Teams tai muu vastaava) voit muodostaa pienryhmiä visailuja varten ja ohjata opiskelijoita valmistautumaan oppimiseen. Kutsu sitten opiskelijat visailuihin ja pyydä heitä lähettämään vastauksensa 'issueina' tiettyyn aikaan. Voit tehdä saman myös tehtävien kanssa, jos haluat opiskelijoiden työskentelevän yhteistyössä avoimesti.
+
+Jos haluat mieluummin yksityisemmän lähestymistavan, pyydä opiskelijoita haaroittamaan opetussuunnitelma oppitunti kerrallaan omiin yksityisiin GitHub-repositorioihinsa ja antamaan sinulle käyttöoikeus. Tämän jälkeen he voivat suorittaa visailut ja tehtävät yksityisesti ja lähettää ne sinulle issueina luokkahuoneesi repositorioon.
+
+On monia tapoja saada tämä toimimaan verkkoluokkahuoneessa. Kerro meille, mikä toimii parhaiten sinulle!
+
+## Kerro meille mielipiteesi!
+
+Haluamme tehdä tästä opetussuunnitelmasta toimivan sinulle ja opiskelijoillesi. Ota meihin yhteyttä [Opettajien nurkkauksessa](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) ja avaa [**uusi issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) esittääksesi pyyntöjä, raportoimaan virheitä tai antamaan palautetta.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/lesson-template/README.md b/translations/fi/lesson-template/README.md
new file mode 100644
index 00000000..96760100
--- /dev/null
+++ b/translations/fi/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-27T21:06:51+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "fi"
+}
+-->
+# [Oppiaihe]
+
+![Upota video tähän](../../../lesson-template/video-url)
+
+## [Ennakkokysely](../../../lesson-template/quiz-url)
+
+[Kuvaile, mitä opimme]
+
+### Johdanto
+
+Kuvaile, mitä käsitellään
+
+> Muistiinpanot
+
+### Esitiedot
+
+Mitkä vaiheet olisi pitänyt käydä läpi ennen tätä oppituntia?
+
+### Valmistautuminen
+
+Valmisteluvaiheet tämän oppitunnin aloittamiseksi
+
+---
+
+[Käy sisältö läpi lohkoissa]
+
+## [Aihe 1]
+
+### Tehtävä:
+
+Työskennelkää yhdessä parantaaksenne koodipohjaa asteittain ja rakentaaksenne projektin yhteisellä koodilla:
+
+```html
+code blocks
+```
+
+✅ Tietotesti - käytä tätä hetkeä venyttääksesi opiskelijoiden tietämystä avoimilla kysymyksillä
+
+## [Aihe 2]
+
+## [Aihe 3]
+
+🚀 Haaste: Lisää haaste, jossa opiskelijat työskentelevät yhdessä luokassa projektin parantamiseksi
+
+Valinnainen: lisää kuvakaappaus valmiin oppitunnin käyttöliittymästä, jos tarpeellista
+
+## [Jälkituntikysely](../../../lesson-template/quiz-url)
+
+## Kertaus & Itseopiskelu
+
+**Tehtävän palautus [KK/VV]**: [Tehtävän nimi](assignment.md)
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/lesson-template/assignment.md b/translations/fi/lesson-template/assignment.md
new file mode 100644
index 00000000..1a507cef
--- /dev/null
+++ b/translations/fi/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-27T21:07:13+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "fi"
+}
+-->
+# [Tehtävän nimi]
+
+## Ohjeet
+
+## Arviointikriteerit
+
+| Kriteeri | Erinomainen | Riittävä | Parannusta tarvitaan |
+| -------- | ----------- | -------- | -------------------- |
+|          |             |          |                      |
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/fi/quiz-app/README.md b/translations/fi/quiz-app/README.md
new file mode 100644
index 00000000..05d000e9
--- /dev/null
+++ b/translations/fi/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-27T21:10:23+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "fi"
+}
+-->
+# Visailusovellus
+
+Nämä visailut ovat ennen ja jälkeen luentojen tehtäviä data-analytiikan opetusohjelmassa osoitteessa https://aka.ms/webdev-beginners
+
+## Käännöksen lisääminen visailusarjaan
+
+Lisää visailukäännös luomalla vastaavat visailurakenteet `assets/translations`-kansioon. Alkuperäiset visailut löytyvät `assets/translations/en`-kansiosta. Visailut on jaettu useisiin ryhmiin. Varmista, että numerointi vastaa oikeaa visailuosaa. Tässä opetusohjelmassa on yhteensä 40 visailua, ja numerointi alkaa nollasta.
+
+  
+<details>
+<summary>Tässä on esimerkki käännöstiedoston rakenteesta:</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>
+
+Kun olet muokannut käännöksiä, muokkaa `index.js`-tiedostoa käännöskansiossa tuodaksesi kaikki tiedostot `en`-kansion mukaisilla käytännöillä.
+
+Muokkaa `index.js`-tiedostoa `assets/translations`-kansiossa tuodaksesi uudet käännetyt tiedostot.
+
+Esimerkiksi, jos käännöksesi JSON-tiedosto on nimeltään `ex.json`, tee 'ex' lokalisaatioavain ja lisää se seuraavasti:
+
+<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>
+
+## Visailusovelluksen suorittaminen paikallisesti
+
+### Esivaatimukset
+
+- GitHub-tili
+- [Node.js ja Git](https://nodejs.org/)
+
+### Asennus ja käyttöönotto
+
+1. Luo uusi arkisto tästä [mallista](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Kloonaa uusi arkistosi ja siirry visailusovelluksen kansioon
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Asenna npm-paketit ja riippuvuudet
+
+   ```bash
+   npm install
+   ```
+
+### Sovelluksen rakentaminen
+
+1. Rakentaaksesi ratkaisun, suorita:
+
+   ```bash
+   npm run build
+   ```
+
+### Sovelluksen käynnistäminen
+
+1. Käynnistääksesi ratkaisun, suorita:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Valinnainen] Koodin tarkistus
+
+1. Varmistaaksesi, että koodi on tarkistettu, suorita:
+
+    ```bash
+    npm run lint
+    ```
+
+## Visailusovelluksen julkaisu Azureen 
+
+### Esivaatimukset
+- Azure-tilaus. Rekisteröidy ilmaiseksi [täällä](https://aka.ms/azure-free).
+
+    _Arvioitu kustannus tämän visailusovelluksen julkaisemiselle: ILMAINEN_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Kun olet kirjautunut sisään Azureen yllä olevan linkin kautta, valitse tilaus ja resurssiryhmä, ja tee seuraavat:
+
+- Staattisen verkkosovelluksen tiedot: Anna nimi ja valitse hosting-suunnitelma
+- GitHub-kirjautuminen: Aseta GitHub lähteeksi ja kirjaudu sisään täyttääksesi lomakkeen vaaditut kentät:
+    - *Organisaatio* – Valitse organisaatiosi.
+    - *Arkisto* – Valitse Web Dev for Beginners -opetusohjelman arkisto. 
+    - *Haara* - Valitse haara (main) 
+- Rakennusasetukset: Azure Static Web Apps käyttää tunnistusalgoritmia sovelluksesi käyttämän kehyksen tunnistamiseen. 
+    - *Sovelluksen sijainti* - ./quiz-app
+    - *Api-sijainti* -
+    - *Tulosteen sijainti* - dist
+- Julkaisu: Klikkaa 'Review + Create', sitten 'Create'
+
+    Kun julkaisu on valmis, *.github*-hakemistoon arkistossasi luodaan työnkulku-tiedosto. Tämä työnkulku-tiedosto sisältää ohjeet tapahtumista, jotka käynnistävät sovelluksen uudelleenjulkaisun Azureen, esimerkiksi _**push** haaraan **main**_ jne.
+
+    <details>
+    <summary>Esimerkki työnkulku-tiedostosta</summary>
+    Tässä on esimerkki GitHub Actions -työnkulku-tiedostosta:
+    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>
+
+- Julkaisun jälkeen: Kun julkaisu on valmis, klikkaa 'Go to Deployment' ja sitten 'View app in browser'.
+
+Kun GitHub Action (työnkulku) on suoritettu onnistuneesti, päivitä live-sivu nähdäksesi sovelluksesi.
+
+---
+
+**Vastuuvapauslauseke**:  
+Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
\ No newline at end of file
diff --git a/translations/he/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/he/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..4a99befb
--- /dev/null
+++ b/translations/he/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -0,0 +1,216 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c63675cfaf1d223b37bb9fecbfe7c252",
+  "translation_date": "2025-08-27T20:38:51+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "he"
+}
+-->
+# מבוא לשפות תכנות וכלי עבודה
+
+שיעור זה עוסק ביסודות של שפות תכנות. הנושאים הנלמדים כאן רלוונטיים לרוב שפות התכנות המודרניות כיום. בחלק "כלי עבודה", תלמדו על תוכנות שימושיות שיכולות לעזור לכם כמפתחים.
+
+![מבוא לתכנות](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.he.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)!
+
+## מה זה תכנות?
+
+תכנות (המכונה גם קידוד) הוא תהליך כתיבת הוראות למכשיר כמו מחשב או מכשיר נייד. אנו כותבים את ההוראות הללו באמצעות שפת תכנות, שמפורשת לאחר מכן על ידי המכשיר. סטים אלו של הוראות עשויים להיקרא בשמות שונים, אך *תוכנה*, *תוכנית מחשב*, *אפליקציה (אפליקציה)* ו-*קובץ הרצה* הם כמה מהשמות הפופולריים.
+
+*תוכנה* יכולה להיות כל דבר שנכתב בקוד; אתרים, משחקים ואפליקציות טלפון הם תוכנות. למרות שאפשר ליצור תוכנה ללא כתיבת קוד, ההיגיון הבסיסי שמפורש על ידי המכשיר נכתב ככל הנראה בקוד. תוכנה ש-*רצה* או *מבצעת* קוד מבצעת הוראות. המכשיר שבו אתם קוראים שיעור זה מריץ תוכנה שמציגה אותו על המסך שלכם.
+
+✅ בצעו מחקר קטן: מי נחשב למתכנת המחשב הראשון בעולם?
+
+## שפות תכנות
+
+שפות תכנות מאפשרות למפתחים לכתוב הוראות למכשיר. מכשירים מבינים רק בינארי (0 ו-1), ולרוב המפתחים זו לא דרך יעילה לתקשר. שפות תכנות הן הכלי שמאפשר תקשורת בין בני אדם למחשבים.
+
+שפות תכנות מגיעות בפורמטים שונים ועשויות לשרת מטרות שונות. לדוגמה, JavaScript משמשת בעיקר ליישומי אינטרנט, בעוד Bash משמשת בעיקר למערכות הפעלה.
+
+*שפות ברמה נמוכה* דורשות בדרך כלל פחות שלבים כדי שמכשיר יפרש הוראות, לעומת *שפות ברמה גבוהה*. עם זאת, מה שהופך שפות ברמה גבוהה לפופולריות הוא הקריאות והתמיכה שלהן. JavaScript נחשבת לשפה ברמה גבוהה.
+
+הקוד הבא מדגים את ההבדל בין שפה ברמה גבוהה (JavaScript) לשפה ברמה נמוכה (קוד אסמבלי ARM).
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+תאמינו או לא, *שני הקודים עושים את אותו הדבר*: מדפיסים סדרת פיבונאצ'י עד 10.
+
+✅ סדרת פיבונאצ'י מוגדרת כסט של מספרים כך שכל מספר הוא סכום של שני המספרים הקודמים לו, החל מ-0 ו-1. עשרת המספרים הראשונים בסדרה הם: 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 "כלי עבודה")
+
+> 🎥 לחצו על התמונה למעלה לצפייה בסרטון על כלים
+
+בחלק זה תלמדו על תוכנות שעשויות להיות מאוד שימושיות בתחילת דרככם כמפתחים מקצועיים.
+
+**סביבת פיתוח** היא סט ייחודי של כלים ותכונות שמפתח משתמש בהם לעיתים קרובות בעת כתיבת תוכנה. חלק מהכלים הללו מותאמים לצרכים הספציפיים של המפתח, ועשויים להשתנות עם הזמן אם המפתח משנה סדרי עדיפויות בעבודה, בפרויקטים אישיים, או כאשר הוא משתמש בשפת תכנות שונה. סביבת פיתוח היא ייחודית כמו המפתחים שמשתמשים בה.
+
+### עורכים
+
+אחד הכלים החשובים ביותר לפיתוח תוכנה הוא העורך. העורכים הם המקום שבו כותבים את הקוד ולעיתים גם המקום שבו מריצים אותו.
+
+מפתחים מסתמכים על עורכים מכמה סיבות נוספות:
+
+- *ניפוי שגיאות* (Debugging) עוזר לחשוף באגים ושגיאות על ידי מעבר על הקוד, שורה אחר שורה. חלק מהעורכים כוללים יכולות ניפוי שגיאות שניתן להתאים ולהוסיף עבור שפות תכנות מסוימות.  
+- *הדגשת תחביר* (Syntax highlighting) מוסיפה צבעים ועיצוב טקסט לקוד, מה שהופך אותו לקריא יותר. רוב העורכים מאפשרים התאמה אישית של הדגשת התחביר.  
+- *תוספים ואינטגרציות* הם כלים מיוחדים למפתחים, שנבנו על ידי מפתחים. כלים אלו לא נכללו בעורך הבסיסי. לדוגמה, מפתחים רבים מתעדים את הקוד שלהם כדי להסביר כיצד הוא עובד. הם עשויים להתקין תוסף לבדיקת איות כדי לעזור למצוא שגיאות כתיב בתיעוד. רוב התוספים מיועדים לשימוש בעורך מסוים, ורוב העורכים מגיעים עם דרך לחפש תוספים זמינים.  
+- *התאמה אישית* מאפשרת למפתחים ליצור סביבת פיתוח ייחודית שמתאימה לצרכיהם. רוב העורכים ניתנים להתאמה אישית רבה ועשויים גם לאפשר למפתחים ליצור תוספים מותאמים אישית.
+
+#### עורכים פופולריים ותוספים לפיתוח אתרים
+
+- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)  
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)  
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)  
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)  
+- [Atom](https://atom.io/)  
+  - [spell-check](https://atom.io/packages/spell-check)  
+  - [teletype](https://atom.io/packages/teletype)  
+  - [atom-beautify](https://atom.io/packages/atom-beautify)  
+- [Sublimetext](https://www.sublimetext.com/)  
+  - [emmet](https://emmet.io/)  
+  - [SublimeLinter](http://www.sublimelinter.com/en/stable/)  
+
+### דפדפנים
+
+כלי חשוב נוסף הוא הדפדפן. מפתחי אתרים מסתמכים על הדפדפן כדי לראות כיצד הקוד שלהם פועל באינטרנט. הוא גם משמש להצגת האלמנטים הוויזואליים של דף אינטרנט שנכתבו בעורך, כמו HTML.
+
+רבים מהדפדפנים מגיעים עם *כלי מפתחים* (DevTools) הכוללים סט של תכונות ומידע שימושיים שעוזרים למפתחים לאסוף וללכוד מידע חשוב על היישום שלהם. לדוגמה: אם יש שגיאות בדף אינטרנט, לעיתים קרובות מועיל לדעת מתי הן התרחשו. ניתן להגדיר את כלי המפתחים בדפדפן כדי ללכוד מידע זה.
+
+#### דפדפנים וכלי מפתחים פופולריים
+
+- [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/he/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/he/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..f07c5ded
--- /dev/null
+++ b/translations/he/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-27T20:39:45+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "he"
+}
+-->
+# קריאת התיעוד
+
+## הוראות
+
+ישנם כלים רבים שמפתחי אתרים עשויים להזדקק להם, המופיעים ב-[תיעוד 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/he/1-getting-started-lessons/2-github-basics/README.md b/translations/he/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..3d351f38
--- /dev/null
+++ b/translations/he/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,339 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-27T20:33:06+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "he"
+}
+-->
+# מבוא ל-GitHub
+
+השיעור הזה מכסה את היסודות של GitHub, פלטפורמה לאירוח וניהול שינויים בקוד שלך.
+
+![מבוא ל-GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.he.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 "your-name"`
+* `git config --global user.email "your-email"`
+
+כדי לבדוק אם Git כבר מוגדר, ניתן להקליד:
+`git config --list`
+
+תצטרך גם חשבון GitHub, עורך קוד (כמו Visual Studio Code), ותצטרך לפתוח את הטרמינל שלך (או: שורת הפקודה).
+
+גש ל-[github.com](https://github.com/) ופתח חשבון אם עדיין אין לך, או התחבר ומלא את הפרופיל שלך.
+
+✅ GitHub הוא לא מאגר הקוד היחיד בעולם; יש אחרים, אבל GitHub הוא המוכר ביותר.
+
+### הכנה
+
+תצטרך תיקייה עם פרויקט קוד במחשב המקומי שלך (מחשב נייד או PC), וגם מאגר ציבורי ב-GitHub, שישמש כדוגמה לאיך לתרום לפרויקטים של אחרים.
+
+---
+
+## ניהול קוד
+
+נניח שיש לך תיקייה מקומית עם פרויקט קוד ואתה רוצה להתחיל לעקוב אחרי ההתקדמות שלך באמצעות git - מערכת לניהול גרסאות. יש אנשים שמשווים שימוש ב-git לכתיבת מכתב אהבה לעצמך בעתיד. קריאת הודעות ה"commit" שלך ימים, שבועות או חודשים לאחר מכן תאפשר לך להיזכר למה קיבלת החלטה מסוימת, או "לחזור אחורה" לשינוי - זאת כמובן אם כתבת הודעות "commit" טובות.
+
+### משימה: צור מאגר ותחייב קוד  
+
+> צפה בסרטון
+> 
+> [![סרטון יסודות 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 עוקב אחרי הקבצים שלך. כדי להפוך את השינוי לקבוע, עליך _להתחייב_ לקבצים. כדי לעשות זאת, צור _commit_ עם הפקודה `git commit`. ה-_commit_ מייצג נקודת שמירה בהיסטוריה של המאגר שלך. הקלד את הפקודה הבאה כדי ליצור _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
+   ```
+
+   זה יוצר _remote_, או חיבור, בשם "origin" שמצביע על המאגר ב-GitHub שיצרת קודם.
+
+1. **שלח קבצים מקומיים ל-GitHub**. עד כה יצרת _חיבור_ בין המאגר המקומי למאגר ב-GitHub. בוא נשלח את הקבצים האלה ל-GitHub עם הפקודה `git push`, כך:
+
+   > הערה, שם הענף שלך עשוי להיות שונה כברירת מחדל מ-```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   זה שולח את ההתחייבויות שלך בענף "main" ל-GitHub.
+
+2. **הוסף עוד שינויים**. אם תרצה להמשיך לבצע שינויים ולשלוח אותם ל-GitHub, תצטרך להשתמש בשלוש הפקודות הבאות:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > טיפ, ייתכן שתרצה גם לאמץ קובץ `.gitignore` כדי למנוע מקבצים שאתה לא רוצה לעקוב אחריהם להופיע ב-GitHub - כמו קובץ הערות שאתה שומר באותה תיקייה אבל אין לו מקום במאגר ציבורי. תוכל למצוא תבניות לקבצי `.gitignore` ב-[תבניות .gitignore](https://github.com/github/gitignore).
+
+#### הודעות התחייבות
+
+שורת נושא מצוינת להודעת התחייבות ב-Git משלימה את המשפט הבא:
+אם ייושם, התחייבות זו תעשה <שורת הנושא שלך כאן>
+
+לשורת הנושא השתמש בזמן הווה, ציווי: "שנה" ולא "שינה" או "משנה". 
+כמו בשורת הנושא, גם בגוף ההודעה (אופציונלי) השתמש בזמן הווה, ציווי. הגוף צריך לכלול את המניע לשינוי ולהשוות זאת להתנהגות הקודמת. אתה מסביר את ה`למה`, לא את ה`איך`.
+
+✅ הקדש כמה דקות לגלוש ב-GitHub. האם תוכל למצוא הודעת התחייבות ממש טובה? האם תוכל למצוא אחת מינימלית מאוד? איזה מידע לדעתך הכי חשוב ומועיל להעביר בהודעת התחייבות?
+
+### משימה: שתף פעולה
+
+הסיבה העיקרית לשים דברים ב-GitHub הייתה לאפשר שיתוף פעולה עם מפתחים אחרים.
+
+## עבודה על פרויקטים עם אחרים
+
+> צפה בסרטון
+>
+> [![סרטון יסודות Git ו-GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+במאגר שלך, נווט ל-`Insights > Community` כדי לראות איך הפרויקט שלך משווה לסטנדרטים קהילתיים מומלצים.
+
+   הנה כמה דברים שיכולים לשפר את המאגר שלך ב-GitHub:
+   - **תיאור**. האם הוספת תיאור לפרויקט שלך?
+   - **README**. האם הוספת README? GitHub מספק הנחיות לכתיבת [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **הנחיות לתרומה**. האם לפרויקט שלך יש [הנחיות לתורמים](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
+   - **קוד התנהגות**. האם יש לפרויקט [קוד התנהגות](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
+   - **רישיון**. אולי הכי חשוב, האם יש לפרויקט [רישיון](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+כל המשאבים האלה יועילו בתהליך קליטת חברי צוות חדשים. אלו בדרך כלל הדברים שתורמים חדשים מסתכלים עליהם לפני שהם בכלל מסתכלים על הקוד שלך, כדי להבין אם הפרויקט שלך הוא המקום הנכון להשקיע בו את זמנם.
+
+✅ קבצי README, למרות שהם דורשים זמן להכנה, לעיתים קרובות מוזנחים על ידי מנהלים עסוקים. האם תוכל למצוא דוגמה ל-README במיוחד תיאורי? הערה: ישנם [כלים שיעזרו ליצור README טובים](https://www.makeareadme.com/) שאולי תרצה לנסות.
+
+### משימה: מיזוג קוד
+
+מסמכי תרומה עוזרים לאנשים לתרום לפרויקט. הם מסבירים אילו סוגי תרומות אתה מחפש ואיך התהליך עובד. תורמים יצטרכו לעבור סדרת שלבים כדי להיות מסוגלים לתרום למאגר שלך ב-GitHub:
+
+1. **פיצול המאגר שלך**. סביר להניח שתרצה שאנשים יפצלו את הפרויקט שלך. פיצול פירושו יצירת עותק של המאגר שלך בפרופיל GitHub שלהם.
+1. **שכפול**. משם הם ישכפלו את הפרויקט למחשב המקומי שלהם.
+1. **יצירת ענף**. תרצה לבקש מהם ליצור _ענף_ עבור העבודה שלהם.
+1. **מיקוד השינוי באזור אחד**. בקש מהתורמים להתרכז בתרומות שלהם בדבר אחד בכל פעם - כך הסיכויים שתוכל _למזג_ את העבודה שלהם גבוהים יותר. דמיין שהם כותבים תיקון באג, מוסיפים תכונה חדשה ומעדכנים כמה בדיקות - מה אם אתה רוצה, או יכול ליישם רק 2 מתוך 3, או 1 מתוך 3 שינויים?
+
+✅ דמיין מצב שבו ענפים הם קריטיים במיוחד לכתיבה ושחרור קוד טוב. אילו מקרים שימושיים אתה יכול לחשוב עליהם?
+
+> הערה, היה השינוי שאתה רוצה לראות בעולם, ויצור ענפים גם עבור העבודה שלך. כל התחייבות שתבצע תתבצע על הענף שאתה כרגע "checked out" אליו. השתמש ב-`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 טוב עוקב פחות או יותר אחרי אותם כללים כמו הודעת commit. ניתן להוסיף התייחסות לבעיה במעקב הבעיות, כאשר העבודה שלך למשל פותרת בעיה. זה נעשה באמצעות `#` ואחריו מספר הבעיה שלך. לדוגמה `#97`.
+
+🤞מקווים שכל הבדיקות יעברו ובעלי הפרויקט ימזגו את השינויים שלך לפרויקט🤞
+
+עדכן את הענף המקומי הנוכחי שלך עם כל ה-commit החדשים מהענף המרוחק המתאים ב-GitHub:
+
+`git pull`
+
+## איך לתרום לקוד פתוח
+
+ראשית, בוא נמצא ריפו ב-GitHub שמעניין אותך ושאליו תרצה לתרום שינוי. תרצה להעתיק את התוכן שלו למחשב שלך.
+
+✅ דרך טובה למצוא ריפואים ידידותיים למתחילים היא [לחפש לפי התג 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![העתקת ריפו מקומית](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.he.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/he/1-getting-started-lessons/3-accessibility/README.md b/translations/he/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..ba87168b
--- /dev/null
+++ b/translations/he/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,212 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-27T20:36:25+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "he"
+}
+-->
+# יצירת דפי אינטרנט נגישים
+
+![הכל על נגישות](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.he.png)
+> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## חידון לפני ההרצאה
+[חידון לפני ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> הכוח של האינטרנט טמון באוניברסליות שלו. גישה לכולם, ללא קשר למוגבלות, היא היבט חיוני.
+>
+> \- סר טימותי ברנרס-לי, מנהל W3C וממציא ה-World Wide Web
+
+הציטוט הזה מדגיש בצורה מושלמת את החשיבות של יצירת אתרים נגישים. אפליקציה שאינה נגישה לכולם היא בהגדרה מפלה. כמפתחי אתרים, עלינו תמיד לחשוב על נגישות. כשמתמקדים בזה מההתחלה, תבטיחו שכל אחד יוכל לגשת לדפים שאתם יוצרים. בשיעור הזה תלמדו על הכלים שיכולים לעזור לכם לוודא שהנכסים הדיגיטליים שלכם נגישים וכיצד לבנות עם נגישות בראש.
+
+> ניתן לקחת את השיעור הזה ב-[Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## כלים לשימוש
+
+### קוראי מסך
+
+אחד הכלים המוכרים ביותר לנגישות הם קוראי מסך.
+
+[קוראי מסך](https://en.wikipedia.org/wiki/Screen_reader) הם כלים נפוצים עבור אנשים עם לקויות ראייה. כמו שאנחנו משקיעים זמן לוודא שדפדפן מציג את המידע שאנחנו רוצים לשתף, עלינו גם לוודא שקורא מסך עושה זאת.
+
+בצורתו הבסיסית ביותר, קורא מסך יקרא דף מלמעלה למטה בצורה קולית. אם הדף שלכם הוא כולו טקסט, הקורא יעביר את המידע בצורה דומה לדפדפן. כמובן, דפי אינטרנט לעיתים רחוקות הם טקסט בלבד; הם יכילו קישורים, גרפיקה, צבעים ורכיבים חזותיים אחרים. יש להקפיד שהמידע הזה ייקרא נכון על ידי קורא מסך.
+
+כל מפתח אתרים צריך להכיר קורא מסך. כפי שצוין לעיל, זהו הכלי שהמשתמשים שלכם ישתמשו בו. כמו שאתם מכירים את אופן הפעולה של דפדפן, עליכם ללמוד כיצד פועל קורא מסך. למרבה המזל, קוראי מסך מובנים ברוב מערכות ההפעלה.
+
+חלק מהדפדפנים כוללים גם כלים ותוספים מובנים שיכולים לקרוא טקסט בקול רם או אפילו לספק תכונות ניווט בסיסיות, כמו [כלי הנגישות של דפדפן Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). כלים אלו חשובים גם הם, אך הם פועלים בצורה שונה מאוד מקוראי מסך ואין להתבלבל ביניהם לבין כלים לבדיקת קוראי מסך.
+
+✅ נסו קורא מסך וכלי קריאת טקסט בדפדפן. ב-Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) כלול כברירת מחדל, ו-[JAWS](https://webaim.org/articles/jaws/) ו-[NVDA](https://www.nvaccess.org/about-nvda/) ניתנים להתקנה. ב-macOS וב-iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) מותקן כברירת מחדל.
+
+### זום
+
+כלי נוסף שנמצא בשימוש נפוץ על ידי אנשים עם לקויות ראייה הוא זום. הסוג הבסיסי ביותר של זום הוא זום סטטי, הנשלט באמצעות `Control + סימן פלוס (+)` או על ידי הקטנת רזולוציית המסך. סוג זה של זום גורם לכל הדף לשנות גודל, ולכן שימוש ב-[עיצוב רספונסיבי](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) חשוב כדי לספק חוויית משתמש טובה ברמות זום מוגדלות.
+
+סוג נוסף של זום מסתמך על תוכנה מיוחדת שמגדילה אזור מסוים של המסך ומאפשרת תנועה, בדומה לשימוש בזכוכית מגדלת אמיתית. ב-Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) מובנה, ו-[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) היא תוכנה חיצונית עם יותר תכונות ובסיס משתמשים רחב יותר. גם ב-macOS וב-iOS יש תוכנת הגדלה מובנית בשם [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### בודקי ניגודיות
+
+יש לבחור צבעים באתרים בקפידה כדי לענות על הצרכים של משתמשים עיוורי צבעים או אנשים שמתקשים לראות צבעים בעלי ניגודיות נמוכה.
+
+✅ בדקו אתר שאתם אוהבים להשתמש בו מבחינת שימוש בצבעים באמצעות תוסף דפדפן כמו [בודק הניגודיות של WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). מה למדתם?
+
+### Lighthouse
+
+באזור כלי המפתחים של הדפדפן שלכם, תמצאו את הכלי Lighthouse. כלי זה חשוב לקבלת מבט ראשוני על הנגישות (כמו גם ניתוחים אחרים) של אתר אינטרנט. למרות שחשוב לא להסתמך אך ורק על Lighthouse, ציון של 100% הוא בסיס טוב להתחלה.
+
+✅ מצאו את Lighthouse בפאנל כלי המפתחים של הדפדפן שלכם והריצו ניתוח על כל אתר. מה גיליתם?
+
+## עיצוב לנגישות
+
+נגישות היא נושא רחב יחסית. כדי לעזור לכם, ישנם משאבים רבים זמינים.
+
+- [Accessible U - אוניברסיטת מינסוטה](https://accessibility.umn.edu/your-role/web-developers)
+
+למרות שלא נוכל לכסות כל היבט של יצירת אתרים נגישים, להלן כמה עקרונות ליבה שתרצו ליישם. עיצוב דף נגיש מההתחלה הוא **תמיד** קל יותר מאשר לחזור לדף קיים ולהפוך אותו לנגיש.
+
+## עקרונות תצוגה טובים
+
+### פלטות צבעים בטוחות
+
+אנשים רואים את העולם בדרכים שונות, וזה כולל צבעים. כשאתם בוחרים סכמת צבעים לאתר שלכם, עליכם לוודא שהיא נגישה לכולם. כלי נהדר ליצירת פלטות צבעים הוא [Color Safe](http://colorsafe.co/).
+
+✅ זהו אתר אינטרנט שבו השימוש בצבעים בעייתי מאוד. מדוע?
+
+### שימוש ב-HTML נכון
+
+עם CSS ו-JavaScript ניתן לגרום לכל אלמנט להיראות כמו כל סוג של שליטה. `<span>` יכול לשמש ליצירת `<button>`, ו-`<b>` יכול להפוך לקישור. למרות שזה עשוי להיחשב קל יותר לעיצוב, זה לא מעביר דבר לקורא מסך. השתמשו ב-HTML המתאים בעת יצירת שליטה בדף. אם אתם רוצים קישור, השתמשו ב-`<a>`. שימוש ב-HTML הנכון לשליטה הנכונה נקרא שימוש ב-HTML סמנטי.
+
+✅ גשו לכל אתר אינטרנט ובדקו אם המעצבים והמפתחים משתמשים ב-HTML כראוי. האם תוכלו למצוא כפתור שהיה צריך להיות קישור? רמז: לחצו לחיצה ימנית ובחרו 'View Page Source' בדפדפן שלכם כדי להסתכל על הקוד הבסיסי.
+
+### יצירת היררכיית כותרות תיאורית
+
+משתמשי קוראי מסך [מסתמכים רבות על כותרות](https://webaim.org/projects/screenreadersurvey8/#finding) כדי למצוא מידע ולנווט בדף. כתיבת תוכן כותרות תיאורי ושימוש בתגי כותרות סמנטיים חשובים ליצירת אתר שקל לניווט עבור משתמשי קוראי מסך.
+
+### שימוש ברמזים חזותיים טובים
+
+CSS מציע שליטה מלאה על המראה של כל אלמנט בדף. ניתן ליצור תיבות טקסט ללא מסגרת או קישורים ללא קו תחתון. למרבה הצער, הסרת הרמזים הללו יכולה להקשות על מי שתלוי בהם לזהות את סוג השליטה.
+
+## החשיבות של טקסט קישורים
+
+קישורים הם ליבה של הניווט באינטרנט. כתוצאה מכך, הבטחת קריאה נכונה של קישורים על ידי קורא מסך מאפשרת לכל המשתמשים לנווט באתר שלכם.
+
+### קוראי מסך וקישורים
+
+כפי שניתן לצפות, קוראי מסך קוראים את טקסט הקישור באותו אופן שבו הם קוראים כל טקסט אחר בדף. עם זאת, טקסט קישור כמו "לחץ כאן" או URL גולמי עלול להוות בעיה. טקסט קישור טוב מתאר בקצרה מה נמצא בצד השני של הקישור.
+
+> הפינגווין הקטן, המכונה לעיתים פינגווין הפיה, הוא הפינגווין הקטן ביותר בעולם. [למידע נוסף על הפינגווין הקטן](https://en.wikipedia.org/wiki/Little_penguin).
+
+✅ גלשו באינטרנט לכמה דקות כדי למצוא דפים שמשתמשים באסטרטגיות קישור לא ברורות. השוו אותם לאתרים עם קישורים טובים יותר. מה למדתם?
+
+#### הערות למנועי חיפוש
+
+כבונוס נוסף להבטחת נגישות האתר שלכם, תעזרו גם למנועי חיפוש לנווט באתר שלכם. מנועי חיפוש משתמשים בטקסט קישורים כדי ללמוד על נושאי הדפים. כך ששימוש בטקסט קישורים טוב עוזר לכולם!
+
+### ARIA
+
+דמיינו את הדף הבא:
+
+| מוצר         | תיאור             | הזמנה         |
+| ------------ | ------------------ | ------------ |
+| Widget       | [תיאור](../../../../1-getting-started-lessons/3-accessibility/')      | [הזמנה](../../../../1-getting-started-lessons/3-accessibility/') |
+| Super widget | [תיאור](../../../../1-getting-started-lessons/3-accessibility/')      | [הזמנה](../../../../1-getting-started-lessons/3-accessibility/') |
+
+בדוגמה זו, חזרה על המילים "תיאור" ו"הזמנה" הגיונית עבור מי שמשתמש בדפדפן. עם זאת, משתמש קורא מסך ישמע רק את המילים "תיאור" ו"הזמנה" שוב ושוב ללא הקשר.
+
+כדי לתמוך בתרחישים כאלה, HTML תומך במערכת מאפיינים הנקראת [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). מאפיינים אלו מאפשרים לספק מידע נוסף לקוראי מסך.
+
+> **NOTE**: כמו היבטים רבים ב-HTML, תמיכת דפדפנים וקוראי מסך עשויה להשתנות. עם זאת, רוב הלקוחות המרכזיים תומכים במאפייני ARIA.
+
+ניתן להשתמש ב-`aria-label` כדי לתאר את הקישור כאשר פורמט הדף אינו מאפשר זאת.
+
+✅ באופן כללי, שימוש בסימון סמנטי כפי שתואר לעיל עדיף על שימוש ב-ARIA, אך לעיתים אין מקבילה סמנטית עבור רכיבי HTML מסוימים. דוגמה טובה היא עץ. אין מקבילה ב-HTML לעץ, ולכן מזהים את ה-`<div>` הכללי עבור אלמנט זה עם תפקיד וערכי ARIA מתאימים. [התיעוד של MDN על ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) מכיל מידע שימושי נוסף.
+
+## תמונות
+
+מובן מאליו שקוראי מסך אינם יכולים לקרוא אוטומטית מה יש בתמונה. הבטחת נגישות של תמונות אינה דורשת עבודה רבה - זה בדיוק מה שמאפיין `alt` נועד עבורו. כל תמונה משמעותית צריכה לכלול `alt` שמתאר מה היא. תמונות שהן דקורטיביות בלבד צריכות לכלול `alt` ריק: `alt=""`. זה מונע מקוראי מסך להכריז על תמונה דקורטיבית שלא לצורך.
+
+✅ כפי שניתן לצפות, גם מנועי חיפוש אינם יכולים להבין מה יש בתמונה. הם גם משתמשים בטקסט alt. כך ששוב, הבטחת נגישות הדף שלכם מספקת בונוסים נוספים!
+
+## המקלדת
+
+חלק מהמשתמשים אינם יכולים להשתמש בעכבר או משטח מגע, אלא מסתמכים על אינטראקציות עם המקלדת כדי לעבור מאלמנט אחד למשנהו. חשוב שהאתר שלכם יציג את התוכן שלכם בסדר הגיוני כך שמשתמש מקלדת יוכל לגשת לכל אלמנט אינטראקטיבי כשהוא עובר למטה במסמך. אם תבנו את דפי האינטרנט שלכם עם סימון סמנטי ותשתמשו ב-CSS לעיצוב הפריסה החזותית שלהם, האתר שלכם אמור להיות ניתן לניווט באמצעות מקלדת, אך חשוב לבדוק זאת ידנית. למדו עוד על [אסטרטגיות ניווט באמצעות מקלדת](https://webaim.org/techniques/keyboard/).
+
+✅ גשו לכל אתר אינטרנט ונסו לנווט בו באמצעות המקלדת בלבד. מה עובד, מה לא עובד? מדוע?
+
+## סיכום
+
+אינטרנט שנגיש לחלק מהמשתמשים בלבד אינו באמת 'רשת עולמית'. הדרך הטובה ביותר להבטיח שהאתרים שאתם יוצרים יהיו נגישים היא לשלב את עקרונות הנגישות הטובים ביותר מההתחלה. למרות שישנם צעדים נוספים, שילוב המיומנויות הללו בתהליך העבודה שלכם עכשיו יבטיח שכל הדפים שתיצרו יהיו נגישים.
+
+---
+
+## 🚀 אתגר
+
+קחו את ה-HTML הזה ושכתבו אותו כך שיהיה נגיש ככל האפשר, בהתבסס על האסטרטגיות שלמדתם.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## חידון לאחר ההרצאה
+[חידון לאחר ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## סקירה ולימוד עצמי
+לממשלות רבות יש חוקים הנוגעים לדרישות נגישות. קראו על חוקי הנגישות במדינתכם. מה נכלל בהם ומה לא? דוגמה לכך היא [אתר ממשלתי זה](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/he/1-getting-started-lessons/3-accessibility/assignment.md b/translations/he/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..ca71ed21
--- /dev/null
+++ b/translations/he/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,30 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-27T20:37:23+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "he"
+}
+-->
+# ניתוח אתר שאינו נגיש
+
+## הוראות
+
+זהו אתר שלדעתכם אינו נגיש וצרו תוכנית פעולה לשיפור הנגישות שלו.  
+המשימה הראשונה שלכם תהיה לזהות את האתר, לפרט את הדרכים שבהן לדעתכם הוא אינו נגיש מבלי להשתמש בכלים אנליטיים, ולאחר מכן להגיש אותו לניתוח באמצעות 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/he/1-getting-started-lessons/README.md b/translations/he/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..744b66bf
--- /dev/null
+++ b/translations/he/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-27T20:31:18+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "he"
+}
+-->
+# התחלת עבודה עם פיתוח אתרים
+
+בחלק זה של התוכנית, תיחשפו למושגים שאינם מבוססי פרויקטים, אך חשובים כדי להפוך למפתחים מקצועיים.
+
+### נושאים
+
+1. [מבוא לשפות תכנות וכלי עבודה](1-intro-to-programming-languages/README.md)  
+2. [מבוא ל-GitHub](2-github-basics/README.md)  
+3. [יסודות הנגישות](3-accessibility/README.md)  
+
+### קרדיטים
+
+מבוא לשפות תכנות וכלי עבודה נכתב באהבה על ידי [Jasmine Greenaway](https://twitter.com/paladique)  
+
+מבוא ל-GitHub נכתב באהבה על ידי [Floor Drees](https://twitter.com/floordrees)  
+
+יסודות הנגישות נכתב באהבה על ידי [Christopher Harrison](https://twitter.com/geektrainer)  
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/2-js-basics/1-data-types/README.md b/translations/he/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..43a46da3
--- /dev/null
+++ b/translations/he/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-27T20:19:00+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "he"
+}
+-->
+# יסודות JavaScript: סוגי נתונים
+
+![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.he.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)!
+
+[![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")
+
+> 🎥 לחצו על התמונות למעלה לצפייה בסרטונים על משתנים וסוגי נתונים
+
+בואו נתחיל עם משתנים וסוגי הנתונים שמאכלסים אותם!
+
+## משתנים
+
+משתנים מאחסנים ערכים שניתן להשתמש בהם ולשנותם לאורך הקוד שלכם.
+
+יצירה ו**הצהרה** על משתנה נעשית באמצעות התחביר הבא **[keyword] [name]**. זה מורכב משני חלקים:
+
+- **מילת מפתח**. מילת המפתח יכולה להיות `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`?
+
+**תבניות מחרוזת** הן דרך נוספת לעצב מחרוזות, אך במקום גרשיים משתמשים ב-backtick. כל דבר שאינו טקסט רגיל חייב להיות ממוקם בתוך תבניות `${ }`. זה כולל כל משתנה שעשוי להיות מחרוזת.
+
+```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`
+
+✅ משתנה יכול להיחשב 'אמתי' אם הוא מוערך כ-bool `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/he/2-js-basics/1-data-types/assignment.md b/translations/he/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..9b7f90d4
--- /dev/null
+++ b/translations/he/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-27T20:19:42+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "he"
+}
+-->
+# תרגול סוגי נתונים
+
+## הוראות
+
+דמיינו שאתם בונים עגלת קניות. כתבו תיעוד על סוגי הנתונים שתצטרכו כדי להשלים את חוויית הקנייה. כיצד הגעתם לבחירות שלכם?
+
+## קריטריונים להערכה
+
+קריטריון | מצוין | מספק | דורש שיפור
+--- | --- | --- | --- |
+||ששת סוגי הנתונים מפורטים ונחקרים לעומק, כולל תיעוד השימוש בהם|ארבעה סוגי נתונים נחקרים|שני סוגי נתונים נחקרים|
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/2-js-basics/2-functions-methods/README.md b/translations/he/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..e9bb12b8
--- /dev/null
+++ b/translations/he/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-27T20:15:10+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "he"
+}
+-->
+# יסודות JavaScript: מתודות ופונקציות
+
+![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.he.png)
+> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## חידון לפני ההרצאה
+[חידון לפני ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+כשאנחנו חושבים על כתיבת קוד, אנחנו תמיד רוצים לוודא שהקוד שלנו קריא. למרות שזה נשמע מנוגד לאינטואיציה, קוד נקרא הרבה יותר פעמים מאשר נכתב. אחד הכלים המרכזיים בארגז הכלים של מפתח להבטחת קוד שניתן לתחזוקה הוא **פונקציה**.
+
+[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
+
+> 🎥 לחצו על התמונה למעלה לצפייה בסרטון על מתודות ופונקציות.
+
+> ניתן ללמוד את השיעור הזה גם ב-[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"
+```
+
+## ערכי החזרה
+
+עד כה, הפונקציות שיצרנו תמיד פלטו ל-[console](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/he/2-js-basics/2-functions-methods/assignment.md b/translations/he/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..53a4a5ba
--- /dev/null
+++ b/translations/he/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-27T20:15:52+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "he"
+}
+-->
+# כיף עם פונקציות
+
+## הוראות
+
+צרו פונקציות שונות, גם פונקציות שמחזירות ערך וגם פונקציות שלא מחזירות כלום.
+
+נסו ליצור פונקציה שמשלבת פרמטרים ופרמטרים עם ערכי ברירת מחדל.
+
+## קריטריונים
+
+| קריטריון | מצטיין                                                                                  | מספק                                                          | דורש שיפור       |
+| --------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ---------------- |
+|           | הפתרון כולל שתי פונקציות או יותר שמתפקדות היטב עם פרמטרים מגוונים                      | הפתרון כולל פונקציה אחת שעובדת עם מספר פרמטרים                | הפתרון מכיל באגים |
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/2-js-basics/3-making-decisions/README.md b/translations/he/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..e2c8ddae
--- /dev/null
+++ b/translations/he/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-27T20:13:26+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "he"
+}
+-->
+# יסודות JavaScript: קבלת החלטות
+
+![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.he.png)
+
+> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## חידון לפני ההרצאה
+
+[חידון לפני ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+קבלת החלטות ושליטה בסדר שבו הקוד שלך רץ הופכים את הקוד שלך לשימושי ועמיד יותר. חלק זה מכסה את התחביר לשליטה בזרימת הנתונים ב-JavaScript ואת החשיבות שלו בשימוש עם סוגי נתונים בוליאניים.
+
+[![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)!
+
+## סקירה קצרה על בוליאנים
+
+בוליאנים יכולים לקבל רק שני ערכים: `true` או `false`. בוליאנים עוזרים להחליט אילו שורות קוד ירוצו כאשר תנאים מסוימים מתקיימים.
+
+ניתן להגדיר בוליאן כ-true או false כך:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ בוליאנים נקראים על שמו של המתמטיקאי, הפילוסוף והלוגיקן האנגלי ג'ורג' בול (1815–1864).
+
+## אופרטורים להשוואה ובוליאנים
+
+אופרטורים משמשים להערכת תנאים על ידי ביצוע השוואות שיוצרות ערך בוליאני. להלן רשימה של אופרטורים נפוצים.
+
+| סימן  | תיאור                                                                                                                                                   | דוגמה              |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **קטן מ-**: משווה בין שני ערכים ומחזיר את הערך הבוליאני `true` אם הערך בצד שמאל קטן מהערך בצד ימין                                                     | `5 < 6 // true`    |
+| `<=`   | **קטן או שווה ל-**: משווה בין שני ערכים ומחזיר את הערך הבוליאני `true` אם הערך בצד שמאל קטן או שווה לערך בצד ימין                                       | `5 <= 6 // true`   |
+| `>`    | **גדול מ-**: משווה בין שני ערכים ומחזיר את הערך הבוליאני `true` אם הערך בצד שמאל גדול מהערך בצד ימין                                                    | `5 > 6 // false`   |
+| `>=`   | **גדול או שווה ל-**: משווה בין שני ערכים ומחזיר את הערך הבוליאני `true` אם הערך בצד שמאל גדול או שווה לערך בצד ימין                                     | `5 >= 6 // false`  |
+| `===`  | **שוויון מוחלט**: משווה בין שני ערכים ומחזיר את הערך הבוליאני `true` אם הערכים בצד ימין ובצד שמאל שווים וגם מאותו סוג נתונים                            | `5 === 6 // false` |
+| `!==`  | **אי-שוויון**: משווה בין שני ערכים ומחזיר את הערך הבוליאני ההפוך למה שאופרטור השוויון המוחלט היה מחזיר                                                  | `5 !== 6 // true`  |
+
+✅ בדוק את הידע שלך על ידי כתיבת השוואות בקונסול של הדפדפן שלך. האם יש נתונים שהחזירו תוצאה שהפתיעה אותך?
+
+## משפט If
+
+משפט if יריץ את הקוד שבתוך הבלוקים שלו אם התנאי מתקיים.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+אופרטורים לוגיים משמשים לעיתים קרובות ליצירת התנאי.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+}
+```
+
+## משפט If..Else
+
+משפט `else` יריץ את הקוד שבתוך הבלוקים שלו כאשר התנאי אינו מתקיים. הוא אופציונלי עם משפט `if`.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is false. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+✅ בדוק את הבנתך על הקוד הזה ועל הקוד הבא על ידי הרצתם בקונסול של הדפדפן. שנה את הערכים של המשתנים currentMoney ו-laptopPrice כדי לשנות את הפלט של `console.log()`.
+
+## משפט Switch
+
+משפט `switch` משמש לביצוע פעולות שונות בהתבסס על תנאים שונים. השתמש ב-`switch` כדי לבחור אחד מתוך מספר בלוקים של קוד לביצוע.
+
+```javascript
+switch (expression) {
+  case x:
+    // code block
+    break;
+  case y:
+    // code block
+    break;
+  default:
+  // code block
+}
+```
+
+```javascript
+// program using switch statement
+let a = 2;
+
+switch (a) {
+  case 1:
+    a = "one";
+    break;
+  case 2:
+    a = "two";
+    break;
+  default:
+    a = "not found";
+    break;
+}
+console.log(`The value is ${a}`);
+```
+
+✅ בדוק את הבנתך על הקוד הזה ועל הקוד הבא על ידי הרצתם בקונסול של הדפדפן. שנה את הערכים של המשתנה a כדי לשנות את הפלט של `console.log()`.
+
+## אופרטורים לוגיים ובוליאנים
+
+החלטות עשויות לדרוש יותר מהשוואה אחת, וניתן לשלב אותן יחד עם אופרטורים לוגיים כדי להפיק ערך בוליאני.
+
+| סימן  | תיאור                                                                                     | דוגמה                                                                 |
+| ------ | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `&&`   | **וגם לוגי**: משווה בין שני ביטויים בוליאניים. מחזיר true **רק** אם שני הצדדים הם true | `(5 > 6) && (5 < 6 ) // צד אחד false, צד שני true. מחזיר false`      |
+| `\|\|` | **או לוגי**: משווה בין שני ביטויים בוליאניים. מחזיר true אם לפחות צד אחד הוא true       | `(5 > 6) \|\| (5 < 6) // צד אחד false, צד שני true. מחזיר true`      |
+| `!`    | **לא לוגי**: מחזיר את הערך ההפוך של ביטוי בוליאני                                       | `!(5 > 6) // 5 אינו גדול מ-6, אבל "!" יחזיר true`                    |
+
+## תנאים והחלטות עם אופרטורים לוגיים
+
+ניתן להשתמש באופרטורים לוגיים ליצירת תנאים במשפטי if..else.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is true. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+### אופרטור שלילה
+
+ראית עד כה כיצד ניתן להשתמש במשפט `if...else` ליצירת לוגיקה מותנית. כל מה שנכנס ל-`if` צריך להעריך ל-true/false. על ידי שימוש באופרטור `!` ניתן **להפוך** את הביטוי. זה ייראה כך:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### ביטויים טרנריים
+
+`if...else` אינו הדרך היחידה לבטא לוגיקת החלטות. ניתן גם להשתמש במה שנקרא אופרטור טרנרי. התחביר שלו נראה כך:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+להלן דוגמה מוחשית יותר:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ קח דקה לקרוא את הקוד הזה כמה פעמים. האם אתה מבין כיצד האופרטורים עובדים?
+
+הקוד למעלה אומר:
+
+- אם `firstNumber` גדול מ-`secondNumber`
+- אז יש להקצות את `firstNumber` ל-`biggestNumber`
+- אחרת יש להקצות את `secondNumber`.
+
+הביטוי הטרנרי הוא פשוט דרך מקוצרת לכתיבת הקוד הבא:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 אתגר
+
+צור תוכנית שנכתבת תחילה עם אופרטורים לוגיים, ולאחר מכן כתוב אותה מחדש באמצעות ביטוי טרנרי. מה התחביר המועדף עליך?
+
+---
+
+## חידון לאחר ההרצאה
+
+[חידון לאחר ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## סקירה ולימוד עצמי
+
+קרא עוד על האופרטורים הרבים הזמינים למשתמש [ב-MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+עבור על הכלי הנהדר של ג'וש קומו [operator lookup](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/he/2-js-basics/3-making-decisions/assignment.md b/translations/he/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..cf3ae6c0
--- /dev/null
+++ b/translations/he/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-27T20:14:08+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "he"
+}
+-->
+# אופרטורים
+
+## הוראות
+
+התנסו עם אופרטורים. הנה הצעה לתוכנית שתוכלו ליישם:
+
+יש לכם קבוצת תלמידים משני מערכות דירוג שונות.
+
+### מערכת דירוג ראשונה
+
+מערכת דירוג אחת מוגדרת כציונים בין 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/he/2-js-basics/4-arrays-loops/README.md b/translations/he/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..a492560c
--- /dev/null
+++ b/translations/he/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-27T20:16:42+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "he"
+}
+-->
+# יסודות JavaScript: מערכים ולולאות
+
+![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.he.png)  
+> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## חידון לפני השיעור  
+[חידון לפני השיעור](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+השיעור הזה עוסק ביסודות של JavaScript, השפה שמוסיפה אינטראקטיביות לאינטרנט. בשיעור זה תלמדו על מערכים ולולאות, המשמשים לעיבוד נתונים.
+
+[![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")  
+
+> 🎥 לחצו על התמונות למעלה לצפייה בסרטונים על מערכים ולולאות.
+
+> ניתן ללמוד את השיעור הזה גם ב-[Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## מערכים
+
+עבודה עם נתונים היא משימה נפוצה בכל שפה, והיא הופכת לקלה יותר כאשר הנתונים מאורגנים במבנה כמו מערכים. במערכים, הנתונים נשמרים במבנה דמוי רשימה. אחד היתרונות הגדולים של מערכים הוא שניתן לשמור בהם סוגי נתונים שונים.
+
+✅ מערכים נמצאים סביבנו כל הזמן! האם תוכלו לחשוב על דוגמה מהחיים האמיתיים למערך, כמו מערך של לוחות סולאריים?
+
+התחביר של מערך הוא זוג סוגריים מרובעים.
+
+```javascript
+let myArray = [];
+```
+
+זהו מערך ריק, אך ניתן להכריז על מערכים שכבר מכילים נתונים. ערכים מרובים במערך מופרדים באמצעות פסיק.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+לערכי המערך מוקצה ערך ייחודי שנקרא **אינדקס**, מספר שלם שמוקצה לפי המרחק שלו מתחילת המערך. בדוגמה למעלה, למחרוזת "Chocolate" יש אינדקס 0, ולאינדקס של "Rocky Road" יש ערך 4. ניתן להשתמש באינדקס עם סוגריים מרובעים כדי לשלוף, לשנות או להוסיף ערכים למערך.
+
+✅ האם מפתיע אתכם שמערכים מתחילים באינדקס אפס? בשפות תכנות מסוימות, אינדקסים מתחילים ב-1. יש לכך היסטוריה מעניינת, עליה תוכלו [לקרוא בוויקיפדיה](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+ניתן להשתמש באינדקס כדי לשנות ערך, כך:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+ואפשר להוסיף ערך חדש באינדקס מסוים כך:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ דרך נפוצה יותר להוסיף ערכים למערך היא באמצעות אופרטורים כמו array.push()
+
+כדי לגלות כמה פריטים יש במערך, השתמשו במאפיין `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ נסו בעצמכם! השתמשו בקונסול של הדפדפן כדי ליצור ולשנות מערך משלכם.
+
+## לולאות
+
+לולאות מאפשרות לנו לבצע משימות חוזרות או **איטרטיביות**, ויכולות לחסוך הרבה זמן וקוד. כל איטרציה יכולה להשתנות במשתנים, ערכים ותנאים. ישנם סוגים שונים של לולאות ב-JavaScript, ולכולן הבדלים קטנים, אך ביסודו של דבר הן עושות את אותו הדבר: עוברות על נתונים.
+
+### לולאת For
+
+לולאת `for` דורשת 3 חלקים כדי לבצע איטרציה:  
+- `counter` משתנה שמתחיל בדרך כלל במספר שסופר את מספר האיטרציות  
+- `condition` ביטוי שמשתמש באופרטורים להשוואה כדי לגרום ללולאה להפסיק כאשר הוא `false`  
+- `iteration-expression` רץ בסוף כל איטרציה, ומשמש בדרך כלל לשינוי ערך ה-counter  
+
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ הריצו את הקוד הזה בקונסול של הדפדפן. מה קורה כשאתם מבצעים שינויים קטנים ב-counter, בתנאי או בביטוי האיטרציה? האם תוכלו לגרום ללולאה לרוץ אחורה, וליצור ספירה לאחור?
+
+### לולאת While
+
+בניגוד לתחביר של לולאת `for`, לולאות `while` דורשות רק תנאי שיגרום ללולאה להפסיק כאשר התנאי הופך ל-`false`. תנאים בלולאות בדרך כלל תלויים בערכים אחרים כמו counters, ויש לנהל אותם במהלך הלולאה. ערכי התחלה ל-counters חייבים להיווצר מחוץ ללולאה, וכל ביטוי שעונה על תנאי, כולל שינוי ה-counter, חייב להתבצע בתוך הלולאה.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ מדוע תבחרו בלולאת for לעומת לולאת while? 17,000 צופים שאלו את אותה שאלה ב-StackOverflow, וחלק מהדעות [עשויות לעניין אתכם](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## לולאות ומערכים
+
+מערכים משמשים לעיתים קרובות עם לולאות מכיוון שרוב התנאים דורשים את אורך המערך כדי להפסיק את הלולאה, והאינדקס יכול לשמש גם כערך ה-counter.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} //Ends when all flavors are printed
+```
+
+✅ נסו להתנסות בלולאה על מערך משלכם בקונסול של הדפדפן.
+
+---
+
+## 🚀 אתגר
+
+ישנן דרכים נוספות לעבור על מערכים מלבד לולאות 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/he/2-js-basics/4-arrays-loops/assignment.md b/translations/he/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..6160b0f4
--- /dev/null
+++ b/translations/he/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-27T20:17:15+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "he"
+}
+-->
+# לולאה על מערך
+
+## הוראות
+
+צרו תוכנית שמציגה כל מספר שלישי בין 1-20 ומדפיסה אותו לקונסול.
+
+> TIP: השתמשו בלולאת for ושנו את ביטוי האיטרציה
+
+## קריטריונים
+
+| קריטריון | מצטיין                                | מספק                     | דורש שיפור                     |
+| -------- | ------------------------------------- | ------------------------ | ------------------------------ |
+|          | התוכנית פועלת כראוי ומכילה הערות      | התוכנית אינה מכילה הערות | התוכנית אינה שלמה או מכילה באגים |
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי מתרגם אנושי. איננו נושאים באחריות לאי-הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/2-js-basics/README.md b/translations/he/2-js-basics/README.md
new file mode 100644
index 00000000..534a335a
--- /dev/null
+++ b/translations/he/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-27T20:12:38+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "he"
+}
+-->
+# מבוא ל-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/he/3-terrarium/1-intro-to-html/README.md b/translations/he/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..ab0d08bc
--- /dev/null
+++ b/translations/he/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,249 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-27T20:06:15+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "he"
+}
+-->
+# פרויקט טרריום חלק 1: מבוא ל-HTML
+
+![מבוא ל-HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.he.png)
+> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## שאלון לפני השיעור
+
+[שאלון לפני השיעור](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+> צפו בסרטון
+
+> 
+> [![סרטון יסודות Git ו-GitHub](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### מבוא
+
+HTML, או HyperText Markup Language, הוא ה'שלד' של האינטרנט. אם CSS 'מלביש' את ה-HTML שלכם ו-JavaScript מעניק לו חיים, אז HTML הוא הגוף של אפליקציית האינטרנט שלכם. התחביר של HTML אפילו משקף את הרעיון הזה, שכן הוא כולל תגיות כמו "head", "body" ו-"footer".
+
+בשיעור הזה, נשתמש ב-HTML כדי לעצב את 'השלד' של ממשק הטרריום הווירטואלי שלנו. הוא יכלול כותרת ושלושה עמודות: עמודה ימנית ושמאלית שבהן יהיו הצמחים הניתנים לגרירה, ואזור מרכזי שיהיה הטרריום שנראה כמו זכוכית. בסוף השיעור הזה, תוכלו לראות את הצמחים בעמודות, אך הממשק ייראה קצת מוזר; אל דאגה, בחלק הבא נוסיף סגנונות CSS לממשק כדי לשפר את המראה שלו.
+
+### משימה
+
+במחשב שלכם, צרו תיקייה בשם 'terrarium' ובתוכה קובץ בשם 'index.html'. תוכלו לעשות זאת ב-Visual Studio Code לאחר יצירת תיקיית הטרריום על ידי פתיחת חלון חדש ב-VS Code, לחיצה על 'open folder' וניווט לתיקייה החדשה שלכם. לחצו על כפתור 'file' הקטן בפאנל ה-Explorer וצרו את הקובץ החדש:
+
+![Explorer ב-VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.he.png)
+
+או
+
+השתמשו בפקודות הבאות ב-git bash:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` או `nano index.html`
+
+> קבצי index.html מציינים לדפדפן שזהו הקובץ ברירת המחדל בתיקייה; כתובות URL כמו `https://anysite.com/test` עשויות להיבנות באמצעות מבנה תיקיות הכולל תיקייה בשם `test` עם `index.html` בתוכה; `index.html` לא חייב להופיע בכתובת ה-URL.
+
+---
+
+## ה-DocType ותגיות html
+
+השורה הראשונה בקובץ HTML היא ה-doctype שלו. זה קצת מפתיע שצריך לכלול את השורה הזו בראש הקובץ, אבל היא אומרת לדפדפנים ישנים שעליהם להציג את הדף במצב סטנדרטי, בהתאם למפרט הנוכחי של HTML.
+
+> טיפ: ב-VS Code, תוכלו לרחף מעל תג ולקבל מידע על השימוש בו ממדריכי MDN Reference.
+
+השורה השנייה צריכה להיות תג הפתיחה `<html>`, ואחריה תג הסגירה `</html>`. תגיות אלו הן האלמנטים השורשיים של הממשק שלכם.
+
+### משימה
+
+הוסיפו את השורות הללו בראש קובץ `index.html` שלכם:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ ישנם כמה מצבים שונים שניתן לקבוע באמצעות הגדרת ה-DocType עם מחרוזת שאילתה: [מצב Quirks ומצב Standards](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). במקרה שלנו, אנו אומרים לשרת האינטרנט שאליו הדף הזה יישלח כדי להיות מוצג, את ארבעת הדברים הבאים:
+
+-   הכותרת של הדף
+-   מטא-נתונים של הדף כולל:
+    -   'ערכת תווים', שמספרת על קידוד התווים המשמש בדף
+    -   מידע על הדפדפן, כולל `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>
+```
+
+> הערה: Spans לעומת Divs. Divs נחשבים לאלמנטים 'בלוק', ו-Spans הם 'אינליין'. מה יקרה אם תשנו את ה-divs ל-spans?
+
+עם הסימון הזה, הצמחים עכשיו מופיעים על המסך. זה נראה די רע, מכיוון שהם עדיין לא מעוצבים באמצעות CSS, ונעשה זאת בשיעור הבא.
+
+לכל תמונה יש טקסט חלופי שיופיע גם אם לא ניתן לראות או להציג תמונה. זהו מאפיין חשוב לכלול לצורך נגישות. למדו עוד על נגישות בשיעורים עתידיים; לעת עתה, זכרו שמאפיין alt מספק מידע חלופי לתמונה אם משתמש מסיבה כלשהי אינו יכול לצפות בה (בגלל חיבור איטי, שגיאה במאפיין src, או אם המשתמש משתמש בקורא מסך).
+
+✅ האם שמתם לב שלכל תמונה יש את אותו טקסט חלופי? האם זו פרקטיקה טובה? מדוע כן או לא? האם תוכלו לשפר את הקוד הזה?
+
+---
+
+## סימון סמנטי
+
+באופן כללי, עדיף להשתמש ב'סמנטיקה' משמעותית בעת כתיבת 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/he/3-terrarium/1-intro-to-html/assignment.md b/translations/he/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..317c5e3f
--- /dev/null
+++ b/translations/he/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-27T20:06:56+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "he"
+}
+-->
+# תרגלו את ה-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/he/3-terrarium/2-intro-to-css/README.md b/translations/he/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..6633e753
--- /dev/null
+++ b/translations/he/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-27T20:11:06+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "he"
+}
+-->
+# פרויקט הטרריום חלק 2: מבוא ל-CSS
+
+![מבוא ל-CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.he.png)
+> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## חידון לפני ההרצאה
+
+[חידון לפני ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### מבוא
+
+CSS, או Cascading Style Sheets, פותר בעיה חשובה בפיתוח אתרים: איך לגרום לאתר שלך להיראות טוב. עיצוב האפליקציות שלך הופך אותן לשימושיות ונעימות יותר למראה; ניתן גם להשתמש ב-CSS ליצירת עיצוב רספונסיבי (Responsive Web Design - RWD) - כך שהאפליקציות שלך ייראו טוב בכל גודל מסך שבו הן מוצגות. CSS אינו עוסק רק בשיפור המראה של האפליקציה שלך; המפרט שלו כולל גם אנימציות ושינויים שיכולים לאפשר אינטראקציות מתקדמות באפליקציות שלך. קבוצת העבודה של CSS מסייעת בתחזוקת המפרטים הנוכחיים של CSS; ניתן לעקוב אחר עבודתם באתר [World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
+
+> שים לב, CSS היא שפה שמתפתחת, כמו כל דבר באינטרנט, ולא כל הדפדפנים תומכים בחלקים החדשים של המפרט. תמיד בדוק את היישומים שלך באמצעות [CanIUse.com](https://caniuse.com).
+
+בשיעור זה, נוסיף עיצובים לטרריום המקוון שלנו ונלמד יותר על מספר מושגים ב-CSS: הקסקדה, ירושה, שימוש בבוחרים (selectors), מיקום ושימוש ב-CSS לבניית פריסות. במהלך התהליך נפרוס את הטרריום וניצור את הטרריום עצמו.
+
+### דרישות מקדימות
+
+עליך לבנות את ה-HTML של הטרריום שלך ולהכין אותו לעיצוב.
+
+> צפה בסרטון
+
+> 
+> [![Git and GitHub basics video](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### משימה
+
+בתיקיית הטרריום שלך, צור קובץ חדש בשם `style.css`. ייבא את הקובץ הזה בתוך החלק `<head>`:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## הקסקדה
+
+Cascading Style Sheets משלבות את הרעיון שהעיצובים 'נשפכים' כך שיישום של עיצוב מונחה לפי סדר העדיפות שלו. עיצובים שנקבעו על ידי מחבר האתר מקבלים עדיפות על פני אלו שנקבעו על ידי הדפדפן. עיצובים שנקבעו 'inline' מקבלים עדיפות על פני אלו שנקבעו בקובץ עיצוב חיצוני.
+
+### משימה
+
+הוסף את העיצוב inline "color: red" לתג `<h1>` שלך:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+לאחר מכן, הוסף את הקוד הבא לקובץ `style.css` שלך:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ איזה צבע מוצג באפליקציה שלך? מדוע? האם תוכל למצוא דרך לעקוף עיצובים? מתי תרצה לעשות זאת, או מדוע לא?
+
+---
+
+## ירושה
+
+עיצובים מועברים מסגנון של אב לסגנון של צאצא, כך שאלמנטים מקוננים יורשים את העיצובים של ההורים שלהם.
+
+### משימה
+
+הגדר את הגופן של ה-body לגופן מסוים, ובדוק אם אלמנט מקונן יורש את הגופן:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+פתח את הקונסולה של הדפדפן בלשונית 'Elements' וצפה בגופן של ה-H1. הוא יורש את הגופן מה-body, כפי שמצוין בדפדפן:
+
+![גופן בירושה](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.he.png)
+
+✅ האם תוכל לגרום לסגנון מקונן לרשת תכונה שונה?
+
+---
+
+## בוחרי CSS
+
+### תגיות
+
+עד כה, בקובץ `style.css` שלך יש רק כמה תגיות מעוצבות, והאפליקציה נראית די מוזרה:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+דרך זו של עיצוב תגית נותנת לך שליטה על אלמנטים ייחודיים, אך עליך לשלוט בעיצובים של צמחים רבים בטרריום שלך. כדי לעשות זאת, עליך להשתמש בבוחרי CSS.
+
+### מזהים (Ids)
+
+הוסף עיצוב לפריסת המכולות השמאלית והימנית. מכיוון שיש רק מכולה שמאלית אחת ורק מכולה ימנית אחת, הן קיבלו מזהים ב-HTML. כדי לעצב אותן, השתמש ב-`#`:
+
+```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); האם תוכל למצוא דרך טובה יותר לעצב את המזהים הללו, אולי עם מזהה ומחלקה? תצטרך לשנות את ה-HTML ולבצע רפקטור ל-CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### מחלקות (Classes)
+
+בדוגמה לעיל, עיצבת שני אלמנטים ייחודיים על המסך. אם ברצונך שעיצובים יחולו על אלמנטים רבים על המסך, תוכל להשתמש במחלקות 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!
+
+ראשית, עצב את הילדים של ה-div `.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.he.png)
+
+כדי להשלים את החידון לאחר ההרצאה, עבור על מודול הלמידה הזה: [עצב את אפליקציית ה-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/he/3-terrarium/2-intro-to-css/assignment.md b/translations/he/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..7e86079a
--- /dev/null
+++ b/translations/he/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-27T20:11:53+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "he"
+}
+-->
+# עיצוב מחדש של 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/he/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/he/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..9a8814cc
--- /dev/null
+++ b/translations/he/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -0,0 +1,235 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "30f8903a1f290e3d438dc2c70fe60259",
+  "translation_date": "2025-08-27T20:08:59+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "he"
+}
+-->
+# פרויקט הטרריום חלק 3: מניפולציה על ה-DOM וסגירה
+
+![DOM וסגירה](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.he.png)  
+> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## חידון לפני השיעור
+
+[חידון לפני השיעור](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### מבוא
+
+מניפולציה על ה-DOM, או "מודל אובייקט המסמך", היא היבט מרכזי בפיתוח אתרים. לפי [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "מודל אובייקט המסמך (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.he.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 שלו אלמנט עם מזהה מסוים. זוכרים שבשיעור הראשון על HTML נתתם מזהים ייחודיים לכל תמונת צמח (`id="plant1"`)? עכשיו תשתמשו במאמץ הזה. לאחר זיהוי כל אלמנט, אתם מעבירים את הפריט הזה לפונקציה בשם `dragElement` שתבנו בעוד רגע. כך האלמנט ב-HTML הופך לגריר, או יהפוך לגריר בקרוב.
+
+✅ מדוע אנו מתייחסים לאלמנטים לפי מזהה? מדוע לא לפי מחלקת ה-CSS שלהם? ייתכן שתפנו לשיעור הקודם על CSS כדי לענות על שאלה זו.
+
+---
+
+## הסגירה
+
+עכשיו אתם מוכנים ליצור את סגירת `dragElement`, שהיא פונקציה חיצונית שמכילה פונקציה או פונקציות פנימיות (במקרה שלנו יהיו שלוש).
+
+סגירות שימושיות כאשר פונקציה אחת או יותר צריכות לגשת לטווח של פונקציה חיצונית. הנה דוגמה:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+בדוגמה זו, הפונקציה `displayCandy` עוטפת פונקציה שמוסיפה סוג ממתק חדש למערך שכבר קיים בפונקציה. אם תריצו את הקוד הזה, המערך `candy` יהיה לא מוגדר, מכיוון שהוא משתנה מקומי (מקומי לסגירה).
+
+✅ איך תוכלו להפוך את המערך `candy` לנגיש? נסו להזיז אותו מחוץ לסגירה. כך המערך יהפוך לגלובלי, במקום להישאר זמין רק לטווח המקומי של הסגירה.
+
+### משימה
+
+מתחת להצהרות האלמנטים ב-`script.js`, צרו פונקציה:
+
+```javascript
+function dragElement(terrariumElement) {
+	//set 4 positions for positioning on the screen
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+`dragElement` מקבל את האובייקט `terrariumElement` מההצהרות שבתחילת הסקריפט. לאחר מכן, אתם מגדירים כמה מיקומים מקומיים כ-`0` עבור האובייקט שמועבר לפונקציה. אלו הם המשתנים המקומיים שיתבצעו עליהם מניפולציות עבור כל אלמנט כאשר תוסיפו פונקציונליות גרירה ושחרור בתוך הסגירה לכל אלמנט. הטרריום יתמלא על ידי האלמנטים הנגררים הללו, ולכן האפליקציה צריכה לעקוב אחר מיקומם.
+
+בנוסף, האלמנט `terrariumElement` שמועבר לפונקציה מוקצה לאירוע `pointerdown`, שהוא חלק מ-[web APIs](https://developer.mozilla.org/docs/Web/API) שנועדו לעזור בניהול ה-DOM. `onpointerdown` מופעל כאשר לוחצים על כפתור, או במקרה שלנו, נוגעים באלמנט שניתן לגרור. מנהל האירועים הזה עובד גם בדפדפני אינטרנט וגם בדפדפנים ניידים, עם כמה יוצאים מן הכלל.
+
+✅ ל-[מנהל האירועים `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`, תוך חישוב הקואורדינטות העליונות והשמאליות של הצמח בהתבסס על השוואת ההיסט שלו עם המיקומים החדשים הללו.
+
+> `offsetTop` ו-`offsetLeft` הם מאפייני CSS שמגדירים את מיקום האלמנט בהתבסס על זה של ההורה שלו; ההורה יכול להיות כל אלמנט שאינו ממוקם כ-`static`.
+
+כל החישוב מחדש הזה של המיקום מאפשר לכם לכוונן את התנהגות הטרריום והצמחים שבו.
+
+### משימה
+
+המשימה האחרונה להשלמת הממשק היא להוסיף את הפונקציה `stopElementDrag` לאחר הסוגר המסיים של `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+הפונקציה הקטנה הזו מאפסת את האירועים `onpointerup` ו-`onpointermove` כך שתוכלו להתחיל מחדש את התקדמות הצמח על ידי התחלת גרירתו שוב, או להתחיל לגרור צמח חדש.
+
+✅ מה קורה אם לא תגדירו את האירועים הללו כ-null?
+
+עכשיו השלמתם את הפרויקט שלכם!
+
+🥇ברכות! סיימתם את הטרריום היפה שלכם. ![טרריום סופי](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.he.png)
+
+---
+
+## 🚀אתגר
+
+הוסיפו מנהל אירועים חדש לסגירה שלכם כדי לעשות משהו נוסף לצמחים; לדוגמה, לחיצה כפולה על צמח כדי להביא אותו לקדמת המסך. היו יצירתיים!
+
+## חידון לאחר השיעור
+
+[חידון לאחר השיעור](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## סקירה ולימוד עצמי
+
+למרות שגרירת אלמנטים על המסך נראית טריוויאלית, ישנן דרכים רבות לעשות זאת והרבה מכשולים, תלוי באפקט שאתם מחפשים. למעשה, ישנו [API לגרירה ושחרור](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) שלם שתוכלו לנסות. לא השתמשנו בו במודול הזה מכיוון שהאפקט שרצינו היה שונה במקצת, אבל נסו את ה-API הזה בפרויקט משלכם וראו מה תוכלו להשיג.
+
+מצאו מידע נוסף על אירועי pointer ב-[מסמכי W3C](https://www.w3.org/TR/pointerevents1/) וב-[מסמכי MDN](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+תמיד בדקו את יכולות הדפדפן באמצעות [CanIUse.com](https://caniuse.com/).
+
+## משימה
+
+[עבדו עוד קצת עם ה-DOM](assignment.md)
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/he/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..1586b980
--- /dev/null
+++ b/translations/he/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-27T20:09:53+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "he"
+}
+-->
+# עבודה נוספת עם ה-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/he/3-terrarium/README.md b/translations/he/3-terrarium/README.md
new file mode 100644
index 00000000..706b90c5
--- /dev/null
+++ b/translations/he/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-27T20:05:01+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "he"
+}
+-->
+# הטרריום שלי: פרויקט ללמידת HTML, CSS ומניפולציה של DOM באמצעות JavaScript 🌵🌱
+
+תרגול קטן של גרירה ושחרור. עם מעט HTML, JS ו-CSS, תוכלו לבנות ממשק אינטרנטי, לעצב אותו ואפילו להוסיף אינטראקציות שונות לפי בחירתכם.
+
+![הטרריום שלי](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.he.png)
+
+# שיעורים
+
+1. [מבוא ל-HTML](./1-intro-to-html/README.md)  
+2. [מבוא ל-CSS](./2-intro-to-css/README.md)  
+3. [מבוא ל-DOM וסגירות ב-JS](./3-intro-to-DOM-and-closures/README.md)  
+
+## קרדיטים
+
+נכתב באהבה ♥️ על ידי [Jen Looper](https://www.twitter.com/jenlooper)  
+
+הטרריום שנוצר באמצעות CSS קיבל השראה מצנצנת הזכוכית של Jakub Mandra ב-[codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).  
+
+האיורים צוירו ביד על ידי [Jen Looper](http://jenlooper.com) בעזרת Procreate.  
+
+## פרסמו את הטרריום שלכם
+
+ניתן לפרסם את הטרריום שלכם באינטרנט באמצעות Azure Static Web Apps.  
+
+1. עשו Fork למאגר הזה  
+
+2. לחצו על הכפתור הזה  
+
+[![כפתור פרסום ל-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/he/3-terrarium/solution/README.md b/translations/he/3-terrarium/solution/README.md
new file mode 100644
index 00000000..5e90efc1
--- /dev/null
+++ b/translations/he/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-27T20:12:18+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "he"
+}
+-->
+# הטרריום שלי: פרויקט ללמידת HTML, CSS ומניפולציה של DOM באמצעות JavaScript 🌵🌱
+
+תרגול קטן של גרירה ושחרור. עם מעט HTML, JS ו-CSS, תוכלו לבנות ממשק אינטרנט, לעצב אותו ולהוסיף אינטראקציה.
+
+![הטרריום שלי](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.he.png)
+
+## קרדיטים
+
+נכתב באהבה ♥️ על ידי [Jen Looper](https://www.twitter.com/jenlooper)
+
+הטרריום שנוצר באמצעות CSS הושפע מהצנצנת הזכוכית של Jakub Mandra ב-[codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+האיורים צוירו ביד על ידי [Jen Looper](http://jenlooper.com) באמצעות Procreate.
+
+## פרסמו את הטרריום שלכם
+
+ניתן לפרסם את הטרריום שלכם באינטרנט באמצעות Azure Static Web Apps.
+
+1. עשו Fork למאגר הזה
+
+2. לחצו על הכפתור הזה
+
+[![כפתור פרסום ל-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 תיווצר במאגר שלכם לאחר ה-Fork, והיא תעזור לשירות הבנייה והפרסום של 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/he/4-typing-game/README.md b/translations/he/4-typing-game/README.md
new file mode 100644
index 00000000..bf1a8aff
--- /dev/null
+++ b/translations/he/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-27T21:07:44+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "he"
+}
+-->
+# תכנות מונחה אירועים - בניית משחק הקלדה
+
+## הקדמה
+
+הקלדה היא אחת המיומנויות הכי פחות מוערכות של מפתח. היכולת להעביר מחשבות במהירות מהראש לעורך מאפשרת ליצירתיות לזרום בחופשיות. אחת הדרכים הטובות ביותר ללמוד היא לשחק משחק!
+
+> אז, בואו נבנה משחק הקלדה!
+
+אתם הולכים להשתמש בכישורי JavaScript, HTML ו-CSS שפיתחתם עד כה כדי ליצור משחק הקלדה. המשחק יציג לשחקן ציטוט אקראי (אנחנו משתמשים בציטוטים של [שרלוק הולמס](https://en.wikipedia.org/wiki/Sherlock_Holmes)) וימדוד כמה זמן לוקח לשחקן להקליד אותו בצורה מדויקת. אתם הולכים להשתמש בכישורי JavaScript, HTML ו-CSS שפיתחתם עד כה כדי ליצור משחק הקלדה.
+
+![demo](../../../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/he/4-typing-game/solution/README.md b/translations/he/4-typing-game/solution/README.md
new file mode 100644
index 00000000..a2f3515a
--- /dev/null
+++ b/translations/he/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T21:07:59+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "he"
+}
+-->
+זהו טקסט זמני, הושאר ריק בכוונה
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/4-typing-game/typing-game/README.md b/translations/he/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..f5d069ad
--- /dev/null
+++ b/translations/he/4-typing-game/typing-game/README.md
@@ -0,0 +1,353 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-27T21:09:26+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "he"
+}
+-->
+# יצירת משחק באמצעות אירועים
+
+## שאלון לפני ההרצאה
+
+[שאלון לפני ההרצאה](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 שלנו. זה קצת כמו מתכון, שבו אנחנו צריכים כמה מרכיבים:
+
+- מקום להצגת הציטוט שהמשתמש צריך להקליד
+- מקום להצגת הודעות, כמו הודעת הצלחה
+- תיבת טקסט להקלדה
+- כפתור התחלה
+
+כל אחד מהם יזדקק ל-IDs כדי שנוכל לעבוד איתם ב-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). מאזין אירועים יאפשר לנו להאזין למשהו שמתרחש (אירוע) ולהפעיל קוד בתגובה. במקרה שלנו, אנחנו רוצים להפעיל קוד כשהמשתמש לוחץ על התחלה.
+
+כשמשתמש לוחץ על **start**, אנחנו צריכים לבחור ציטוט, להגדיר את ממשק המשתמש, ולהגדיר מעקב עבור המילה הנוכחית והזמן. להלן ה-JavaScript שתצטרכו להוסיף; נדון בו מיד לאחר קטע הקוד.
+
+```javascript
+// at the end of script.js
+document.getElementById('start').addEventListener('click', () => {
+  // get a quote
+  const quoteIndex = Math.floor(Math.random() * quotes.length);
+  const quote = quotes[quoteIndex];
+  // Put the quote into an array of words
+  words = quote.split(' ');
+  // reset the word index for tracking
+  wordIndex = 0;
+
+  // UI updates
+  // Create an array of span elements so we can set a class
+  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
+  // Convert into string and set as innerHTML on quote display
+  quoteElement.innerHTML = spanWords.join('');
+  // Highlight the first word
+  quoteElement.childNodes[0].className = 'highlight';
+  // Clear any prior messages
+  messageElement.innerText = '';
+
+  // Setup the textbox
+  // Clear the textbox
+  typedValueElement.value = '';
+  // set focus
+  typedValueElement.focus();
+  // set the event handler
+
+  // Start the timer
+  startTime = new Date().getTime();
+});
+```
+
+בואו נפרק את הקוד!
+
+- הגדרת מעקב המילים
+  - שימוש ב-[Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) וב-[Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) מאפשר לנו לבחור באופן אקראי ציטוט מתוך המערך `quotes`
+  - אנחנו ממירים את ה-`quote` למערך של `words` כדי שנוכל לעקוב אחרי המילה שהשחקן מקליד כרגע
+  - `wordIndex` מוגדר ל-0, מכיוון שהשחקן יתחיל במילה הראשונה
+- הגדרת ממשק המשתמש
+  - יצירת מערך של `spanWords`, שמכיל כל מילה בתוך אלמנט `span`
+    - זה יאפשר לנו להדגיש את המילה בתצוגה
+  - שימוש ב-`join` כדי ליצור מחרוזת שנוכל להשתמש בה לעדכון ה-`innerHTML` של `quoteElement`
+    - זה יציג את הציטוט לשחקן
+  - הגדרת `className` של אלמנט ה-`span` הראשון ל-`highlight` כדי להדגיש אותו בצהוב
+  - ניקוי `messageElement` על ידי הגדרת `innerText` ל-`''`
+- הגדרת תיבת הטקסט
+  - ניקוי ה-`value` הנוכחי של `typedValueElement`
+  - הגדרת ה-`focus` ל-`typedValueElement`
+- התחלת הטיימר על ידי קריאה ל-`getTime`
+
+### הוספת לוגיקת הקלדה
+
+כששחקן מקליד, אירוע `input` יופעל. מאזין האירועים הזה יבדוק שהשחקן מקליד את המילה בצורה נכונה, ויטפל במצב הנוכחי של המשחק. חזרו ל-**script.js**, והוסיפו את הקוד הבא בסוף. נפרק אותו לאחר מכן.
+
+```javascript
+// at the end of script.js
+typedValueElement.addEventListener('input', () => {
+  // Get the current word
+  const currentWord = words[wordIndex];
+  // get the current value
+  const typedValue = typedValueElement.value;
+
+  if (typedValue === currentWord && wordIndex === words.length - 1) {
+    // end of sentence
+    // Display success
+    const elapsedTime = new Date().getTime() - startTime;
+    const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
+    messageElement.innerText = message;
+  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+    // end of word
+    // clear the typedValueElement for the new word
+    typedValueElement.value = '';
+    // move to the next word
+    wordIndex++;
+    // reset the class name for all elements in quote
+    for (const wordElement of quoteElement.childNodes) {
+      wordElement.className = '';
+    }
+    // highlight the new word
+    quoteElement.childNodes[wordIndex].className = 'highlight';
+  } else if (currentWord.startsWith(typedValue)) {
+    // currently correct
+    // highlight the next word
+    typedValueElement.className = '';
+  } else {
+    // error state
+    typedValueElement.className = 'error';
+  }
+});
+```
+
+בואו נפרק את הקוד! אנחנו מתחילים על ידי שליפת המילה הנוכחית והערך שהשחקן הקליד עד כה. לאחר מכן יש לנו לוגיקה מדורגת, שבה אנחנו בודקים אם הציטוט הושלם, המילה הושלמה, המילה נכונה, או (לבסוף), אם יש שגיאה.
+
+- הציטוט הושלם, מצוין על ידי `typedValue` ששווה ל-`currentWord`, ו-`wordIndex` ששווה לאחד פחות מ-`length` של `words`
+  - חישוב `elapsedTime` על ידי חיסור `startTime` מהזמן הנוכחי
+  - חלוקת `elapsedTime` ב-1,000 כדי להמיר ממילישניות לשניות
+  - הצגת הודעת הצלחה
+- המילה הושלמה, מצוין על ידי `typedValue` שמסתיים ברווח (סוף מילה) ו-`typedValue` ששווה ל-`currentWord`
+  - הגדרת `value` של `typedElement` ל-`''` כדי לאפשר הקלדת המילה הבאה
+  - הגדלת `wordIndex` כדי לעבור למילה הבאה
+  - מעבר על כל `childNodes` של `quoteElement` כדי להגדיר `className` ל-`''` כדי להחזיר לתצוגה ברירת מחדל
+  - הגדרת `className` של המילה הנוכחית ל-`highlight` כדי לסמן אותה כמילה הבאה להקלדה
+- המילה מוקלדת נכון (אך לא הושלמה), מצוין על ידי `currentWord` שמתחיל ב-`typedValue`
+  - הבטחת תצוגת `typedValueElement` כברירת מחדל על ידי ניקוי `className`
+- אם הגענו עד כאן, יש לנו שגיאה
+  - הגדרת `className` של `typedValueElement` ל-`error`
+
+## בדיקת האפליקציה שלכם
+
+הגעתם לסוף! השלב האחרון הוא לוודא שהאפליקציה שלנו עובדת. נסו אותה! אל תדאגו אם יש שגיאות; **לכל המפתחים** יש שגיאות. בדקו את ההודעות ותקנו לפי הצורך.
+
+לחצו על **start**, והתחילו להקליד! זה אמור להיראות קצת כמו האנימציה שראינו קודם.
+
+![אנימציה של המשחק בפעולה](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 אתגר
+
+הוסיפו עוד פונקציונליות
+
+- השבתת מאזין אירועי `input` בסיום המשחק, והפעלתו מחדש כאשר הכפתור נלחץ
+- השבתת תיבת הטקסט כאשר השחקן משלים את הציטוט
+- הצגת תיבת דיאלוג מודאלית עם הודעת הצלחה
+- שמור תוצאות גבוהות באמצעות [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## מבחן לאחר ההרצאה
+
+[מבחן לאחר ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## סקירה ולימוד עצמי
+
+קרא על [כל האירועים הזמינים](https://developer.mozilla.org/docs/Web/Events) למפתח דרך דפדפן האינטרנט, וחשוב על תרחישים שבהם היית משתמש בכל אחד מהם.
+
+## משימה
+
+[צור משחק מקלדת חדש](assignment.md)
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/4-typing-game/typing-game/assignment.md b/translations/he/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..9d915dca
--- /dev/null
+++ b/translations/he/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-27T21:10:17+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "he"
+}
+-->
+# צור משחק מקלדת חדש
+
+## הוראות
+
+צור משחק קטן שמשתמש באירועי מקלדת לביצוע משימות. זה יכול להיות משחק הקלדה מסוג שונה, או משחק אמנותי שמצייר פיקסלים על המסך בלחיצות מקשים. תהיה יצירתי!
+
+## קריטריונים
+
+| קריטריון | מצטיין                  | מספק                    | דורש שיפור       |
+| --------- | ----------------------- | ----------------------- | ---------------- |
+|           | מוצג משחק מלא           | המשחק מאוד מינימלי      | למשחק יש באגים   |
+|           |                         |                         |                  |
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/5-browser-extension/1-about-browsers/README.md b/translations/he/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..8e6f7f19
--- /dev/null
+++ b/translations/he/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-27T20:47:35+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "he"
+}
+-->
+# פרויקט הרחבת דפדפן חלק 1: הכל על דפדפנים
+
+![סקיצה של דפדפן](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.he.jpg)
+> סקיצה מאת [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## שאלון לפני השיעור
+
+[שאלון לפני השיעור](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### הקדמה
+
+הרחבות לדפדפן מוסיפות פונקציונליות נוספת לדפדפן. אבל לפני שתבנו אחת, כדאי ללמוד קצת על איך דפדפנים עובדים.
+
+### על הדפדפן
+
+בסדרת השיעורים הזו, תלמדו איך לבנות הרחבת דפדפן שתעבוד על דפדפנים כמו Chrome, Firefox ו-Edge. בחלק הזה, תגלו איך דפדפנים עובדים ותבנו את הבסיס להרחבת הדפדפן.
+
+אבל מהו דפדפן בעצם? זו תוכנה שמאפשרת למשתמש לגשת לתוכן משרת ולהציג אותו בדפי אינטרנט.
+
+✅ קצת היסטוריה: הדפדפן הראשון נקרא 'WorldWideWeb' ונוצר על ידי סר טימותי ברנרס-לי בשנת 1990.
+
+![דפדפנים מוקדמים](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.he.jpg)
+> כמה דפדפנים מוקדמים, דרך [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+כאשר משתמש מתחבר לאינטרנט באמצעות כתובת URL (Uniform Resource Locator), בדרך כלל באמצעות פרוטוקול Hypertext Transfer Protocol דרך כתובת `http` או `https`, הדפדפן מתקשר עם שרת אינטרנט ומביא דף אינטרנט.
+
+בשלב הזה, מנוע הרינדור של הדפדפן מציג את הדף על מכשיר המשתמש, שיכול להיות טלפון נייד, מחשב שולחני או מחשב נייד.
+
+לדפדפנים יש גם יכולת לשמור תוכן במטמון כדי שלא יהיה צורך להביא אותו מהשרת בכל פעם. הם יכולים לתעד את היסטוריית הגלישה של המשתמש, לשמור 'עוגיות', שהן נתונים קטנים המכילים מידע על פעילות המשתמש, ועוד.
+
+דבר חשוב מאוד לזכור לגבי דפדפנים הוא שהם לא כולם זהים! לכל דפדפן יש יתרונות וחסרונות, ומפתחי אתרים מקצועיים צריכים להבין איך לגרום לדפי אינטרנט לעבוד היטב בכל הדפדפנים. זה כולל טיפול בתצוגות קטנות כמו של טלפון נייד, וגם במשתמשים שאינם מחוברים לאינטרנט.
+
+אתר מאוד שימושי שכדאי לכם לשמור במועדפים בדפדפן שאתם מעדיפים הוא [caniuse.com](https://www.caniuse.com). כשאתם בונים דפי אינטרנט, מאוד מועיל להשתמש ברשימות הטכנולוגיות הנתמכות של caniuse כדי לתמוך בצורה הטובה ביותר במשתמשים שלכם.
+
+✅ איך אפשר לדעת אילו דפדפנים הכי פופולריים בקרב משתמשי האתר שלכם? בדקו את האנליטיקות שלכם - אפשר להתקין חבילות אנליטיקה שונות כחלק מתהליך פיתוח האתר, והן יספרו לכם אילו דפדפנים הכי בשימוש.
+
+## הרחבות לדפדפן
+
+למה שתרצו לבנות הרחבת דפדפן? זו דרך נוחה להוסיף לדפדפן גישה מהירה למשימות שאתם נוטים לחזור עליהן. לדוגמה, אם אתם צריכים לבדוק צבעים בדפי אינטרנט שונים שאתם עובדים איתם, תוכלו להתקין הרחבת דפדפן לבחירת צבעים. אם אתם מתקשים לזכור סיסמאות, תוכלו להשתמש בהרחבת דפדפן לניהול סיסמאות.
+
+הרחבות לדפדפן גם כיף לפתח. הן נוטות לנהל מספר מוגבל של משימות שהן מבצעות היטב.
+
+✅ מהן הרחבות הדפדפן האהובות עליכם? אילו משימות הן מבצעות?
+
+### התקנת הרחבות
+
+לפני שתתחילו לבנות, הסתכלו על תהליך הבנייה והפריסה של הרחבת דפדפן. למרות שכל דפדפן שונה מעט בניהול המשימה הזו, התהליך דומה ב-Chrome וב-Firefox לדוגמה הזו ב-Edge:
+
+![צילום מסך של דפדפן Edge שמציג את דף ההרחבות edge://extensions ואת תפריט ההגדרות הפתוח](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.he.png)
+
+> הערה: ודאו שאתם מפעילים מצב מפתחים ומאפשרים הרחבות מחנויות אחרות.
+
+במהות, התהליך יהיה:
+
+- בנו את ההרחבה שלכם באמצעות `npm run build`  
+- נווטו בדפדפן ללשונית ההרחבות באמצעות כפתור "הגדרות ועוד" (סמל `...`) בפינה הימנית העליונה  
+- אם זו התקנה חדשה, בחרו `load unpacked` כדי להעלות הרחבה חדשה מתיקיית הבנייה שלה (במקרה שלנו זו `/dist`)  
+- או, לחצו על `reload` אם אתם טוענים מחדש את ההרחבה שכבר הותקנה  
+
+✅ ההוראות הללו מתייחסות להרחבות שאתם בונים בעצמכם; כדי להתקין הרחבות ששוחררו לחנות ההרחבות של הדפדפן, עליכם לנווט לחנויות [האלו](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) ולהתקין את ההרחבה שבחרתם.
+
+### התחילו
+
+אתם הולכים לבנות הרחבת דפדפן שמציגה את טביעת הרגל הפחמנית של האזור שלכם, כולל צריכת האנרגיה של האזור ומקור האנרגיה. ההרחבה תכלול טופס שיאסוף מפתח API כדי שתוכלו לגשת ל-API של CO2 Signal.
+
+**מה תצטרכו:**
+
+- [מפתח API](https://www.co2signal.com/); הכניסו את כתובת האימייל שלכם בתיבה בעמוד הזה ומפתח יישלח אליכם  
+- [קוד לאזור שלכם](http://api.electricitymap.org/v3/zones) התואם ל-[Electricity Map](https://www.electricitymap.org/map) (בבוסטון, לדוגמה, אני משתמש ב-'US-NEISO')  
+- [קוד התחלתי](../../../../5-browser-extension/start). הורידו את תיקיית `start`; תשלימו את הקוד בתיקייה הזו  
+- [NPM](https://www.npmjs.com) - NPM הוא כלי לניהול חבילות; התקינו אותו מקומית והחבילות המפורטות בקובץ `package.json` שלכם יותקנו לשימוש בנכס האינטרנט שלכם  
+
+✅ למדו עוד על ניהול חבילות במודול [מעולה](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) הזה.
+
+קחו רגע לעבור על בסיס הקוד:
+
+dist  
+    -|manifest.json (הגדרות ברירת מחדל כאן)  
+    -|index.html (סימון HTML של החזית כאן)  
+    -|background.js (JS רקע כאן)  
+    -|main.js (JS בנוי)  
+src  
+    -|index.js (הקוד JS שלכם כאן)  
+
+✅ ברגע שיש לכם את מפתח ה-API וקוד האזור, שמרו אותם איפשהו כהערה לשימוש עתידי.
+
+### בניית ה-HTML להרחבה
+
+להרחבה הזו יש שני תצוגות. אחת לאיסוף מפתח ה-API וקוד האזור:
+
+![צילום מסך של ההרחבה המושלמת פתוחה בדפדפן, מציגה טופס עם שדות לקוד אזור ומפתח API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.he.png)
+
+והשנייה להצגת צריכת הפחמן של האזור:
+
+![צילום מסך של ההרחבה המושלמת מציגה ערכים לצריכת פחמן ואחוז דלקים מאובנים עבור אזור US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.he.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)
+
+## סקירה ולימוד עצמי
+
+בשיעור הזה למדתם קצת על ההיסטוריה של דפדפנים; נצלו את ההזדמנות ללמוד על איך ממציאי ה-World Wide Web דמיינו את השימוש בו על ידי קריאה נוספת על ההיסטוריה שלו. כמה אתרים שימושיים כוללים:
+
+[ההיסטוריה של דפדפני אינטרנט](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[היסטוריה של הרשת](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[ראיון עם טים ברנרס-לי](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+
+## משימה
+
+[עצבו מחדש את ההרחבה שלכם](assignment.md)
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/5-browser-extension/1-about-browsers/assignment.md b/translations/he/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..f9a8bcc8
--- /dev/null
+++ b/translations/he/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-27T20:48:12+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "he"
+}
+-->
+# עיצוב מחדש של ההרחבה שלך
+
+## הוראות
+
+קוד המקור של ההרחבה הזו מגיע עם עיצובים מוכנים, אבל אין חובה להשתמש בהם; הפוך את ההרחבה לשלך על ידי עיצוב מחדש שלה באמצעות עריכת קובץ ה-CSS שלה.
+
+## קריטריונים
+
+| קריטריון | מצטיין                                     | מספק                 | דורש שיפור        |
+| -------- | ------------------------------------------ | -------------------- | ----------------- |
+|          | הקוד נמסר עם עיצובים חדשים ופונקציונליים  | העיצוב אינו שלם     | העיצובים שגויים   |
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/he/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..a49a31c4
--- /dev/null
+++ b/translations/he/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-27T20:45:33+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "he"
+}
+-->
+# פרויקט הרחבת דפדפן חלק 2: קריאה ל-API ושימוש באחסון מקומי
+
+## שאלון לפני השיעור
+
+[שאלון לפני השיעור](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### מבוא
+
+בשיעור הזה תלמדו כיצד לקרוא ל-API על ידי שליחת טופס של הרחבת הדפדפן שלכם והצגת התוצאות בהרחבה. בנוסף, תלמדו כיצד ניתן לאחסן נתונים באחסון המקומי של הדפדפן לשימוש עתידי.
+
+✅ עקבו אחר הקטעים הממוספרים בקבצים המתאימים כדי לדעת היכן למקם את הקוד שלכם.
+
+### הגדרת האלמנטים לעבודה בהרחבה:
+
+עד עכשיו בניתם את ה-HTML עבור הטופס ותיבת התוצאות `<div>` עבור הרחבת הדפדפן שלכם. מעכשיו, תצטרכו לעבוד בקובץ `/src/index.js` ולבנות את ההרחבה שלכם שלב אחר שלב. עיינו בשיעור הקודם [כאן](../1-about-browsers/README.md) כדי להגדיר את הפרויקט שלכם וללמוד על תהליך הבנייה.
+
+עבדו בקובץ `index.js` שלכם והתחילו ביצירת כמה משתנים `const` שיחזיקו את הערכים הקשורים לשדות שונים:
+
+```JavaScript
+// form fields
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// results
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+כל השדות האלה מתייחסים למחלקות ה-CSS שלהם, כפי שהגדרתם ב-HTML בשיעור הקודם.
+
+### הוספת מאזינים
+
+כעת, הוסיפו מאזיני אירועים לטופס ולכפתור הניקוי שמאפס את הטופס, כך שאם משתמש שולח את הטופס או לוחץ על כפתור האיפוס, משהו יקרה. בנוסף, הוסיפו קריאה לאתחול האפליקציה בתחתית הקובץ:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ שימו לב לקיצור הדרך המשמש להאזנה לאירועי שליחה או לחיצה, וכיצד האירוע מועבר לפונקציות handleSubmit או reset. האם תוכלו לכתוב את הקיצור הזה בפורמט ארוך יותר? איזה פורמט אתם מעדיפים?
+
+### בניית הפונקציות init() ו-reset():
+
+כעת תבנו את הפונקציה שמאתחלת את ההרחבה, שנקראת init():
+
+```JavaScript
+function init() {
+	//if anything is in localStorage, pick it up
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	//set icon to be generic green
+	//todo
+
+	if (storedApiKey === null || storedRegion === null) {
+		//if we don't have the keys, show the form
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+        //if we have saved keys/regions in localStorage, show results when they load
+        displayCarbonUsage(storedApiKey, storedRegion);
+		results.style.display = 'none';
+		form.style.display = 'none';
+		clearBtn.style.display = 'block';
+	}
+};
+
+function reset(e) {
+	e.preventDefault();
+	//clear local storage for region only
+	localStorage.removeItem('regionName');
+	init();
+}
+
+```
+
+בפונקציה הזו יש לוגיקה מעניינת. כשאתם קוראים אותה, האם אתם מבינים מה קורה?
+
+- שני משתנים `const` מוגדרים כדי לבדוק אם המשתמש שמר מפתח API וקוד אזור באחסון המקומי.
+- אם אחד מהם הוא null, הציגו את הטופס על ידי שינוי הסגנון שלו ל-'block'.
+- הסתירו את אזור התוצאות, הטעינה וכפתור הניקוי, והגדירו כל טקסט שגיאה למחרוזת ריקה.
+- אם קיים מפתח וקוד אזור, התחילו שגרה שכוללת:
+  - קריאה ל-API לקבלת נתוני שימוש בפחמן.
+  - הסתרת אזור התוצאות.
+  - הסתרת הטופס.
+  - הצגת כפתור האיפוס.
+
+לפני שתמשיכו, כדאי ללמוד על מושג חשוב מאוד בדפדפנים: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage הוא דרך שימושית לאחסן מחרוזות בדפדפן כזוגות `key-value`. סוג זה של אחסון אינטרנטי ניתן לניהול באמצעות JavaScript כדי לנהל נתונים בדפדפן. LocalStorage אינו פג תוקף, בעוד SessionStorage, סוג אחר של אחסון אינטרנטי, נמחק כאשר הדפדפן נסגר. לכל סוגי האחסון יש יתרונות וחסרונות לשימוש בהם.
+
+> שימו לב - להרחבת הדפדפן שלכם יש אחסון מקומי משלה; חלון הדפדפן הראשי הוא מופע נפרד ומתנהג באופן עצמאי.
+
+אתם מגדירים את מפתח ה-API שלכם כך שיהיה בעל ערך מחרוזת, לדוגמה, ואתם יכולים לראות שהוא מוגדר ב-Edge על ידי "בדיקה" של דף אינטרנט (ניתן ללחוץ לחיצה ימנית על דפדפן כדי לבדוק) ולעבור ללשונית Applications כדי לראות את האחסון.
+
+![תצוגת אחסון מקומי](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.he.png)
+
+✅ חשבו על מצבים שבהם לא הייתם רוצים לאחסן נתונים מסוימים ב-LocalStorage. באופן כללי, הצבת מפתחות API ב-LocalStorage היא רעיון גרוע! האם אתם מבינים למה? במקרה שלנו, מכיוון שהאפליקציה שלנו מיועדת ללמידה בלבד ולא תפורסם בחנות אפליקציות, נשתמש בשיטה זו.
+
+שימו לב שאתם משתמשים ב-Web API כדי לנהל את LocalStorage, בין אם באמצעות `getItem()`, `setItem()`, או `removeItem()`. זה נתמך באופן רחב בדפדפנים.
+
+לפני שתבנו את הפונקציה `displayCarbonUsage()` שנקראת ב-`init()`, בואו נבנה את הפונקציונליות לטיפול בשליחת הטופס הראשונית.
+
+### טיפול בשליחת הטופס
+
+צרו פונקציה בשם `handleSubmit` שמקבלת ארגומנט אירוע `(e)`. עצרו את האירוע מלהתפשט (במקרה הזה, אנחנו רוצים לעצור את הדפדפן מלהתרענן) וקראו לפונקציה חדשה, `setUpUser`, תוך העברת הארגומנטים `apiKey.value` ו-`region.value`. כך אתם משתמשים בשני הערכים שמובאים דרך הטופס הראשוני כאשר השדות המתאימים מתמלאים.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ רעננו את הזיכרון שלכם - ה-HTML שהגדרתם בשיעור הקודם כולל שני שדות קלט שערכיהם נתפסים דרך המשתנים `const` שהגדרתם בראש הקובץ, ושניהם מוגדרים כ-`required`, כך שהדפדפן מונע מהמשתמשים להזין ערכים null.
+
+### הגדרת המשתמש
+
+נעבור לפונקציה `setUpUser`, כאן אתם מגדירים ערכי אחסון מקומי עבור apiKey ו-regionName. הוסיפו פונקציה חדשה:
+
+```JavaScript
+function setUpUser(apiKey, regionName) {
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	//make initial call
+	displayCarbonUsage(apiKey, regionName);
+}
+```
+
+הפונקציה הזו מציגה הודעת טעינה בזמן שה-API נקרא. בשלב הזה, הגעתם ליצירת הפונקציה החשובה ביותר בהרחבת הדפדפן הזו!
+
+### הצגת שימוש בפחמן
+
+לבסוף, הגיע הזמן לשאול את ה-API!
+
+לפני שנמשיך, כדאי לדון ב-APIs. APIs, או [ממשקי תכנות אפליקציות](https://www.webopedia.com/TERM/A/API.html), הם אלמנט קריטי בארגז הכלים של מפתחי אתרים. הם מספקים דרכים סטנדרטיות לתוכניות לתקשר ולהתחבר זו לזו. לדוגמה, אם אתם בונים אתר אינטרנט שצריך לשאול מסד נתונים, ייתכן שמישהו יצר API עבורכם לשימוש. בעוד שישנם סוגים רבים של APIs, אחד הפופולריים ביותר הוא [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ המונח 'REST' מייצג 'Representational State Transfer' ומאפשר שימוש ב-URLs שונים כדי להביא נתונים. בצעו מחקר קטן על סוגי ה-APIs השונים הזמינים למפתחים. איזה פורמט מושך אתכם?
+
+ישנם דברים חשובים לשים לב אליהם בפונקציה הזו. ראשית, שימו לב למילת המפתח [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). כתיבת הפונקציות שלכם כך שיפעלו באופן אסינכרוני אומרת שהן ממתינות לפעולה, כמו החזרת נתונים, שתושלם לפני שהן ממשיכות.
+
+הנה סרטון קצר על `async`:
+
+[![Async ו-Await לניהול הבטחות](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async ו-Await לניהול הבטחות")
+
+> 🎥 לחצו על התמונה למעלה לסרטון על async/await.
+
+צרו פונקציה חדשה לשאול את ה-API של C02Signal:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+זו פונקציה גדולה. מה קורה כאן?
+
+- בהתאם לשיטות עבודה מומלצות, אתם משתמשים במילת המפתח `async` כדי לגרום לפונקציה הזו להתנהג באופן אסינכרוני. הפונקציה מכילה בלוק `try/catch` מכיוון שהיא תחזיר הבטחה כאשר ה-API יחזיר נתונים. מכיוון שאין לכם שליטה על מהירות התגובה של ה-API (ייתכן שהוא לא יגיב כלל!), אתם צריכים להתמודד עם אי-הוודאות הזו על ידי קריאה אסינכרונית.
+- אתם שואלים את ה-API של co2signal כדי לקבל את נתוני האזור שלכם, תוך שימוש במפתח ה-API שלכם. כדי להשתמש במפתח הזה, עליכם להשתמש בסוג של אימות בפרמטרי הכותרת.
+- ברגע שה-API מגיב, אתם מקצים אלמנטים שונים של נתוני התגובה שלו לחלקי המסך שהגדרתם להציג את הנתונים האלה.
+- אם יש שגיאה, או אם אין תוצאה, אתם מציגים הודעת שגיאה.
+
+✅ שימוש בתבניות תכנות אסינכרוניות הוא כלי שימושי נוסף בארגז הכלים שלכם. קראו [על הדרכים השונות](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) שבהן ניתן להגדיר קוד מסוג זה.
+
+מזל טוב! אם תבנו את ההרחבה שלכם (`npm run build`) ותרעננו אותה בלשונית ההרחבות, יש לכם הרחבה עובדת! הדבר היחיד שלא עובד הוא האייקון, ותתקנו זאת בשיעור הבא.
+
+---
+
+## 🚀 אתגר
+
+דיברנו על כמה סוגי APIs בשיעורים האלה. בחרו API אינטרנטי וחקרו לעומק מה הוא מציע. לדוגמה, הסתכלו על APIs זמינים בתוך דפדפנים כמו [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 בשיעור הזה, שניהם מאוד שימושיים עבור מפתחי אתרים מקצועיים. האם אתם יכולים לחשוב כיצד שני הדברים האלה עובדים יחד? חשבו כיצד הייתם מתכננים אתר אינטרנט שיאחסן פריטים לשימוש על ידי API.
+
+## משימה
+
+[אמצו API](assignment.md)
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור הסמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/he/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..a0e65d95
--- /dev/null
+++ b/translations/he/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-27T20:46:13+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "he"
+}
+-->
+# לאמץ API
+
+## הוראות
+
+APIs יכולים להיות מאוד מהנים לשימוש. הנה [רשימה של רבים מהם בחינם](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/he/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/he/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..ad790073
--- /dev/null
+++ b/translations/he/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-27T20:50:44+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "he"
+}
+-->
+# פרויקט הרחבת דפדפן חלק 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)) ולחצו על כפתור 'Record', ואז רעננו את האתר. עצרו את ההקלטה בכל זמן, ותוכלו לראות את השגרות שנוצרות כדי 'לסקריפט', 'לרנדר' ולצייר את האתר:
+
+![פרופילר Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.he.png)
+
+✅ בקרו ב-[תיעוד של Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) על לשונית הביצועים ב-Edge
+
+> טיפ: כדי לקבל קריאה מדויקת של זמן ההפעלה של האתר שלכם, נקו את מטמון הדפדפן שלכם
+
+בחרו אלמנטים מציר הזמן של הפרופיל כדי להתמקד באירועים שמתרחשים בזמן טעינת הדף שלכם.
+
+קבלו תמונת מצב של ביצועי הדף שלכם על ידי בחירת חלק מציר הזמן של הפרופיל והסתכלות על חלונית הסיכום:
+
+![תמונת מצב פרופילר Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.he.png)
+
+בדקו את חלונית יומן האירועים כדי לראות אם יש אירוע שלקח יותר מ-15 מילישניות:
+
+![יומן אירועים Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.he.png)
+
+✅ הכירו את הפרופילר שלכם! פתחו את כלי המפתחים באתר זה ובדקו אם יש צווארי בקבוק. מהו הנכס שנטען הכי לאט? הכי מהר?
+
+## בדיקות פרופילינג
+
+באופן כללי, ישנם כמה "אזורים בעייתיים" שכל מפתח רשת צריך לשים לב אליהם בזמן בניית אתר כדי להימנע מהפתעות לא נעימות בזמן ההפצה לייצור.
+
+**גדלי נכסים**: הרשת הפכה ל'כבדה' יותר, ולכן איטית יותר, בשנים האחרונות. חלק מהמשקל הזה קשור לשימוש בתמונות.
+
+✅ הסתכלו דרך [ארכיון האינטרנט](https://httparchive.org/reports/page-weight) לתצוגה היסטורית של משקל דפים ועוד.
+
+פרקטיקה טובה היא להבטיח שהתמונות שלכם מותאמות ומסופקות בגודל וברזולוציה הנכונים עבור המשתמשים שלכם.
+
+**מעברים ב-DOM**: הדפדפן צריך לבנות את מודל האובייקטים של המסמך (DOM) על בסיס הקוד שאתם כותבים, ולכן זהו אינטרס של ביצועי דף טובים לשמור על התגים שלכם מינימליים, תוך שימוש ועיצוב רק מה שהדף צריך. בהקשר זה, CSS מיותר הקשור לדף יכול להיות מותאם; סגנונות שצריכים להיות בשימוש רק בדף אחד לא צריכים להיכלל בגיליון הסגנונות הראשי, למשל.
+
+**JavaScript**: כל מפתח JavaScript צריך לשים לב לסקריפטים שחוסמים רנדרינג ושחייבים להיטען לפני שה-DOM יכול להיות מנווט ומצויר לדפדפן. שקלו להשתמש ב-`defer` עם הסקריפטים המוטמעים שלכם (כפי שנעשה במודול הטרריום).
+
+✅ נסו כמה אתרים באתר [בדיקת מהירות אתרים](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 שהשלמתם בשיעור האחרון, ואז מחשבים כמה קרוב הערך שלו למדד המוצג במערך הצבעים. לאחר מכן אתם שולחים את ערך הצבע הקרוב ביותר ל-runtime של Chrome.
+
+ל-runtime של Chrome יש [API](https://developer.chrome.com/extensions/runtime) שמטפל בכל מיני משימות רקע, וההרחבה שלכם מנצלת אותו:
+
+> "השתמשו ב-API של chrome.runtime כדי לאחזר את דף הרקע, להחזיר פרטים על המניפסט, ולהאזין ולהגיב לאירועים במחזור החיים של האפליקציה או ההרחבה. תוכלו גם להשתמש ב-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/he/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/he/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..79bf79e4
--- /dev/null
+++ b/translations/he/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-27T20:51:23+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "he"
+}
+-->
+# ניתוח אתר לביצועים
+
+ספק דו"ח מפורט של אתר אינטרנט, המציג אזורים בהם הביצועים בעייתיים. נתח מדוע האתר איטי ומה ניתן לעשות כדי להאיץ אותו. אל תסתמך רק על כלי הדפדפן, אלא בצע מחקר על כלים נוספים שיכולים לעזור לדו"ח שלך.
+
+## קריטריונים
+
+| קריטריונים | מצטיין                                                                                                   | מספק                      | דורש שיפור                  |
+| ----------- | ------------------------------------------------------------------------------------------------------- | -------------------------- | --------------------------- |
+|             | דו"ח מוצג עם פרטים שנאספו לא רק מכלי דפדפן אלא גם מכלים חיצוניים אם זמינים                               | דו"ח בסיסי מוצג           | דו"ח מינימלי מוצג           |
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/5-browser-extension/README.md b/translations/he/5-browser-extension/README.md
new file mode 100644
index 00000000..21dea7bd
--- /dev/null
+++ b/translations/he/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-27T20:42:55+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "he"
+}
+-->
+# בניית תוסף לדפדפן
+
+בניית תוספים לדפדפן היא דרך מהנה ומעניינת לחשוב על הביצועים של האפליקציות שלכם תוך כדי יצירת נכס אינטרנט מסוג שונה. מודול זה כולל שיעורים על איך דפדפנים עובדים ואיך לפרוס תוסף לדפדפן, איך לבנות טופס, לקרוא ל-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.he.png)
+
+## קרדיטים
+
+הרעיון לטריגר הפחמני הזה הוצע על ידי אסים חוסיין, מוביל בצוות Green Cloud Advocacy של מיקרוסופט ומחבר [Green Principles](https://principles.green/). במקור זה היה [פרויקט אתר אינטרנט](https://github.com/jlooper/green).
+
+מבנה התוסף לדפדפן הושפע מתוסף ה-COVID של [אדבולה אדנירן](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/he/5-browser-extension/solution/README.md b/translations/he/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..b5e20f65
--- /dev/null
+++ b/translations/he/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-27T20:51:45+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "he"
+}
+-->
+# Carbon Trigger Browser Extension: קוד מושלם
+
+באמצעות ה-API של CO2 Signal של tmrow למעקב אחר צריכת חשמל, ניתן לבנות תוסף לדפדפן שיזכיר לכם ישירות בדפדפן עד כמה צריכת החשמל באזורכם כבדה. שימוש בתוסף זה באופן מזדמן יעזור לכם לקבל החלטות מושכלות על פעילויותיכם בהתבסס על מידע זה.
+
+![צילום מסך של התוסף](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.he.png)
+
+## התחלת עבודה
+
+תצטרכו להתקין את [npm](https://npmjs.com). הורידו עותק של הקוד הזה לתיקייה במחשב שלכם.
+
+התקינו את כל החבילות הנדרשות:
+
+```
+npm install
+```
+
+בנו את התוסף באמצעות webpack:
+
+```
+npm run build
+```
+
+כדי להתקין ב-Edge, השתמשו בתפריט 'שלוש הנקודות' בפינה הימנית העליונה של הדפדפן כדי למצוא את לוח ההרחבות. משם, בחרו 'Load Unpacked' כדי לטעון תוסף חדש. בחרו בתיקיית 'dist' כאשר תתבקשו, והתוסף ייטען. כדי להשתמש בו, תצטרכו מפתח API ל-API של CO2 Signal ([השיגו אחד כאן דרך אימייל](https://www.co2signal.com/) - הזינו את האימייל שלכם בתיבה בעמוד זה) ואת [הקוד לאזור שלכם](http://api.electricitymap.org/v3/zones) התואם ל-[Electricity Map](https://www.electricitymap.org/map) (לדוגמה, בבוסטון אני משתמש ב-'US-NEISO').
+
+![התקנה](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.he.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/he/5-browser-extension/solution/translation/README.es.md b/translations/he/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..c9255cf4
--- /dev/null
+++ b/translations/he/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-27T20:52:12+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "he"
+}
+-->
+# Carbon Trigger: הרחבת דפדפן - קוד מלא
+
+באמצעות ה-API של CO2 Signal מבית tmrow למעקב אחר צריכת חשמל, ניתן ליצור הרחבת דפדפן שתספק תזכורת ישירה בדפדפן לגבי צריכת החשמל באזור שלך. השימוש בהרחבה זו יעזור לך לקבל החלטות בנוגע לפעילויות שלך בהתבסס על מידע זה.
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.he.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').
+
+![installing](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.he.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/he/5-browser-extension/solution/translation/README.fr.md b/translations/he/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..2dee9765
--- /dev/null
+++ b/translations/he/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-27T20:53:34+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "he"
+}
+-->
+# Carbon Trigger: קוד להשלמת הרחבת דפדפן
+
+באמצעות ה-API של CO2 Signal מבית tmrow למעקב אחר צריכת חשמל, צרו הרחבת דפדפן שתאפשר לכם לקבל תזכורת ישירות בדפדפן על צריכת החשמל באזורכם. השימוש בהרחבה זו יעזור לכם לקבל החלטות מושכלות לגבי הפעילויות שלכם בהתבסס על מידע זה.
+
+![צילום מסך של ההרחבה](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.he.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.he.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/he/5-browser-extension/solution/translation/README.hi.md b/translations/he/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..ec3f836e
--- /dev/null
+++ b/translations/he/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-27T20:52:39+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "he"
+}
+-->
+# תוסף דפדפן Carbon Trigger: קוד מוגמר
+
+שימוש ב-API של CO2 Signal של tmrow למעקב אחר צריכת חשמל, בניית תוסף דפדפן שיזכיר לכם כמה עמוסה צריכת החשמל באזורכם דרך הדפדפן שלכם. שימוש בתוסף הזה יכול לעזור לכם לקבל החלטות על סמך המידע הזה לגבי הפעילויות שלכם.
+
+![צילום מסך של התוסף ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.he.png)
+
+## התחלה
+
+יש להתקין [npm](https://npmjs.com). הורידו עותק של הקוד לתיקייה במחשב שלכם.
+
+התקינו את כל החבילות הנדרשות:
+
+```
+npm install
+```
+
+בנו את התוסף באמצעות Webpack:
+
+```
+npm run build
+```
+
+להתקנה בדפדפן Edge, השתמשו בתפריט 'שלוש נקודות' בפינה הימנית העליונה של הדפדפן כדי למצוא את פאנל התוספים. משם, בחרו 'טעינת תוסף לא ארוז' כדי לטעון תוסף חדש. בתיבת הדיאלוג, פתחו את תיקיית 'dist' והתוסף ייטען. כדי להשתמש בו, תצטרכו מפתח API ל-CO2 Signal ([קבלו אותו כאן דרך אימייל](https://www.co2snal.com/) - הזינו את האימייל שלכם בתיבה בעמוד זה) וקוד [האזור שלכם](http://api.electricitymap.org/v3/zones) [במפת החשמל](https://www.electricitymap.org/map) (לדוגמה, בבוסטון אני משתמש ב-'US-NEISO').
+
+![התקנה](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.he.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/he/5-browser-extension/solution/translation/README.it.md b/translations/he/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..69a9aa96
--- /dev/null
+++ b/translations/he/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-27T20:54:07+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "he"
+}
+-->
+# Carbon Trigger: קוד להתחלת עבודה
+
+נשתמש ב-API של Signal CO2 מבית tmrow כדי לעקוב אחר צריכת החשמל וליצור תוסף לדפדפן, כך שנוכל לקבל תזכורת ישירות בדפדפן על כמה כבדה צריכת החשמל באזור שלנו. השימוש בתוסף הזה יעזור להעריך את הפעילויות שלנו בהתבסס על המידע הזה.
+
+![צילום מסך של התוסף](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.he.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.he.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/he/5-browser-extension/solution/translation/README.ja.md b/translations/he/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..da906d30
--- /dev/null
+++ b/translations/he/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-27T20:54:33+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "he"
+}
+-->
+# תוסף דפדפן למעקב אחר פליטת פחמן: קוד מוכן
+
+בנו תוסף לדפדפן שמציג תזכורת על צריכת החשמל באזורכם, באמצעות ה-API של CO2 Signal מבית tmrow. התוסף מאפשר לכם לעקוב אחר צריכת החשמל באזורכם ולהשתמש במידע הזה כדי לקבל החלטות מושכלות לגבי הפעילות שלכם.
+
+![צילום מסך של התוסף](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.he.png)
+
+## הקדמה
+
+יש לוודא ש-[npm](https://npmjs.com) מותקן. הורידו עותק של הקוד לתיקייה במחשב שלכם.
+
+התקינו את כל החבילות הנדרשות.
+
+```
+npm install
+```
+
+בנו את התוסף באמצעות webpack.
+
+```
+npm run build
+```
+
+כדי להתקין ב-Edge, מצאו את לוח ה"הרחבות" דרך תפריט "שלוש הנקודות" בפינה הימנית העליונה של הדפדפן. משם, בחרו "Load Unpacked" כדי לטעון את התוסף החדש. כאשר תתבקשו, פתחו את תיקיית "dist", והתוסף ייטען. לשימוש בתוסף, תצטרכו מפתח API של CO2 Signal ([קבלו אחד כאן דרך אימייל](https://www.co2signal.com/) - הזינו את האימייל שלכם בתיבה שבדף) וקוד לאזור שלכם התואם ל-[Electricity Map](https://www.electricitymap.org/map) ([ראו כאן את הקוד לאזור שלכם](http://api.electricitymap.org/v3/zones)). לדוגמה, בבוסטון משתמשים ב-'US-NEISO'.
+
+![התקנה](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.he.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/he/5-browser-extension/solution/translation/README.ms.md b/translations/he/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..5cd59bd5
--- /dev/null
+++ b/translations/he/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-27T20:53:06+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "he"
+}
+-->
+# תוסף דפדפן Carbon Trigger: קוד מלא
+
+באמצעות ה-API של CO2 Signal מבית tmrow לזיהוי צריכת חשמל, ניתן לבנות תוסף לדפדפן שיתריע בפניכם על רמת צריכת החשמל באזורכם. שימוש בתוסף זה יעזור לכם לקבל החלטות מושכלות לגבי הפעילויות שלכם בהתבסס על המידע הזה.
+
+![צילום מסך של תוסף הדפדפן](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.he.png)
+
+## התחלה
+
+עליכם להתקין את [npm](https://npmjs.com). הורידו עותק של הקוד הזה לתיקייה במחשב שלכם.
+
+התקינו את כל החבילות הנדרשות:
+
+```
+npm install
+```
+
+בנו את התוסף באמצעות webpack:
+
+```
+npm run build
+```
+
+כדי להתקין ב-Edge, השתמשו בתפריט 'שלוש הנקודות' בפינה הימנית העליונה של הדפדפן כדי למצוא את לוח התוספים. משם, בחרו 'Load Unpacked' כדי לטעון את התוסף החדש. פתחו את תיקיית 'dist' לפי הבקשה, והתוסף ייטען. כדי להשתמש בו, תצטרכו מפתח API ל-API של CO2 Signal ([קבלו אחד כאן דרך אימייל](https://www.co2signal.com/) - הכניסו את האימייל שלכם בתיבה שבדף זה) ואת [הקוד לאזור שלכם](http://api.electricitymap.org/v3/zones) המתאים ל-[מפת החשמל](https://www.electricitymap.org/map) (לדוגמה, בבוסטון אני משתמש ב-'US-NEISO').
+
+![התקנה](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.he.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/he/5-browser-extension/start/README.md b/translations/he/5-browser-extension/start/README.md
new file mode 100644
index 00000000..085ba75d
--- /dev/null
+++ b/translations/he/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-27T20:46:37+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "he"
+}
+-->
+# הרחבת דפדפן Carbon Trigger: קוד התחלתי
+
+באמצעות ה-API של tmrow, C02 Signal, למעקב אחר צריכת חשמל, ניתן לבנות הרחבת דפדפן שתספק תזכורת ישירות בדפדפן לגבי רמת צריכת החשמל באזור שלך. שימוש בהרחבה זו באופן מזדמן יעזור לך לקבל החלטות מושכלות לגבי הפעילויות שלך בהתבסס על מידע זה.
+
+![צילום מסך של ההרחבה](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.he.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.he.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/he/6-space-game/1-introduction/README.md b/translations/he/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..f3b425da
--- /dev/null
+++ b/translations/he/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-27T20:28:41+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "he"
+}
+-->
+# בניית משחק חלל חלק 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 (דמות שאינה שחקן), אך לא למשל אובייקט סטטי כמו עץ.
+- **משמידים את עצמם** אלו אובייקטים שקיימים רק לתקופה מוגבלת לפני שהם מסמנים את עצמם למחיקה. בדרך כלל זה מיוצג על ידי משתנה בוליאני `מת` או `הושמד` שמסמן למנוע המשחק שאובייקט זה לא צריך להיות מוצג יותר.
+- **זמן המתנה** 'זמן המתנה' הוא תכונה טיפוסית בקרב אובייקטים קצרי חיים. דוגמה טיפוסית היא טקסט או אפקט גרפי כמו פיצוץ שצריך להופיע רק לכמה מילישניות.
+
+✅ חשבו על משחק כמו פאק-מן. האם תוכלו לזהות את ארבעת סוגי האובייקטים שצוינו לעיל במשחק הזה?
+
+### ביטוי התנהגות
+
+כל מה שתיארנו לעיל הוא התנהגות שאובייקטים במשחק יכולים להחזיק. אז איך אנחנו מקודדים את זה? אנחנו יכולים לבטא את ההתנהגות הזו כמתודות שמקושרות למחלקות או לאובייקטים.
+
+**מחלקות**
+
+הרעיון הוא להשתמש ב-`מחלקות` בשילוב עם `ירושה` כדי להוסיף התנהגות מסוימת למחלקה.
+
+✅ ירושה היא מושג חשוב להבנה. למדו עוד במאמר של [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();
+```
+
+✅ הקדישו כמה דקות לדמיין מחדש גיבור פאק-מן (למשל אינקי, פינקי או בלינקי) ואיך הוא היה נכתב ב-JavaScript.
+
+**הרכבה**
+
+דרך שונה לטפל בירושה של אובייקטים היא באמצעות *הרכבה*. אז, אובייקטים מבטאים את ההתנהגות שלהם כך:
+
+```javascript
+//create a constant gameObject
+const gameObject = {
+  x: 0,
+  y: 0,
+  type: ''
+};
+
+//...and a constant movable
+const movable = {
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+//then the constant movableObject is composed of the gameObject and movable constants
+const movableObject = {...gameObject, ...movable};
+
+//then create a function to create a new Hero who inherits the movableObject properties
+function createHero(x, y) {
+  return {
+    ...movableObject,
+    x,
+    y,
+    type: 'Hero'
+  }
+}
+//...and a static object that inherits only the gameObject properties
+function createStatic(x, y, type) {
+  return {
+    ...gameObject
+    x,
+    y,
+    type
+  }
+}
+//create the hero and move it
+const hero = createHero(10,10);
+hero.moveTo(5,5);
+//and create a static tree which only stands around
+const tree = createStatic(0,0, 'Tree'); 
+```
+
+**איזו תבנית כדאי לי להשתמש?**
+
+זה תלוי בכם איזו תבנית תבחרו. JavaScript תומכת בשתי הפרדיגמות הללו.
+
+--
+
+תבנית נוספת נפוצה בפיתוח משחקים מתמודדת עם הבעיה של טיפול בחוויית המשתמש ובביצועי המשחק.
+
+## תבנית Pub/Sub
+
+✅ Pub/Sub מייצג 'פרסום-מנוי'
+
+תבנית זו מתמודדת עם הרעיון שהחלקים השונים של האפליקציה שלכם לא צריכים לדעת אחד על השני. למה זה חשוב? זה הופך את הדברים להרבה יותר ברורים אם החלקים השונים מופרדים. זה גם מקל על שינוי פתאומי של התנהגות אם יש צורך בכך. איך אנחנו משיגים את זה? אנחנו עושים זאת על ידי הגדרת כמה מושגים:
+
+- **הודעה**: הודעה היא בדרך כלל מחרוזת טקסט שמלווה במטען אופציונלי (נתון שמבהיר על מה ההודעה). הודעה טיפוסית במשחק יכולה להיות `KEY_PRESSED_ENTER`.
+- **מפרסם**: אלמנט זה *מפרסם* הודעה ושולח אותה לכל המנויים.
+- **מנוי**: אלמנט זה *מאזין* להודעות ספציפיות ומבצע משימה כתוצאה מקבלת ההודעה, כמו ירי לייזר.
+
+היישום הוא קטן בגודלו אך מדובר בתבנית חזקה מאוד. כך ניתן ליישם אותה:
+
+```javascript
+//set up an EventEmitter class that contains listeners
+class EventEmitter {
+  constructor() {
+    this.listeners = {};
+  }
+//when a message is received, let the listener to handle its payload
+  on(message, listener) {
+    if (!this.listeners[message]) {
+      this.listeners[message] = [];
+    }
+    this.listeners[message].push(listener);
+  }
+//when a message is sent, send it to a listener with some payload
+  emit(message, payload = null) {
+    if (this.listeners[message]) {
+      this.listeners[message].forEach(l => l(message, payload))
+    }
+  }
+}
+
+```
+
+כדי להשתמש בקוד לעיל, ניתן ליצור יישום קטן מאוד:
+
+```javascript
+//set up a message structure
+const Messages = {
+  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
+};
+//invoke the eventEmitter you set up above
+const eventEmitter = new EventEmitter();
+//set up a hero
+const hero = createHero(0,0);
+//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+
+//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
+window.addEventListener('keyup', (evt) => {
+  if (evt.key === 'ArrowLeft') {
+    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
+  }
+});
+```
+
+לעיל אנחנו מחברים אירוע מקלדת, `ArrowLeft` ושולחים את ההודעה `HERO_MOVE_LEFT`. אנחנו מאזינים להודעה הזו ומזיזים את ה-`hero` כתוצאה מכך. היתרון בתבנית זו הוא שהמאזין לאירוע והגיבור לא יודעים אחד על השני. ניתן למפות מחדש את `ArrowLeft` למקש `A`. בנוסף, ניתן לעשות משהו שונה לחלוטין על `ArrowLeft` על ידי ביצוע כמה עריכות לפונקציית `on` של ה-eventEmitter:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+כשהמשחק שלכם גדל והופך למורכב יותר, התבנית הזו נשארת באותה רמת מורכבות והקוד שלכם נשאר נקי. מומלץ מאוד לאמץ את התבנית הזו.
+
+---
+
+## 🚀 אתגר
+
+חשבו כיצד תבנית Pub/Sub יכולה לשפר משחק. אילו חלקים צריכים לשדר אירועים, וכיצד המשחק צריך להגיב אליהם? עכשיו זו ההזדמנות שלכם להיות יצירתיים, לחשוב על משחק חדש ואיך החלקים שלו עשויים להתנהג.
+
+## שאלון אחרי ההרצאה
+
+[שאלון אחרי ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## סקירה ולימוד עצמי
+
+למדו עוד על Pub/Sub על ידי [קריאה בנושא](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## משימה
+
+[צרו סקיצה למשחק](assignment.md)
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/6-space-game/1-introduction/assignment.md b/translations/he/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..03a37675
--- /dev/null
+++ b/translations/he/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-27T20:29:10+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "he"
+}
+-->
+# יצירת משחק
+
+## הוראות
+
+באמצעות דוגמאות הקוד מהשיעור, כתבו ייצוג של משחק שאתם אוהבים. זה צריך להיות משחק פשוט, אך המטרה היא להשתמש או בתבנית מחלקה או בתבנית קומפוזיציה ובתבנית pub/sub כדי להראות איך משחק יכול להתחיל. תהיו יצירתיים!
+
+## קריטריונים להערכה
+
+| קריטריון | מצטיין                                                | מספק                                                | דורש שיפור                                       |
+| -------- | ----------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------ |
+|          | שלושה אלמנטים מוצגים על המסך ומנוהלים                  | שני אלמנטים מוצגים על המסך ומנוהלים                | אלמנט אחד מוצג על המסך ומנוהל                    |
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/6-space-game/2-drawing-to-canvas/README.md b/translations/he/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..35c6281d
--- /dev/null
+++ b/translations/he/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-27T20:25:19+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "he"
+}
+-->
+# בנה משחק חלל חלק 2: צייר גיבור ומפלצות על הקנבס
+
+## חידון לפני ההרצאה
+
+[חידון לפני ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## הקנבס
+
+הקנבס הוא אלמנט HTML שלברירת מחדל אין לו תוכן; הוא לוח ריק. עליך להוסיף לו תוכן על ידי ציור עליו.
+
+✅ קרא [עוד על Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) ב-MDN.
+
+כך הוא בדרך כלל מוגדר כחלק מגוף הדף:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+למעלה אנו מגדירים את `id`, `width` ו-`height`.
+
+- `id`: הגדר זאת כדי שתוכל לקבל הפניה כאשר תצטרך לתקשר איתו.
+- `width`: זהו הרוחב של האלמנט.
+- `height`: זהו הגובה של האלמנט.
+
+## ציור גיאומטריה פשוטה
+
+הקנבס משתמש במערכת קואורדינטות קרטזית לציור. לכן הוא משתמש בציר x וציר y כדי לבטא היכן משהו ממוקם. המיקום `0,0` הוא הפינה השמאלית העליונה, והפינה הימנית התחתונה היא מה שהגדרת כרוחב וגובה הקנבס.
+
+![הרשת של הקנבס](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.he.png)
+> תמונה מ-[MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+כדי לצייר על אלמנט הקנבס תצטרך לעבור את השלבים הבאים:
+
+1. **קבל הפניה** לאלמנט הקנבס.
+2. **קבל הפניה** לאלמנט ההקשר שיושב על אלמנט הקנבס.
+3. **בצע פעולת ציור** באמצעות אלמנט ההקשר.
+
+הקוד לשלבים הנ"ל בדרך כלל נראה כך:
+
+```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 מתמקד בעיקר בצורות דו-ממדיות, אך ניתן גם לצייר אלמנטים תלת-ממדיים לאתר אינטרנט; לשם כך תוכל להשתמש ב-[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);
+}
+```
+
+## עכשיו הזמן להתחיל לבנות את המשחק שלך
+
+### מה לבנות
+
+תבנה דף אינטרנט עם אלמנט קנבס. עליו להציג מסך שחור בגודל `1024*768`. סיפקנו לך שתי תמונות:
+
+- ספינת גיבור
+
+   ![ספינת גיבור](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.he.png)
+
+- 5*5 מפלצות
+
+   ![ספינת מפלצת](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.he.png)
+
+### שלבים מומלצים להתחלת הפיתוח
+
+אתר את הקבצים שנוצרו עבורך בתיקיית המשנה `your-work`. היא אמורה להכיל את הדברים הבאים:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+פתח עותק של תיקייה זו ב-Visual Studio Code. עליך להגדיר סביבת פיתוח מקומית, רצוי עם Visual Studio Code עם NPM ו-Node מותקנים. אם אין לך `npm` מותקן במחשב, [כך תעשה זאת](https://www.npmjs.com/get-npm).
+
+התחל את הפרויקט שלך על ידי ניווט לתיקיית `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+הקוד לעיל יפעיל שרת HTTP בכתובת `http://localhost:5000`. פתח דפדפן והזן את הכתובת הזו. כרגע זהו דף ריק, אבל זה ישתנה.
+
+> הערה: כדי לראות שינויים על המסך, רענן את הדפדפן.
+
+### הוסף קוד
+
+הוסף את הקוד הדרוש ל-`your-work/app.js` כדי לפתור את המשימות הבאות:
+
+1. **צייר** קנבס עם רקע שחור  
+   > טיפ: הוסף שתי שורות תחת ה-TODO המתאים ב-`/app.js`, הגדר את האלמנט `ctx` לשחור ואת הקואורדינטות העליונות/שמאליות ל-0,0 ואת הגובה והרוחב לשווים לאלו של הקנבס.
+2. **טען** טקסטורות  
+   > טיפ: טען את תמונות השחקן והאויב באמצעות `await loadTexture` והעבר את נתיב התמונה. עדיין לא תראה אותן על המסך!
+3. **צייר** את הגיבור במרכז המסך בחצי התחתון  
+   > טיפ: השתמש ב-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.he.png)
+
+## פתרון
+
+נסה לפתור זאת בעצמך קודם, אך אם תיתקע, עיין ב-[פתרון](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 אתגר
+
+למדת על ציור עם Canvas API הממוקד בדו-ממד; עיין ב-[WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), ונסה לצייר אובייקט תלת-ממדי.
+
+## חידון לאחר ההרצאה
+
+[חידון לאחר ההרצאה](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/he/6-space-game/2-drawing-to-canvas/assignment.md b/translations/he/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..64c9c1d3
--- /dev/null
+++ b/translations/he/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-27T20:25:53+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "he"
+}
+-->
+# שחקו עם 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/he/6-space-game/3-moving-elements-around/README.md b/translations/he/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..e445ab4d
--- /dev/null
+++ b/translations/he/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,402 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-27T20:23:38+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "he"
+}
+-->
+# בניית משחק חלל חלק 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` מילישניות כדי לצייר מחדש את הקנבס. יש לכם את היכולת לבחור את המרווח הטוב ביותר שמתאים למשחק שלכם.
+
+## המשך משחק החלל
+
+תיקחו את הקוד הקיים ותמשיכו אותו. או שתתחילו עם הקוד שסיימתם בחלק הראשון או שתשתמשו בקוד שב-[חלק השני - התחלה](../../../../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/he/6-space-game/3-moving-elements-around/assignment.md b/translations/he/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..55059fc2
--- /dev/null
+++ b/translations/he/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-27T20:24:30+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "he"
+}
+-->
+# הוסף הערות לקוד שלך
+
+## הוראות
+
+עבור על קובץ /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/he/6-space-game/4-collision-detection/README.md b/translations/he/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..829b59ff
--- /dev/null
+++ b/translations/he/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-27T20:26:53+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "he"
+}
+-->
+# בניית משחק חלל חלק 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.
+    }
+  }
+}
+```
+
+✅ חזרו לשיעור הראשון בסדרת משחק החלל כדי להזכיר לעצמכם על *זמני המתנה*.
+
+## מה לבנות
+
+תיקחו את הקוד הקיים (שכבר ניקיתם ושיפרתם) מהשיעור הקודם, ותאריכו אותו. תוכלו להתחיל עם הקוד מחלק II או להשתמש בקוד ב-[חלק III - קוד התחלתי](../../../../../../../../../your-work).
+
+> טיפ: הלייזר שתעבדו איתו כבר נמצא בתיקיית הנכסים שלכם ומוזכר בקוד שלכם.
+
+- **הוסיפו זיהוי התנגשויות**, כאשר לייזר מתנגש במשהו, הכללים הבאים צריכים לחול:
+   1. **לייזר פוגע באויב**: אויב מת אם לייזר פוגע בו.
+   2. **לייזר פוגע בחלק העליון של המסך**: לייזר נהרס אם הוא פוגע בחלק העליון של המסך.
+   3. **התנגשות בין אויב לגיבור**: אויב והגיבור נהרסים אם הם מתנגשים זה בזה.
+   4. **אויב פוגע בחלק התחתון של המסך**: אויב והגיבור נהרסים אם האויב מגיע לחלק התחתון של המסך.
+
+## צעדים מומלצים
+
+אתרו את הקבצים שנוצרו עבורכם בתיקיית `your-work`. היא אמורה להכיל את הדברים הבאים:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+תתחילו את הפרויקט שלכם בתיקיית `your_work` על ידי הקלדה:
+
+```bash
+cd your-work
+npm start
+```
+
+הפעולה הזו תתחיל שרת HTTP בכתובת `http://localhost:5000`. פתחו דפדפן והזינו את הכתובת הזו, כרגע הוא אמור להציג את הגיבור ואת כל האויבים, שום דבר עדיין לא זז :).
+
+### הוספת קוד
+
+1. **הגדירו ייצוג מלבני של אובייקט המשחק, כדי לטפל בהתנגשויות** הקוד הבא מאפשר לכם לקבל ייצוג מלבני של `GameObject`. ערכו את מחלקת GameObject כדי להרחיב אותה:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **הוסיפו קוד שבודק התנגשויות** זו תהיה פונקציה חדשה שבודקת אם שני מלבנים מצטלבים:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **הוסיפו יכולת ירי לייזר**
+   1. **הוסיפו הודעת אירוע מקשים**. מקש *רווח* צריך ליצור לייזר ממש מעל החללית של הגיבור. הוסיפו שלוש קבועות לאובייקט Messages:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **טפלו במקש רווח**. ערכו את פונקציית `window.addEventListener` keyup כדי לטפל במקש רווח:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **הוסיפו מאזינים**. ערכו את פונקציית `initGame()` כדי לוודא שהגיבור יכול לירות כאשר מקש הרווח נלחץ:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       והוסיפו פונקציה חדשה `eventEmitter.on()` כדי להבטיח התנהגות כאשר אויב מתנגש בלייזר:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **הזיזו אובייקט**, ודאו שהלייזר נע בהדרגה לחלק העליון של המסך. תיצרו מחלקת Laser חדשה שמרחיבה את `GameObject`, כפי שעשיתם קודם:
+
+      ```javascript
+        class Laser extends GameObject {
+        constructor(x, y) {
+          super(x,y);
+          (this.width = 9), (this.height = 33);
+          this.type = 'Laser';
+          this.img = laserImg;
+          let id = setInterval(() => {
+            if (this.y > 0) {
+              this.y -= 15;
+            } else {
+              this.dead = true;
+              clearInterval(id);
+            }
+          }, 100)
+        }
+      }
+      ```
+
+   1. **טפלו בהתנגשויות**, יישמו כללי התנגשות עבור הלייזר. הוסיפו פונקציה `updateGameObjects()` שבודקת אובייקטים מתנגשים:
+
+      ```javascript
+      function updateGameObjects() {
+        const enemies = gameObjects.filter(go => go.type === 'Enemy');
+        const lasers = gameObjects.filter((go) => go.type === "Laser");
+      // laser hit something
+        lasers.forEach((l) => {
+          enemies.forEach((m) => {
+            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+              first: l,
+              second: m,
+            });
+          }
+         });
+      });
+
+        gameObjects = gameObjects.filter(go => !go.dead);
+      }  
+      ```
+
+      ודאו להוסיף את `updateGameObjects()` ללולאת המשחק שלכם ב-`window.onload`.
+
+   4. **יישמו זמן המתנה** ללייזר, כך שהוא יוכל להיירות רק בתדירות מסוימת.
+
+      לבסוף, ערכו את מחלקת Hero כך שתוכל לטפל בזמן המתנה:
+
+       ```javascript
+      class Hero extends GameObject {
+        constructor(x, y) {
+          super(x, y);
+          (this.width = 99), (this.height = 75);
+          this.type = "Hero";
+          this.speed = { x: 0, y: 0 };
+          this.cooldown = 0;
+        }
+        fire() {
+          gameObjects.push(new Laser(this.x + 45, this.y - 10));
+          this.cooldown = 500;
+    
+          let id = setInterval(() => {
+            if (this.cooldown > 0) {
+              this.cooldown -= 100;
+            } else {
+              clearInterval(id);
+            }
+          }, 200);
+        }
+        canFire() {
+          return this.cooldown === 0;
+        }
+      }
+      ```
+
+בשלב הזה, למשחק שלכם יש קצת פונקציונליות! אתם יכולים לנווט עם מקשי החצים, לירות לייזר עם מקש הרווח, ואויבים נעלמים כשאתם פוגעים בהם. כל הכבוד!
+
+---
+
+## 🚀 אתגר
+
+הוסיפו פיצוץ! הסתכלו על נכסי המשחק ב-[מאגר אמנות החלל](../../../../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/he/6-space-game/4-collision-detection/assignment.md b/translations/he/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..b0478420
--- /dev/null
+++ b/translations/he/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-27T20:27:30+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "he"
+}
+-->
+# חקור התנגשויות
+
+## הוראות
+
+כדי להבין טוב יותר איך התנגשויות פועלות, בנו משחק קטן עם כמה פריטים שמתנגשים. גרמו להם לזוז באמצעות לחיצות מקלדת או קליקים בעכבר, וגרמו למשהו לקרות לאחד הפריטים כאשר הוא נפגע. זה יכול להיות משהו כמו מטאור שפוגע בכדור הארץ, או מכוניות מתנגשות. היו יצירתיים!
+
+## קריטריונים להערכה
+
+| קריטריון | מצטיין                                                                                                                   | מספק                        | דורש שיפור       |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------- | ---------------- |
+|          | דוגמת קוד מלאה עובדת, עם פריטים שמצוירים על הקנבס, התנגשות בסיסית מתרחשת, ותגובות מתבצעות                                 | הקוד אינו שלם באיזשהו אופן | הקוד אינו עובד   |
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/6-space-game/4-collision-detection/solution/README.md b/translations/he/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..2e69fb9a
--- /dev/null
+++ b/translations/he/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:27:56+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "he"
+}
+-->
+זהו מציין מיקום, הושאר ריק בכוונה
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/6-space-game/4-collision-detection/your-work/README.md b/translations/he/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..e21703ba
--- /dev/null
+++ b/translations/he/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-27T20:27:44+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "he"
+}
+-->
+זהו מציין מקום, הושאר ריק בכוונה
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/6-space-game/5-keeping-score/README.md b/translations/he/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..e6d11901
--- /dev/null
+++ b/translations/he/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-27T20:21:38+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "he"
+}
+-->
+# בנה משחק חלל חלק 5: ניקוד וחיים
+
+## חידון לפני השיעור
+
+[חידון לפני השיעור](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+בשיעור זה תלמד כיצד להוסיף ניקוד למשחק ולחשב חיים.
+
+## הצגת טקסט על המסך
+
+כדי להציג ניקוד של משחק על המסך, תצטרך לדעת כיצד למקם טקסט על המסך. התשובה היא שימוש בשיטת `fillText()` של אובייקט הקנבס. תוכל גם לשלוט בהיבטים נוספים כמו איזה גופן להשתמש, צבע הטקסט ואפילו יישורו (שמאל, ימין, מרכז). להלן קוד שמצייר טקסט על המסך.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ קרא עוד על [כיצד להוסיף טקסט לקנבס](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ואל תהסס להפוך את הטקסט שלך למעוצב יותר!
+
+## חיים כקונספט במשחק
+
+הרעיון של חיים במשחק הוא פשוט מספר. בהקשר של משחק חלל, נהוג להקצות מספר חיים שמופחתים אחד-אחד כאשר הספינה שלך נפגעת. נחמד אם תוכל להציג ייצוג גרפי של זה, כמו ספינות קטנות או לבבות במקום מספר.
+
+## מה לבנות
+
+בוא נוסיף את הדברים הבאים למשחק שלך:
+
+- **ניקוד משחק**: על כל ספינת אויב שמושמדת, הגיבור צריך לקבל נקודות. אנו מציעים 100 נקודות לכל ספינה. ניקוד המשחק יוצג בפינה השמאלית התחתונה.
+- **חיים**: לספינה שלך יש שלושה חיים. תאבד חיים בכל פעם שספינת אויב מתנגשת בך. מד החיים יוצג בפינה הימנית התחתונה ויורכב מהגרפיקה הבאה: ![תמונה של חיים](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.he.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");
+    ```
+
+2. הוסף את `lifeImg` לרשימת הנכסים:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+3. **הוסף משתנים**. הוסף קוד שמייצג את הניקוד הכולל שלך (0) ואת מספר החיים שנותרו (3), והצג את הניקוד הזה על המסך.
+
+4. **הרחב את הפונקציה `updateGameObjects()`**. הרחב את הפונקציה `updateGameObjects()` כדי לטפל בהתנגשויות עם אויבים:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+5. **הוסף חיים ונקודות**. 
+   1. **אתחל משתנים**. תחת `this.cooldown = 0` במחלקת `Hero`, הגדר חיים ונקודות:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   2. **צייר משתנים על המסך**. הצג את הערכים הללו על המסך:
+
+        ```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);
+        }
+
+        ```
+
+   3. **הוסף שיטות ללולאת המשחק**. ודא שאתה מוסיף את הפונקציות הללו לפונקציה window.onload תחת `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+6. **ממש חוקי משחק**. יישם את חוקי המשחק הבאים:
+
+   1. **על כל התנגשות בין הגיבור לאויב**, הפחת חיים.
+   
+      הרחב את מחלקת `Hero` כדי לבצע הפחתה זו:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **על כל לייזר שפוגע באויב**, הגדל את ניקוד המשחק ב-100 נקודות.
+
+      הרחב את מחלקת Hero כדי לבצע הגדלה זו:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        הוסף את הפונקציות הללו לפולטי אירועי ההתנגשות שלך:
+
+        ```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/he/6-space-game/5-keeping-score/assignment.md b/translations/he/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..7d85f29b
--- /dev/null
+++ b/translations/he/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-27T20:22:06+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "he"
+}
+-->
+# בנה משחק ניקוד
+
+## הוראות
+
+צור משחק שבו תציג חיים ונקודות בצורה יצירתית. הצעה היא להציג את החיים כלבבות ואת הנקודות כמספר גדול בחלק התחתון המרכזי של המסך. תוכל להסתכל כאן על [משאבי משחק חינמיים](https://www.kenney.nl/)
+
+# קריטריונים
+
+| קריטריון | מצטיין                | מספק                       | דורש שיפור                |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | המשחק המלא מוצג        | המשחק מוצג באופן חלקי       | המשחק החלקי מכיל באגים     |
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/6-space-game/5-keeping-score/solution/README.md b/translations/he/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..e0c54aa2
--- /dev/null
+++ b/translations/he/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:22:33+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "he"
+}
+-->
+זהו מציין מקום, הושאר ריק בכוונה
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/6-space-game/5-keeping-score/your-work/README.md b/translations/he/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..012463f3
--- /dev/null
+++ b/translations/he/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-27T20:22:21+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "he"
+}
+-->
+זהו מציין מקום, הושאר ריק בכוונה
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/6-space-game/6-end-condition/README.md b/translations/he/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..ea107f59
--- /dev/null
+++ b/translations/he/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-27T20:29:51+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "he"
+}
+-->
+# בנה משחק חלל חלק 6: סיום והתחלה מחדש
+
+## חידון לפני ההרצאה
+
+[חידון לפני ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+יש דרכים שונות להגדיר *תנאי סיום* במשחק. זה תלוי בך, כיוצר המשחק, להחליט מדוע המשחק מסתיים. הנה כמה סיבות, בהנחה שאנחנו מדברים על משחק החלל שבנית עד כה:
+
+- **`N` ספינות אויב הושמדו**: זה די נפוץ, במיוחד אם מחלקים את המשחק לרמות שונות, שצריך להשמיד `N` ספינות אויב כדי להשלים רמה.
+- **הספינה שלך הושמדה**: ישנם משחקים שבהם אתה מפסיד אם הספינה שלך נהרסת. גישה נפוצה נוספת היא שימוש במושג "חיים". בכל פעם שהספינה שלך נהרסת, יורד לך חיים אחד. ברגע שכל החיים נגמרים, אתה מפסיד במשחק.
+- **אספת `N` נקודות**: תנאי סיום נפוץ נוסף הוא איסוף נקודות. איך משיגים נקודות תלוי בך, אבל זה די נפוץ להקצות נקודות לפעילויות שונות כמו השמדת ספינת אויב או איסוף פריטים שנופלים כאשר הם נהרסים.
+- **השלמת רמה**: זה עשוי לכלול כמה תנאים, כמו `X` ספינות אויב שהושמדו, `Y` נקודות שנאספו או אולי פריט מסוים שנאסף.
+
+## התחלה מחדש
+
+אם אנשים נהנים מהמשחק שלך, סביר להניח שהם ירצו לשחק בו שוב. ברגע שהמשחק מסתיים מכל סיבה שהיא, כדאי להציע אפשרות להתחיל מחדש.
+
+✅ חשוב קצת על אילו תנאים גורמים למשחק להסתיים, ואז איך אתה מתבקש להתחיל מחדש.
+
+## מה לבנות
+
+תוסיף את הכללים הבאים למשחק שלך:
+
+1. **ניצחון במשחק**. ברגע שכל ספינות האויב הושמדו, אתה מנצח במשחק. בנוסף, הצג הודעת ניצחון כלשהי.
+1. **התחלה מחדש**. ברגע שכל החיים שלך נגמרים או שהמשחק מנצח, עליך להציע דרך להתחיל מחדש את המשחק. זכור! תצטרך לאתחל את המשחק ולנקות את מצב המשחק הקודם.
+
+## שלבים מומלצים
+
+מצא את הקבצים שנוצרו עבורך בתיקיית המשנה `your-work`. היא אמורה להכיל את הדברים הבאים:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+תתחיל את הפרויקט שלך בתיקיית `your_work` על ידי הקלדת:
+
+```bash
+cd your-work
+npm start
+```
+
+הפקודה הנ"ל תפעיל שרת HTTP בכתובת `http://localhost:5000`. פתח דפדפן והזן את הכתובת הזו. המשחק שלך אמור להיות במצב משחק.
+
+> טיפ: כדי להימנע מהתראות ב-Visual Studio Code, ערוך את הפונקציה `window.onload` כך שתתקשר ל-`gameLoopId` כפי שהוא (ללא `let`), והכרז על `gameLoopId` בראש הקובץ, בנפרד: `let gameLoopId;`
+
+### הוסף קוד
+
+1. **מעקב אחר תנאי סיום**. הוסף קוד שעוקב אחר מספר האויבים, או אם ספינת הגיבור הושמדה על ידי הוספת שתי הפונקציות הבאות:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **הוסף לוגיקה למטפלי הודעות**. ערוך את ה-`eventEmitter` כדי לטפל בתנאים אלו:
+
+    ```javascript
+    eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+        first.dead = true;
+        second.dead = true;
+        hero.incrementPoints();
+
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+
+    eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+        enemy.dead = true;
+        hero.decrementLife();
+        if (isHeroDead())  {
+          eventEmitter.emit(Messages.GAME_END_LOSS);
+          return; // loss before victory
+        }
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+    
+    eventEmitter.on(Messages.GAME_END_WIN, () => {
+        endGame(true);
+    });
+      
+    eventEmitter.on(Messages.GAME_END_LOSS, () => {
+      endGame(false);
+    });
+    ```
+
+1. **הוסף סוגי הודעות חדשים**. הוסף את ההודעות האלו לאובייקט ה-constants:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **הוסף קוד התחלה מחדש** שמאפשר להתחיל מחדש את המשחק בלחיצה על כפתור נבחר.
+
+   1. **האזן ללחיצה על מקש `Enter`**. ערוך את ה-eventListener של החלון שלך כדי להאזין ללחיצה זו:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **הוסף הודעת התחלה מחדש**. הוסף את ההודעה הזו ל-constants של ההודעות:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **ממש את כללי המשחק**.  ממש את כללי המשחק הבאים:
+
+   1. **תנאי ניצחון לשחקן**. כאשר כל ספינות האויב מושמדות, הצג הודעת ניצחון.
+
+      1. ראשית, צור פונקציה `displayMessage()`:
+
+        ```javascript
+        function displayMessage(message, color = "red") {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = color;
+          ctx.textAlign = "center";
+          ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+        }
+        ```
+
+      1. צור פונקציה `endGame()`:
+
+        ```javascript
+        function endGame(win) {
+          clearInterval(gameLoopId);
+        
+          // set a delay so we are sure any paints have finished
+          setTimeout(() => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = "black";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            if (win) {
+              displayMessage(
+                "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+                "green"
+              );
+            } else {
+              displayMessage(
+                "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+              );
+            }
+          }, 200)  
+        }
+        ```
+
+   1. **לוגיקת התחלה מחדש**. כאשר כל החיים נגמרים או שהשחקן ניצח במשחק, הצג שהמשחק יכול להתחיל מחדש. בנוסף, התחל מחדש את המשחק כאשר לוחצים על מקש ההתחלה מחדש (אתה יכול להחליט איזה מקש יתאים לכך).
+
+      1. צור את הפונקציה `resetGame()`:
+
+        ```javascript
+        function resetGame() {
+          if (gameLoopId) {
+            clearInterval(gameLoopId);
+            eventEmitter.clear();
+            initGame();
+            gameLoopId = setInterval(() => {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              ctx.fillStyle = "black";
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              drawPoints();
+              drawLife();
+              updateGameObjects();
+              drawGameObjects(ctx);
+            }, 100);
+          }
+        }
+        ```
+
+     1. הוסף קריאה ל-`eventEmitter` כדי לאתחל את המשחק ב-`initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. הוסף פונקציה `clear()` ל-EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 ברכות, קפטן! המשחק שלך הושלם! כל הכבוד! 🚀 💥 👽
+
+---
+
+## 🚀 אתגר
+
+הוסף צליל! האם תוכל להוסיף צליל כדי לשפר את חוויית המשחק, אולי כאשר יש פגיעת לייזר, או כשהגיבור מת או מנצח? עיין ב-[sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) הזה כדי ללמוד כיצד להשמיע צליל באמצעות JavaScript.
+
+## חידון אחרי ההרצאה
+
+[חידון אחרי ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## סקירה ולמידה עצמית
+
+המשימה שלך היא ליצור משחק דוגמה חדש, אז חקור כמה משחקים מעניינים כדי לראות איזה סוג משחק תוכל לבנות.
+
+## משימה
+
+[בנה משחק דוגמה](assignment.md)
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/6-space-game/6-end-condition/assignment.md b/translations/he/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..3dbfc409
--- /dev/null
+++ b/translations/he/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-27T20:30:23+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "he"
+}
+-->
+# בנה משחק לדוגמה
+
+## הוראות
+
+נסה לבנות משחק קטן שבו תתרגל תנאי סיום שונים. שנה בין השגת מספר נקודות, איבוד כל החיים של הגיבור או הבסת כל המפלצות. בנה משהו פשוט כמו משחק הרפתקאות מבוסס קונסולה. השתמש בזרימת המשחק הבאה כהשראה:
+
+```
+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/he/6-space-game/6-end-condition/solution/README.md b/translations/he/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..742cb094
--- /dev/null
+++ b/translations/he/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:30:49+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "he"
+}
+-->
+זהו מציין מקום, הושאר ריק בכוונה
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/6-space-game/6-end-condition/your-work/README.md b/translations/he/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..02be9946
--- /dev/null
+++ b/translations/he/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-27T20:30:36+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "he"
+}
+-->
+זהו מציין מקום, הושאר ריק בכוונה
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/6-space-game/README.md b/translations/he/6-space-game/README.md
new file mode 100644
index 00000000..a748ce25
--- /dev/null
+++ b/translations/he/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-27T20:20:49+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "he"
+}
+-->
+# בנה משחק חלל
+
+משחק חלל ללימוד יסודות מתקדמים של JavaScript
+
+בשיעור הזה תלמדו איך לבנות משחק חלל משלכם. אם אי פעם שיחקתם במשחק "Space Invaders", המשחק הזה מבוסס על אותו רעיון: להטיס חללית ולירות על מפלצות שיורדות מלמעלה. כך ייראה המשחק המוגמר:
+
+![Finished game](../../../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/he/6-space-game/solution/README.md b/translations/he/6-space-game/solution/README.md
new file mode 100644
index 00000000..78f29cfb
--- /dev/null
+++ b/translations/he/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:31:01+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "he"
+}
+-->
+זהו טקסט זמני, הושאר ריק בכוונה
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/7-bank-project/1-template-route/README.md b/translations/he/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..23a6344b
--- /dev/null
+++ b/translations/he/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-27T21:02:35+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "he"
+}
+-->
+# בניית אפליקציית בנק חלק 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` בתוכה. נתחיל מתבנית [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code) של HTML:
+
+```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 אלמנט placeholder שנשתמש בו כדי להפעיל את המסכים השונים של האפליקציה שלנו:
+
+```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` על התבניות? האם ניתן להשתמש במשהו אחר כמו מחלקות (classes)?
+
+## הצגת תבניות עם 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);
+}
+```
+
+מה שאנו עושים כאן הוא בדיוק שלושת השלבים שתוארו לעיל. אנו מפעילים את התבנית עם ה-id `templateId`, ומכניסים את התוכן המשוכפל שלה בתוך ה-placeholder של האפליקציה שלנו. שימו לב שעלינו להשתמש ב-`cloneNode(true)` כדי להעתיק את כל תת-העץ של התבנית.
+
+כעת קראו לפונקציה זו עם אחת התבניות ובדקו את התוצאה.
+
+```js
+updateRoute('login');
+```
+
+✅ מה מטרת הקוד `app.innerHTML = '';`? מה קורה בלעדיו?
+
+## יצירת נתיבים
+
+כשמדברים על אפליקציית ווב, אנו מתכוונים ל-*Routing* ככוונה למפות **כתובות 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 הנוכחית, ואז להשתמש במפה שלנו כדי לקבל את ערך ה-template ID המתאים. נוכל להשתמש ב-[`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` על ידי הוספת fallback לאחד הנתיבים הקיימים אם לא נמצא התאמה.
+
+```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 הזה: שימוש ב-[hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) לפני הנתיב, ניתן ליישם ניתוב שעובד עם ניווט עוגן רגיל ואינו טוען מחדש את הדף, שכן מטרתו הייתה ליצור קישורים פנימיים בתוך דף.
+
+## טיפול בכפתורי חזור והתקדם של הדפדפן
+
+שימוש ב-`history.pushState` יוצר ערכים חדשים בהיסטוריית הניווט של הדפדפן. תוכלו לבדוק זאת על ידי לחיצה ממושכת על כפתור ה-*חזור* של הדפדפן שלכם, זה אמור להציג משהו כזה:
+
+![צילום מסך של היסטוריית ניווט](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.he.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)
+
+## סקירה ולימוד עצמי
+
+ניתוב הוא אחד החלקים המפתיעים במורכבותם בפיתוח ווב, במיוחד כשהווב עובר מהתנהגות של רענון דפים לאפליקציות דף יחיד. קראו מעט על [איך שירות 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/he/7-bank-project/1-template-route/assignment.md b/translations/he/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..5502dfd9
--- /dev/null
+++ b/translations/he/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-27T21:03:36+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "he"
+}
+-->
+# שיפור הניתוב
+
+## הוראות
+
+ההצהרה על הניתובים מכילה כרגע רק את מזהה התבנית לשימוש. אבל כאשר מציגים דף חדש, לפעמים נדרש קצת יותר. בואו נשפר את יישום הניתוב שלנו עם שתי תכונות נוספות:
+
+- להוסיף כותרות לכל תבנית ולעדכן את כותרת החלון עם הכותרת החדשה כאשר התבנית משתנה.
+- להוסיף אפשרות להריץ קוד לאחר שינוי התבנית. אנחנו רוצים להדפיס `'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/he/7-bank-project/2-forms/README.md b/translations/he/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..ede68751
--- /dev/null
+++ b/translations/he/7-bank-project/2-forms/README.md
@@ -0,0 +1,313 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-27T20:57:13+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "he"
+}
+-->
+# בניית אפליקציית בנק חלק 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), לדוגמה, כדי ליצור שדה שבו המשתמש יכול להזין את שם המשתמש שלו ניתן להשתמש ב:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+המאפיין `name` ישמש כשם המאפיין כאשר נתוני הטופס יישלחו. המאפיין `id` משמש לקשר בין `<label>` לבין רכיב השליטה בטופס.
+
+> עיין ברשימה המלאה של [סוגי `<input>`](https://developer.mozilla.org/docs/Web/HTML/Element/input) ו-[רכיבי טופס אחרים](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) כדי לקבל מושג על כל רכיבי ה-UI הטבעיים שניתן להשתמש בהם בעת בניית ממשק המשתמש שלך.
+
+✅ שים לב ש-`<input>` הוא [אלמנט ריק](https://developer.mozilla.org/docs/Glossary/Empty_element) שאין להוסיף לו תג סגירה תואם. עם זאת, ניתן להשתמש בסימון `<input/>` הסוגר את האלמנט בעצמו, אך זה אינו חובה.
+
+אלמנט `<button>` בתוך טופס הוא מעט מיוחד. אם לא תציין את מאפיין `type`, הוא יגיש את נתוני הטופס לשרת באופן אוטומטי כאשר לוחצים עליו. הנה הערכים האפשריים עבור `type`:
+
+- `submit`: ברירת המחדל בתוך `<form>`, הכפתור מפעיל את פעולת שליחת הטופס.
+- `reset`: הכפתור מאפס את כל רכיבי הטופס לערכים הראשוניים שלהם.
+- `button`: אינו מקצה פעולה ברירת מחדל כאשר לוחצים על הכפתור. ניתן להקצות לו פעולות מותאמות אישית באמצעות JavaScript.
+
+### משימה
+
+נתחיל בהוספת טופס לתבנית `login`. נצטרך שדה *שם משתמש* וכפתור *כניסה*.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <h2>Login</h2>
+    <form id="loginForm">
+      <label for="username">Username</label>
+      <input id="username" name="user" type="text">
+      <button>Login</button>
+    </form>
+  </section>
+</template>
+```
+
+אם תסתכל מקרוב, תוכל להבחין שהוספנו גם אלמנט `<label>` כאן. אלמנטים `<label>` משמשים להוספת שם לרכיבי UI, כמו שדה שם המשתמש שלנו. תוויות חשובות לקריאות הטפסים שלך, אך הן גם מביאות יתרונות נוספים:
+
+- על ידי קישור תווית לרכיב שליטה בטופס, היא עוזרת למשתמשים המשתמשים בטכנולוגיות מסייעות (כמו קורא מסך) להבין אילו נתונים הם נדרשים לספק.
+- ניתן ללחוץ על התווית כדי למקד ישירות את הקלט המשויך, מה שמקל על הגישה במכשירים מבוססי מסך מגע.
+
+> [נגישות](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) באינטרנט היא נושא חשוב מאוד שלעתים קרובות מתעלמים ממנו. בזכות [אלמנטים HTML סמנטיים](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) לא קשה ליצור תוכן נגיש אם משתמשים בהם בצורה נכונה. ניתן [לקרוא עוד על נגישות](https://developer.mozilla.org/docs/Web/Accessibility) כדי להימנע מטעויות נפוצות ולהפוך למפתח אחראי.
+
+כעת נוסיף טופס שני להרשמה, ממש מתחת לטופס הקודם:
+
+```html
+<hr/>
+<h2>Register</h2>
+<form id="registerForm">
+  <label for="user">Username</label>
+  <input id="user" name="user" type="text">
+  <label for="currency">Currency</label>
+  <input id="currency" name="currency" type="text" value="$">
+  <label for="description">Description</label>
+  <input id="description" name="description" type="text">
+  <label for="balance">Current balance</label>
+  <input id="balance" name="balance" type="number" value="0">
+  <button>Register</button>
+</form>
+```
+
+באמצעות מאפיין `value` ניתן להגדיר ערך ברירת מחדל עבור קלט מסוים.
+שימו לב גם שהקלט עבור `balance` הוא מסוג `number`. האם הוא נראה שונה מהקלטים האחרים? נסו לתקשר איתו.
+
+✅ האם ניתן לנווט ולהשתמש בטפסים באמצעות מקלדת בלבד? איך הייתם עושים זאת?
+
+## שליחת נתונים לשרת
+
+כעת, לאחר שיש לנו ממשק משתמש פונקציונלי, השלב הבא הוא לשלוח את הנתונים לשרת. בואו נעשה בדיקה מהירה באמצעות הקוד הנוכחי שלנו: מה קורה אם תלחצו על כפתור *כניסה* או *הרשמה*?
+
+האם שמתם לב לשינוי בכתובת ה-URL של הדפדפן?
+
+![צילום מסך של שינוי כתובת ה-URL בדפדפן לאחר לחיצה על כפתור ההרשמה](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.he.png)
+
+פעולת ברירת המחדל של `<form>` היא לשלוח את הטופס לכתובת ה-URL הנוכחית של השרת באמצעות [שיטת GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), תוך הוספת נתוני הטופס ישירות לכתובת ה-URL. לשיטה זו יש כמה חסרונות:
+
+- הנתונים שנשלחים מוגבלים בגודלם (כ-2000 תווים)
+- הנתונים גלויים ישירות בכתובת ה-URL (לא אידיאלי עבור סיסמאות)
+- היא אינה עובדת עם העלאות קבצים
+
+לכן ניתן לשנות אותה לשימוש בשיטת [POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) ששולחת את נתוני הטופס לשרת בגוף הבקשה של HTTP, ללא המגבלות הקודמות.
+
+> בעוד ש-POST היא השיטה הנפוצה ביותר לשליחת נתונים, [במצבים מסוימים](https://www.w3.org/2001/tag/doc/whenToUseGet.html) עדיף להשתמש בשיטת GET, למשל בעת יישום שדה חיפוש.
+
+### משימה
+
+הוסיפו מאפיינים `action` ו-`method` לטופס ההרשמה:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+כעת נסו להירשם לחשבון חדש עם שמכם. לאחר לחיצה על כפתור *הרשמה* אמור להופיע משהו כזה:
+
+![חלון דפדפן בכתובת localhost:5000/api/accounts, המציג מחרוזת JSON עם נתוני משתמש](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.he.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 and Await לניהול הבטחות](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await לניהול הבטחות")
+
+> 🎥 לחצו על התמונה למעלה לסרטון על async/await.
+
+אנו משתמשים ב-`fetch()` API כדי לשלוח נתוני JSON לשרת. שיטה זו מקבלת שני פרמטרים:
+
+- כתובת ה-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.he.png)
+
+✅ האם לדעתכם הנתונים נשלחים לשרת בצורה מאובטחת? מה אם מישהו יוכל ליירט את הבקשה? ניתן לקרוא על [HTTPS](https://en.wikipedia.org/wiki/HTTPS) כדי ללמוד עוד על תקשורת נתונים מאובטחת.
+
+## אימות נתונים
+
+אם תנסו להירשם לחשבון חדש מבלי להגדיר שם משתמש תחילה, תוכלו לראות שהשרת מחזיר שגיאה עם קוד סטטוס [400 (בקשה שגויה)](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">
+```
+
+כעת, אם תלחצו על כפתור *Register* ושדה כלשהו אינו עומד בכללי האימות שהגדרנו, תראו משהו כזה:
+
+![צילום מסך שמראה שגיאת אימות בעת ניסיון לשלוח את הטופס](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.he.png)
+
+אימות מסוג זה, שמתבצע *לפני* שליחת נתונים לשרת, נקרא **אימות בצד הלקוח**. אך שימו לב שלא תמיד ניתן לבצע את כל הבדיקות מבלי לשלוח את הנתונים. לדוגמה, לא נוכל לבדוק כאן אם כבר קיים חשבון עם אותו שם משתמש מבלי לשלוח בקשה לשרת. אימות נוסף שמתבצע בשרת נקרא **אימות בצד השרת**.
+
+בדרך כלל יש ליישם את שניהם. בעוד שאימות בצד הלקוח משפר את חוויית המשתמש על ידי מתן משוב מיידי, אימות בצד השרת הוא קריטי כדי לוודא שהנתונים שאתם מעבדים הם תקינים ובטוחים.
+
+---
+
+## 🚀 אתגר
+
+הציגו הודעת שגיאה ב-HTML אם המשתמש כבר קיים.
+
+הנה דוגמה לאיך עמוד ההתחברות הסופי יכול להיראות לאחר מעט עיצוב:
+
+![צילום מסך של עמוד ההתחברות לאחר הוספת עיצובי CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.he.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/he/7-bank-project/2-forms/assignment.md b/translations/he/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..a9e3dff9
--- /dev/null
+++ b/translations/he/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-27T20:58:09+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "he"
+}
+-->
+# עצב את אפליקציית הבנק שלך
+
+## הוראות
+
+צור קובץ חדש בשם `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/he/7-bank-project/3-data/README.md b/translations/he/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..a143c4b9
--- /dev/null
+++ b/translations/he/7-bank-project/3-data/README.md
@@ -0,0 +1,347 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-27T20:59:51+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "he"
+}
+-->
+# בניית אפליקציית בנקאות חלק 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.he.png)
+
+כאשר אפליקציות אינטרנט החלו להיות מורכבות ואינטראקטיביות יותר, הופיעה טכניקה חדשה בשם [AJAX (JavaScript ו-XML אסינכרוניים)](https://en.wikipedia.org/wiki/Ajax_(programming)). טכניקה זו מאפשרת לאפליקציות אינטרנט לשלוח ולקבל נתונים משרת בצורה אסינכרונית באמצעות JavaScript, מבלי לטעון מחדש את דף ה-HTML, מה שמוביל לעדכונים מהירים יותר ואינטראקציות חלקות יותר. כאשר מתקבלים נתונים חדשים מהשרת, ניתן גם לעדכן את דף ה-HTML הנוכחי באמצעות JavaScript באמצעות ה-[DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API. עם הזמן, גישה זו התפתחה למה שמכונה כיום [*אפליקציה חד-דפית* או *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![תהליך עדכון באפליקציה חד-דפית](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.he.png)
+
+כאשר AJAX הוצג לראשונה, ה-API היחיד שהיה זמין לשליפת נתונים אסינכרונית היה [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). אך דפדפנים מודרניים תומכים כיום גם ב-API נוח וחזק יותר בשם [`Fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API), המשתמש ב-Promises ומתאים יותר לטיפול בנתוני 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;
+```
+
+לאחר שמירת נתוני המשתמש במשתנה, נוכל לנווט מדף ההתחברות לדף לוח הבקרה באמצעות הפונקציה `navigate()` שכבר יש לנו.
+
+לבסוף, עלינו לקרוא לפונקציית `login` שלנו כאשר טופס ההתחברות נשלח, על ידי שינוי ה-HTML:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+בדוק שהכול פועל כראוי על ידי יצירת חשבון חדש וניסיון להתחבר באמצעות אותו חשבון.
+
+לפני שנעבור לחלק הבא, נוכל גם להשלים את פונקציית `register` על ידי הוספת הקוד הבא בסוף הפונקציה:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ האם ידעת שבברירת מחדל, ניתן לקרוא ל-API של שרתים רק מאותו *דומיין ופורט* של דף האינטרנט שאתה צופה בו? זהו מנגנון אבטחה שמיושם על ידי דפדפנים. אבל רגע, אפליקציית האינטרנט שלנו פועלת ב-`localhost:3000` בעוד ששרת ה-API פועל ב-`localhost:5000`, איך זה עובד? באמצעות טכניקה שנקראת [שיתוף משאבים בין מקורות (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), ניתן לבצע בקשות HTTP בין מקורות אם השרת מוסיף כותרות מיוחדות לתגובה, המאפשרות חריגים לדומיינים מסוימים.
+
+> למדו עוד על APIs על ידי השתתפות בשיעור זה [כאן](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)
+
+## עדכון HTML להצגת נתונים
+
+כעת, כשיש לנו את נתוני המשתמש, עלינו לעדכן את ה-HTML הקיים כדי להציג אותם. אנחנו כבר יודעים כיצד לשלוף אלמנט מה-DOM באמצעות לדוגמה `document.getElementById()`. לאחר שיש לנו אלמנט בסיסי, הנה כמה APIs שניתן להשתמש בהם כדי לשנות אותו או להוסיף לו אלמנטים ילדים:
+
+- באמצעות המאפיין [`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 (Cross-site scripting)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting).
+
+### משימה
+
+לפני שנעבור למסך לוח הבקרה, יש דבר נוסף שעלינו לעשות בדף ההתחברות. כרגע, אם תנסה להתחבר עם שם משתמש שאינו קיים, הודעה מוצגת בקונסול אך עבור משתמש רגיל שום דבר לא משתנה ואין לך מושג מה קורה.
+
+נוסיף אלמנט placeholder בטופס ההתחברות שבו נוכל להציג הודעת שגיאה במידת הצורך. מקום טוב יהיה ממש לפני כפתור ההתחברות `<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* של אלמנט וב-*text*, היא תעדכן את תוכן הטקסט של אלמנט ה-DOM עם ה-`id` המתאים. נשתמש בשיטה זו במקום הודעת השגיאה הקודמת בפונקציית `login`:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+כעת, אם תנסה להתחבר עם חשבון לא תקין, תראה משהו כזה:
+
+![צילום מסך המציג את הודעת השגיאה במהלך התחברות](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.he.png)
+
+כעת יש לנו טקסט שגיאה שמופיע חזותית, אך אם תנסה זאת עם קורא מסך תבחין ששום דבר לא מוכרז. כדי שטקסט שנוסף לדף באופן דינמי יוכרז על ידי קוראי מסך, יש להשתמש במשהו שנקרא [אזור חי](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 כדי להוסיף אלמנטים placeholder:
+
+```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` למילוי ה-placeholder:
+
+```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
+
+בשיעור הראשון [השתמשנו בתבניות HTML](../1-template-route/README.md) יחד עם השיטה [`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>
+```
+
+תבנית זו מייצגת שורת טבלה אחת, עם 3 העמודות שאנו רוצים לאכלס: *תאריך*, *אובייקט* ו-*סכום* של עסקה.
+
+לאחר מכן, הוסיפו את המאפיין `id` לאלמנט `<tbody>` של הטבלה בתוך תבנית לוח הבקרה כדי להקל על מציאתו באמצעות JavaScript:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+ה-HTML שלנו מוכן, נעבור לקוד JavaScript וניצור פונקציה חדשה בשם `createTransactionRow`:
+
+```js
+function createTransactionRow(transaction) {
+  const template = document.getElementById('transaction');
+  const transactionRow = template.content.cloneNode(true);
+  const tr = transactionRow.querySelector('tr');
+  tr.children[0].textContent = transaction.date;
+  tr.children[1].textContent = transaction.object;
+  tr.children[2].textContent = transaction.amount.toFixed(2);
+  return transactionRow;
+}
+```
+
+פונקציה זו עושה בדיוק מה ששמה מרמז: באמצעות התבנית שיצרנו קודם, היא יוצרת שורת טבלה חדשה וממלאת את תוכנה באמצעות נתוני עסקה. נשתמש בזה בפונקציה `updateDashboard()` שלנו כדי לאכלס את הטבלה:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+כאן אנו משתמשים בשיטה [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) שיוצרת פרגמנט 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) מכיוון שהיא מאפשרת לצרף טקסט או [Nodes של DOM](https://developer.mozilla.org/docs/Web/API/Node) לאלמנט אב, מה שמתאים לכל מקרי השימוש שלנו.
+אם תנסה להשתמש בחשבון `test` כדי להתחבר, כעת תוכל לראות רשימת עסקאות בלוח הבקרה 🎉.
+
+---
+
+## 🚀 אתגר
+
+עבדו יחד כדי לגרום לדף לוח הבקרה להיראות כמו אפליקציית בנק אמיתית. אם כבר עיצבתם את האפליקציה שלכם, נסו להשתמש ב-[media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) כדי ליצור [עיצוב רספונסיבי](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) שעובד היטב גם במחשבים שולחניים וגם במכשירים ניידים.
+
+הנה דוגמה לדף לוח בקרה מעוצב:
+
+![צילום מסך של תוצאה לדוגמה של לוח הבקרה לאחר עיצוב](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.he.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/he/7-bank-project/3-data/assignment.md b/translations/he/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..0a8166ac
--- /dev/null
+++ b/translations/he/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-27T21:01:01+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "he"
+}
+-->
+# ארגן מחדש והוסף הערות לקוד שלך
+
+## הוראות
+
+ככל שהקוד שלך גדל, חשוב לארגן אותו מחדש לעיתים קרובות כדי לשמור עליו קריא וניתן לתחזוקה לאורך זמן. הוסף הערות וארגן מחדש את `app.js` כדי לשפר את איכות הקוד:
+
+- הוצא קבועים, כמו כתובת הבסיס של ה-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/he/7-bank-project/4-state-management/README.md b/translations/he/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..0841e7fa
--- /dev/null
+++ b/translations/he/7-bank-project/4-state-management/README.md
@@ -0,0 +1,294 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-27T21:05:39+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "he"
+}
+-->
+# בניית אפליקציית בנקאות חלק 4: מושגים בניהול מצב
+
+## שאלון לפני השיעור
+
+[שאלון לפני השיעור](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### הקדמה
+
+ככל שאפליקציית ווב גדלה, קשה יותר לעקוב אחר כל זרימות הנתונים. איזה קוד מקבל את הנתונים, איזה עמוד צורך אותם, איפה ומתי צריך לעדכן אותם... קל להגיע לקוד מבולגן שקשה לתחזק. זה נכון במיוחד כשצריך לשתף נתונים בין עמודים שונים באפליקציה, כמו נתוני משתמש. מושג *ניהול מצב* תמיד היה קיים בכל סוגי התוכניות, אבל ככל שאפליקציות ווב ממשיכות לגדול במורכבות, זה הפך לנקודה מרכזית שיש לחשוב עליה במהלך הפיתוח.
+
+בחלק האחרון הזה, נבחן את האפליקציה שבנינו כדי לחשוב מחדש על איך המצב מנוהל, כך שנוכל לתמוך ברענון הדפדפן בכל נקודה ולשמר נתונים בין סשנים של משתמשים.
+
+### דרישות מקדימות
+
+עליכם להשלים את חלק [שאיבת הנתונים](../3-data/README.md) של אפליקציית הווב עבור שיעור זה. כמו כן, עליכם להתקין את [Node.js](https://nodejs.org) ולהריץ את [שרת ה-API](../api/README.md) באופן מקומי כדי שתוכלו לנהל נתוני חשבון.
+
+ניתן לבדוק שהשרת פועל כראוי על ידי ביצוע הפקודה הזו בטרמינל:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## חשיבה מחדש על ניהול מצב
+
+בשיעור [הקודם](../3-data/README.md), הצגנו מושג בסיסי של מצב באפליקציה שלנו עם המשתנה הגלובלי `account` שמכיל את נתוני הבנק של המשתמש המחובר כרגע. עם זאת, היישום הנוכחי שלנו מכיל כמה פגמים. נסו לרענן את העמוד כשאתם נמצאים בלוח הבקרה. מה קורה?
+
+ישנן 3 בעיות בקוד הנוכחי:
+
+- המצב אינו נשמר, רענון הדפדפן מחזיר אתכם לעמוד ההתחברות.
+- ישנן פונקציות רבות שמעדכנות את המצב. ככל שהאפליקציה גדלה, זה יכול להקשות על מעקב אחר השינויים וקל לשכוח לעדכן אחת מהן.
+- המצב אינו מנוקה, כך שכאשר לוחצים על *התנתקות*, נתוני החשבון עדיין שם למרות שאתם בעמוד ההתחברות.
+
+יכולנו לעדכן את הקוד שלנו כדי להתמודד עם הבעיות הללו אחת אחת, אבל זה היה יוצר כפילות קוד רבה והופך את האפליקציה למורכבת יותר וקשה יותר לתחזוקה. או שיכולנו לעצור לכמה דקות ולחשוב מחדש על האסטרטגיה שלנו.
+
+> אילו בעיות אנחנו באמת מנסים לפתור כאן?
+
+[ניהול מצב](https://en.wikipedia.org/wiki/State_management) עוסק במציאת גישה טובה לפתרון שתי הבעיות הספציפיות הללו:
+
+- איך לשמור על זרימות הנתונים באפליקציה מובנות?
+- איך לשמור על נתוני המצב תמיד מסונכרנים עם ממשק המשתמש (ולהיפך)?
+
+ברגע שטיפלתם בזה, כל בעיה אחרת שעשויה להיות לכם עשויה להיפתר כבר או להפוך לקלה יותר לפתרון. ישנן גישות רבות לפתרון בעיות אלו, אבל נבחר פתרון נפוץ שמורכב מ**מרכזיות הנתונים והדרכים לשנות אותם**. זרימות הנתונים ייראו כך:
+
+![סכמה שמראה את זרימות הנתונים בין ה-HTML, פעולות המשתמש והמצב](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.he.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, כמו נתוני חשבון המשתמש במקרה שלנו. אבל לפעמים, זה גם מעניין לשמור נתונים באפליקציה בצד הלקוח שרצה בדפדפן שלכם, לשיפור חוויית המשתמש או לשיפור ביצועי הטעינה.
+
+כשאתם רוצים לשמור נתונים בדפדפן שלכם, יש כמה שאלות חשובות שכדאי לשאול את עצמכם:
+
+- *האם הנתונים רגישים?* כדאי להימנע מאחסון נתונים רגישים בצד הלקוח, כמו סיסמאות משתמש.
+- *לכמה זמן אתם צריכים לשמור את הנתונים האלה?* האם אתם מתכננים לגשת לנתונים רק עבור הסשן הנוכחי או שאתם רוצים שהם יישמרו לנצח?
+
+ישנן דרכים רבות לאחסן מידע בתוך אפליקציית ווב, תלוי במה שאתם רוצים להשיג. לדוגמה, תוכלו להשתמש ב-URLs כדי לשמור שאילתת חיפוש, ולהפוך אותה לשיתופית בין משתמשים. תוכלו גם להשתמש ב-[עוגיות HTTP](https://developer.mozilla.org/docs/Web/HTTP/Cookies) אם הנתונים צריכים להיות משותפים עם השרת, כמו מידע [אימות](https://en.wikipedia.org/wiki/Authentication).
+
+אפשרות נוספת היא להשתמש באחת מה-APIs הרבות של הדפדפן לאחסון נתונים. שתיים מהן מעניינות במיוחד:
+
+- [`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` מלבד שהנתונים שנשמרים בו נמחקים כאשר הסשן מסתיים (כאשר הדפדפן נסגר).
+
+שימו לב ששתי ה-APIs הללו מאפשרות רק לשמור [מחרוזות](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();
+```
+
+כאן אנחנו משחזרים את הנתונים שנשמרו, ואם יש כאלה אנחנו מעדכנים את המצב בהתאם. חשוב לעשות זאת *לפני* עדכון המסלול, מכיוון שייתכן שיש קוד שמסתמך על המצב במהלך עדכון העמוד.
+
+אנחנו יכולים גם להפוך את עמוד *לוח הבקרה* לעמוד ברירת המחדל של האפליקציה שלנו, מכיוון שאנחנו עכשיו שומרים את נתוני החשבון. אם לא נמצאו נתונים, לוח הבקרה דואג להפנות לעמוד *ההתחברות* בכל מקרה. ב-`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 }
+};
+```
+
+נסו לרענן את לוח הבקרה עכשיו, הוא אמור להציג את נתוני החשבון המעודכנים.
+
+---
+
+## 🚀 אתגר
+
+עכשיו כשאנחנו טוענים מחדש את נתוני החשבון בכל פעם שלוח הבקרה נטען, האם אתם חושבים שאנחנו עדיין צריכים לשמור *את כל נתוני החשבון*?
+
+נסו לעבוד יחד כדי לשנות מה נשמר ומה נטען מ-`localStorage` כך שיכלול רק את מה שדרוש באופן מוחלט כדי שהאפליקציה תעבוד.
+
+## שאלון אחרי השיעור
+[שאלון לאחר ההרצאה](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## משימה
+
+[מימוש דיאלוג "הוספת עסקה"](assignment.md)
+
+להלן דוגמה לתוצאה לאחר השלמת המשימה:
+
+![צילום מסך המציג דוגמה לדיאלוג "הוספת עסקה"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.he.png)
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/7-bank-project/4-state-management/assignment.md b/translations/he/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..fff7ab44
--- /dev/null
+++ b/translations/he/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-27T21:06:41+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "he"
+}
+-->
+# יישום דיאלוג "הוספת עסקה"
+
+## הוראות
+
+לאפליקציית הבנק שלנו עדיין חסרה תכונה חשובה: האפשרות להזין עסקאות חדשות.  
+באמצעות כל מה שלמדת בארבעת השיעורים הקודמים, יישם דיאלוג "הוספת עסקה":
+
+- הוסף כפתור "הוספת עסקה" בעמוד הדשבורד
+- תוכל ליצור עמוד חדש עם תבנית 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.he.png)
+
+## קריטריונים להערכה
+
+| קריטריון | מצטיין                                                                                          | מספק                                                                                                                   | דורש שיפור                                  |
+| -------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
+|          | הוספת עסקה מיושמת במלואה תוך שמירה על כל שיטות העבודה המומלצות שנלמדו בשיעורים.                 | הוספת עסקה מיושמת, אך לא תוך שמירה על שיטות העבודה המומלצות שנלמדו בשיעורים, או פועלת רק באופן חלקי.                  | הוספת עסקה אינה פועלת כלל.                 |
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/7-bank-project/README.md b/translations/he/7-bank-project/README.md
new file mode 100644
index 00000000..67192e94
--- /dev/null
+++ b/translations/he/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-27T20:54:58+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "he"
+}
+-->
+# :dollar: בנה בנק
+
+בפרויקט הזה תלמדו איך לבנות בנק פיקטיבי. השיעורים כוללים הוראות על איך לעצב אפליקציית ווב ולספק נתיבים, לבנות טפסים, לנהל מצב, ולמשוך נתונים מ-API שממנו תוכלו לקבל את נתוני הבנק.
+
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.he.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.he.png) |
+|--------------------------------|--------------------------------|
+
+## שיעורים
+
+1. [תבניות HTML ונתיבים באפליקציית ווב](1-template-route/README.md)
+2. [בניית טופס התחברות והרשמה](2-forms/README.md)
+3. [שיטות למשיכת נתונים ושימוש בהם](3-data/README.md)
+4. [מושגים בניהול מצב](4-state-management/README.md)
+
+### קרדיטים
+
+השיעורים נכתבו באהבה על ידי [יוהאן לסורסה](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/he/7-bank-project/api/README.md b/translations/he/7-bank-project/api/README.md
new file mode 100644
index 00000000..5b520fb5
--- /dev/null
+++ b/translations/he/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-27T20:55:23+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "he"
+}
+-->
+# API של בנק
+
+> API של בנק שנבנה באמצעות [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+ה-API כבר נבנה עבורכם ואינו חלק מהתרגיל.
+
+עם זאת, אם אתם מעוניינים ללמוד כיצד לבנות API כזה, תוכלו לעקוב אחר סדרת הסרטונים הזו: https://aka.ms/NodeBeginner (סרטונים 17 עד 21 מכסים בדיוק את ה-API הזה).
+
+תוכלו גם להסתכל על מדריך אינטראקטיבי זה: https://aka.ms/learn/express-api
+
+## הפעלת השרת
+
+ודאו ש-[Node.js](https://nodejs.org) מותקן אצלכם.
+
+1. בצעו Git clone לריפו הזה [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
+2. פתחו את הטרמינל שלכם ונווטו לתיקיית `Web-Dev-For-Beginners/7-bank-project/api`.
+3. הריצו `npm install` והמתינו עד שכל החבילות יותקנו (יכול לקחת זמן בהתאם לאיכות חיבור האינטרנט שלכם).
+4. כשההתקנה מסתיימת, הריצו `npm start` ואתם מוכנים להתחיל.
+
+השרת אמור להתחיל להאזין על פורט `5000`.
+*שרת זה ירוץ יחד עם הטרמינל של שרת האפליקציה הראשי של הבנק (מאזין על פורט `3000`), אל תסגרו אותו.*
+
+> הערה: כל הרשומות נשמרות בזיכרון ואינן נשמרות באופן קבוע, כך שכאשר השרת נעצר כל הנתונים נמחקים.
+
+## פרטי ה-API
+
+נתיב                                        | תיאור
+---------------------------------------------|------------------------------------
+GET    /api/                                 | קבלת מידע על השרת
+POST   /api/accounts/                        | יצירת חשבון, לדוגמה: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | קבלת כל הנתונים עבור החשבון שצוין
+DELETE /api/accounts/:user                   | מחיקת החשבון שצוין
+POST   /api/accounts/:user/transactions      | הוספת טרנזקציה, לדוגמה: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | מחיקת טרנזקציה שצוינה
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/7-bank-project/solution/README.md b/translations/he/7-bank-project/solution/README.md
new file mode 100644
index 00000000..146517eb
--- /dev/null
+++ b/translations/he/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-27T21:03:57+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "he"
+}
+-->
+# אפליקציית בנק
+
+> פתרון לדוגמה עבור פרויקט אפליקציית הבנק, שנבנה עם HTML5, CSS ו-JavaScript בלבד (ללא שימוש בפריימוורקים או ספריות).
+
+## הפעלת האפליקציה
+
+ראשית, ודא ששרת ה-API [API server](../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/he/8-code-editor/1-using-a-code-editor/README.md b/translations/he/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..23683a77
--- /dev/null
+++ b/translations/he/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,159 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
+  "translation_date": "2025-08-27T20:40:47+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "he"
+}
+-->
+# שימוש בעורך קוד
+
+השיעור הזה מכסה את הבסיס לשימוש ב-[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.he.png)
+
+ישנם שלושה חלקים עיקריים, מהשמאל לימין:
+
+1. **סרגל הפעילות** הכולל כמה אייקונים, כמו זכוכית מגדלת 🔎, גלגל שיניים ⚙️, ועוד כמה.
+2. **סרגל הצד** שמתרחב כברירת מחדל ל-**Explorer**.
+3. **אזור הקוד** בצד ימין.
+
+לחצו על כל אחד מהאייקונים כדי להציג תפריט שונה. לאחר מכן, לחצו על **Explorer** כדי לחזור לנקודת ההתחלה.
+
+כאשר תתחילו ליצור קוד או לשנות קוד קיים, זה יקרה באזור הגדול בצד ימין. תשתמשו באזור הזה גם כדי לצפות בקוד קיים, כפי שתעשו בהמשך.
+
+## פתיחת מאגר GitHub
+
+הדבר הראשון שתצטרכו לעשות הוא לפתוח מאגר GitHub. ישנן דרכים שונות לפתוח מאגר. בחלק הזה תראו שתי דרכים שונות לפתוח מאגר כדי שתוכלו להתחיל לעבוד על שינויים.
+
+### 1. באמצעות העורך
+
+השתמשו בעורך עצמו כדי לפתוח מאגר מרוחק. אם תלכו ל-[VSCode.dev](https://vscode.dev), תראו כפתור **"Open Remote Repository"**:
+
+![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.he.png)
+
+ניתן גם להשתמש ב-Command Palette. ה-Command Palette הוא תיבת קלט שבה ניתן להקליד כל מילה שהיא חלק מפעולה או פקודה כדי למצוא את הפקודה המתאימה לביצוע. השתמשו בתפריט בפינה השמאלית העליונה, בחרו **View**, ואז בחרו **Command Palette**, או השתמשו בקיצור המקלדת: Ctrl-Shift-P (ב-MacOS זה יהיה Command-Shift-P).
+
+![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.he.png)
+
+לאחר פתיחת התפריט, הקלידו **open remote repository**, ואז בחרו באפשרות הראשונה. מאגרים רבים שאתם חלק מהם או שפתחתם לאחרונה יופיעו. ניתן גם להשתמש בכתובת URL מלאה של GitHub כדי לבחור אחד. השתמשו בכתובת הבאה והדביקו אותה בתיבה:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ אם הצלחתם, כל הקבצים של המאגר הזה ייטענו בעורך הטקסט.
+
+### 2. באמצעות כתובת URL
+
+ניתן גם להשתמש בכתובת URL ישירות כדי לטעון מאגר. לדוגמה, הכתובת המלאה של המאגר הנוכחי היא [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), אך ניתן להחליף את הדומיין של GitHub ב-`VSCode.dev/github` ולטעון את המאגר ישירות. הכתובת שתתקבל תהיה [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.he.png)
+
+### 2. עריכה ושמירת קובץ במאגר
+
+שימוש ב-VSCode.dev הוא מועיל כאשר רוצים לבצע עדכונים מהירים לפרויקט מבלי לטעון תוכנה מקומית.  
+כדי לעדכן את הקוד שלכם, לחצו על אייקון **Explorer**, שנמצא גם הוא בסרגל הפעילות, כדי לצפות בקבצים ובתיקיות במאגר.  
+בחרו קובץ כדי לפתוח אותו באזור הקוד, בצעו את השינויים ושמרו.
+
+![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.he.png)
+
+לאחר שסיימתם לעדכן את הפרויקט, בחרו באייקון **`source control`**, שמכיל את כל השינויים החדשים שביצעתם במאגר.
+
+כדי לצפות בשינויים שביצעתם בפרויקט, בחרו בקובץ/ים בתיקיית `Changes` בסרגל הצד המורחב. זה יפתח **'Working Tree'** שבו תוכלו לראות באופן חזותי את השינויים שביצעתם בקובץ. אדום מציין הסרה מהפרויקט, בעוד ירוק מציין תוספת.
+
+![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.he.png)
+
+אם אתם מרוצים מהשינויים שביצעתם, רחפו מעל תיקיית `Changes` ולחצו על כפתור `+` כדי לשלב את השינויים. שילוב פירושו הכנת השינויים שלכם להתחייבות ל-GitHub.
+
+אם אינכם מרוצים מחלק מהשינויים ורוצים לבטל אותם, רחפו מעל תיקיית `Changes` ובחרו באייקון `undo`.
+
+לאחר מכן, הקלידו **הודעת התחייבות** _(תיאור של השינוי שביצעתם בפרויקט)_, לחצו על אייקון ה-`check` כדי להתחייב ולדחוף את השינויים.
+
+לאחר שסיימתם לעבוד על הפרויקט, בחרו באייקון **תפריט ההמבורגר** בפינה השמאלית העליונה כדי לחזור למאגר ב-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.he.png)
+
+ניתן גם לצפות בכל התוספים שהותקנו בעבר על ידי הרחבת תיקיית **`Installed`**, תוספים פופולריים שמשתמשים בהם רוב המפתחים בתיקיית **`Popular`**, ותוספים מומלצים עבורכם על סמך משתמשים באותו סביבת עבודה או קבצים שפתחתם לאחרונה בתיקיית **`Recommended`**.
+
+![View extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.he.png)
+
+### 1. התקנת תוספים
+
+כדי להתקין תוסף, הקלידו את שם התוסף בשדה החיפוש ולחצו עליו כדי לצפות במידע נוסף על התוסף באזור הקוד לאחר שהוא מופיע בסרגל הצד המורחב.
+
+ניתן ללחוץ על **כפתור ההתקנה הכחול** בסרגל הצד המורחב כדי להתקין או להשתמש בכפתור ההתקנה שמופיע באזור הקוד לאחר שבחרתם בתוסף לצפייה במידע נוסף.
+
+![Install extensions](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. התאמת תוספים
+
+לאחר התקנת התוסף, ייתכן שתצטרכו לשנות את ההתנהגות שלו ולהתאים אותו להעדפותיכם.  
+לשם כך, בחרו באייקון **Extensions**, והפעם התוסף שלכם יופיע בתיקיית **Installed**, לחצו על **אייקון הגלגל** ועברו ל-**Extensions Setting**.
+
+![Modify extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.he.png)
+
+### 3. ניהול תוספים
+
+לאחר התקנה ושימוש בתוסף, VSCode.dev מציע אפשרויות לניהול התוסף בהתאם לצרכים שונים. לדוגמה, תוכלו לבחור:
+
+- **השבתה:** _(ניתן להשבית תוסף באופן זמני כאשר אינכם זקוקים לו אך אינכם רוצים להסיר אותו לחלוטין)_
+
+    בחרו בתוסף המותקן בסרגל הצד המורחב > לחצו על אייקון הגלגל > בחרו 'Disable' או 'Disable (Workspace)' **או** פתחו את התוסף באזור הקוד ולחצו על כפתור ההשבתה הכחול.
+
+- **הסרה:** בחרו בתוסף המותקן בסרגל הצד המורחב > לחצו על אייקון הגלגל > בחרו '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/he/8-code-editor/1-using-a-code-editor/assignment.md b/translations/he/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..6c867dbf
--- /dev/null
+++ b/translations/he/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-27T20:42:09+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "he"
+}
+-->
+# יצירת אתר קורות חיים באמצעות 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.he.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.he.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.he.png)
+
+אם אתם מרוצים מהשינויים שביצעתם, רחפו מעל תיקיית `Changes` ולחצו על כפתור `+` כדי לשלב את השינויים.
+
+הקלידו הודעת commit _(תיאור השינוי שביצעתם בפרויקט)_ ובצעו commit לשינויים שלכם על ידי לחיצה על סימן ה-check. לאחר שסיימתם לעבוד על הפרויקט, בחרו בסמל תפריט ההמבורגר בפינה השמאלית העליונה כדי לחזור למאגר ב-GitHub.
+
+מזל טוב 🎉 יצרתם אתר קורות חיים באמצעות vscode.dev בכמה צעדים פשוטים.
+
+## 🚀 אתגר
+
+פתחו מאגר מרוחק שיש לכם הרשאות לבצע בו שינויים ועדכנו כמה קבצים. לאחר מכן, נסו ליצור ענף חדש עם השינויים שלכם ובצעו Pull Request.
+
+## סקירה ולימוד עצמי
+
+קראו עוד על [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) ועל כמה מהתכונות האחרות שלו.
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/CODE_OF_CONDUCT.md b/translations/he/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..158583a5
--- /dev/null
+++ b/translations/he/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-27T20:03:15+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "he"
+}
+-->
+# קוד ההתנהגות של קוד פתוח של מיקרוסופט
+
+הפרויקט הזה אימץ את [קוד ההתנהגות של קוד פתוח של מיקרוסופט](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
+
+משאבים:
+
+- [קוד ההתנהגות של קוד פתוח של מיקרוסופט](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/he/CONTRIBUTING.md b/translations/he/CONTRIBUTING.md
new file mode 100644
index 00000000..f6c7676d
--- /dev/null
+++ b/translations/he/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-27T20:04:34+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "he"
+}
+-->
+# תרומה
+
+פרויקט זה מקבל בברכה תרומות והצעות. רוב התרומות דורשות ממך להסכים להסכם רישיון תורם (CLA) שמצהיר שיש לך את הזכות, ואתה אכן מעניק לנו את הזכויות להשתמש בתרומתך. לפרטים נוספים, בקר ב-[https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+כאשר אתה מגיש בקשת משיכה (pull request), בוט ה-CLA יבדוק באופן אוטומטי אם עליך לספק CLA ויעדכן את ה-PR בהתאם (לדוגמה, תווית, תגובה). פשוט עקוב אחר ההוראות שהבוט מספק. תצטרך לעשות זאת רק פעם אחת בכל המאגרים שמשתמשים ב-CLA שלנו. אנא נסה גם להסביר מדוע ביצעת את השינוי כדי שנוכל להבין טוב יותר את בקשתך.
+
+פרויקט זה אימץ את [קוד ההתנהגות של קוד פתוח של מיקרוסופט](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/he/README.md b/translations/he/README.md
new file mode 100644
index 00000000..498b5b34
--- /dev/null
+++ b/translations/he/README.md
@@ -0,0 +1,206 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b672130244189715ac084c3259f6ab58",
+  "translation_date": "2025-08-27T20:00:56+00:00",
+  "source_file": "README.md",
+  "language_code": "he"
+}
+-->
+[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
+[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
+[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
+[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+
+[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
+[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
+
+[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)  
+
+[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)  
+
+# פיתוח אתרים למתחילים - תוכנית לימודים  
+
+למדו את יסודות פיתוח האתרים עם קורס מקיף בן 12 שבועות מבית Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מתמקד ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריומים, תוספי דפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ומשימות מעשיות. שפרו את המיומנויות שלכם והעמיקו את הידע שלכם עם שיטת הלימוד מבוססת הפרויקטים שלנו. התחילו את מסע הקידוד שלכם עוד היום!  
+
+#### 🧑‍🎓 _אתם סטודנטים?_  
+
+בקרו ב-[**עמוד הסטודנטים**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) שם תמצאו משאבים למתחילים, חבילות לסטודנטים ואפילו דרכים לקבל שובר לתעודה בחינם. זהו עמוד שכדאי לשמור ולבדוק מדי פעם, שכן אנו מעדכנים את התוכן מדי חודש.  
+
+### 📣 הודעה - _תוכנית לימודים חדשה_ על בינה מלאכותית גנרטיבית ל-JavaScript  
+
+אל תפספסו את תוכנית הלימודים החדשה שלנו על בינה מלאכותית גנרטיבית!  
+
+בקרו ב-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) כדי להתחיל!  
+
+<div>  
+  <img src="./images/background.png" width="600px" />  
+</div>  
+
+- שיעורים המכסים הכל מהבסיס ועד RAG.  
+- אינטראקציה עם דמויות היסטוריות באמצעות GenAI ואפליקציית הליווי שלנו.  
+- נרטיב מהנה ומרתק - תסעו בזמן!  
+
+<div>  
+  <img src="./images/character.png" width="600px" />  
+</div>  
+
+כל שיעור כולל משימה לביצוע, בדיקת ידע ואתגר שיעזרו לכם ללמוד נושאים כמו:  
+- הנחיה והנדסת הנחיות  
+- יצירת אפליקציות טקסט ותמונה  
+- אפליקציות חיפוש  
+
+בקרו ב-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) כדי להתחיל!  
+
+## 🌱 התחלה  
+
+> **מורים**, כללנו [כמה הצעות](for-teachers.md) כיצד להשתמש בתוכנית הלימודים הזו. נשמח לשמוע את דעתכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, לכל שיעור התחילו בחידון מקדים, המשיכו בקריאת חומרי השיעור, השלימו את הפעילויות השונות ובדקו את הבנתכם עם החידון המסכם.  
+
+כדי לשפר את חוויית הלמידה שלכם, התחברו עם חברים כדי לעבוד יחד על הפרויקטים! דיונים מעודדים ב-[פורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) שם צוות המנחים שלנו יהיה זמין לענות על שאלותיכם.  
+
+כדי להעמיק את הלימודים שלכם, אנו ממליצים בחום לחקור את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) למקורות לימוד נוספים.  
+
+### 📋 הגדרת סביבת העבודה שלכם  
+
+לתוכנית הלימודים הזו יש סביבת פיתוח מוכנה לשימוש! כשאתם מתחילים, תוכלו לבחור להריץ את התוכנית ב-[Codespace](https://github.com/features/codespaces/) (_סביבה מבוססת דפדפן, ללא צורך בהתקנות_), או מקומית על המחשב שלכם באמצעות עורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### יצירת מאגר משלכם  
+כדי לשמור בקלות על העבודה שלכם, מומלץ ליצור עותק משלכם של מאגר זה. תוכלו לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש העמוד. פעולה זו תיצור מאגר חדש בחשבון ה-GitHub שלכם עם עותק של תוכנית הלימודים.  
+
+בצעו את השלבים הבאים:  
+1. **פיצול המאגר**: לחצו על כפתור "Fork" בפינה הימנית העליונה של עמוד זה.  
+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) |         ג'סמין         |  
+| 02  |                     התחלה                      |             יסודות GitHub, כולל עבודה בצוות             | כיצד להשתמש ב-GitHub בפרויקט שלכם, וכיצד לשתף פעולה עם אחרים על בסיס קוד                                                    |                            [מבוא ל-GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          פלור          |  
+| 03  |                     התחלה                      |                             נגישות                              | למדו את היסודות של נגישות אתרים                                                                                               |                       [יסודות נגישות](/1-getting-started-lessons/3-accessibility/README.md)                       |       כריסטופר       |  
+| 04  |                        יסודות JS                         |                         סוגי נתונים ב-JavaScript                          | היסודות של סוגי נתונים ב-JavaScript                                                                                                 |                                       [סוגי נתונים](/2-js-basics/1-data-types/README.md)                                        |         ג'סמין         |  
+| 05  |                        יסודות JS                         |                         פונקציות ושיטות                          | למדו על פונקציות ושיטות לניהול זרימת הלוגיקה של האפליקציה שלכם                                                             |                              [פונקציות ושיטות](/2-js-basics/2-functions-methods/README.md)                               | ג'סמין וכריסטופר |  
+| 06  |                        יסודות JS                         |                        קבלת החלטות עם JS                        | למדו כיצד ליצור תנאים בקוד שלכם באמצעות שיטות קבלת החלטות                                                           |                                 [קבלת החלטות](/2-js-basics/3-making-decisions/README.md)                                  |         ג'סמין         |  
+| 07  |                        יסודות JS                         |                            מערכים ולולאות                            | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript                                                                                 |                                   [מערכים ולולאות](/2-js-basics/4-arrays-loops/README.md)                                    |         ג'סמין         |  
+| 08  |       [טרריום](/3-terrarium/solution/README.md)       |                            HTML בפועל                            | בנו את ה-HTML ליצירת טרריום מקוון, תוך התמקדות בבניית פריסה                                                         |                                 [מבוא ל-HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           ג'ן           |  
+| 09  |       [טרריום](/3-terrarium/solution/README.md)       |                            CSS בפועל                             | בנו את ה-CSS לעיצוב הטרריום המקוון, תוך התמקדות ביסודות ה-CSS כולל הפיכת הדף לרספונסיבי                     |                                  [מבוא ל-CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           ג'ן           |  
+| 10  |            [טרריום](/3-terrarium/solution/README.md)            |                 סגירות ב-JavaScript, מניפולציה של DOM                  | בנו את ה-JavaScript כדי לגרום לטרריום לפעול כממשק גרירה ושחרור, תוך התמקדות בסגירות ובמניפולציה של DOM             |                  [סגירות ב-JavaScript, מניפולציה של DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           ג'ן           |  
+| 11  |          [משחק הקלדה](/4-typing-game/solution/README.md)          |                          בניית משחק הקלדה                           | למדו כיצד להשתמש באירועי מקלדת כדי להניע את הלוגיקה של אפליקציית ה-JavaScript שלכם                                                          |                                [תכנות מונחה אירועים](/4-typing-game/typing-game/README.md)                                |       כריסטופר       |  
+| 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 באמצעות משתנים המאוחסנים באחסון מקומי                      |                [APIs, טפסים ואחסון מקומי](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          תהליכים ברקע בדפדפן, ביצועי רשת          | השתמשו בתהליכי הרקע של הדפדפן כדי לנהל את האייקון של התוסף; למדו על ביצועי רשת וכמה אופטימיזציות לשיפור   |             [משימות רקע וביצועים](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](/6-space-game/solution/README.md)           |             פיתוח משחק מתקדם יותר עם JavaScript             | למדו על ירושה באמצעות מחלקות וקומפוזיציה ועל תבנית Pub/Sub, כהכנה לבניית משחק              |                      [מבוא לפיתוח משחק מתקדם](/6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           ציור על קנבס                            | למדו על Canvas API, המשמש לציור אלמנטים על המסך                                                                       |                                [ציור על קנבס](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   הזזת אלמנטים על המסך                    | גלו כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API                                            |                           [הזזת אלמנטים](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          זיהוי התנגשויות                           | גרמו לאלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים, והוסיפו פונקציית קירור לשמירה על ביצועי המשחק    |                              [זיהוי התנגשויות](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             שמירת ניקוד                              | בצעו חישובים מתמטיים בהתבסס על מצב המשחק והביצועים                                                                |                                    [שמירת ניקוד](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     סיום והתחלה מחדש של המשחק                     | למדו על סיום והתחלה מחדש של המשחק, כולל ניקוי משאבים ואיפוס ערכי משתנים                              |                                [תנאי סיום](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 תבניות HTML ונתיבים באפליקציית רשת                 | למדו כיצד ליצור את המבנה של ארכיטקטורת אתר מרובה עמודים באמצעות נתיבים ותבניות HTML                             |                            [תבניות HTML ונתיבים](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  בניית טופס התחברות ורישום                   | למדו על בניית טפסים וטיפול ברוטינות אימות                                                                          |                                           [טפסים](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   שיטות לשליפת נתונים ושימוש בהם                   | כיצד נתונים זורמים פנימה והחוצה מהאפליקציה שלכם, כיצד לשלוף אותם, לאחסן אותם ולהיפטר מהם                                                 |                                            [נתונים](/7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      מושגים של ניהול מצב                      | למדו כיצד האפליקציה שלכם שומרת מצב וכיצד לנהל אותו בצורה תכנותית                                                              |                                [ניהול מצב](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+
+
+## 🏫 פדגוגיה
+
+תוכנית הלימודים שלנו עוצבה עם שני עקרונות פדגוגיים מרכזיים:
+* למידה מבוססת פרויקטים
+* חידונים תכופים
+
+התוכנית מלמדת את יסודות JavaScript, HTML ו-CSS, כמו גם את הכלים והטכניקות העדכניים ביותר בהם משתמשים מפתחי רשת כיום. התלמידים יקבלו הזדמנות לצבור ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון פולש מהחלל, ואפליקציית בנקאות לעסקים. בסוף הסדרה, התלמידים ירכשו הבנה מוצקה של פיתוח רשת.
+
+> 🎓 ניתן לקחת את השיעורים הראשונים בתוכנית זו כ-[מסלול למידה](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ב-Microsoft Learn!
+
+על ידי התאמת התוכן לפרויקטים, התהליך הופך למרתק יותר עבור התלמידים ושימור המושגים משתפר. בנוסף, כתבנו מספר שיעורי פתיחה ביסודות JavaScript להיכרות עם מושגים, יחד עם סרטון מתוך "[סדרת מתחילים: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", אוסף של מדריכי וידאו, שחלק מהכותבים שלהם תרמו לתוכנית זו.
+
+בנוסף, חידון קליל לפני השיעור מכוון את כוונת התלמיד ללמידת הנושא, בעוד חידון שני לאחר השיעור מבטיח שימור נוסף. תוכנית הלימודים עוצבה להיות גמישה ומהנה וניתן לקחת אותה בשלמותה או בחלקים. הפרויקטים מתחילים קטנים והופכים למורכבים יותר בסוף מחזור של 12 שבועות.
+
+בעוד שבכוונה נמנענו מהכנסת מסגרות JavaScript כדי להתמקד בכישורים הבסיסיים הנדרשים כמפתח רשת לפני אימוץ מסגרת, הצעד הבא המומלץ לאחר השלמת תוכנית זו יהיה ללמוד על Node.js באמצעות אוסף נוסף של סרטונים: "[סדרת מתחילים: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> בקרו ב-[קוד ההתנהגות](CODE_OF_CONDUCT.md) וב-[הנחיות התרומה](CONTRIBUTING.md) שלנו. נשמח לקבל את המשוב הבונה שלכם!
+
+
+## 🧭 גישה לא מקוונת
+
+ניתן להפעיל את התיעוד הזה במצב לא מקוון באמצעות [Docsify](https://docsify.js.org/#/). עשו Fork למאגר זה, [התקינו את Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלכם, ואז בתיקיית השורש של מאגר זה, הקלידו `docsify serve`. האתר יפעל על פורט 3000 ב-localhost שלכם: `localhost:3000`.
+
+## 📘 PDF
+
+ניתן למצוא PDF של כל השיעורים [כאן](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 קורסים נוספים
+
+הצוות שלנו מייצר קורסים נוספים! בדקו:
+
+- [בינה מלאכותית גנרטיבית למתחילים](https://aka.ms/genai-beginners)
+- [בינה מלאכותית גנרטיבית למתחילים .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [בינה מלאכותית גנרטיבית עם JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
+- [בינה מלאכותית גנרטיבית עם Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [בינה מלאכותית למתחילים](https://aka.ms/ai-beginners)
+- [מדע נתונים למתחילים](https://aka.ms/datascience-beginners)
+- [למידת מכונה למתחילים](https://aka.ms/ml-beginners)
+- [סייבר למתחילים](https://github.com/microsoft/Security-101)
+- [פיתוח רשת למתחילים](https://aka.ms/webdev-beginners)
+- [IoT למתחילים](https://aka.ms/iot-beginners)
+- [פיתוח XR למתחילים](https://github.com/microsoft/xr-development-for-beginners)
+- [שליטה ב-GitHub Copilot לשימוש סוכני](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [שליטה ב-GitHub Copilot למפתחים ב-C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [בחרו את הרפתקת ה-Copilot שלכם](https://github.com/microsoft/CopilotAdventures)
+
+## רישיון
+
+מאגר זה מורשה תחת רישיון MIT. ראו את קובץ [LICENSE](../../LICENSE) למידע נוסף.
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/SECURITY.md b/translations/he/SECURITY.md
new file mode 100644
index 00000000..fb4a0a64
--- /dev/null
+++ b/translations/he/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-27T20:04:03+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "he"
+}
+-->
+## אבטחה
+
+מיקרוסופט מתייחסת ברצינות לאבטחת מוצרי התוכנה והשירותים שלה, כולל כל מאגרי הקוד הפתוח המנוהלים דרך הארגונים שלנו ב-GitHub, הכוללים את [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), ו-[ארגוני ה-GitHub שלנו](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+אם אתם סבורים שמצאתם פגיעות אבטחה באחד ממאגרי הקוד שבבעלות מיקרוסופט, העומדת בהגדרת [פגיעות האבטחה של מיקרוסופט](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), אנא דווחו לנו על כך כפי שמתואר להלן.
+
+## דיווח על בעיות אבטחה
+
+**אנא אל תדווחו על פגיעויות אבטחה דרך נושאים ציבוריים ב-GitHub.**
+
+במקום זאת, דווחו עליהן למרכז התגובה לאבטחת מידע של מיקרוסופט (MSRC) בכתובת [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+אם אתם מעדיפים לשלוח דיווח מבלי להיכנס למערכת, שלחו דוא"ל לכתובת [secure@microsoft.com](mailto:secure@microsoft.com). אם אפשר, הצפינו את ההודעה שלכם באמצעות מפתח ה-PGP שלנו; ניתן להוריד אותו מדף [מפתח ה-PGP של מרכז התגובה לאבטחת מידע של מיקרוסופט](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 injection, cross-site scripting וכו')
+  * הנתיבים המלאים של קובצי המקור הקשורים להופעת הבעיה
+  * מיקום קוד המקור הפגוע (תג/ענף/commit או URL ישיר)
+  * כל תצורה מיוחדת הנדרשת לשחזור הבעיה
+  * הוראות שלב-אחר-שלב לשחזור הבעיה
+  * קוד הוכחת היתכנות או קוד ניצול (אם אפשרי)
+  * השפעת הבעיה, כולל כיצד תוקף עשוי לנצל אותה
+
+מידע זה יעזור לנו לטפל בדיווח שלכם במהירות רבה יותר.
+
+אם אתם מדווחים במסגרת תוכנית באג באונטי, דיווחים מפורטים יותר עשויים להוביל לפרס כספי גבוה יותר. אנא בקרו בדף [תוכנית הבאג באונטי של מיקרוסופט](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) למידע נוסף על התוכניות הפעילות שלנו.
+
+## שפות מועדפות
+
+אנו מעדיפים שכל התקשורת תתבצע באנגלית.
+
+## מדיניות
+
+מיקרוסופט פועלת לפי עקרון [גילוי פגיעויות מתואם](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/SUPPORT.md b/translations/he/SUPPORT.md
new file mode 100644
index 00000000..8436be83
--- /dev/null
+++ b/translations/he/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-27T20:02:23+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "he"
+}
+-->
+# תמיכה
+
+## כיצד לדווח על בעיות ולקבל עזרה  
+
+הפרויקט הזה משתמש ב-GitHub Issues למעקב אחר באגים ובקשות לפיצ'רים. אנא חפשו את הבעיות הקיימות לפני שאתם מדווחים על בעיות חדשות כדי להימנע מכפילויות. עבור בעיות חדשות, דווחו על הבאג או בקשת הפיצ'ר שלכם כבעיה חדשה.
+
+לעזרה ושאלות בנוגע לשימוש בפרויקט הזה, אנא עיינו ב[הנחיות התרומה שלנו](CONTRIBUTING.md).
+
+## מדיניות התמיכה של Microsoft  
+
+התמיכה בפרויקט הזה מוגבלת למשאבים המפורטים לעיל.
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/_404.md b/translations/he/_404.md
new file mode 100644
index 00000000..12cc0f82
--- /dev/null
+++ b/translations/he/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-27T20:03:31+00:00",
+  "source_file": "_404.md",
+  "language_code": "he"
+}
+-->
+# עבודה בתהליך
+
+אנחנו עובדים על הדף הזה. אנא חזרו לבדוק מאוחר יותר.
+
+פתחו [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/he/docs/_navbar.md b/translations/he/docs/_navbar.md
new file mode 100644
index 00000000..fbdb65a1
--- /dev/null
+++ b/translations/he/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-27T20:20:26+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "he"
+}
+-->
+- תרגומים  
+  - [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/he/docs/_sidebar.md b/translations/he/docs/_sidebar.md
new file mode 100644
index 00000000..82aaf07a
--- /dev/null
+++ b/translations/he/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-27T20:20:04+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "he"
+}
+-->
+- מבוא  
+  - [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/he/for-teachers.md b/translations/he/for-teachers.md
new file mode 100644
index 00000000..06b31122
--- /dev/null
+++ b/translations/he/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-27T20:02:51+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "he"
+}
+-->
+## למורים
+
+האם תרצו להשתמש בתוכנית הלימודים הזו בכיתה שלכם? אתם מוזמנים לעשות זאת!
+
+למעשה, תוכלו להשתמש בה ישירות בתוך GitHub באמצעות GitHub Classroom.
+
+כדי לעשות זאת, בצעו fork למאגר הזה. תצטרכו ליצור מאגר עבור כל שיעור, ולכן תצטרכו להפריד כל תיקייה למאגר נפרד. כך [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.he.png)  
+> תוכנית הלימודים בכיתת Moodle
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.he.png)  
+> תוכנית הלימודים ב-Canvas
+
+## שימוש במאגר כפי שהוא
+
+אם תרצו להשתמש במאגר כפי שהוא כרגע, ללא שימוש ב-GitHub Classroom, זה אפשרי גם כן. תצטרכו לתקשר עם התלמידים שלכם איזה שיעור לעבור יחד.
+
+בפורמט מקוון (Zoom, Teams או אחר) תוכלו ליצור חדרי עבודה עבור החידונים, וללוות את התלמידים כדי לעזור להם להתכונן ללמידה. לאחר מכן, הזמינו את התלמידים לחידונים והנחו אותם להגיש את תשובותיהם כ'issues' בזמן מסוים. תוכלו לעשות את אותו הדבר עם משימות אם תרצו שהתלמידים יעבדו בשיתוף פעולה באופן פתוח.
+
+אם אתם מעדיפים פורמט יותר פרטי, בקשו מהתלמידים לבצע fork לתוכנית הלימודים, שיעור אחר שיעור, למאגרים פרטיים משלהם ב-GitHub, ותנו לכם גישה. כך הם יוכלו להשלים חידונים ומשימות באופן פרטי ולהגיש אותם לכם דרך issues במאגר הכיתה שלכם.
+
+ישנן דרכים רבות לגרום לזה לעבוד בפורמט כיתה מקוונת. אנא עדכנו אותנו מה עובד הכי טוב עבורכם!
+
+## נשמח לשמוע את דעתכם!
+
+אנחנו רוצים שתוכנית הלימודים הזו תעבוד עבורכם ועבור התלמידים שלכם. התחברו אלינו ב-[פינת המורים](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) ופתחו [**issue חדש**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) עבור כל בקשה, באג או משוב.
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/lesson-template/README.md b/translations/he/lesson-template/README.md
new file mode 100644
index 00000000..0ed33ba7
--- /dev/null
+++ b/translations/he/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-27T21:07:05+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "he"
+}
+-->
+# [נושא השיעור]
+
+![הטמע סרטון כאן](../../../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/he/lesson-template/assignment.md b/translations/he/lesson-template/assignment.md
new file mode 100644
index 00000000..f1367647
--- /dev/null
+++ b/translations/he/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-27T21:07:22+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "he"
+}
+-->
+# [שם המשימה]
+
+## הוראות
+
+## קריטריונים להערכה
+
+| קריטריון | מצטיין | מספק | דורש שיפור |
+| -------- | --------- | -------- | ----------------- |
+|          |           |          |                   |
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/he/quiz-app/README.md b/translations/he/quiz-app/README.md
new file mode 100644
index 00000000..ff4df9bf
--- /dev/null
+++ b/translations/he/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-27T21:10:49+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "he"
+}
+-->
+# אפליקציית חידונים
+
+החידונים הללו הם חידוני טרום ואחרי הרצאה עבור תוכנית הלימודים למדעי הנתונים בכתובת https://aka.ms/webdev-beginners
+
+## הוספת סט חידונים מתורגם
+
+הוסף תרגום לחידון על ידי יצירת מבני חידון תואמים בתיקיות `assets/translations`. החידונים המקוריים נמצאים ב-`assets/translations/en`. החידונים מחולקים למספר קבוצות. ודא שהמספור תואם את החלק המתאים של החידון. ישנם 40 חידונים בסך הכל בתוכנית הלימודים הזו, עם המספור שמתחיל מ-0.
+
+  
+<details>
+<summary>כך נראה קובץ תרגום:</summary>
+
+```
+[
+    {
+        "title": "A title",
+        "complete": "A complete button title",
+        "error": "An error message upon selecting the wrong answer",
+        "quizzes": [
+            {
+                "id": 1,
+                "title": "Title",
+                "quiz": [
+                    {
+                        "questionText": "The question asked",
+                        "answerOptions": [
+                            {
+                                "answerText": "Option 1 title",
+                                "isCorrect": true
+                            },
+                            {
+                                "answerText": "Option 2 title",
+                                "isCorrect": false
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+]
+```
+</details>
+
+לאחר עריכת התרגומים, ערוך את קובץ index.js בתיקיית התרגום כדי לייבא את כל הקבצים בהתאם להנחיות ב-`en`.
+
+ערוך את הקובץ `index.js` ב-`assets/translations` כדי לייבא את הקבצים המתורגמים החדשים.
+
+לדוגמה, אם קובץ ה-JSON של התרגום שלך הוא `ex.json`, הפוך את 'ex' למפתח הלוקליזציה, ואז הכנס אותו כפי שמוצג למטה כדי לייבא אותו:
+
+<details>
+<summary>index.js</summary>
+
+```
+import ex from "./ex.json";
+
+// if 'ex' is localization key then enter it like so in `messages` to expose it 
+
+const messages = {
+  ex: ex[0],
+};
+
+export default messages;
+```
+
+</details>
+
+## הרץ את אפליקציית החידונים באופן מקומי
+
+### דרישות מוקדמות
+
+- חשבון GitHub
+- [Node.js ו-Git](https://nodejs.org/)
+
+### התקנה והגדרה
+
+1. צור מאגר מהתבנית הזו [כאן](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. שיבט את המאגר החדש שלך, ועבור לאפליקציית החידונים
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. התקן את חבילות ה-npm והתלויות
+
+   ```bash
+   npm install
+   ```
+
+### בניית האפליקציה
+
+1. כדי לבנות את הפתרון, הרץ:
+
+   ```bash
+   npm run build
+   ```
+
+### הפעלת האפליקציה
+
+1. כדי להפעיל את הפתרון, הרץ:
+
+    ```bash
+    npm run dev
+    ```
+
+### [אופציונלי] בדיקת קוד
+
+1. כדי לוודא שהקוד נבדק, הרץ:
+
+    ```bash
+    npm run lint
+    ```
+
+## פריסת אפליקציית החידונים ל-Azure 
+
+### דרישות מוקדמות
+- מנוי Azure. הירשם למנוי חינמי [כאן](https://aka.ms/azure-free).
+
+    _הערכת עלות לפריסת אפליקציית החידונים הזו: חינם_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+לאחר שנכנסת ל-Azure דרך הקישור למעלה, בחר מנוי וקבוצת משאבים ואז:
+
+- פרטי אפליקציית האינטרנט הסטטית: ספק שם ובחר תוכנית אירוח
+- כניסה ל-GitHub: הגדר את מקור הפריסה שלך כ-GitHub ואז התחבר ומלא את השדות הנדרשים בטופס:
+    - *ארגון* – בחר את הארגון שלך.
+    - *מאגר* – בחר את מאגר תוכנית הלימודים Web Dev for Beginners. 
+    - *ענף* - בחר ענף (main) 
+- הגדרות בנייה: Azure Static Web Apps משתמש באלגוריתם זיהוי כדי לזהות את המסגרת שבה נעשה שימוש באפליקציה שלך. 
+    - *מיקום האפליקציה* - ./quiz-app
+    - *מיקום ה-Api* -
+    - *מיקום הפלט* - dist
+- פריסה: לחץ על 'Review + Create', ואז 'Create'
+
+    לאחר הפריסה, קובץ זרימת עבודה ייווצר בתיקיית *.github* של המאגר שלך. קובץ זרימת עבודה זה מכיל הוראות על אירועים שיפעילו פריסה מחדש של האפליקציה ל-Azure, לדוגמה, _**push** על ענף **main**_ וכו'.
+
+    <details>
+    <summary>דוגמה לקובץ זרימת עבודה</summary>
+    הנה דוגמה לאיך קובץ זרימת העבודה של GitHub Actions עשוי להיראות:
+    name: Azure Static Web Apps CI/CD
+
+    ```
+    on:
+    push:
+        branches:
+        - main
+    pull_request:
+        types: [opened, synchronize, reopened, closed]
+        branches:
+        - main
+
+    jobs:
+    build_and_deploy_job:
+        runs-on: ubuntu-latest
+        name: Build and Deploy Job
+        steps:
+        - uses: actions/checkout@v2
+        - name: Build And Deploy
+            id: builddeploy
+            uses: Azure/static-web-apps-deploy@v1
+            with:
+            azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+            repo_token: ${{ secrets.GITHUB_TOKEN }}
+            action: "upload"
+            app_location: "quiz-app" # App source code path
+            api_location: ""API source code path optional
+            output_location: "dist" #Built app content directory - optional
+    ```
+
+    </details>
+
+- לאחר הפריסה: לאחר שהפריסה הושלמה, לחץ על 'Go to Deployment' ואז 'View app in browser'.
+
+לאחר ש-GitHub Action (זרימת העבודה) שלך בוצעה בהצלחה, רענן את הדף החי כדי לצפות באפליקציה שלך.
+
+---
+
+**כתב ויתור**:  
+מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
\ No newline at end of file
diff --git a/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..56b43d65
--- /dev/null
+++ b/translations/nl/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-27T20:38:16+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
+  "language_code": "nl"
+}
+-->
+# Introductie tot Programmeertalen en Tools van het Vak
+
+Deze les behandelt de basisprincipes van programmeertalen. De onderwerpen die hier aan bod komen, zijn van toepassing op de meeste moderne programmeertalen van vandaag. In het gedeelte 'Tools van het Vak' leer je over nuttige software die je als ontwikkelaar kan helpen.
+
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.nl.png)
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz vóór de les
+[Quiz vóór de les](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Introductie
+
+In deze les behandelen we:
+
+- Wat is programmeren?
+- Soorten programmeertalen
+- Basiscomponenten van een programma
+- Nuttige software en tools voor de professionele ontwikkelaar
+
+> Je kunt deze les volgen op [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Wat is programmeren?
+
+Programmeren (ook wel coderen genoemd) is het proces van het schrijven van instructies voor een apparaat, zoals een computer of mobiel apparaat. We schrijven deze instructies met een programmeertaal, die vervolgens door het apparaat wordt geïnterpreteerd. Deze sets van instructies kunnen verschillende namen hebben, zoals *programma*, *computerprogramma*, *applicatie (app)* of *uitvoerbaar bestand*.
+
+Een *programma* kan alles zijn wat met code is geschreven; websites, games en telefoonapps zijn allemaal programma's. Hoewel het mogelijk is om een programma te maken zonder code te schrijven, wordt de onderliggende logica geïnterpreteerd door het apparaat, en die logica is hoogstwaarschijnlijk met code geschreven. Een programma dat *draait* of *code uitvoert*, voert instructies uit. Het apparaat waarmee je deze les leest, draait een programma om het op je scherm weer te geven.
+
+✅ Doe wat onderzoek: wie wordt beschouwd als de eerste computerprogrammeur ter wereld?
+
+## Programmeertalen
+
+Programmeertalen stellen ontwikkelaars in staat om instructies voor een apparaat te schrijven. Apparaten begrijpen alleen binaire code (1-en en 0-en), en voor *de meeste* ontwikkelaars is dat geen efficiënte manier van communiceren. Programmeertalen zijn het middel om te communiceren tussen mensen en computers.
+
+Programmeertalen hebben verschillende formaten en kunnen verschillende doelen dienen. Bijvoorbeeld, JavaScript wordt voornamelijk gebruikt voor webapplicaties, terwijl Bash voornamelijk wordt gebruikt voor besturingssystemen.
+
+*Lageniveau-talen* vereisen doorgaans minder stappen dan *hogerniveau-talen* om instructies door een apparaat te laten interpreteren. Wat hogerniveau-talen echter populair maakt, is hun leesbaarheid en ondersteuning. JavaScript wordt beschouwd als een hogerniveau-taal.
+
+De volgende code laat het verschil zien tussen een hogerniveau-taal met JavaScript en een lageniveau-taal met ARM-assemblycode.
+
+```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
+```
+
+Geloof het of niet, *ze doen allebei hetzelfde*: het afdrukken van een Fibonacci-reeks tot 10.
+
+✅ Een Fibonacci-reeks wordt [gedefinieerd](https://en.wikipedia.org/wiki/Fibonacci_number) als een reeks getallen waarbij elk getal de som is van de twee voorgaande getallen, beginnend bij 0 en 1. De eerste 10 getallen in de Fibonacci-reeks zijn 0, 1, 1, 2, 3, 5, 8, 13, 21 en 34.
+
+## Elementen van een programma
+
+Een enkele instructie in een programma wordt een *statement* genoemd en heeft meestal een teken of regelafstand die aangeeft waar de instructie eindigt, of *beëindigt*. Hoe een programma beëindigt, verschilt per taal.
+
+Statements in een programma kunnen afhankelijk zijn van gegevens die door een gebruiker of elders worden geleverd om instructies uit te voeren. Gegevens kunnen beïnvloeden hoe een programma zich gedraagt, dus programmeertalen hebben een manier om gegevens tijdelijk op te slaan zodat ze later kunnen worden gebruikt. Dit worden *variabelen* genoemd. Variabelen zijn statements die een apparaat instrueren om gegevens in zijn geheugen op te slaan. Variabelen in programma's lijken op variabelen in algebra, waarbij ze een unieke naam hebben en hun waarde in de loop van de tijd kan veranderen.
+
+Het kan voorkomen dat sommige statements niet door een apparaat worden uitgevoerd. Dit gebeurt meestal opzettelijk door de ontwikkelaar of per ongeluk wanneer er een onverwachte fout optreedt. Dit soort controle over een applicatie maakt het robuuster en beter onderhoudbaar. Meestal vinden deze veranderingen in controle plaats wanneer aan bepaalde voorwaarden wordt voldaan. Een veelgebruikt statement in moderne programmeertalen om te bepalen hoe een programma wordt uitgevoerd, is het `if..else`-statement.
+
+✅ Je leert meer over dit soort statements in latere lessen.
+
+## Tools van het Vak
+
+[![Tools van het Vak](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools van het Vak")
+
+> 🎥 Klik op de afbeelding hierboven voor een video over tools
+
+In dit gedeelte leer je over enkele softwaretools die je erg nuttig kunt vinden als je aan je professionele ontwikkelreis begint.
+
+Een **ontwikkelomgeving** is een unieke set tools en functies die een ontwikkelaar vaak gebruikt bij het schrijven van software. Sommige van deze tools zijn aangepast aan de specifieke behoeften van een ontwikkelaar en kunnen in de loop van de tijd veranderen als die ontwikkelaar andere prioriteiten krijgt in werk, persoonlijke projecten of bij het gebruik van een andere programmeertaal. Ontwikkelomgevingen zijn net zo uniek als de ontwikkelaars die ze gebruiken.
+
+### Editors
+
+Een van de belangrijkste tools voor softwareontwikkeling is de editor. Editors zijn de plekken waar je je code schrijft en soms ook uitvoert.
+
+Ontwikkelaars vertrouwen op editors om verschillende redenen:
+
+- *Debuggen* helpt bugs en fouten op te sporen door de code regel voor regel door te lopen. Sommige editors hebben debuggingmogelijkheden; ze kunnen worden aangepast en toegevoegd voor specifieke programmeertalen.
+- *Syntax highlighting* voegt kleuren en tekstopmaak toe aan code, waardoor het gemakkelijker te lezen is. De meeste editors staan aangepaste syntax highlighting toe.
+- *Extensies en integraties* zijn gespecialiseerde tools voor ontwikkelaars, door ontwikkelaars. Deze tools zijn niet ingebouwd in de basiseditor. Bijvoorbeeld, veel ontwikkelaars documenteren hun code om uit te leggen hoe het werkt. Ze kunnen een spellingscontrole-extensie installeren om typefouten in de documentatie te vinden. De meeste extensies zijn bedoeld voor gebruik binnen een specifieke editor, en de meeste editors hebben een manier om beschikbare extensies te zoeken.
+- *Aanpassing* stelt ontwikkelaars in staat om een unieke ontwikkelomgeving te creëren die aan hun behoeften voldoet. De meeste editors zijn extreem aanpasbaar en stellen ontwikkelaars ook in staat om aangepaste extensies te maken.
+
+#### Populaire editors en webontwikkeling-extensies
+
+- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+  
+- [Sublimetext](https://www.sublimetext.com/)
+  - [emmet](https://emmet.io/)
+  - [SublimeLinter](http://www.sublimelinter.com/en/stable/)
+
+### Browsers
+
+Een andere cruciale tool is de browser. Webontwikkelaars vertrouwen op de browser om te zien hoe hun code op het web wordt uitgevoerd. Het wordt ook gebruikt om de visuele elementen van een webpagina weer te geven die in de editor zijn geschreven, zoals HTML.
+
+Veel browsers worden geleverd met *ontwikkelaarstools* (DevTools) die een reeks handige functies en informatie bevatten om ontwikkelaars te helpen belangrijke informatie over hun applicatie te verzamelen en vast te leggen. Bijvoorbeeld: Als een webpagina fouten heeft, is het soms nuttig om te weten wanneer ze zijn opgetreden. DevTools in een browser kunnen worden geconfigureerd om deze informatie vast te leggen.
+
+#### Populaire browsers en 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
+
+Sommige ontwikkelaars geven de voorkeur aan een minder grafische weergave voor hun dagelijkse taken en vertrouwen op de command line om dit te bereiken. Code schrijven vereist een aanzienlijke hoeveelheid typen, en sommige ontwikkelaars willen hun flow op het toetsenbord niet onderbreken. Ze gebruiken sneltoetsen om te schakelen tussen vensters, aan verschillende bestanden te werken en tools te gebruiken. De meeste taken kunnen met een muis worden uitgevoerd, maar een voordeel van de command line is dat veel kan worden gedaan zonder te schakelen tussen muis en toetsenbord. Een ander voordeel van de command line is dat deze configureerbaar is; je kunt een aangepaste configuratie opslaan, deze later wijzigen en importeren op andere ontwikkelmachines. Omdat ontwikkelomgevingen zo uniek zijn voor elke ontwikkelaar, vermijden sommigen het gebruik van de command line, vertrouwen anderen er volledig op, en geven weer anderen de voorkeur aan een mix van beide.
+
+### Populaire opties voor de command line
+
+De opties voor de command line verschillen afhankelijk van het besturingssysteem dat je gebruikt.
+
+*💻 = wordt standaard meegeleverd met het besturingssysteem.*
+
+#### 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) (ook bekend als 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)
+
+#### Populaire command line tools
+
+- [Git](https://git-scm.com/) (💻 op de meeste besturingssystemen)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentatie
+
+Wanneer een ontwikkelaar iets nieuws wil leren, zal hij of zij waarschijnlijk naar documentatie grijpen om te leren hoe het te gebruiken. Ontwikkelaars vertrouwen vaak op documentatie om hen te begeleiden in het correct gebruik van tools en talen, en om diepere kennis te verkrijgen over hoe het werkt.
+
+#### Populaire documentatie over webontwikkeling
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), van Mozilla, de uitgevers van de [Firefox](https://www.mozilla.org/firefox/) browser
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), van Google, uitgevers van [Chrome](https://www.google.com/chrome/)
+- [Microsoft's eigen ontwikkelaarsdocumentatie](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), voor [Microsoft Edge](https://www.microsoft.com/edge)
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+
+✅ Doe wat onderzoek: Nu je de basis kent van de omgeving van een webontwikkelaar, vergelijk en contrasteer deze met de omgeving van een webdesigner.
+
+---
+
+## 🚀 Uitdaging
+
+Vergelijk enkele programmeertalen. Wat zijn enkele unieke eigenschappen van JavaScript versus Java? En hoe zit het met COBOL versus Go?
+
+## Quiz na de les
+[Quiz na de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Herziening & Zelfstudie
+
+Bestudeer de verschillende talen die beschikbaar zijn voor de programmeur. Probeer een regel in één taal te schrijven en herschrijf deze vervolgens in twee andere talen. Wat heb je geleerd?
+
+## Opdracht
+
+[De documentatie lezen](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..4db0865f
--- /dev/null
+++ b/translations/nl/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-27T20:39:39+00:00",
+  "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
+  "language_code": "nl"
+}
+-->
+# De Documentatie Lezen
+
+## Instructies
+
+Er zijn veel tools die een webontwikkelaar nodig kan hebben en die te vinden zijn in de [MDN-documentatie voor client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Kies 3 tools die niet in de les worden behandeld, leg uit waarom een webontwikkelaar deze zou gebruiken, en zoek een tool die onder deze categorie valt en deel de documentatie ervan. Gebruik niet hetzelfde toolvoorbeeld dat in de MDN-documentatie staat.
+
+## Rubriek
+
+Uitmuntend | Voldoende | Verbetering Nodig
+--- | --- | -- |
+|Uitleg gegeven waarom een webontwikkelaar de tool zou gebruiken| Uitleg gegeven hoe, maar niet waarom een ontwikkelaar de tool zou gebruiken| Niet vermeld hoe of waarom een ontwikkelaar de tool zou gebruiken  |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/1-getting-started-lessons/2-github-basics/README.md b/translations/nl/1-getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..da95cb8c
--- /dev/null
+++ b/translations/nl/1-getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,342 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
+  "translation_date": "2025-08-27T20:32:16+00:00",
+  "source_file": "1-getting-started-lessons/2-github-basics/README.md",
+  "language_code": "nl"
+}
+-->
+# Introductie tot GitHub
+
+Deze les behandelt de basisprincipes van GitHub, een platform om je code te hosten en wijzigingen te beheren.
+
+![Intro tot GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.nl.png)
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Introductie
+
+In deze les behandelen we:
+
+- het bijhouden van het werk dat je op je computer doet
+- samenwerken aan projecten met anderen
+- hoe je kunt bijdragen aan open source software
+
+### Vereisten
+
+Voordat je begint, moet je controleren of Git is geïnstalleerd. Typ in de terminal: 
+`git --version`
+
+Als Git niet is geïnstalleerd, [download Git](https://git-scm.com/downloads). Stel vervolgens je lokale Git-profiel in via de terminal:
+* `git config --global user.name "jouw-naam"`
+* `git config --global user.email "jouw-email"`
+
+Om te controleren of Git al is geconfigureerd, kun je typen:
+`git config --list`
+
+Je hebt ook een GitHub-account nodig, een code-editor (zoals Visual Studio Code), en je moet je terminal (of: command prompt) openen.
+
+Ga naar [github.com](https://github.com/) en maak een account aan als je dat nog niet hebt, of log in en vul je profiel in. 
+
+✅ GitHub is niet de enige code-repository ter wereld; er zijn andere, maar GitHub is de bekendste.
+
+### Voorbereiding
+
+Je hebt zowel een map met een codeproject op je lokale computer (laptop of pc) nodig, als een openbare repository op GitHub, die als voorbeeld zal dienen voor hoe je kunt bijdragen aan de projecten van anderen.  
+
+---
+
+## Codebeheer
+
+Stel dat je lokaal een map hebt met een codeproject en je wilt je voortgang gaan bijhouden met behulp van git - het versiebeheersysteem. Sommige mensen vergelijken het gebruik van git met het schrijven van een liefdesbrief aan je toekomstige zelf. Door je commitberichten dagen, weken of maanden later te lezen, kun je je herinneren waarom je een bepaalde beslissing hebt genomen, of een wijziging "terugdraaien" - dat is, wanneer je goede "commitberichten" schrijft.
+
+### Taak: Maak een repository en commit code  
+
+> Bekijk video
+> 
+> [![Git en GitHub basisprincipes video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+
+1. **Maak een repository op GitHub**. Op GitHub.com, in het tabblad repositories, of via de navigatiebalk rechtsboven, vind je de knop **new repo**.
+
+   1. Geef je repository (map) een naam.
+   1. Selecteer **create repository**.
+
+1. **Navigeer naar je werkmap**. In je terminal, ga naar de map (ook wel directory genoemd) die je wilt gaan bijhouden. Typ:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Initialiseer een git-repository**. Typ in je project:
+
+   ```bash
+   git init
+   ```
+
+1. **Controleer de status**. Om de status van je repository te controleren, typ:
+
+   ```bash
+   git status
+   ```
+
+   De output kan er ongeveer zo uitzien:
+
+   ```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
+   ```
+
+   Meestal vertelt een `git status`-commando je dingen zoals welke bestanden klaar zijn om _opgeslagen_ te worden in de repo of welke wijzigingen erop staan die je mogelijk wilt behouden.
+
+1. **Voeg alle bestanden toe voor tracking**
+   Dit wordt ook wel het "stagen" van bestanden genoemd/het toevoegen van bestanden aan de staging area.
+
+   ```bash
+   git add .
+   ```
+
+   Het `git add`-commando met het argument `.` geeft aan dat alle bestanden en wijzigingen worden bijgehouden. 
+
+1. **Voeg geselecteerde bestanden toe voor tracking**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Dit helpt ons om alleen geselecteerde bestanden toe te voegen aan de staging area wanneer we niet alle bestanden tegelijk willen committen.
+
+1. **Haal alle bestanden uit de staging area**
+
+   ```bash
+   git reset
+   ```
+
+   Dit commando helpt ons om alle bestanden in één keer uit de staging area te halen.
+
+1. **Haal een specifiek bestand uit de staging area**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Dit commando helpt ons om slechts één specifiek bestand uit de staging area te halen dat we niet willen opnemen in de volgende commit.
+
+1. **Je werk opslaan**. Op dit punt heb je de bestanden toegevoegd aan een zogenaamde _staging area_. Een plek waar Git je bestanden bijhoudt. Om de wijziging permanent te maken, moet je de bestanden _committen_. Dit doe je door een _commit_ te maken met het `git commit`-commando. Een _commit_ vertegenwoordigt een opslagpunt in de geschiedenis van je repo. Typ het volgende om een _commit_ te maken:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Dit commit alle bestanden en voegt het bericht "first commit" toe. Voor toekomstige commitberichten wil je meer beschrijvend zijn om duidelijk te maken wat voor soort wijziging je hebt aangebracht.
+
+1. **Verbind je lokale Git-repo met GitHub**. Een Git-repo is handig op je computer, maar op een gegeven moment wil je een back-up van je bestanden ergens anders hebben en ook andere mensen uitnodigen om met je mee te werken aan je repo. Een geweldige plek om dat te doen is GitHub. We hebben al een repo op GitHub gemaakt, dus het enige wat we moeten doen is onze lokale Git-repo verbinden met GitHub. Het commando `git remote add` doet precies dat. Typ het volgende commando:
+
+   > Let op, voordat je het commando typt, ga naar de pagina van je GitHub-repo om de URL van de repository te vinden. Je gebruikt deze in het onderstaande commando. Vervang ```https://github.com/username/repository_name.git``` door je GitHub-URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Dit creëert een _remote_, of verbinding, genaamd "origin" die wijst naar de GitHub-repository die je eerder hebt gemaakt.
+
+1. **Stuur lokale bestanden naar GitHub**. Tot nu toe heb je een _verbinding_ gemaakt tussen de lokale repo en de GitHub-repo. Laten we deze bestanden naar GitHub sturen met het volgende commando `git push`, zoals hieronder: 
+   
+   > Let op, je branchnaam kan standaard anders zijn dan ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Dit stuurt je commits in je "main"-branch naar GitHub.
+
+2. **Meer wijzigingen toevoegen**. Als je verder wilt gaan met het maken van wijzigingen en deze naar GitHub wilt pushen, hoef je alleen de volgende drie commando's te gebruiken:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Tip, je wilt misschien ook een `.gitignore`-bestand gebruiken om te voorkomen dat bestanden die je niet wilt bijhouden op GitHub verschijnen - zoals dat notitiebestand dat je in dezelfde map opslaat maar geen plaats heeft in een openbare repository. Je kunt sjablonen voor `.gitignore`-bestanden vinden op [.gitignore templates](https://github.com/github/gitignore).
+
+#### Commitberichten
+
+Een geweldig Git-commitonderwerp voltooit de volgende zin:
+Als toegepast, zal deze commit <jouw onderwerp hier>
+
+Voor het onderwerp gebruik je de gebiedende wijs, tegenwoordige tijd: "verander" in plaats van "veranderd" of "verandert". 
+Net als in het onderwerp, gebruik je in de body (optioneel) ook de gebiedende wijs, tegenwoordige tijd. De body moet de motivatie voor de wijziging bevatten en dit contrasteren met het vorige gedrag. Je legt de `waarom` uit, niet de `hoe`.
+
+✅ Neem een paar minuten de tijd om rond te surfen op GitHub. Kun je een echt geweldig commitbericht vinden? Kun je een heel minimaal bericht vinden? Welke informatie denk je dat het belangrijkst en nuttigst is om over te brengen in een commitbericht?
+
+### Taak: Samenwerken
+
+De belangrijkste reden om dingen op GitHub te zetten was om het mogelijk te maken samen te werken met andere ontwikkelaars.
+
+## Samenwerken aan projecten met anderen
+
+> Bekijk video
+>
+> [![Git en GitHub basisprincipes video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+In je repository, navigeer naar `Insights > Community` om te zien hoe jouw project zich verhoudt tot aanbevolen communitystandaarden.
+
+   Hier zijn enkele dingen die je GitHub-repo kunnen verbeteren:
+   - **Beschrijving**. Heb je een beschrijving toegevoegd voor je project?
+   - **README**. Heb je een README toegevoegd? GitHub biedt richtlijnen voor het schrijven van een [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **Bijdragerichtlijnen**. Heeft je project [bijdragerichtlijnen](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)? 
+   - **Gedragscode**. Een [gedragscode](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/). 
+   - **Licentie**. Misschien wel het belangrijkste, een [licentie](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+Al deze middelen zullen het onboardingproces voor nieuwe teamleden ten goede komen. En dit zijn meestal de dingen waar nieuwe bijdragers naar kijken voordat ze zelfs maar naar je code kijken, om te bepalen of jouw project de juiste plek is om hun tijd te besteden.
+
+✅ README-bestanden, hoewel ze tijd kosten om te maken, worden vaak verwaarloosd door drukke maintainers. Kun je een voorbeeld vinden van een bijzonder beschrijvende README? Opmerking: er zijn enkele [tools om goede READMEs te maken](https://www.makeareadme.com/) die je misschien wilt proberen.
+
+### Taak: Code samenvoegen
+
+Bijdragedocumenten helpen mensen bijdragen aan het project. Ze leggen uit welke soorten bijdragen je zoekt en hoe het proces werkt. Bijdragers moeten een reeks stappen doorlopen om te kunnen bijdragen aan jouw repo op GitHub:
+
+
+1. **Fork je repo**. Je wilt waarschijnlijk dat mensen je project _forken_. Forken betekent dat ze een replica van jouw repository maken op hun GitHub-profiel.
+1. **Clone**. Vanaf daar zullen ze het project naar hun lokale computer clonen. 
+1. **Maak een branch**. Je wilt dat ze een _branch_ maken voor hun werk. 
+1. **Focus hun wijziging op één gebied**. Vraag bijdragers om hun bijdragen op één ding tegelijk te concentreren - zo is de kans groter dat je hun werk kunt _samenvoegen_. Stel je voor dat ze een bugfix schrijven, een nieuwe functie toevoegen en verschillende tests bijwerken - wat als je slechts 2 van de 3, of 1 van de 3 wijzigingen wilt of kunt implementeren?
+
+✅ Stel je een situatie voor waarin branches bijzonder belangrijk zijn voor het schrijven en leveren van goede code. Welke gebruiksscenario's kun je bedenken?
+
+> Opmerking, wees de verandering die je in de wereld wilt zien, en maak ook branches voor je eigen werk. Alle commits die je maakt, worden gemaakt op de branch waar je momenteel "uitgecheckt" bent. Gebruik `git status` om te zien op welke branch dat is.
+
+Laten we een workflow voor bijdragers doorlopen. Stel dat de bijdrager de repo al heeft _geforkt_ en _gecloned_, zodat ze een Git-repo hebben die klaar is om aan te werken op hun lokale computer:
+
+1. **Maak een branch**. Gebruik het commando `git branch` om een branch te maken die de wijzigingen bevat die ze willen bijdragen:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Schakel over naar de werkbranch**. Schakel over naar de opgegeven branch en werk de werkmap bij met `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Doe werk**. Op dit punt wil je je wijzigingen toevoegen. Vergeet niet om Git hierover te informeren met de volgende commando's:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Zorg ervoor dat je je commit een goede naam geeft, zowel voor jezelf als voor de maintainer van de repo waaraan je helpt.
+
+1. **Combineer je werk met de `main` branch**. Op een gegeven moment ben je klaar met werken en wil je je werk combineren met dat van de `main` branch. De `main` branch kan ondertussen zijn gewijzigd, dus zorg ervoor dat je deze eerst bijwerkt naar de nieuwste versie met de volgende commando's:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   Op dit punt wil je ervoor zorgen dat eventuele _conflicten_, situaties waarin Git de wijzigingen niet gemakkelijk kan _combineren_, plaatsvinden in jouw werkbranch. Voer daarom de volgende commando's uit:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Dit brengt alle wijzigingen van `main` naar jouw branch en hopelijk kun je gewoon doorgaan. Zo niet, dan zal VS Code je vertellen waar Git _verward_ is en kun je de getroffen bestanden aanpassen om aan te geven welke inhoud het meest accuraat is.
+
+1. **Stuur je werk naar GitHub**. Je werk naar GitHub sturen betekent twee dingen. Je branch naar je repo pushen en vervolgens een PR (Pull Request) openen.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Het bovenstaande commando maakt de branch aan op je geforkte repo.
+
+1. **Open een PR**. Vervolgens wil je een PR openen. Dit doe je door naar de geforkte repo op GitHub te navigeren. Je ziet een indicatie op GitHub waar wordt gevraagd of je een nieuwe PR wilt maken. Klik daarop en je wordt naar een interface gebracht waar je de commitberichttitel kunt wijzigen en een meer geschikte beschrijving kunt geven. Nu ziet de maintainer van de repo die je hebt geforkt deze PR en _hopelijk_ waarderen ze het en _mergen_ ze je PR. Je bent nu een bijdrager, yay :)
+
+1. **Ruim op**. Het wordt als goede praktijk beschouwd om op te ruimen nadat je succesvol een PR hebt gemerged. Je wilt zowel je lokale branch als de branch die je naar GitHub hebt gepusht opruimen. Laten we eerst de branch lokaal verwijderen met het volgende commando:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+Zorg ervoor dat je naar de GitHub-pagina van de geforkte repository gaat en de remote branch verwijdert die je er net naartoe hebt gepusht.
+
+`Pull request` lijkt een vreemde term, omdat je eigenlijk je wijzigingen naar het project wilt pushen. Maar de maintainer (projecteigenaar) of het kernteam moet je wijzigingen beoordelen voordat ze worden samengevoegd met de "main" branch van het project. Je vraagt dus eigenlijk om een besluit over je wijziging van een maintainer.
+
+Een pull request is de plek waar je de verschillen die zijn geïntroduceerd op een branch kunt vergelijken en bespreken, met reviews, opmerkingen, geïntegreerde tests en meer. Een goede pull request volgt ongeveer dezelfde regels als een commitbericht. Je kunt een verwijzing naar een issue in de issue tracker toevoegen, bijvoorbeeld wanneer je werk een issue oplost. Dit doe je door een `#` te gebruiken, gevolgd door het nummer van je issue. Bijvoorbeeld `#97`.
+
+🤞Fingers crossed dat alle checks slagen en de projecteigenaar(s) je wijzigingen in het project samenvoegen 🤞
+
+Werk je huidige lokale werkbranch bij met alle nieuwe commits van de corresponderende remote branch op GitHub:
+
+`git pull`
+
+## Hoe bij te dragen aan open source
+
+Laten we eerst een repository (of **repo**) op GitHub vinden die je interesseert en waaraan je een wijziging wilt bijdragen. Je wilt de inhoud ervan naar je computer kopiëren.
+
+✅ Een goede manier om 'beginner-vriendelijke' repos te vinden is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Een repo lokaal kopiëren](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.nl.png)
+
+Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "clonen" met HTTPS, SSH of de GitHub CLI (Command Line Interface).
+
+Open je terminal en clone de repository als volgt:
+`git clone https://github.com/ProjectURL`
+
+Om aan het project te werken, ga je naar de juiste map:
+`cd ProjectURL`
+
+Je kunt het hele project ook openen met [Codespaces](https://github.com/features/codespaces), de ingebouwde code-editor / cloudontwikkelomgeving van GitHub, of [GitHub Desktop](https://desktop.github.com/).
+
+Ten slotte kun je de code downloaden in een gezipte map.
+
+### Een paar interessante dingen over GitHub
+
+Je kunt elke openbare repository op GitHub ster geven, volgen en/of "forken". Je kunt je gestarred repositories vinden in het drop-down menu rechtsboven. Het is als bladwijzers maken, maar dan voor code.
+
+Projecten hebben een issue tracker, meestal op GitHub in het tabblad "Issues", tenzij anders aangegeven, waar mensen problemen met betrekking tot het project bespreken. En het tabblad Pull Requests is waar mensen wijzigingen die in behandeling zijn bespreken en beoordelen.
+
+Projecten kunnen ook discussies hebben in forums, mailinglijsten of chatkanalen zoals Slack, Discord of IRC.
+
+✅ Kijk eens rond in je nieuwe GitHub-repo en probeer een paar dingen, zoals instellingen bewerken, informatie toevoegen aan je repo en een project maken (zoals een Kanban-bord). Er is veel dat je kunt doen!
+
+---
+
+## 🚀 Uitdaging
+
+Werk samen met een vriend om aan elkaars code te werken. Maak samen een project, fork code, maak branches en voeg wijzigingen samen.
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Review & Zelfstudie
+
+Lees meer over [bijdragen aan 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/).
+
+Oefen, oefen, oefen. GitHub heeft geweldige leerpaden beschikbaar via [skills.github.com](https://skills.github.com):
+
+- [Eerste week op GitHub](https://skills.github.com/#first-week-on-github)
+
+Je vindt er ook meer gevorderde cursussen.
+
+## Opdracht
+
+Voltooi [de cursus Eerste week op GitHub](https://skills.github.com/#first-week-on-github).
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen om nauwkeurigheid te waarborgen, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/1-getting-started-lessons/3-accessibility/README.md b/translations/nl/1-getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..966d1e7b
--- /dev/null
+++ b/translations/nl/1-getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,244 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
+  "translation_date": "2025-08-27T20:34:54+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
+  "language_code": "nl"
+}
+-->
+# Toegankelijke Webpagina's Maken
+
+![Alles over Toegankelijkheid](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.nl.png)
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz Voorafgaand aan de Les
+[Quiz voorafgaand aan de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> De kracht van het web ligt in zijn universaliteit. Toegang voor iedereen, ongeacht een beperking, is een essentieel aspect.
+>
+> \- Sir Timothy Berners-Lee, W3C-directeur en uitvinder van het World Wide Web
+
+Deze quote benadrukt perfect het belang van het maken van toegankelijke websites. Een applicatie die niet door iedereen toegankelijk is, is per definitie uitsluitend. Als webontwikkelaars moeten we altijd toegankelijkheid in gedachten houden. Door hier vanaf het begin op te focussen, zorg je ervoor dat iedereen toegang heeft tot de pagina's die je maakt. In deze les leer je over de tools die je kunnen helpen om ervoor te zorgen dat je webassets toegankelijk zijn en hoe je met toegankelijkheid in gedachten kunt bouwen.
+
+> Je kunt deze les volgen op [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Tools om te Gebruiken
+
+### Schermlezers
+
+Een van de bekendste toegankelijkheidstools zijn schermlezers.
+
+[Schermlezers](https://en.wikipedia.org/wiki/Screen_reader) worden vaak gebruikt door mensen met een visuele beperking. Net zoals we tijd besteden aan het zorgen dat een browser de informatie correct weergeeft, moeten we er ook voor zorgen dat een schermlezer dit doet.
+
+In de basis leest een schermlezer een pagina van boven naar beneden voor. Als je pagina alleen tekst bevat, zal de lezer de informatie op een vergelijkbare manier overbrengen als een browser. Natuurlijk bevatten webpagina's zelden alleen tekst; ze bevatten links, afbeeldingen, kleuren en andere visuele elementen. Er moet aandacht worden besteed aan het correct laten lezen van deze informatie door een schermlezer.
+
+Elke webontwikkelaar zou bekend moeten zijn met een schermlezer. Zoals hierboven benadrukt, is het de client die je gebruikers zullen gebruiken. Net zoals je weet hoe een browser werkt, zou je moeten leren hoe een schermlezer werkt. Gelukkig zijn schermlezers ingebouwd in de meeste besturingssystemen.
+
+Sommige browsers hebben ook ingebouwde tools en extensies die tekst kunnen voorlezen of zelfs enkele basisnavigatiefuncties bieden, zoals [deze toegankelijkheidsgerichte Edge-browsertools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Deze zijn ook belangrijke toegankelijkheidstools, maar werken heel anders dan schermlezers en mogen niet worden verward met tools voor het testen van schermlezers.
+
+✅ Probeer een schermlezer en een browsertekstlezer. Op Windows is [Verteller](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) standaard inbegrepen, en [JAWS](https://webaim.org/articles/jaws/) en [NVDA](https://www.nvaccess.org/about-nvda/) kunnen ook worden geïnstalleerd. Op macOS en iOS is [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) standaard geïnstalleerd.
+
+### Zoomen
+
+Een andere tool die vaak wordt gebruikt door mensen met een visuele beperking is zoomen. De meest basale vorm van zoomen is statisch zoomen, bediend via `Control + plusteken (+)` of door de schermresolutie te verlagen. Dit type zoom vergroot de hele pagina, dus het gebruik van [responsief ontwerp](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) is belangrijk om een goede gebruikerservaring te bieden bij verhoogde zoomniveaus.
+
+Een ander type zoom maakt gebruik van gespecialiseerde software om een deel van het scherm te vergroten en te pannen, vergelijkbaar met het gebruik van een echte vergrootglas. Op Windows is [Vergrootglas](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) ingebouwd, en [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is een externe vergrootsoftware met meer functies en een grotere gebruikersbasis. Zowel macOS als iOS hebben ingebouwde vergrootsoftware genaamd [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Contrastcontrole
+
+Kleuren op websites moeten zorgvuldig worden gekozen om te voldoen aan de behoeften van kleurenblinde gebruikers of mensen die moeite hebben met het zien van kleuren met weinig contrast.
+
+✅ Test een website die je graag gebruikt op kleurgebruik met een browserextensie zoals [WCAG's kleurcontrole](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Wat leer je?
+
+### Lighthouse
+
+In het ontwikkelaarstoolgebied van je browser vind je de Lighthouse-tool. Deze tool is belangrijk om een eerste indruk te krijgen van de toegankelijkheid (en andere analyses) van een website. Hoewel het belangrijk is om niet uitsluitend op Lighthouse te vertrouwen, is een score van 100% een nuttige basis.
+
+✅ Zoek Lighthouse in het ontwikkelaarstoolpaneel van je browser en voer een analyse uit op een willekeurige site. Wat ontdek je?
+
+## Ontwerpen voor Toegankelijkheid
+
+Toegankelijkheid is een relatief groot onderwerp. Om je te helpen, zijn er tal van bronnen beschikbaar.
+
+- [Accessible U - Universiteit van Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Hoewel we niet elk aspect van het maken van toegankelijke sites kunnen behandelen, staan hieronder enkele van de kernprincipes die je wilt implementeren. Een toegankelijke pagina ontwerpen vanaf het begin is **altijd** makkelijker dan een bestaande pagina achteraf toegankelijk maken.
+
+## Goede Weergaveprincipes
+
+### Kleurenpaletten die veilig zijn voor iedereen
+
+Mensen zien de wereld op verschillende manieren, en dit geldt ook voor kleuren. Bij het kiezen van een kleurenpalet voor je site moet je ervoor zorgen dat het toegankelijk is voor iedereen. Een geweldige [tool voor het genereren van kleurenpaletten is Color Safe](http://colorsafe.co/).
+
+✅ Identificeer een website die erg problematisch is in het gebruik van kleuren. Waarom?
+
+### Gebruik de juiste HTML
+
+Met CSS en JavaScript is het mogelijk om elk element eruit te laten zien als elk type controle. `<span>` kan worden gebruikt om een `<button>` te maken, en `<b>` kan een hyperlink worden. Hoewel dit misschien makkelijker te stijlen lijkt, zegt het niets tegen een schermlezer. Gebruik de juiste HTML bij het maken van controles op een pagina. Als je een hyperlink wilt, gebruik dan `<a>`. Het gebruik van de juiste HTML voor de juiste controle wordt Semantische HTML genoemd.
+
+✅ Ga naar een willekeurige website en kijk of de ontwerpers en ontwikkelaars HTML correct gebruiken. Kun je een knop vinden die eigenlijk een link zou moeten zijn? Tip: klik met de rechtermuisknop en kies 'Paginabron weergeven' in je browser om de onderliggende code te bekijken.
+
+### Maak een beschrijvende koppenhiërarchie
+
+Gebruikers van schermlezers [vertrouwen sterk op koppen](https://webaim.org/projects/screenreadersurvey8/#finding) om informatie te vinden en door een pagina te navigeren. Het schrijven van beschrijvende kopinhoud en het gebruik van semantische koppen-tags zijn belangrijk voor het creëren van een gemakkelijk navigeerbare site voor gebruikers van schermlezers.
+
+### Gebruik goede visuele aanwijzingen
+
+CSS biedt volledige controle over het uiterlijk van elk element op een pagina. Je kunt tekstvakken maken zonder een omlijning of hyperlinks zonder een onderstreping. Helaas kan het verwijderen van die aanwijzingen het moeilijker maken voor iemand die ervan afhankelijk is om het type controle te herkennen.
+
+## Het Belang van Linktekst
+
+Hyperlinks zijn essentieel voor het navigeren op het web. Daarom is het belangrijk dat een schermlezer links correct kan lezen, zodat alle gebruikers je site kunnen navigeren.
+
+### Schermlezers en links
+
+Zoals je zou verwachten, lezen schermlezers linktekst op dezelfde manier als andere tekst op de pagina. Met dit in gedachten lijkt de onderstaande tekst misschien prima.
+
+> De kleine pinguïn, ook wel bekend als de feeënpinguïn, is de kleinste pinguïn ter wereld. [Klik hier](https://en.wikipedia.org/wiki/Little_penguin) voor meer informatie.
+
+> De kleine pinguïn, ook wel bekend als de feeënpinguïn, is de kleinste pinguïn ter wereld. Bezoek https://en.wikipedia.org/wiki/Little_penguin voor meer informatie.
+
+> **NOTE** Zoals je zo zult lezen, moet je **nooit** links maken die eruitzien zoals hierboven.
+
+Onthoud dat schermlezers een andere interface zijn dan browsers, met een andere set functies.
+
+### Het probleem met het gebruik van de URL
+
+Schermlezers lezen de tekst. Als een URL in de tekst verschijnt, zal de schermlezer de URL voorlezen. Over het algemeen geeft de URL geen betekenisvolle informatie en kan het irritant klinken. Je hebt dit misschien ervaren als je telefoon ooit een tekstbericht met een URL hardop heeft voorgelezen.
+
+### Het probleem met "klik hier"
+
+Schermlezers kunnen ook alleen de hyperlinks op een pagina lezen, net zoals een ziend persoon een pagina zou scannen op links. Als de linktekst altijd "klik hier" is, hoort de gebruiker alleen "klik hier, klik hier, klik hier, klik hier, klik hier, ..." Alle links zijn nu niet van elkaar te onderscheiden.
+
+### Goede linktekst
+
+Goede linktekst beschrijft kort wat er aan de andere kant van de link staat. In het bovenstaande voorbeeld over kleine pinguïns verwijst de link naar de Wikipedia-pagina over de soort. De term *kleine pinguïns* zou perfecte linktekst zijn, omdat het duidelijk maakt wat iemand zal leren als ze op de link klikken - kleine pinguïns.
+
+> De [kleine pinguïn](https://en.wikipedia.org/wiki/Little_penguin), ook wel bekend als de feeënpinguïn, is de kleinste pinguïn ter wereld.
+
+✅ Surf een paar minuten op het web om pagina's te vinden die obscure linkstrategieën gebruiken. Vergelijk ze met andere, beter gelinkte sites. Wat leer je?
+
+#### Opmerkingen over zoekmachines
+
+Als extra voordeel van het zorgen dat je site toegankelijk is voor iedereen, help je zoekmachines ook om je site te navigeren. Zoekmachines gebruiken linktekst om de onderwerpen van pagina's te leren. Dus het gebruik van goede linktekst helpt iedereen!
+
+### ARIA
+
+Stel je de volgende pagina voor:
+
+| Product      | Beschrijving       | Bestellen    |
+| ------------ | ------------------ | ------------ |
+| Widget       | [Beschrijving](../../../../1-getting-started-lessons/3-accessibility/') | [Bestellen](../../../../1-getting-started-lessons/3-accessibility/') |
+| Super widget | [Beschrijving](../../../../1-getting-started-lessons/3-accessibility/') | [Bestellen](../../../../1-getting-started-lessons/3-accessibility/') |
+
+In dit voorbeeld is het dupliceren van de tekst van beschrijving en bestellen logisch voor iemand die een browser gebruikt. Maar iemand die een schermlezer gebruikt, zou alleen de woorden *beschrijving* en *bestellen* herhaald horen zonder context.
+
+Om dit soort scenario's te ondersteunen, ondersteunt HTML een reeks attributen die bekend staan als [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Deze attributen stellen je in staat om extra informatie te geven aan schermlezers.
+
+> **NOTE**: Zoals bij veel aspecten van HTML, kan de ondersteuning door browsers en schermlezers variëren. De meeste gangbare clients ondersteunen echter ARIA-attributen.
+
+Je kunt `aria-label` gebruiken om de link te beschrijven wanneer het formaat van de pagina dit niet toestaat. De beschrijving voor widget kan worden ingesteld als
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Over het algemeen vervangt het gebruik van Semantische markup zoals hierboven beschreven het gebruik van ARIA, maar soms is er geen semantiek equivalent voor verschillende HTML-widgets. Een goed voorbeeld is een Tree. Er is geen HTML-equivalent voor een tree, dus je identificeert het generieke `<div>`-element voor dit element met een juiste rol en aria-waarden. De [MDN-documentatie over ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) bevat meer nuttige informatie.
+
+```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>
+```
+
+## Afbeeldingen
+
+Het spreekt voor zich dat schermlezers niet automatisch kunnen lezen wat er in een afbeelding staat. Het toegankelijk maken van afbeeldingen kost niet veel werk - dat is waar het `alt`-attribuut voor is. Alle betekenisvolle afbeeldingen moeten een `alt` hebben om te beschrijven wat ze zijn.  
+Afbeeldingen die puur decoratief zijn, moeten hun `alt`-attribuut instellen op een lege string: `alt=""`. Dit voorkomt dat schermlezers onnodig de decoratieve afbeelding aankondigen.
+
+✅ Zoals je zou verwachten, kunnen zoekmachines ook niet begrijpen wat er in een afbeelding staat. Ze gebruiken ook alt-tekst. Dus nogmaals, ervoor zorgen dat je pagina toegankelijk is, biedt extra voordelen!
+
+## Het Toetsenbord
+
+Sommige gebruikers kunnen geen muis of trackpad gebruiken en vertrouwen in plaats daarvan op toetsenbordinteracties om van het ene element naar het andere te tabben. Het is belangrijk dat je website je inhoud in een logische volgorde presenteert, zodat een toetsenbordgebruiker elk interactief element kan bereiken terwijl ze door een document navigeren. Als je je webpagina's bouwt met semantische markup en CSS gebruikt om hun visuele lay-out te stijlen, zou je site navigeerbaar moeten zijn met het toetsenbord, maar het is belangrijk om dit aspect handmatig te testen. Lees meer over [toetsenbordnavigatiestrategieën](https://webaim.org/techniques/keyboard/).
+
+✅ Ga naar een willekeurige website en probeer er doorheen te navigeren met alleen je toetsenbord. Wat werkt, wat werkt niet? Waarom?
+
+## Samenvatting
+
+Een web dat slechts voor sommigen toegankelijk is, is geen echt 'wereldwijd web'. De beste manier om ervoor te zorgen dat de sites die je maakt toegankelijk zijn, is door vanaf het begin toegankelijkheidsrichtlijnen te volgen. Hoewel er extra stappen bij komen kijken, betekent het opnemen van deze vaardigheden in je workflow nu dat alle pagina's die je maakt toegankelijk zullen zijn.
+
+---
+
+## 🚀 Uitdaging
+
+Neem deze HTML en herschrijf deze om zo toegankelijk mogelijk te zijn, gegeven de strategieën die je hebt geleerd.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## Quiz Na de Les
+[Quiz na de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## Herziening & Zelfstudie
+Veel overheden hebben wetten met betrekking tot toegankelijkheidseisen. Lees de toegankelijkheidswetten van jouw eigen land door. Wat wordt er gedekt, en wat niet? Een voorbeeld is [deze overheidswebsite](https://accessibility.blog.gov.uk/).
+
+## Opdracht
+
+[Analyseer een niet-toegankelijke website](assignment.md)
+
+Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) door Instrument
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/1-getting-started-lessons/3-accessibility/assignment.md b/translations/nl/1-getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..958cb255
--- /dev/null
+++ b/translations/nl/1-getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a258597a194e77d4fd469b3cd976b29e",
+  "translation_date": "2025-08-27T20:37:17+00:00",
+  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Analyseer een ontoegankelijke site
+
+## Instructies
+
+Identificeer een website waarvan je denkt dat deze NIET toegankelijk is en maak een actieplan om de toegankelijkheid te verbeteren. 
+Je eerste taak is om deze site te identificeren, de manieren waarop je denkt dat deze ontoegankelijk is te beschrijven zonder analytische tools te gebruiken, en vervolgens een Lighthouse-analyse uit te voeren. Maak een pdf van de resultaten van deze analyse en stel een gedetailleerd plan op met minimaal tien punten om te laten zien hoe de site verbeterd kan worden.
+
+## Tabel om de toegankelijkheid van de site te testen
+
+| Criteria | Uitstekend | Voldoende | Moet Verbeteren |
+|----------|------------|-----------|-----------------|
+|          | mist <10% van wat vereist is | mist 20% van wat vereist is | mist 50% van wat vereist is |
+
+----
+Studentenrapport: bevat paragrafen over hoe ontoegankelijk de site is, het Lighthouse-rapport vastgelegd in pdf, een lijst van tien verbeterpunten, met details over hoe deze verbeterd kunnen worden
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/1-getting-started-lessons/README.md b/translations/nl/1-getting-started-lessons/README.md
new file mode 100644
index 00000000..b68c31f2
--- /dev/null
+++ b/translations/nl/1-getting-started-lessons/README.md
@@ -0,0 +1,31 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "04683f4cfa46004179b0404b89a3065c",
+  "translation_date": "2025-08-27T20:31:12+00:00",
+  "source_file": "1-getting-started-lessons/README.md",
+  "language_code": "nl"
+}
+-->
+# Aan de slag met Webontwikkeling
+
+In dit deel van het curriculum maak je kennis met niet-projectgebonden concepten die belangrijk zijn om een professionele ontwikkelaar te worden.
+
+### Onderwerpen
+
+1. [Introductie tot programmeertalen en tools van het vak](1-intro-to-programming-languages/README.md)
+2. [Introductie tot GitHub](2-github-basics/README.md)
+3. [Basisprincipes van toegankelijkheid](3-accessibility/README.md)
+
+### Credits
+
+Introductie tot programmeertalen en tools van het vak is met ♥️ geschreven door [Jasmine Greenaway](https://twitter.com/paladique)
+
+Introductie tot GitHub is met ♥️ geschreven door [Floor Drees](https://twitter.com/floordrees)
+
+Basisprincipes van toegankelijkheid is met ♥️ geschreven door [Christopher Harrison](https://twitter.com/geektrainer)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/2-js-basics/1-data-types/README.md b/translations/nl/2-js-basics/1-data-types/README.md
new file mode 100644
index 00000000..ae55c024
--- /dev/null
+++ b/translations/nl/2-js-basics/1-data-types/README.md
@@ -0,0 +1,215 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
+  "translation_date": "2025-08-27T20:17:53+00:00",
+  "source_file": "2-js-basics/1-data-types/README.md",
+  "language_code": "nl"
+}
+-->
+# JavaScript Basis: Gegevenstypen
+
+![JavaScript Basis - Gegevenstypen](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.nl.png)
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz voor de les
+[Quiz voor de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
+
+Deze les behandelt de basis van JavaScript, de taal die interactiviteit op het web mogelijk maakt.
+
+> Je kunt deze les volgen op [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
+
+[![Variabelen](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variabelen in JavaScript")
+
+[![Gegevenstypen in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Gegevenstypen in JavaScript")
+
+> 🎥 Klik op de afbeeldingen hierboven voor video's over variabelen en gegevenstypen
+
+Laten we beginnen met variabelen en de gegevenstypen die ze bevatten!
+
+## Variabelen
+
+Variabelen slaan waarden op die je kunt gebruiken en wijzigen in je code.
+
+Het **declareren** van een variabele heeft de volgende syntaxis **[keyword] [name]**. Het bestaat uit twee onderdelen:
+
+- **Keyword**. Keywords kunnen `let` of `var` zijn.  
+
+✅ Het keyword `let` werd geïntroduceerd in ES6 en geeft je variabele een zogenaamde _block scope_. Het wordt aanbevolen om `let` te gebruiken in plaats van `var`. We zullen block scopes later in meer detail behandelen.
+- **De variabelenaam**, dit is een naam die je zelf kiest.
+
+### Taak - werken met variabelen
+
+1. **Declareer een variabele**. Laten we een variabele declareren met het keyword `let`:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` is nu gedeclareerd met het keyword `let`. Het heeft momenteel nog geen waarde.
+
+1. **Ken een waarde toe**. Sla een waarde op in een variabele met de `=` operator, gevolgd door de gewenste waarde.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Opmerking: het gebruik van `=` in deze les betekent dat we gebruik maken van een "toewijzingsoperator", die wordt gebruikt om een waarde aan een variabele toe te wijzen. Het geeft geen gelijkheid aan.
+
+   `myVariable` is nu *geïnitialiseerd* met de waarde 123.
+
+1. **Refactor**. Vervang je code door de volgende instructie.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Het bovenstaande wordt een _expliciete initialisatie_ genoemd wanneer een variabele wordt gedeclareerd en tegelijkertijd een waarde krijgt toegewezen.
+
+1. **Wijzig de variabelewaarde**. Wijzig de variabelewaarde op de volgende manier:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Zodra een variabele is gedeclareerd, kun je de waarde op elk moment in je code wijzigen met de `=` operator en de nieuwe waarde.
+
+   ✅ Probeer het! Je kunt JavaScript direct in je browser schrijven. Open een browservenster en ga naar Developer Tools. In de console vind je een prompt; typ `let myVariable = 123`, druk op return, en typ vervolgens `myVariable`. Wat gebeurt er? Let op, je leert meer over deze concepten in volgende lessen.
+
+## Constanten
+
+Declaratie en initialisatie van een constante volgen dezelfde principes als een variabele, met uitzondering van het keyword `const`. Constanten worden meestal gedeclareerd met alleen hoofdletters.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Constanten lijken op variabelen, met twee uitzonderingen:
+
+- **Moet een waarde hebben**. Constanten moeten worden geïnitialiseerd, anders treedt er een fout op bij het uitvoeren van de code.
+- **Referentie kan niet worden gewijzigd**. De referentie van een constante kan niet worden gewijzigd nadat deze is geïnitialiseerd, anders treedt er een fout op bij het uitvoeren van de code. Laten we naar twee voorbeelden kijken:
+   - **Eenvoudige waarde**. Het volgende is NIET toegestaan:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Objectreferentie is beschermd**. Het volgende is NIET toegestaan.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Objectwaarde is niet beschermd**. Het volgende IS toegestaan:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Hierboven wijzig je de waarde van het object, maar niet de referentie zelf, wat toegestaan is.
+
+   > Opmerking, een `const` betekent dat de referentie beschermd is tegen herassignatie. De waarde is echter niet _onveranderlijk_ en kan veranderen, vooral als het een complex construct zoals een object is.
+
+## Gegevenstypen
+
+Variabelen kunnen veel verschillende soorten waarden opslaan, zoals getallen en tekst. Deze verschillende soorten waarden staan bekend als de **gegevenstype**. Gegevenstypen zijn een belangrijk onderdeel van softwareontwikkeling omdat ze ontwikkelaars helpen beslissingen te nemen over hoe de code moet worden geschreven en hoe de software moet werken. Bovendien hebben sommige gegevenstypen unieke eigenschappen die helpen om extra informatie uit een waarde te halen of deze te transformeren.
+
+✅ Gegevenstypen worden ook wel JavaScript data primitives genoemd, omdat ze de laagste niveau gegevenstypen zijn die door de taal worden geleverd. Er zijn 7 primitieve gegevenstypen: string, number, bigint, boolean, undefined, null en symbol. Neem een minuut om te visualiseren wat elk van deze primitieve typen zou kunnen vertegenwoordigen. Wat is een `zebra`? Hoe zit het met `0`? `true`?
+
+### Getallen
+
+In de vorige sectie was de waarde van `myVariable` een gegevenstype van het type getal.
+
+`let myVariable = 123;`
+
+Variabelen kunnen alle soorten getallen opslaan, inclusief decimalen of negatieve getallen. Getallen kunnen ook worden gebruikt met rekenkundige operators, behandeld in de [volgende sectie](../../../../2-js-basics/1-data-types).
+
+### Rekenkundige operators
+
+Er zijn verschillende soorten operators om rekenkundige functies uit te voeren, en enkele worden hier vermeld:
+
+| Symbool | Beschrijving                                                           | Voorbeeld                        |
+| ------- | ---------------------------------------------------------------------- | -------------------------------- |
+| `+`     | **Optelling**: Berekent de som van twee getallen                       | `1 + 2 //verwachte antwoord is 3`   |
+| `-`     | **Aftrekking**: Berekent het verschil tussen twee getallen             | `1 - 2 //verwachte antwoord is -1`  |
+| `*`     | **Vermenigvuldiging**: Berekent het product van twee getallen          | `1 * 2 //verwachte antwoord is 2`   |
+| `/`     | **Deling**: Berekent het quotiënt van twee getallen                    | `1 / 2 //verwachte antwoord is 0.5` |
+| `%`     | **Rest**: Berekent de rest van de deling van twee getallen             | `1 % 2 //verwachte antwoord is 1`   |
+
+✅ Probeer het! Probeer een rekenkundige operatie in de console van je browser. Verrassen de resultaten je?
+
+### Strings
+
+Strings zijn sets van tekens die tussen enkele of dubbele aanhalingstekens staan.
+
+- `'Dit is een string'`
+- `"Dit is ook een string"`
+- `let myString = 'Dit is een stringwaarde opgeslagen in een variabele';`
+
+Vergeet niet aanhalingstekens te gebruiken bij het schrijven van een string, anders gaat JavaScript ervan uit dat het een variabelenaam is.
+
+### Strings formatteren
+
+Strings zijn tekstueel en moeten van tijd tot tijd worden opgemaakt.
+
+Om twee of meer strings te **concateneren**, of samen te voegen, gebruik je de `+` operator.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Waarom is `1 + 1 = 2` in JavaScript, maar `'1' + '1' = 11?` Denk erover na. En wat gebeurt er met `'1' + 1`?
+
+**Template literals** zijn een andere manier om strings op te maken, behalve dat in plaats van aanhalingstekens, de backtick wordt gebruikt. Alles wat geen platte tekst is, moet in placeholders `${ }` worden geplaatst. Dit omvat eventuele variabelen die strings kunnen zijn.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+Je kunt je opmaakdoelen bereiken met beide methoden, maar template literals respecteren eventuele spaties en regeleinden.
+
+✅ Wanneer zou je een template literal gebruiken in plaats van een gewone string?
+
+### Booleans
+
+Booleans kunnen slechts twee waarden hebben: `true` of `false`. Booleans kunnen helpen beslissen welke regels code moeten worden uitgevoerd wanneer aan bepaalde voorwaarden wordt voldaan. In veel gevallen helpen [operators](../../../../2-js-basics/1-data-types) bij het instellen van de waarde van een Boolean en je zult vaak merken dat variabelen worden geïnitialiseerd of dat hun waarden worden bijgewerkt met een operator.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Een variabele kan als 'truthy' worden beschouwd als deze evalueert naar een boolean `true`. Interessant genoeg zijn in JavaScript [alle waarden truthy tenzij ze als falsy zijn gedefinieerd](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Uitdaging
+
+JavaScript staat bekend om zijn verrassende manieren van omgaan met gegevenstypen. Doe wat onderzoek naar deze 'valkuilen'. Bijvoorbeeld: hoofdlettergevoeligheid kan je verrassen! Probeer dit in je console: `let age = 1; let Age = 2; age == Age` (resultaat `false` -- waarom?). Welke andere valkuilen kun je vinden?
+
+## Quiz na de les
+[Quiz na de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
+
+## Herhaling & Zelfstudie
+
+Bekijk [deze lijst met JavaScript-oefeningen](https://css-tricks.com/snippets/javascript/) en probeer er een. Wat heb je geleerd?
+
+## Opdracht
+
+[Gegevenstypen oefenen](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/2-js-basics/1-data-types/assignment.md b/translations/nl/2-js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..3d874c77
--- /dev/null
+++ b/translations/nl/2-js-basics/1-data-types/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3869244ceda606c4969d8cdd82679867",
+  "translation_date": "2025-08-27T20:19:36+00:00",
+  "source_file": "2-js-basics/1-data-types/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Oefening met Gegevenstypen
+
+## Instructies
+
+Stel je voor dat je een winkelwagen aan het bouwen bent. Schrijf wat documentatie over de gegevenstypen die je nodig zou hebben om je winkelervaring compleet te maken. Hoe ben je tot je keuzes gekomen?
+
+## Rubriek
+
+Criteria | Uitmuntend | Voldoende | Moet Verbeteren
+--- | --- | --- | --- |
+||De zes gegevenstypen worden vermeld en uitgebreid onderzocht, waarbij hun gebruik wordt gedocumenteerd|Vier gegevenstypen worden onderzocht|Twee gegevenstypen worden onderzocht|
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/2-js-basics/2-functions-methods/README.md b/translations/nl/2-js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..9fa97826
--- /dev/null
+++ b/translations/nl/2-js-basics/2-functions-methods/README.md
@@ -0,0 +1,210 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
+  "translation_date": "2025-08-27T20:14:46+00:00",
+  "source_file": "2-js-basics/2-functions-methods/README.md",
+  "language_code": "nl"
+}
+-->
+# JavaScript Basis: Methoden en Functies
+
+![JavaScript Basis - Functies](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.nl.png)
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Les Quiz
+[Pre-les quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
+
+Wanneer we nadenken over het schrijven van code, willen we altijd zorgen dat onze code leesbaar is. Hoewel dit misschien tegenstrijdig klinkt, wordt code veel vaker gelezen dan geschreven. Een belangrijk hulpmiddel in de gereedschapskist van een ontwikkelaar om onderhoudbare code te garanderen, is de **functie**.
+
+[![Methoden en Functies](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methoden en Functies")
+
+> 🎥 Klik op de afbeelding hierboven voor een video over methoden en functies.
+
+> Je kunt deze les volgen op [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
+
+## Functies
+
+In essentie is een functie een blok code dat we op verzoek kunnen uitvoeren. Dit is ideaal voor situaties waarin we dezelfde taak meerdere keren moeten uitvoeren; in plaats van de logica op meerdere locaties te dupliceren (wat het moeilijk zou maken om bij te werken wanneer dat nodig is), kunnen we het centraliseren op één plek en het oproepen wanneer we de operatie willen uitvoeren - je kunt zelfs functies oproepen vanuit andere functies!
+
+Net zo belangrijk is het vermogen om een functie een naam te geven. Hoewel dit misschien triviaal lijkt, biedt de naam een snelle manier om een sectie code te documenteren. Je kunt dit zien als een label op een knop. Als ik op een knop klik met de tekst "Timer annuleren", weet ik dat het de klok stopt.
+
+## Een functie maken en oproepen
+
+De syntaxis voor een functie ziet er als volgt uit:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Als ik een functie wilde maken om een begroeting weer te geven, zou dat er zo uitzien:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Wanneer we onze functie willen oproepen (of aanroepen), gebruiken we de naam van de functie gevolgd door `()`. Het is belangrijk op te merken dat onze functie kan worden gedefinieerd vóór of nadat we besluiten deze op te roepen; de JavaScript-compiler zal deze voor je vinden.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** Er is een speciaal type functie dat bekend staat als een **methode**, die je al hebt gebruikt! In feite zagen we dit in onze demo hierboven toen we `console.log` gebruikten. Wat een methode anders maakt dan een functie, is dat een methode aan een object is gekoppeld (`console` in ons voorbeeld), terwijl een functie vrij zwevend is. Je zult veel ontwikkelaars deze termen door elkaar horen gebruiken.
+
+### Beste praktijken voor functies
+
+Er zijn een aantal beste praktijken om in gedachten te houden bij het maken van functies:
+
+- Gebruik altijd beschrijvende namen zodat je weet wat de functie zal doen
+- Gebruik **camelCasing** om woorden te combineren
+- Houd je functies gericht op een specifieke taak
+
+## Informatie doorgeven aan een functie
+
+Om een functie meer herbruikbaar te maken, wil je vaak informatie doorgeven. Als we ons `displayGreeting`-voorbeeld hierboven bekijken, zal het alleen **Hello, world!** weergeven. Niet de meest nuttige functie die je kunt maken. Als we het iets flexibeler willen maken, zoals iemand de naam van de persoon laten specificeren die begroet moet worden, kunnen we een **parameter** toevoegen. Een parameter (ook soms een **argument** genoemd) is aanvullende informatie die naar een functie wordt gestuurd.
+
+Parameters worden vermeld in het definitiegedeelte tussen haakjes en worden door komma's gescheiden, zoals:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+We kunnen onze `displayGreeting` bijwerken om een naam te accepteren en die weer te geven.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Wanneer we onze functie willen oproepen en de parameter willen doorgeven, specificeren we deze tussen de haakjes.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Standaardwaarden
+
+We kunnen onze functie nog flexibeler maken door meer parameters toe te voegen. Maar wat als we niet willen dat elke waarde verplicht wordt opgegeven? Blijvend bij ons begroetingsvoorbeeld, zouden we de naam verplicht kunnen laten (we moeten weten wie we begroeten), maar willen we de begroeting zelf naar wens laten aanpassen. Als iemand het niet wil aanpassen, bieden we een standaardwaarde aan. Om een standaardwaarde aan een parameter toe te voegen, stellen we deze in op dezelfde manier als we een waarde voor een variabele instellen - `parameterName = 'defaultValue'`. Een volledig voorbeeld:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+Wanneer we de functie oproepen, kunnen we dan beslissen of we een waarde willen instellen voor `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Returnwaarden
+
+Tot nu toe zal de functie die we hebben gebouwd altijd output geven naar de [console](https://developer.mozilla.org/docs/Web/API/console). Soms kan dit precies zijn wat we zoeken, vooral wanneer we functies maken die andere services zullen aanroepen. Maar wat als ik een hulpfunctie wil maken om een berekening uit te voeren en de waarde terug te geven zodat ik deze elders kan gebruiken?
+
+We kunnen dit doen door een **returnwaarde** te gebruiken. Een returnwaarde wordt door de functie teruggegeven en kan in een variabele worden opgeslagen, net zoals we een letterlijke waarde zoals een string of getal zouden opslaan.
+
+Als een functie iets teruggeeft, wordt het sleutelwoord `return` gebruikt. Het sleutelwoord `return` verwacht een waarde of referentie van wat wordt teruggegeven, zoals:
+
+```javascript
+return myVariable;
+```  
+
+We zouden een functie kunnen maken om een begroetingsbericht te maken en de waarde terug te geven aan de aanroeper.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Bij het oproepen van deze functie slaan we de waarde op in een variabele. Dit is vrijwel hetzelfde als wanneer we een variabele instellen op een statische waarde (zoals `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Functies als parameters voor functies
+
+Naarmate je verder komt in je programmeercarrière, zul je functies tegenkomen die functies als parameters accepteren. Deze handige truc wordt vaak gebruikt wanneer we niet weten wanneer iets gaat gebeuren of voltooid zal zijn, maar we weten dat we een operatie moeten uitvoeren als reactie.
+
+Als voorbeeld, overweeg [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), die een timer start en code uitvoert wanneer deze voltooid is. We moeten aangeven welke code we willen uitvoeren. Klinkt als een perfecte taak voor een functie!
+
+Als je de onderstaande code uitvoert, zie je na 3 seconden het bericht **3 seconden zijn verstreken**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(displayDone, 3000);
+```
+
+### Anonieme functies
+
+Laten we nog eens kijken naar wat we hebben gebouwd. We maken een functie met een naam die slechts één keer zal worden gebruikt. Naarmate onze applicatie complexer wordt, kunnen we ons voorstellen dat we veel functies maken die slechts één keer worden aangeroepen. Dit is niet ideaal. Het blijkt dat we niet altijd een naam hoeven te geven!
+
+Wanneer we een functie als parameter doorgeven, kunnen we het maken ervan vooraf overslaan en in plaats daarvan een functie bouwen als onderdeel van de parameter. We gebruiken hetzelfde sleutelwoord `function`, maar bouwen het als een parameter.
+
+Laten we de bovenstaande code herschrijven om een anonieme functie te gebruiken:
+
+```javascript
+setTimeout(function() {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+Als je onze nieuwe code uitvoert, zul je merken dat we dezelfde resultaten krijgen. We hebben een functie gemaakt, maar hoefden er geen naam aan te geven!
+
+### Fat arrow functies
+
+Een veelgebruikte shortcut in veel programmeertalen (inclusief JavaScript) is de mogelijkheid om gebruik te maken van wat een **arrow** of **fat arrow** functie wordt genoemd. Het gebruikt een speciale indicator `=>`, die eruitziet als een pijl - vandaar de naam! Door `=>` te gebruiken, kunnen we het sleutelwoord `function` overslaan.
+
+Laten we onze code nog een keer herschrijven om een fat arrow functie te gebruiken:
+
+```javascript
+setTimeout(() => {
+  console.log('3 seconds has elapsed');
+}, 3000);
+```
+
+### Wanneer welke strategie te gebruiken
+
+Je hebt nu gezien dat we drie manieren hebben om een functie als parameter door te geven en vraagt je misschien af wanneer je welke moet gebruiken. Als je weet dat je de functie meer dan eens zult gebruiken, maak deze dan zoals normaal. Als je deze slechts op één locatie zult gebruiken, is het over het algemeen het beste om een anonieme functie te gebruiken. Of je een fat arrow functie of de meer traditionele `function`-syntaxis gebruikt, is aan jou, maar je zult merken dat de meeste moderne ontwikkelaars de voorkeur geven aan `=>`.
+
+---
+
+## 🚀 Uitdaging
+
+Kun je in één zin het verschil tussen functies en methoden uitleggen? Probeer het eens!
+
+## Post-Les Quiz
+[Post-les quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
+
+## Review & Zelfstudie
+
+Het is de moeite waard om [wat meer te lezen over arrow functies](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), aangezien ze steeds vaker worden gebruikt in codebases. Oefen met het schrijven van een functie en herschrijf deze vervolgens met deze syntaxis.
+
+## Opdracht
+
+[Leuke dingen met Functies](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/2-js-basics/2-functions-methods/assignment.md b/translations/nl/2-js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..28a49a72
--- /dev/null
+++ b/translations/nl/2-js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8973f96157680a13e9446e4bb540ee57",
+  "translation_date": "2025-08-27T20:15:47+00:00",
+  "source_file": "2-js-basics/2-functions-methods/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Plezier met Functies
+
+## Instructies
+
+Maak verschillende functies, zowel functies die iets teruggeven als functies die niets teruggeven.
+
+Probeer een functie te maken die een mix heeft van parameters en parameters met standaardwaarden.
+
+## Beoordelingscriteria
+
+| Criteria | Uitmuntend                                                                            | Voldoende                                                        | Moet Verbeteren   |
+| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
+|          | Oplossing bevat twee of meer goed werkende functies met diverse parameters            | Werkende oplossing bevat één functie en enkele parameters        | Oplossing bevat fouten |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/2-js-basics/3-making-decisions/README.md b/translations/nl/2-js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..2d172111
--- /dev/null
+++ b/translations/nl/2-js-basics/3-making-decisions/README.md
@@ -0,0 +1,232 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "888609c48329c280ca2477d2df40f2e5",
+  "translation_date": "2025-08-27T20:13:05+00:00",
+  "source_file": "2-js-basics/3-making-decisions/README.md",
+  "language_code": "nl"
+}
+-->
+# JavaScript Basis: Beslissingen Nemen
+
+![JavaScript Basis - Beslissingen nemen](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.nl.png)
+
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz Voorafgaand aan de Les
+
+[Quiz voorafgaand aan de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
+
+Beslissingen nemen en de volgorde waarin je code wordt uitgevoerd beheersen, maakt je code herbruikbaar en robuust. Dit gedeelte behandelt de syntax voor het beheersen van de gegevensstroom in JavaScript en het belang ervan bij het gebruik met Booleaanse gegevenstypen.
+
+[![Beslissingen Nemen](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Beslissingen Nemen")
+
+> 🎥 Klik op de afbeelding hierboven voor een video over beslissingen nemen.
+
+> Je kunt deze les volgen op [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
+
+## Een Korte Herhaling over Booleans
+
+Booleans kunnen slechts twee waarden hebben: `true` of `false`. Booleans helpen bij het nemen van beslissingen over welke regels code moeten worden uitgevoerd wanneer aan bepaalde voorwaarden wordt voldaan.
+
+Stel je boolean in op true of false zoals dit:
+
+`let myTrueBool = true`  
+`let myFalseBool = false`
+
+✅ Booleans zijn vernoemd naar de Engelse wiskundige, filosoof en logicus George Boole (1815–1864).
+
+## Vergelijkingsoperatoren en Booleans
+
+Operatoren worden gebruikt om voorwaarden te evalueren door vergelijkingen te maken die een Booleaanse waarde opleveren. Hieronder staat een lijst van veelgebruikte operatoren.
+
+| Symbool | Beschrijving                                                                                                                                                   | Voorbeeld          |
+| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`     | **Kleiner dan**: Vergelijkt twee waarden en retourneert het Booleaanse gegevenstype `true` als de waarde aan de linkerkant kleiner is dan die aan de rechterkant | `5 < 6 // true`    |
+| `<=`    | **Kleiner dan of gelijk aan**: Vergelijkt twee waarden en retourneert het Booleaanse gegevenstype `true` als de waarde aan de linkerkant kleiner dan of gelijk is aan de rechterkant | `5 <= 6 // true`   |
+| `>`     | **Groter dan**: Vergelijkt twee waarden en retourneert het Booleaanse gegevenstype `true` als de waarde aan de linkerkant groter is dan die aan de rechterkant  | `5 > 6 // false`   |
+| `>=`    | **Groter dan of gelijk aan**: Vergelijkt twee waarden en retourneert het Booleaanse gegevenstype `true` als de waarde aan de linkerkant groter dan of gelijk is aan de rechterkant | `5 >= 6 // false`  |
+| `===`   | **Strikte gelijkheid**: Vergelijkt twee waarden en retourneert het Booleaanse gegevenstype `true` als de waarden aan de rechter- en linkerkant gelijk zijn EN hetzelfde gegevenstype hebben | `5 === 6 // false` |
+| `!==`   | **Ongelijkheid**: Vergelijkt twee waarden en retourneert de tegenovergestelde Booleaanse waarde van wat een strikte gelijkheidsoperator zou retourneren         | `5 !== 6 // true`  |
+
+✅ Test je kennis door enkele vergelijkingen in de console van je browser te schrijven. Verrast een van de geretourneerde gegevens je?
+
+## If Statement
+
+De if-statement voert de code tussen zijn blokken uit als de voorwaarde waar is.
+
+```javascript
+if (condition) {
+  //Condition is true. Code in this block will run.
+}
+```
+
+Logische operatoren worden vaak gebruikt om de voorwaarde te vormen.
+
+```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
+
+De `else`-statement voert de code tussen zijn blokken uit wanneer de voorwaarde onwaar is. Het is optioneel bij een `if`-statement.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is false. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+✅ Test je begrip van deze code en de volgende code door deze in een browserconsole uit te voeren. Verander de waarden van de variabelen `currentMoney` en `laptopPrice` om de geretourneerde `console.log()` te wijzigen.
+
+## Switch Statement
+
+De `switch`-statement wordt gebruikt om verschillende acties uit te voeren op basis van verschillende voorwaarden. Gebruik de `switch`-statement om een van de vele codeblokken te selecteren die moeten worden uitgevoerd.
+
+```javascript
+switch (expression) {
+  case x:
+    // code block
+    break;
+  case y:
+    // code block
+    break;
+  default:
+  // code block
+}
+```
+
+```javascript
+// program using switch statement
+let a = 2;
+
+switch (a) {
+  case 1:
+    a = "one";
+    break;
+  case 2:
+    a = "two";
+    break;
+  default:
+    a = "not found";
+    break;
+}
+console.log(`The value is ${a}`);
+```
+
+✅ Test je begrip van deze code en de volgende code door deze in een browserconsole uit te voeren. Verander de waarden van de variabele `a` om de geretourneerde `console.log()` te wijzigen.
+
+## Logische Operatoren en Booleans
+
+Beslissingen kunnen meer dan één vergelijking vereisen en kunnen worden gecombineerd met logische operatoren om een Booleaanse waarde te produceren.
+
+| Symbool | Beschrijving                                                                                     | Voorbeeld                                                                 |
+| ------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`    | **Logische EN**: Vergelijkt twee Booleaanse expressies. Retourneert true **alleen** als beide kanten waar zijn | `(5 > 6) && (5 < 6 ) //Eén kant is onwaar, de andere is waar. Retourneert false` |
+| `\|\|`  | **Logische OF**: Vergelijkt twee Booleaanse expressies. Retourneert true als minstens één kant waar is | `(5 > 6) \|\| (5 < 6) //Eén kant is onwaar, de andere is waar. Retourneert true` |
+| `!`     | **Logische NIET**: Retourneert de tegenovergestelde waarde van een Booleaanse expressie          | `!(5 > 6) // 5 is niet groter dan 6, maar "!" retourneert true`         |
+
+## Voorwaarden en Beslissingen met Logische Operatoren
+
+Logische operatoren kunnen worden gebruikt om voorwaarden te vormen in if..else-statements.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
+  //Condition is true. Code in this block will run.
+  console.log("Getting a new laptop!");
+} else {
+  //Condition is true. Code in this block will run.
+  console.log("Can't afford a new laptop, yet!");
+}
+```
+
+### Negatie-operator
+
+Je hebt tot nu toe gezien hoe je een `if...else`-statement kunt gebruiken om conditionele logica te creëren. Alles wat in een `if` gaat, moet evalueren naar true/false. Door de `!`-operator te gebruiken kun je de expressie _negatief maken_. Het zou er zo uitzien:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Ternaire expressies
+
+`if...else` is niet de enige manier om beslissingslogica uit te drukken. Je kunt ook iets gebruiken dat een ternaire operator wordt genoemd. De syntax ziet er als volgt uit:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>
+```
+
+Hieronder staat een concreter voorbeeld:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10;
+let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
+```
+
+✅ Neem een minuut om deze code een paar keer door te lezen. Begrijp je hoe deze operatoren werken?
+
+Het bovenstaande stelt dat:
+
+- als `firstNumber` groter is dan `secondNumber`
+- wijs dan `firstNumber` toe aan `biggestNumber`
+- anders wijs `secondNumber` toe.
+
+De ternaire expressie is gewoon een compacte manier om de onderstaande code te schrijven:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Uitdaging
+
+Maak een programma dat eerst wordt geschreven met logische operatoren en herschrijf het vervolgens met een ternaire expressie. Wat is jouw favoriete syntax?
+
+---
+
+## Quiz Na de Les
+
+[Quiz na de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
+
+## Herziening & Zelfstudie
+
+Lees meer over de vele operatoren die beschikbaar zijn voor de gebruiker [op MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+
+Bekijk Josh Comeau's geweldige [operator lookup](https://joshwcomeau.com/operator-lookup/)!
+
+## Opdracht
+
+[Operatoren](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/2-js-basics/3-making-decisions/assignment.md b/translations/nl/2-js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..f61adb7b
--- /dev/null
+++ b/translations/nl/2-js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,54 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
+  "translation_date": "2025-08-27T20:14:00+00:00",
+  "source_file": "2-js-basics/3-making-decisions/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Operatoren
+
+## Instructies
+
+Experimenteer met operatoren. Hier is een suggestie voor een programma dat je kunt implementeren:
+
+Je hebt een groep studenten uit twee verschillende beoordelingssystemen.
+
+### Eerste beoordelingssysteem
+
+Eén beoordelingssysteem definieert cijfers van 1-5, waarbij 3 en hoger betekent dat je de cursus haalt.
+
+### Tweede beoordelingssysteem
+
+Het andere beoordelingssysteem heeft de volgende cijfers: `A, A-, B, B-, C, C-`, waarbij `A` het hoogste cijfer is en `C` het laagste cijfer waarmee je slaagt.
+
+### De opdracht
+
+Gegeven de volgende array `allStudents`, die alle studenten en hun cijfers vertegenwoordigt, maak een nieuwe array `studentsWhoPass` met alle studenten die slagen.
+
+> TIP: gebruik een for-loop, if...else en vergelijkingsoperatoren:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-',
+  1,
+  4,
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Beoordelingscriteria
+
+| Criteria | Uitmuntend                     | Voldoende                     | Verbetering nodig               |
+| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
+|          | Complete oplossing wordt gepresenteerd | Gedeeltelijke oplossing wordt gepresenteerd | Oplossing met fouten wordt gepresenteerd |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/2-js-basics/4-arrays-loops/README.md b/translations/nl/2-js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..7c13bc67
--- /dev/null
+++ b/translations/nl/2-js-basics/4-arrays-loops/README.md
@@ -0,0 +1,147 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f7f87871312cf6cc12662da7d973182",
+  "translation_date": "2025-08-27T20:16:23+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/README.md",
+  "language_code": "nl"
+}
+-->
+# JavaScript Basis: Arrays en Lussen
+
+![JavaScript Basis - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.nl.png)
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Les Quiz
+[Pre-les quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
+
+Deze les behandelt de basis van JavaScript, de taal die interactiviteit op het web mogelijk maakt. In deze les leer je over arrays en lussen, die worden gebruikt om gegevens te manipuleren.
+
+[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
+
+[![Lussen](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Lussen")
+
+> 🎥 Klik op de afbeeldingen hierboven voor video's over arrays en lussen.
+
+> Je kunt deze les volgen op [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
+
+## Arrays
+
+Werken met gegevens is een veelvoorkomende taak in elke programmeertaal, en het is een stuk eenvoudiger wanneer gegevens zijn georganiseerd in een structureel formaat, zoals arrays. Met arrays worden gegevens opgeslagen in een structuur die lijkt op een lijst. Een groot voordeel van arrays is dat je verschillende soorten gegevens in één array kunt opslaan.
+
+✅ Arrays zijn overal om ons heen! Kun je een voorbeeld bedenken van een array in het echte leven, zoals een zonnepaneel-array?
+
+De syntax voor een array is een paar vierkante haken.
+
+```javascript
+let myArray = [];
+```
+
+Dit is een lege array, maar arrays kunnen ook worden gedeclareerd met al ingevulde gegevens. Meerdere waarden in een array worden gescheiden door een komma.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+```
+
+De waarden in een array krijgen een unieke waarde genaamd de **index**, een geheel getal dat wordt toegewezen op basis van de afstand vanaf het begin van de array. In het bovenstaande voorbeeld heeft de stringwaarde "Chocolate" een index van 0, en de index van "Rocky Road" is 4. Gebruik de index met vierkante haken om arraywaarden op te halen, te wijzigen of toe te voegen.
+
+✅ Verrast het je dat arrays beginnen bij index nul? In sommige programmeertalen beginnen indexen bij 1. Er is een interessante geschiedenis hierover, die je kunt [lezen op Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Je kunt de index gebruiken om een waarde te wijzigen, zoals dit:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+En je kunt een nieuwe waarde toevoegen op een bepaalde index zoals dit:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ Een meer gebruikelijke manier om waarden toe te voegen aan een array is door gebruik te maken van array-operators zoals array.push()
+
+Om te achterhalen hoeveel items er in een array zitten, gebruik je de `length` eigenschap.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Probeer het zelf! Gebruik de console van je browser om een array te maken en te manipuleren die je zelf hebt bedacht.
+
+## Lussen
+
+Lussen stellen ons in staat om repetitieve of **iteratieve** taken uit te voeren, en kunnen veel tijd en code besparen. Elke iteratie kan variëren in variabelen, waarden en voorwaarden. Er zijn verschillende soorten lussen in JavaScript, en ze hebben allemaal kleine verschillen, maar doen in essentie hetzelfde: herhalen over gegevens.
+
+### For-lus
+
+De `for`-lus vereist 3 onderdelen om te itereren:
+- `counter` Een variabele die meestal wordt geïnitialiseerd met een getal dat het aantal iteraties telt
+- `condition` Een expressie die gebruikmaakt van vergelijkingsoperators om de lus te stoppen wanneer deze `false` wordt
+- `iteration-expression` Wordt uitgevoerd aan het einde van elke iteratie, meestal gebruikt om de waarde van de teller te wijzigen
+  
+```javascript
+// Counting up to 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Voer deze code uit in de console van je browser. Wat gebeurt er als je kleine wijzigingen aanbrengt in de teller, de voorwaarde of de iteratie-expressie? Kun je de lus achteruit laten lopen, zodat er een aftelling ontstaat?
+
+### While-lus
+
+In tegenstelling tot de syntax van de `for`-lus, vereist een `while`-lus alleen een voorwaarde die de lus stopt wanneer de voorwaarde `false` wordt. Voorwaarden in lussen zijn meestal afhankelijk van andere waarden zoals tellers, en moeten tijdens de lus worden beheerd. Startwaarden voor tellers moeten buiten de lus worden gemaakt, en alle expressies om aan een voorwaarde te voldoen, inclusief het wijzigen van de teller, moeten binnen de lus worden onderhouden.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Waarom zou je kiezen voor een for-lus versus een while-lus? 17K kijkers hadden dezelfde vraag op StackOverflow, en sommige van de meningen [kunnen interessant voor je zijn](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Lussen en Arrays
+
+Arrays worden vaak gebruikt met lussen omdat de meeste voorwaarden de lengte van de array nodig hebben om de lus te stoppen, en de index kan ook de waarde van de teller zijn.
+
+```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
+```
+
+✅ Experimenteer met het herhalen over een array die je zelf hebt gemaakt in de console van je browser.
+
+---
+
+## 🚀 Uitdaging
+
+Er zijn andere manieren om over arrays te herhalen dan for- en while-lussen. Er zijn [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), en [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Herschrijf je array-lus met een van deze technieken.
+
+## Post-Les Quiz
+[Post-les quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
+
+## Herhaling & Zelfstudie
+
+Arrays in JavaScript hebben veel methoden die eraan gekoppeld zijn, die uiterst handig zijn voor gegevensmanipulatie. [Lees meer over deze methoden](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) en probeer er een paar uit (zoals push, pop, slice en splice) op een array die je zelf hebt gemaakt.
+
+## Opdracht
+
+[Herhaal een Array](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/2-js-basics/4-arrays-loops/assignment.md b/translations/nl/2-js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..f6a6b455
--- /dev/null
+++ b/translations/nl/2-js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8b2381170bd0fd2870f5889bb8620f02",
+  "translation_date": "2025-08-27T20:17:11+00:00",
+  "source_file": "2-js-basics/4-arrays-loops/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Doorloop een Array
+
+## Instructies
+
+Maak een programma dat elke 3e nummer tussen 1-20 opsomt en dit naar de console print.
+
+> TIP: gebruik een for-lus en pas de iteratie-uitdrukking aan
+
+## Beoordelingscriteria
+
+| Criteria | Uitmuntend                              | Voldoende                | Moet Verbeterd Worden          |
+| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
+|          | Programma werkt correct en is voorzien van commentaar | Programma heeft geen commentaar | Programma is onvolledig of bevat fouten |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/2-js-basics/README.md b/translations/nl/2-js-basics/README.md
new file mode 100644
index 00000000..7cc34b4b
--- /dev/null
+++ b/translations/nl/2-js-basics/README.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cc9e70a2f096c67389c8acff1521fc27",
+  "translation_date": "2025-08-27T20:12:32+00:00",
+  "source_file": "2-js-basics/README.md",
+  "language_code": "nl"
+}
+-->
+# Introductie tot JavaScript
+
+JavaScript is de taal van het web. In deze vier lessen leer je de basis.
+
+### Onderwerpen
+
+1. [Variabelen en Datatypes](1-data-types/README.md)
+2. [Functies en Methoden](2-functions-methods/README.md)
+3. [Beslissingen maken met JavaScript](3-making-decisions/README.md)
+4. [Arrays en Lussen](4-arrays-loops/README.md)
+
+### Credits
+
+Deze lessen zijn met ♥️ geschreven door [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) en [Chris Noring](https://twitter.com/chris_noring)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/3-terrarium/1-intro-to-html/README.md b/translations/nl/3-terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..1ba8e62c
--- /dev/null
+++ b/translations/nl/3-terrarium/1-intro-to-html/README.md
@@ -0,0 +1,251 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "46a0639e719b9cf1dfd062aa24cad639",
+  "translation_date": "2025-08-27T20:05:52+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/README.md",
+  "language_code": "nl"
+}
+-->
+# Terrarium Project Deel 1: Introductie tot HTML
+
+![Introductie tot HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.nl.png)
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Les Quiz
+
+[Pre-les quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
+
+
+> Bekijk de video
+
+> 
+> [![Git en GitHub basisvideo](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+
+### Introductie
+
+HTML, of HyperText Markup Language, is het 'skelet' van het web. Als CSS je HTML 'aankleedt' en JavaScript het tot leven brengt, dan is HTML het lichaam van je webapplicatie. De syntaxis van HTML weerspiegelt dat idee, omdat het tags bevat zoals "head", "body" en "footer".
+
+In deze les gaan we HTML gebruiken om het 'skelet' van de interface van ons virtuele terrarium op te zetten. Het zal een titel en drie kolommen hebben: een rechter- en een linker kolom waar de versleepbare planten staan, en een middengebied dat het daadwerkelijke glazen terrarium zal zijn. Aan het einde van deze les kun je de planten in de kolommen zien, maar de interface zal er een beetje vreemd uitzien; maak je geen zorgen, in het volgende deel voeg je CSS-stijlen toe om de interface er beter uit te laten zien.
+
+### Taak
+
+Maak op je computer een map genaamd 'terrarium' en daarin een bestand genaamd 'index.html'. Je kunt dit doen in Visual Studio Code nadat je je terrarium-map hebt gemaakt door een nieuw VS Code-venster te openen, op 'open folder' te klikken en naar je nieuwe map te navigeren. Klik op de kleine 'file'-knop in het Explorer-paneel en maak het nieuwe bestand:
+
+![explorer in VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.nl.png)
+
+Of
+
+Gebruik deze commando's in je git bash:
+* `mkdir terrarium`
+* `cd terrarium`
+* `touch index.html`
+* `code index.html` of `nano index.html`
+
+> index.html-bestanden geven aan een browser aan dat het het standaardbestand in een map is; URL's zoals `https://anysite.com/test` kunnen worden opgebouwd met een mapstructuur inclusief een map genaamd `test` met `index.html` erin; `index.html` hoeft niet in een URL te worden weergegeven.
+
+---
+
+## De DocType en html-tags
+
+De eerste regel van een HTML-bestand is de doctype. Het is een beetje verrassend dat je deze regel helemaal bovenaan het bestand moet hebben, maar het vertelt oudere browsers dat de browser de pagina moet weergeven in een standaardmodus, volgens de huidige HTML-specificatie.
+
+> Tip: in VS Code kun je over een tag zweven en informatie krijgen over het gebruik ervan uit de MDN Reference-gidsen.
+
+De tweede regel moet de openingstag van `<html>` zijn, gevolgd door de sluitingstag `</html>`. Deze tags zijn de root-elementen van je interface.
+
+### Taak
+
+Voeg deze regels toe bovenaan je `index.html`-bestand:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Er zijn een paar verschillende modi die kunnen worden bepaald door de DocType in te stellen met een querystring: [Quirks Mode en Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Deze modi werden gebruikt om echt oude browsers te ondersteunen die tegenwoordig niet meer normaal worden gebruikt (Netscape Navigator 4 en Internet Explorer 5). Je kunt je houden aan de standaard doctype-verklaring.
+
+---
+
+## Het 'head'-gedeelte van het document
+
+Het 'head'-gedeelte van het HTML-document bevat cruciale informatie over je webpagina, ook wel [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta) genoemd. In ons geval vertellen we de webserver waaraan deze pagina wordt verzonden om te worden weergegeven, deze vier dingen:
+
+-   de titel van de pagina
+-   paginametadata inclusief:
+    -   de 'character set', die aangeeft welke tekencodering wordt gebruikt op de pagina
+    -   browserinformatie, inclusief `x-ua-compatible` die aangeeft dat de IE=edge browser wordt ondersteund
+    -   informatie over hoe de viewport zich moet gedragen wanneer deze wordt geladen. Het instellen van de viewport met een initiële schaal van 1 controleert het zoomniveau wanneer de pagina voor het eerst wordt geladen.
+
+### Taak
+
+Voeg een 'head'-blok toe aan je document tussen de opening en sluiting van de `<html>`-tags.
+
+```html
+<head>
+	<title>Welcome to my Virtual Terrarium</title>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+```
+
+✅ Wat zou er gebeuren als je een viewport meta-tag instelt zoals deze: `<meta name="viewport" content="width=600">`? Lees meer over de [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+
+---
+
+## Het `body`-gedeelte van het document
+
+### HTML-tags
+
+In HTML voeg je tags toe aan je .html-bestand om elementen van een webpagina te maken. Elke tag heeft meestal een opening en sluiting, zoals: `<p>hallo</p>` om een paragraaf aan te geven. Maak het lichaam van je interface door een set `<body>`-tags toe te voegen binnen de `<html>`-tagparen; je markup ziet er nu zo uit:
+
+### Taak
+
+```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>
+```
+
+Nu kun je beginnen met het opbouwen van je pagina. Normaal gesproken gebruik je `<div>`-tags om de afzonderlijke elementen in een pagina te maken. We maken een reeks `<div>`-elementen die afbeeldingen bevatten.
+
+### Afbeeldingen
+
+Een HTML-tag die geen sluiting nodig heeft, is de `<img>`-tag, omdat deze een `src`-element heeft dat alle informatie bevat die de pagina nodig heeft om het item weer te geven.
+
+Maak een map in je app genaamd `images` en voeg daarin alle afbeeldingen toe uit de [source code folder](../../../../3-terrarium/solution/images); (er zijn 14 afbeeldingen van planten).
+
+### Taak
+
+Voeg die plantenafbeeldingen toe in twee kolommen tussen de `<body></body>`-tags:
+
+```html
+<div id="page">
+	<div id="left-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+		</div>
+	</div>
+	<div id="right-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+		</div>
+	</div>
+</div>
+```
+
+> Opmerking: Spans vs. Divs. Divs worden beschouwd als 'block'-elementen en Spans als 'inline'. Wat zou er gebeuren als je deze divs transformeert naar spans?
+
+Met deze markup verschijnen de planten nu op het scherm. Het ziet er behoorlijk slecht uit, omdat ze nog niet zijn gestyled met CSS, en dat doen we in de volgende les.
+
+Elke afbeelding heeft alt-tekst die verschijnt, zelfs als je een afbeelding niet kunt zien of weergeven. Dit is een belangrijk attribuut om op te nemen voor toegankelijkheid. Leer meer over toegankelijkheid in toekomstige lessen; voor nu, onthoud dat het alt-attribuut alternatieve informatie biedt voor een afbeelding als een gebruiker om de een of andere reden de afbeelding niet kan bekijken (vanwege een trage verbinding, een fout in het src-attribuut, of als de gebruiker een schermlezer gebruikt).
+
+✅ Heb je gemerkt dat elke afbeelding dezelfde alt-tag heeft? Is dit goede praktijk? Waarom wel of niet? Kun je deze code verbeteren?
+
+---
+
+## Semantische markup
+
+Over het algemeen is het beter om betekenisvolle 'semantiek' te gebruiken bij het schrijven van HTML. Wat betekent dat? Het betekent dat je HTML-tags gebruikt om het type gegevens of interactie te vertegenwoordigen waarvoor ze zijn ontworpen. Bijvoorbeeld, de hoofdtekst op een pagina moet een `<h1>`-tag gebruiken.
+
+Voeg de volgende regel toe direct onder je opening `<body>`-tag:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Het gebruik van semantische markup, zoals headers met `<h1>` en ongeordende lijsten weergegeven als `<ul>`, helpt schermlezers door een pagina te navigeren. Over het algemeen moeten knoppen worden geschreven als `<button>` en lijsten als `<li>`. Hoewel het _mogelijk_ is om speciaal gestylede `<span>`-elementen met klikhandlers te gebruiken om knoppen na te bootsen, is het beter voor gebruikers met een beperking om technologieën te gebruiken om te bepalen waar op een pagina een knop zich bevindt en ermee te communiceren, als het element verschijnt als een knop. Om deze reden, probeer zoveel mogelijk semantische markup te gebruiken.
+
+✅ Bekijk een schermlezer en [hoe deze interacteert met een webpagina](https://www.youtube.com/watch?v=OUDV1gqs9GA). Kun je zien waarom niet-semantische markup de gebruiker zou kunnen frustreren?
+
+## Het terrarium
+
+Het laatste deel van deze interface omvat het maken van markup die zal worden gestyled om een terrarium te creëren.
+
+### Taak:
+
+Voeg deze markup toe boven de laatste `</div>`-tag:
+
+```html
+<div id="terrarium">
+	<div class="jar-top"></div>
+	<div class="jar-walls">
+		<div class="jar-glossy-long"></div>
+		<div class="jar-glossy-short"></div>
+	</div>
+	<div class="dirt"></div>
+	<div class="jar-bottom"></div>
+</div>
+```
+
+✅ Hoewel je deze markup aan het scherm hebt toegevoegd, zie je absoluut niets weergegeven. Waarom?
+
+---
+
+## 🚀Uitdaging
+
+Er zijn enkele 'oude' tags in HTML die nog steeds leuk zijn om mee te spelen, hoewel je geen verouderde tags zoals [deze tags](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) in je markup zou moeten gebruiken. Kun je de oude `<marquee>`-tag gebruiken om de h1-titel horizontaal te laten scrollen? (als je dat doet, vergeet dan niet om het daarna te verwijderen)
+
+## Post-Les Quiz
+
+[Post-les quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
+
+## Review & Zelfstudie
+
+HTML is het 'beproefde' bouwbloksysteem dat heeft geholpen het web te bouwen tot wat het vandaag is. Leer een beetje over de geschiedenis door enkele oude en nieuwe tags te bestuderen. Kun je achterhalen waarom sommige tags zijn verouderd en andere zijn toegevoegd? Welke tags zouden in de toekomst kunnen worden geïntroduceerd?
+
+Leer meer over het bouwen van sites voor het web en mobiele apparaten op [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
+
+
+## Opdracht
+
+[Oefen je HTML: Bouw een blogmockup](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/3-terrarium/1-intro-to-html/assignment.md b/translations/nl/3-terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..e6430d87
--- /dev/null
+++ b/translations/nl/3-terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "970776c81401c9aacb34f365edac6b53",
+  "translation_date": "2025-08-27T20:06:50+00:00",
+  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Oefen je HTML: Bouw een blogmockup
+
+## Instructies
+
+Stel je voor dat je je persoonlijke website ontwerpt of opnieuw vormgeeft. Maak een grafische mockup van je site en schrijf vervolgens de HTML-markup op die je zou gebruiken om de verschillende elementen van de site op te bouwen. Je kunt dit op papier doen en scannen, of software naar keuze gebruiken, zorg er alleen voor dat je de HTML-markup handmatig schrijft.
+
+## Rubriek
+
+| Criteria | Uitmuntend                                                                         | Voldoende                                                                        | Verbetering nodig                                                                |
+| -------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+|          | Een bloglayout wordt visueel weergegeven met minstens 10 elementen van markup      | Een bloglayout wordt visueel weergegeven met ongeveer 5 elementen van markup     | Een bloglayout wordt visueel weergegeven met maximaal 3 elementen van markup     |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/3-terrarium/2-intro-to-css/README.md b/translations/nl/3-terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..530b942c
--- /dev/null
+++ b/translations/nl/3-terrarium/2-intro-to-css/README.md
@@ -0,0 +1,284 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e375c2aeb94e2407f2667633d39580bd",
+  "translation_date": "2025-08-27T20:10:32+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/README.md",
+  "language_code": "nl"
+}
+-->
+# Terrarium Project Deel 2: Introductie tot CSS
+
+![Introductie tot CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.nl.png)
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz voorafgaand aan de les
+
+[Quiz voorafgaand aan de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
+
+### Introductie
+
+CSS, oftewel Cascading Style Sheets, lost een belangrijk probleem op in webontwikkeling: hoe zorg je ervoor dat je website er goed uitziet. Het stijlen van je apps maakt ze gebruiksvriendelijker en aantrekkelijker; je kunt CSS ook gebruiken om Responsive Web Design (RWD) te creëren, zodat je apps er goed uitzien, ongeacht de schermgrootte waarop ze worden weergegeven. CSS gaat niet alleen over het mooier maken van je app; de specificatie bevat ook animaties en transformaties die geavanceerde interacties mogelijk maken. De CSS Working Group onderhoudt de huidige CSS-specificaties; je kunt hun werk volgen op de [site van het World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
+
+> Let op, CSS is een taal die zich blijft ontwikkelen, net als alles op het web, en niet alle browsers ondersteunen de nieuwste delen van de specificatie. Controleer altijd je implementaties door [CanIUse.com](https://caniuse.com) te raadplegen.
+
+In deze les gaan we stijlen toevoegen aan ons online terrarium en meer leren over verschillende CSS-concepten: de cascade, overerving, het gebruik van selectors, positionering en het bouwen van layouts met CSS. Tijdens dit proces zullen we het terrarium opmaken en het daadwerkelijke terrarium creëren.
+
+### Vereiste
+
+Je moet de HTML voor je terrarium al hebben gebouwd en klaar hebben om te stijlen.
+
+> Bekijk de video
+
+> 
+> [![Git en GitHub basisvideo](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
+
+### Taak
+
+Maak in je terrarium-map een nieuw bestand aan genaamd `style.css`. Importeer dat bestand in de `<head>`-sectie:
+
+```html
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## De Cascade
+
+Cascading Style Sheets bevatten het idee dat stijlen 'cascaderen', wat betekent dat de toepassing van een stijl wordt geleid door de prioriteit ervan. Stijlen die door een website-auteur zijn ingesteld, hebben voorrang op die van een browser. Stijlen die 'inline' zijn ingesteld, hebben voorrang op die in een extern stijlblad.
+
+### Taak
+
+Voeg de inline stijl "color: red" toe aan je `<h1>`-tag:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Voeg vervolgens de volgende code toe aan je `style.css`-bestand:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Welke kleur wordt weergegeven in je webapp? Waarom? Kun je een manier vinden om stijlen te overschrijven? Wanneer zou je dit willen doen, of waarom niet?
+
+---
+
+## Overerving
+
+Stijlen worden geërfd van een bovenliggende stijl naar een onderliggende stijl, zodat geneste elementen de stijlen van hun ouders overnemen.
+
+### Taak
+
+Stel het lettertype van de body in op een bepaald lettertype en controleer of een genest element hetzelfde lettertype heeft:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Open de console van je browser in het tabblad 'Elements' en observeer het lettertype van de H1. Het erft zijn lettertype van de body, zoals aangegeven in de browser:
+
+![geërfd lettertype](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.nl.png)
+
+✅ Kun je een geneste stijl een andere eigenschap laten erven?
+
+---
+
+## CSS Selectors
+
+### Tags
+
+Tot nu toe heeft je `style.css`-bestand slechts een paar tags gestyled, en de app ziet er nogal vreemd uit:
+
+```CSS
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Deze manier van het stijlen van een tag geeft je controle over unieke elementen, maar je moet de stijlen van veel planten in je terrarium kunnen beheren. Om dat te doen, moet je gebruik maken van CSS-selectors.
+
+### Id's
+
+Voeg wat stijl toe om de linker- en rechtercontainers op te maken. Omdat er slechts één linkercontainer en één rechtercontainer is, hebben ze id's gekregen in de markup. Om ze te stijlen, gebruik je `#`:
+
+```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;
+}
+```
+
+Hier heb je deze containers met absolute positionering aan de uiterste linker- en rechterkant van het scherm geplaatst, en percentages gebruikt voor hun breedte zodat ze kunnen schalen voor kleine mobiele schermen.
+
+✅ Deze code wordt behoorlijk herhaald en is dus niet "DRY" (Don't Repeat Yourself); kun je een betere manier vinden om deze id's te stijlen, misschien met een combinatie van een id en een class? Je zou de markup moeten aanpassen en de CSS moeten refactoren:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Classes
+
+In het bovenstaande voorbeeld heb je twee unieke elementen op het scherm gestyled. Als je wilt dat stijlen op veel elementen op het scherm worden toegepast, kun je CSS-classes gebruiken. Doe dit om de planten in de linker- en rechtercontainers op te maken.
+
+Merk op dat elke plant in de HTML-markup een combinatie van id's en classes heeft. De id's worden hier gebruikt door de JavaScript die je later zult toevoegen om de plaatsing van de terrariumplanten te manipuleren. De classes daarentegen geven alle planten een bepaalde stijl.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Voeg het volgende toe aan je `style.css`-bestand:
+
+```CSS
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Opvallend in dit fragment is de mix van relatieve en absolute positionering, wat we in de volgende sectie zullen behandelen. Bekijk hoe de hoogtes worden behandeld met percentages:
+
+Je stelt de hoogte van de plantenhouder in op 13%, een goed getal om ervoor te zorgen dat alle planten in elke verticale container worden weergegeven zonder dat scrollen nodig is.
+
+Je stelt de plantenhouder in om naar links te bewegen, zodat de planten meer gecentreerd zijn binnen hun container. De afbeeldingen hebben een grote hoeveelheid transparante achtergrond om ze beter sleepbaar te maken, dus ze moeten naar links worden verschoven om beter op het scherm te passen.
+
+Vervolgens krijgt de plant zelf een maximale breedte van 150%. Dit zorgt ervoor dat deze kleiner wordt als de browser kleiner wordt. Probeer je browser te verkleinen; de planten blijven in hun containers maar schalen naar beneden om te passen.
+
+Ook opvallend is het gebruik van z-index, waarmee je de relatieve hoogte van een element kunt regelen (zodat de planten bovenop de container zitten en lijken te zitten in het terrarium).
+
+✅ Waarom heb je zowel een plantenhouder- als een plant-CSS-selector nodig?
+
+## CSS Positionering
+
+Het combineren van positioneringseigenschappen (er zijn statische, relatieve, vaste, absolute en plakkerige posities) kan een beetje lastig zijn, maar als het goed wordt gedaan, geeft het je veel controle over de elementen op je pagina's.
+
+Absoluut gepositioneerde elementen worden gepositioneerd ten opzichte van hun dichtstbijzijnde gepositioneerde voorouders, en als die er niet zijn, worden ze gepositioneerd ten opzichte van het documentbody.
+
+Relatief gepositioneerde elementen worden gepositioneerd op basis van de CSS-instructies om hun plaatsing aan te passen ten opzichte van hun oorspronkelijke positie.
+
+In ons voorbeeld is de `plant-holder` een relatief gepositioneerd element dat zich binnen een absoluut gepositioneerde container bevindt. Het resulterende gedrag is dat de zijbalkcontainers links en rechts worden vastgezet, en de plantenhouder genest is, zichzelf aanpast binnen de zijbalken, en ruimte geeft voor de planten om in een verticale rij te worden geplaatst.
+
+> De `plant` zelf heeft ook absolute positionering, wat nodig is om het sleepbaar te maken, zoals je in de volgende les zult ontdekken.
+
+✅ Experimenteer met het wisselen van de soorten positionering van de zijcontainers en de plantenhouder. Wat gebeurt er?
+
+## CSS Layouts
+
+Nu ga je gebruiken wat je hebt geleerd om het terrarium zelf te bouwen, volledig met CSS!
+
+Stijl eerst de `.terrarium` div-kinderen als een afgeronde rechthoek met 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;
+}
+```
+
+Let op het gebruik van percentages hier. Als je je browser verkleint, kun je zien hoe de pot ook schaalt. Let ook op de breedtes en hoogtes in percentages voor de pot-elementen en hoe elk element absoluut in het midden is gepositioneerd, vastgezet aan de onderkant van het viewport.
+
+We gebruiken ook `rem` voor de border-radius, een lettertype-relatieve lengte. Lees meer over dit type relatieve meting in de [CSS-specificatie](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
+
+✅ Probeer de kleuren en de doorzichtigheid van de pot te veranderen in vergelijking met die van de aarde. Wat gebeurt er? Waarom?
+
+---
+
+## 🚀Uitdaging
+
+Voeg een 'bubbel'-glans toe aan de linkeronderkant van de pot om het er meer uit te laten zien als glas. Je gaat de `.jar-glossy-long` en `.jar-glossy-short` stijlen om eruit te zien als een gereflecteerde glans. Zo zou het eruit zien:
+
+![afgewerkt terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.nl.png)
+
+Om de quiz na de les te voltooien, doorloop deze Learn-module: [Stijl je HTML-app met CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+## Quiz na de les
+
+[Quiz na de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
+
+## Herziening & Zelfstudie
+
+CSS lijkt bedrieglijk eenvoudig, maar er zijn veel uitdagingen bij het proberen een app perfect te stijlen voor alle browsers en schermformaten. CSS-Grid en Flexbox zijn tools die zijn ontwikkeld om het werk iets gestructureerder en betrouwbaarder te maken. Leer over deze tools door [Flexbox Froggy](https://flexboxfroggy.com/) en [Grid Garden](https://codepip.com/games/grid-garden/) te spelen.
+
+## Opdracht
+
+[CSS Refactoring](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/3-terrarium/2-intro-to-css/assignment.md b/translations/nl/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..0d65ac5e
--- /dev/null
+++ b/translations/nl/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9d4d75af51aaccfe9af778f792c62919",
+  "translation_date": "2025-08-27T20:11:48+00:00",
+  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
+  "language_code": "nl"
+}
+-->
+# CSS Refactoring
+
+## Instructies
+
+Restyle het terrarium met behulp van Flexbox of CSS Grid en maak screenshots om te laten zien dat je het hebt getest in verschillende browsers. Het kan nodig zijn om de markup aan te passen, dus maak een nieuwe versie van de app met de kunst op zijn plaats voor je refactor. Maak je geen zorgen over het maakbaar maken van de elementen; refactor voorlopig alleen de HTML en CSS.
+
+## Rubriek
+
+| Criteria | Uitmuntend                                                      | Voldoende                     | Moet Verbeteren                     |
+| -------- | --------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
+|          | Presenteer een volledig gerestyled terrarium met Flexbox of CSS Grid | Restyle een paar van de elementen | Faalt om het terrarium te restylen |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..d4e8be26
--- /dev/null
+++ b/translations/nl/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-27T20:07:42+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
+  "language_code": "nl"
+}
+-->
+# Terrarium Project Deel 3: DOM-manipulatie en een Closure
+
+![DOM en een closure](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.nl.png)
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
+
+### Introductie
+
+Het manipuleren van de DOM, ofwel het "Document Object Model", is een belangrijk aspect van webontwikkeling. Volgens [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction): "Het Document Object Model (DOM) is de gegevensrepresentatie van de objecten die de structuur en inhoud van een document op het web vormen." De uitdagingen rond DOM-manipulatie op het web hebben vaak geleid tot het gebruik van JavaScript-frameworks in plaats van vanilla JavaScript om de DOM te beheren, maar wij gaan het zelf doen!
+
+Daarnaast introduceert deze les het idee van een [JavaScript closure](https://developer.mozilla.org/docs/Web/JavaScript/Closures), wat je kunt zien als een functie die is ingesloten door een andere functie, zodat de binnenste functie toegang heeft tot de scope van de buitenste functie.
+
+> JavaScript closures zijn een uitgebreid en complex onderwerp. Deze les behandelt het meest basale idee: in de code van dit terrarium vind je een closure: een binnenste functie en een buitenste functie die zo zijn geconstrueerd dat de binnenste functie toegang heeft tot de scope van de buitenste functie. Voor veel meer informatie over hoe dit werkt, kun je de [uitgebreide documentatie](https://developer.mozilla.org/docs/Web/JavaScript/Closures) raadplegen.
+
+We zullen een closure gebruiken om de DOM te manipuleren.
+
+Zie de DOM als een boom die alle manieren vertegenwoordigt waarop een webpagina-document kan worden gemanipuleerd. Verschillende API's (Application Program Interfaces) zijn geschreven zodat programmeurs, met hun programmeertaal naar keuze, toegang hebben tot de DOM en deze kunnen bewerken, veranderen, herschikken en beheren.
+
+![DOM-boomrepresentatie](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.nl.png)
+
+> Een representatie van de DOM en de HTML-markup die hiernaar verwijst. Van [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+In deze les zullen we ons interactieve terrariumproject voltooien door de JavaScript te maken waarmee een gebruiker de planten op de pagina kan manipuleren.
+
+### Vereisten
+
+Je moet de HTML en CSS voor je terrarium al hebben gebouwd. Aan het einde van deze les kun je de planten in en uit het terrarium verplaatsen door ze te slepen.
+
+### Taak
+
+Maak in je terrariummap een nieuw bestand genaamd `script.js`. Importeer dat bestand in de `<head>`-sectie:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Opmerking: gebruik `defer` bij het importeren van een extern JavaScript-bestand in het HTML-bestand, zodat de JavaScript pas wordt uitgevoerd nadat het HTML-bestand volledig is geladen. Je kunt ook het `async`-attribuut gebruiken, waarmee het script wordt uitgevoerd terwijl het HTML-bestand wordt geparsed, maar in ons geval is het belangrijk dat de HTML-elementen volledig beschikbaar zijn voor het slepen voordat we het sleep-script laten uitvoeren.
+---
+
+## De DOM-elementen
+
+Het eerste wat je moet doen, is referenties maken naar de elementen die je wilt manipuleren in de DOM. In ons geval zijn dat de 14 planten die momenteel in de zijbalken wachten.
+
+### Taak
+
+```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'));
+```
+
+Wat gebeurt hier? Je verwijst naar het document en zoekt in de DOM naar een element met een specifieke Id. Weet je nog dat je in de eerste les over HTML individuele Id's gaf aan elke plantafbeelding (`id="plant1"`)? Nu ga je gebruik maken van die inspanning. Nadat je elk element hebt geïdentificeerd, geef je dat item door aan een functie genaamd `dragElement` die je zo meteen gaat bouwen. Zo wordt het element in de HTML sleepbaar, of zal dat binnenkort zijn.
+
+✅ Waarom verwijzen we naar elementen via Id? Waarom niet via hun CSS-klasse? Je kunt terugkijken naar de vorige les over CSS om deze vraag te beantwoorden.
+
+---
+
+## De Closure
+
+Nu ben je klaar om de `dragElement` closure te maken, een buitenste functie die een binnenste functie of functies insluit (in ons geval zullen we er drie hebben).
+
+Closures zijn handig wanneer één of meer functies toegang nodig hebben tot de scope van een buitenste functie. Hier is een voorbeeld:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans'];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+In dit voorbeeld omringt de functie `displayCandy` een functie die een nieuw type snoep toevoegt aan een array die al bestaat in de functie. Als je deze code zou uitvoeren, zou de `candy` array niet gedefinieerd zijn, omdat het een lokale variabele is (lokaal voor de closure).
+
+✅ Hoe kun je de `candy` array toegankelijk maken? Probeer deze buiten de closure te plaatsen. Op deze manier wordt de array globaal, in plaats van alleen beschikbaar te blijven binnen de lokale scope van de closure.
+
+### Taak
+
+Onder de elementdeclaraties in `script.js`, maak een functie:
+
+```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` krijgt zijn `terrariumElement` object van de declaraties bovenaan het script. Vervolgens stel je enkele lokale posities in op `0` voor het object dat aan de functie wordt doorgegeven. Dit zijn de lokale variabelen die zullen worden gemanipuleerd voor elk element terwijl je sleep- en neerzetfunctionaliteit binnen de closure toevoegt aan elk element. Het terrarium zal worden gevuld met deze gesleepte elementen, dus de applicatie moet bijhouden waar ze worden geplaatst.
+
+Daarnaast wordt het `terrariumElement` dat aan deze functie wordt doorgegeven een `pointerdown`-event toegewezen, wat deel uitmaakt van de [web API's](https://developer.mozilla.org/docs/Web/API) die zijn ontworpen om te helpen bij DOM-beheer. `onpointerdown` wordt geactiveerd wanneer een knop wordt ingedrukt, of in ons geval, een sleepbaar element wordt aangeraakt. Deze event handler werkt zowel op [web- als mobiele browsers](https://caniuse.com/?search=onpointerdown), met enkele uitzonderingen.
+
+✅ De [event handler `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) heeft veel meer ondersteuning cross-browser; waarom zou je deze hier niet gebruiken? Denk na over het exacte type scherminteractie dat je hier probeert te creëren.
+
+---
+
+## De Pointerdrag-functie
+
+Het `terrariumElement` is klaar om rondgesleept te worden; wanneer het `onpointerdown`-event wordt geactiveerd, wordt de functie `pointerDrag` aangeroepen. Voeg die functie toe direct onder deze regel: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Taak 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Er gebeuren verschillende dingen. Ten eerste voorkom je dat de standaardevents die normaal plaatsvinden bij pointerdown optreden door `e.preventDefault();` te gebruiken. Op deze manier heb je meer controle over het gedrag van de interface.
+
+> Kom terug naar deze regel wanneer je het scriptbestand volledig hebt gebouwd en probeer het zonder `e.preventDefault()` - wat gebeurt er?
+
+Ten tweede, open `index.html` in een browservenster en inspecteer de interface. Wanneer je op een plant klikt, kun je zien hoe het 'e'-event wordt vastgelegd. Verdiep je in het event om te zien hoeveel informatie wordt verzameld door één pointerdown-event!  
+
+Vervolgens stel je de lokale variabelen `pos3` en `pos4` in op e.clientX. Je kunt de `e`-waarden vinden in het inspectiepaneel. Deze waarden leggen de x- en y-coördinaten van de plant vast op het moment dat je erop klikt of deze aanraakt. Je hebt gedetailleerde controle nodig over het gedrag van de planten terwijl je ze klikt en sleept, dus je houdt hun coördinaten bij.
+
+✅ Wordt het duidelijker waarom deze hele app is gebouwd met één grote closure? Als dat niet zo was, hoe zou je dan de scope behouden voor elk van de 14 sleepbare planten?
+
+Voltooi de initiële functie door nog twee pointerevent-manipulaties toe te voegen onder `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Nu geef je aan dat je wilt dat de plant wordt meegesleept met de pointer terwijl je deze beweegt, en dat het sleepgebaar stopt wanneer je de plant deselecteert. `onpointermove` en `onpointerup` maken allemaal deel uit van dezelfde API als `onpointerdown`. De interface zal nu fouten geven omdat je de functies `elementDrag` en `stopElementDrag` nog niet hebt gedefinieerd, dus bouw die vervolgens uit.
+
+## De functies elementDrag en stopElementDrag
+
+Je voltooit je closure door nog twee interne functies toe te voegen die bepalen wat er gebeurt wanneer je een plant sleept en stopt met slepen. Het gedrag dat je wilt is dat je op elk moment een plant kunt slepen en deze overal op het scherm kunt plaatsen. Deze interface is vrij flexibel (er is bijvoorbeeld geen dropzone) zodat je je terrarium precies kunt ontwerpen zoals je wilt door planten toe te voegen, te verwijderen en te verplaatsen.
+
+### Taak
+
+Voeg de functie `elementDrag` toe direct na de sluitende accolade van `pointerDrag`:
+
+```javascript
+function elementDrag(e) {
+	pos1 = pos3 - e.clientX;
+	pos2 = pos4 - e.clientY;
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+	console.log(pos1, pos2, pos3, pos4);
+	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+}
+```
+In deze functie bewerk je veel van de initiële posities 1-4 die je als lokale variabelen in de buitenste functie hebt ingesteld. Wat gebeurt hier?
+
+Terwijl je sleept, wijs je `pos1` opnieuw toe door deze gelijk te maken aan `pos3` (die je eerder hebt ingesteld als `e.clientX`) minus de huidige waarde van `e.clientX`. Je voert een soortgelijke bewerking uit op `pos2`. Vervolgens stel je `pos3` en `pos4` opnieuw in op de nieuwe x- en y-coördinaten van het element. Je kunt deze wijzigingen volgen in de console terwijl je sleept. Vervolgens manipuleer je de css-stijl van de plant om de nieuwe positie in te stellen op basis van de nieuwe posities van `pos1` en `pos2`, waarbij je de bovenste en linker x- en y-coördinaten van de plant berekent op basis van de vergelijking van de offset met deze nieuwe posities.
+
+> `offsetTop` en `offsetLeft` zijn CSS-eigenschappen die de positie van een element instellen op basis van die van zijn ouder; de ouder kan elk element zijn dat niet als `static` is gepositioneerd. 
+
+Al deze herberekening van positionering stelt je in staat om het gedrag van het terrarium en zijn planten nauwkeurig af te stemmen.
+
+### Taak 
+
+De laatste taak om de interface te voltooien is het toevoegen van de functie `stopElementDrag` na de sluitende accolade van `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Deze kleine functie reset de `onpointerup`- en `onpointermove`-events zodat je de voortgang van je plant opnieuw kunt starten door deze opnieuw te slepen, of een nieuwe plant kunt beginnen te slepen.
+
+✅ Wat gebeurt er als je deze events niet op null instelt?
+
+Nu heb je je project voltooid!
+
+🥇Gefeliciteerd! Je hebt je prachtige terrarium afgemaakt. ![afgemaakt terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.nl.png)
+
+---
+
+## 🚀Uitdaging
+
+Voeg een nieuwe event handler toe aan je closure om iets extra's met de planten te doen; bijvoorbeeld, dubbelklik op een plant om deze naar voren te brengen. Wees creatief!
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
+
+## Review & Zelfstudie
+
+Hoewel het slepen van elementen over het scherm triviaal lijkt, zijn er veel manieren om dit te doen en veel valkuilen, afhankelijk van het effect dat je zoekt. Er is zelfs een volledige [drag and drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) die je kunt proberen. We hebben deze API niet gebruikt in deze module omdat het effect dat we wilden enigszins anders was, maar probeer deze API op je eigen project en kijk wat je kunt bereiken.
+
+Vind meer informatie over pointerevents in de [W3C-documentatie](https://www.w3.org/TR/pointerevents1/) en op [MDN web docs](https://developer.mozilla.org/docs/Web/API/Pointer_events).
+
+Controleer altijd browsermogelijkheden met [CanIUse.com](https://caniuse.com/).
+
+## Opdracht
+
+[Werk nog wat meer met de DOM](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..5c0595c6
--- /dev/null
+++ b/translations/nl/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-27T20:09:47+00:00",
+  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Werk iets meer met de DOM
+
+## Instructies
+
+Onderzoek de DOM wat verder door een DOM-element te 'adopteren'. Bezoek de [lijst van DOM-interfaces](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) op MDN en kies er een. Zoek een voorbeeld van hoe het wordt gebruikt op een website, en schrijf een uitleg over hoe het wordt toegepast.
+
+## Beoordelingscriteria
+
+| Criteria | Uitzonderlijk                                  | Voldoende                                         | Moet Verbeteren         |
+| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|          | Paragraaf met uitleg wordt gepresenteerd, met voorbeeld | Paragraaf met uitleg wordt gepresenteerd, zonder voorbeeld | Geen uitleg wordt gepresenteerd |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/3-terrarium/README.md b/translations/nl/3-terrarium/README.md
new file mode 100644
index 00000000..b92d9b6a
--- /dev/null
+++ b/translations/nl/3-terrarium/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
+  "translation_date": "2025-08-27T20:04:52+00:00",
+  "source_file": "3-terrarium/README.md",
+  "language_code": "nl"
+}
+-->
+# Mijn Terrarium: Een project om te leren over HTML, CSS en DOM-manipulatie met JavaScript 🌵🌱
+
+Een kleine drag-and-drop code-meditatie. Met een beetje HTML, JS en CSS kun je een webinterface bouwen, deze stylen en zelfs meerdere interacties naar keuze toevoegen.
+
+![mijn terrarium](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.nl.png)
+
+# Lessen
+
+1. [Introductie tot HTML](./1-intro-to-html/README.md)
+2. [Introductie tot CSS](./2-intro-to-css/README.md)
+3. [Introductie tot DOM en JS Closures](./3-intro-to-DOM-and-closures/README.md)
+
+## Credits
+
+Geschreven met ♥️ door [Jen Looper](https://www.twitter.com/jenlooper)
+
+Het terrarium gemaakt via CSS is geïnspireerd door Jakub Mandra's glazen pot [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+De illustraties zijn met de hand getekend door [Jen Looper](http://jenlooper.com) met behulp van Procreate.
+
+## Publiceer je Terrarium
+
+Je kunt je terrarium op het web publiceren met behulp van Azure Static Web Apps.
+
+1. Fork deze repository
+
+2. Druk op deze knop
+
+[![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. Doorloop de wizard om je app te maken. Zorg ervoor dat je de app-root instelt op ofwel `/solution` of de root van je codebase. Er is geen API in deze app, dus daar hoef je je geen zorgen over te maken. Een GitHub-map wordt aangemaakt in je geforkte repository die Azure Static Web Apps' buildservices helpt om je app te bouwen en te publiceren naar een nieuwe URL.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/3-terrarium/solution/README.md b/translations/nl/3-terrarium/solution/README.md
new file mode 100644
index 00000000..db2f30b7
--- /dev/null
+++ b/translations/nl/3-terrarium/solution/README.md
@@ -0,0 +1,39 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "6329fbe8bd936068debd78cca6f09c0a",
+  "translation_date": "2025-08-27T20:12:09+00:00",
+  "source_file": "3-terrarium/solution/README.md",
+  "language_code": "nl"
+}
+-->
+# Mijn Terrarium: Een project om te leren over HTML, CSS en DOM-manipulatie met JavaScript 🌵🌱
+
+Een kleine drag-and-drop code-meditatie. Met een beetje HTML, JS en CSS kun je een webinterface bouwen, deze stylen en interactie toevoegen.
+
+![mijn terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.nl.png)
+
+## Credits
+
+Geschreven met ♥️ door [Jen Looper](https://www.twitter.com/jenlooper)
+
+Het terrarium gemaakt via CSS is geïnspireerd door Jakub Mandra's glazen pot [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+Het artwork is met de hand getekend door [Jen Looper](http://jenlooper.com) met behulp van Procreate.
+
+## Publiceer je Terrarium
+
+Je kunt je terrarium publiceren op het web met behulp van Azure Static Web Apps.
+
+1. Fork deze repository
+
+2. Druk op deze knop
+
+[![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. Doorloop de wizard om je app te maken. Zorg ervoor dat je de app-root instelt op `/solution` of de root van je codebase. Er is geen API in deze app, dus daar hoef je je geen zorgen over te maken. Een .github-map wordt aangemaakt in je geforkte repository, die Azure Static Web Apps' buildservice helpt om je app te bouwen en te publiceren naar een nieuwe URL.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/4-typing-game/README.md b/translations/nl/4-typing-game/README.md
new file mode 100644
index 00000000..63845589
--- /dev/null
+++ b/translations/nl/4-typing-game/README.md
@@ -0,0 +1,44 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "957547b822c40042e07d591c4fbfde4f",
+  "translation_date": "2025-08-27T21:07:37+00:00",
+  "source_file": "4-typing-game/README.md",
+  "language_code": "nl"
+}
+-->
+# Event-Driven Programming - Bouw een Typingspel
+
+## Introductie
+
+Typen is een van de meest onderschatte vaardigheden van een ontwikkelaar. De mogelijkheid om gedachten snel van je hoofd naar je editor over te brengen, laat creativiteit vrij stromen. Een van de beste manieren om te leren is door een spel te spelen!
+
+> Dus, laten we een typingspel bouwen!
+
+Je gaat de JavaScript-, HTML- en CSS-vaardigheden die je tot nu toe hebt opgebouwd gebruiken om een typingspel te maken. Het spel zal de speler een willekeurige quote presenteren (we gebruiken [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes)-citaten) en meten hoe lang de speler erover doet om deze nauwkeurig te typen. Je gaat de JavaScript-, HTML- en CSS-vaardigheden die je tot nu toe hebt opgebouwd gebruiken om een typingspel te maken.
+
+![demo](../../../4-typing-game/images/demo.gif)
+
+## Vereisten
+
+Deze les gaat ervan uit dat je bekend bent met de volgende concepten:
+
+- Het maken van tekstinvoer- en knopbesturingen
+- CSS en het instellen van stijlen met behulp van klassen
+- Basisprincipes van JavaScript
+  - Een array maken
+  - Een willekeurig getal genereren
+  - De huidige tijd ophalen
+
+## Les
+
+[Een typingspel maken met event-driven programming](./typing-game/README.md)
+
+## Credits
+
+Geschreven met ♥️ door [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/4-typing-game/solution/README.md b/translations/nl/4-typing-game/solution/README.md
new file mode 100644
index 00000000..88cf87a8
--- /dev/null
+++ b/translations/nl/4-typing-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T21:07:55+00:00",
+  "source_file": "4-typing-game/solution/README.md",
+  "language_code": "nl"
+}
+-->
+Dit is een tijdelijke aanduiding, opzettelijk leeg gelaten
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/4-typing-game/typing-game/README.md b/translations/nl/4-typing-game/typing-game/README.md
new file mode 100644
index 00000000..5e9fd4b3
--- /dev/null
+++ b/translations/nl/4-typing-game/typing-game/README.md
@@ -0,0 +1,353 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
+  "translation_date": "2025-08-27T21:08:53+00:00",
+  "source_file": "4-typing-game/typing-game/README.md",
+  "language_code": "nl"
+}
+-->
+# Een spel maken met behulp van events
+
+## Quiz voor de les
+
+[Quiz voor de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
+
+## Event-driven programmeren
+
+Bij het maken van een browsergebaseerde applicatie bieden we een grafische gebruikersinterface (GUI) aan waarmee de gebruiker kan interageren met wat we hebben gebouwd. De meest gebruikelijke manier om met de browser te interageren is door te klikken en te typen in verschillende elementen. De uitdaging voor ons als ontwikkelaars is dat we niet weten wanneer ze deze acties gaan uitvoeren!
+
+[Event-driven programmeren](https://en.wikipedia.org/wiki/Event-driven_programming) is de naam voor het type programmeren dat we nodig hebben om onze GUI te maken. Als we deze term een beetje ontleden, zien we dat het kernwoord hier **event** is. [Event](https://www.merriam-webster.com/dictionary/event), volgens Merriam-Webster, wordt gedefinieerd als "iets dat gebeurt". Dit beschrijft onze situatie perfect. We weten dat er iets gaat gebeuren waarvoor we code willen uitvoeren als reactie, maar we weten niet wanneer het zal plaatsvinden.
+
+De manier waarop we een stuk code markeren dat we willen uitvoeren, is door een functie te maken. Als we denken aan [procedureel programmeren](https://en.wikipedia.org/wiki/Procedural_programming), worden functies in een specifieke volgorde aangeroepen. Ditzelfde geldt voor event-driven programmeren. Het verschil zit in **hoe** de functies worden aangeroepen.
+
+Om events (knopklikken, typen, enz.) te verwerken, registreren we **event listeners**. Een event listener is een functie die luistert naar een event dat plaatsvindt en code uitvoert als reactie. Event listeners kunnen de UI bijwerken, serveraanroepen doen of wat er verder nodig is als reactie op de actie van de gebruiker. We voegen een event listener toe met behulp van [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) en geven een functie op om uit te voeren.
+
+> **NOTE:** Het is belangrijk om te benadrukken dat er verschillende manieren zijn om event listeners te maken. Je kunt anonieme functies gebruiken of benoemde functies maken. Je kunt verschillende snelkoppelingen gebruiken, zoals het instellen van de `click`-eigenschap of het gebruik van `addEventListener`. In onze oefening gaan we ons richten op `addEventListener` en anonieme functies, omdat dit waarschijnlijk de meest gebruikelijke techniek is die webontwikkelaars gebruiken. Het is ook de meest flexibele, omdat `addEventListener` werkt voor alle events en de eventnaam als parameter kan worden opgegeven.
+
+### Veelvoorkomende events
+
+Er zijn [tientallen events](https://developer.mozilla.org/docs/Web/Events) beschikbaar om naar te luisteren bij het maken van een applicatie. Eigenlijk roept alles wat een gebruiker op een pagina doet een event op, wat je veel macht geeft om ervoor te zorgen dat ze de ervaring krijgen die je wenst. Gelukkig heb je meestal maar een klein aantal events nodig. Hier zijn een paar veelvoorkomende (inclusief de twee die we gaan gebruiken bij het maken van ons spel):
+
+- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): De gebruiker heeft ergens op geklikt, meestal een knop of hyperlink
+- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): De gebruiker heeft met de rechtermuisknop geklikt
+- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): De gebruiker heeft tekst gemarkeerd
+- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): De gebruiker heeft tekst ingevoerd
+
+## Het spel maken
+
+We gaan een spel maken om te ontdekken hoe events werken in JavaScript. Ons spel gaat de typevaardigheid van een speler testen, wat een van de meest onderschatte vaardigheden is die alle ontwikkelaars zouden moeten hebben. We zouden allemaal onze typevaardigheid moeten oefenen! De algemene flow van het spel ziet er als volgt uit:
+
+- De speler klikt op de startknop en krijgt een quote om te typen
+- De speler typt de quote zo snel mogelijk in een tekstvak
+  - Zodra een woord is voltooid, wordt het volgende woord gemarkeerd
+  - Als de speler een typefout maakt, wordt het tekstvak rood
+  - Wanneer de speler de quote voltooit, wordt een succesbericht weergegeven met de verstreken tijd
+
+Laten we ons spel bouwen en meer leren over events!
+
+### Bestandsstructuur
+
+We hebben in totaal drie bestanden nodig: **index.html**, **script.js** en **style.css**. Laten we die instellen om het onszelf wat makkelijker te maken.
+
+- Maak een nieuwe map voor je werk door een console- of terminalvenster te openen en het volgende commando uit te voeren:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+- Open Visual Studio Code
+
+```bash
+code .
+```
+
+- Voeg drie bestanden toe aan de map in Visual Studio Code met de volgende namen:
+  - index.html
+  - script.js
+  - style.css
+
+## Maak de gebruikersinterface
+
+Als we de vereisten bekijken, weten we dat we een aantal elementen nodig hebben op onze HTML-pagina. Dit is een beetje zoals een recept, waarbij we enkele ingrediënten nodig hebben:
+
+- Een plek om de quote weer te geven die de gebruiker moet typen
+- Een plek om berichten weer te geven, zoals een succesbericht
+- Een tekstvak om te typen
+- Een startknop
+
+Elk van deze elementen heeft ID's nodig zodat we ermee kunnen werken in onze JavaScript. We zullen ook verwijzingen toevoegen naar de CSS- en JavaScript-bestanden die we gaan maken.
+
+Maak een nieuw bestand genaamd **index.html**. Voeg de volgende HTML toe:
+
+```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>
+```
+
+### Start de applicatie
+
+Het is altijd het beste om iteratief te ontwikkelen om te zien hoe dingen eruitzien. Laten we onze applicatie starten. Er is een geweldige extensie voor Visual Studio Code genaamd [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) die zowel je applicatie lokaal host als de browser ververst elke keer dat je opslaat.
+
+- Installeer [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) door de link te volgen en op **Install** te klikken
+  - Je wordt door de browser gevraagd om Visual Studio Code te openen, en vervolgens door Visual Studio Code om de installatie uit te voeren
+  - Start Visual Studio Code opnieuw op als daarom wordt gevraagd
+- Zodra het is geïnstalleerd, klik je in Visual Studio Code op Ctrl-Shift-P (of Cmd-Shift-P) om de commandopalet te openen
+- Typ **Live Server: Open with Live Server**
+  - Live Server begint je applicatie te hosten
+- Open een browser en navigeer naar **https://localhost:5500**
+- Je zou nu de pagina moeten zien die je hebt gemaakt!
+
+Laten we wat functionaliteit toevoegen.
+
+## Voeg de CSS toe
+
+Met onze HTML gemaakt, laten we de CSS toevoegen voor de kernstyling. We moeten het woord markeren dat de speler moet typen en het tekstvak kleuren als wat ze hebben getypt onjuist is. We doen dit met twee klassen.
+
+Maak een nieuw bestand genaamd **style.css** en voeg de volgende syntax toe.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ Als het gaat om CSS kun je je pagina indelen zoals je wilt. Neem even de tijd om de pagina er aantrekkelijker uit te laten zien:
+
+- Kies een ander lettertype
+- Geef de koppen een kleur
+- Pas de grootte van items aan
+
+## JavaScript
+
+Met onze UI gemaakt, is het tijd om onze aandacht te richten op de JavaScript die de logica zal bieden. We gaan dit opsplitsen in een aantal stappen:
+
+- [Maak de constanten](../../../../4-typing-game/typing-game)
+- [Event listener om het spel te starten](../../../../4-typing-game/typing-game)
+- [Event listener voor het typen](../../../../4-typing-game/typing-game)
+
+Maar eerst, maak een nieuw bestand genaamd **script.js**.
+
+### Maak de constanten
+
+We hebben een paar items nodig om ons leven wat makkelijker te maken bij het programmeren. Opnieuw, vergelijkbaar met een recept, hier is wat we nodig hebben:
+
+- Een array met de lijst van alle quotes
+- Een lege array om alle woorden van de huidige quote op te slaan
+- Een plek om de index van het woord dat de speler momenteel typt op te slaan
+- De tijd waarop de speler op start heeft geklikt
+
+We willen ook verwijzingen naar de UI-elementen:
+
+- Het tekstvak (**typed-value**)
+- De quote-weergave (**quote**)
+- Het bericht (**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');
+```
+
+✅ Voeg meer quotes toe aan je spel
+
+> **NOTE:** We kunnen de elementen altijd ophalen in de code door `document.getElementById` te gebruiken. Omdat we regelmatig naar deze elementen gaan verwijzen, vermijden we typefouten met string literals door constanten te gebruiken. Frameworks zoals [Vue.js](https://vuejs.org/) of [React](https://reactjs.org/) kunnen je helpen bij het beter beheren van het centraliseren van je code.
+
+Neem een minuut om een video te bekijken over het gebruik van `const`, `let` en `var`
+
+[![Soorten variabelen](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Soorten variabelen")
+
+> 🎥 Klik op de afbeelding hierboven voor een video over variabelen.
+
+### Voeg startlogica toe
+
+Om het spel te beginnen, klikt de speler op start. Natuurlijk weten we niet wanneer ze op start gaan klikken. Dit is waar een [event listener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) van pas komt. Een event listener stelt ons in staat om te luisteren naar iets dat gebeurt (een event) en code uit te voeren als reactie. In ons geval willen we code uitvoeren wanneer de gebruiker op start klikt.
+
+Wanneer de gebruiker op **start** klikt, moeten we een quote selecteren, de gebruikersinterface instellen en tracking instellen voor het huidige woord en de timing. Hieronder staat de JavaScript die je moet toevoegen; we bespreken het direct na het scriptblok.
+
+```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();
+});
+```
+
+Laten we de code opsplitsen!
+
+- Stel de woordtracking in
+  - Door [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) en [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) te gebruiken, kunnen we willekeurig een quote selecteren uit de `quotes`-array
+  - We converteren de `quote` naar een array van `words` zodat we het woord kunnen volgen dat de speler momenteel typt
+  - `wordIndex` wordt ingesteld op 0, omdat de speler begint met het eerste woord
+- Stel de UI in
+  - Maak een array van `spanWords`, die elk woord bevat binnen een `span`-element
+    - Dit stelt ons in staat om het woord op de weergave te markeren
+  - `join` de array om een string te maken die we kunnen gebruiken om de `innerHTML` op `quoteElement` bij te werken
+    - Dit toont de quote aan de speler
+  - Stel de `className` van het eerste `span`-element in op `highlight` om het geel te markeren
+  - Maak het `messageElement` schoon door `innerText` in te stellen op `''`
+- Stel het tekstvak in
+  - Wis de huidige `value` op `typedValueElement`
+  - Stel de `focus` in op `typedValueElement`
+- Start de timer door `getTime` aan te roepen
+
+### Voeg typelogica toe
+
+Terwijl de speler typt, wordt een `input`-event opgewekt. Deze event listener controleert of de speler het woord correct typt en behandelt de huidige status van het spel. Ga terug naar **script.js** en voeg de volgende code toe aan het einde. We zullen het daarna opsplitsen.
+
+```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';
+  }
+});
+```
+
+Laten we de code opsplitsen! We beginnen met het ophalen van het huidige woord en de waarde die de speler tot nu toe heeft getypt. Vervolgens hebben we waterval-logica, waarbij we controleren of de quote compleet is, het woord compleet is, het woord correct is, of (ten slotte) of er een fout is.
+
+- De quote is compleet, aangegeven door `typedValue` gelijk aan `currentWord` en `wordIndex` gelijk aan één minder dan de `length` van `words`
+  - Bereken `elapsedTime` door `startTime` af te trekken van de huidige tijd
+  - Deel `elapsedTime` door 1.000 om van milliseconden naar seconden te converteren
+  - Toon een succesbericht
+- Het woord is compleet, aangegeven door `typedValue` eindigend met een spatie (het einde van een woord) en `typedValue` gelijk aan `currentWord`
+  - Stel `value` op `typedElement` in op `''` om het volgende woord te kunnen typen
+  - Verhoog `wordIndex` om naar het volgende woord te gaan
+  - Loop door alle `childNodes` van `quoteElement` om `className` in te stellen op `''` om terug te keren naar de standaardweergave
+  - Stel `className` van het huidige woord in op `highlight` om het te markeren als het volgende woord om te typen
+- Het woord is momenteel correct getypt (maar niet compleet), aangegeven door `currentWord` beginnend met `typedValue`
+  - Zorg ervoor dat `typedValueElement` wordt weergegeven als standaard door `className` te wissen
+- Als we zover zijn gekomen, is er een fout
+  - Stel `className` op `typedValueElement` in op `error`
+
+## Test je applicatie
+
+Je bent aan het einde gekomen! De laatste stap is om ervoor te zorgen dat onze applicatie werkt. Probeer het uit! Maak je geen zorgen als er fouten zijn; **alle ontwikkelaars** hebben fouten. Onderzoek de berichten en debug indien nodig.
+
+Klik op **start** en begin te typen! Het zou een beetje moeten lijken op de animatie die we eerder zagen.
+
+![Animatie van het spel in actie](../../../../4-typing-game/images/demo.gif)
+
+---
+
+## 🚀 Uitdaging
+
+Voeg meer functionaliteit toe
+
+- Schakel de `input`-event listener uit bij voltooiing en schakel deze opnieuw in wanneer op de knop wordt geklikt
+- Schakel het tekstvak uit wanneer de speler de quote voltooit
+- Toon een modaal dialoogvenster met het succesbericht
+- Sla hoge scores op met behulp van [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## Quiz na de les
+
+[Quiz na de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
+
+## Herhaling & Zelfstudie
+
+Lees meer over [alle beschikbare events](https://developer.mozilla.org/docs/Web/Events) voor de ontwikkelaar via de webbrowser, en denk na over de scenario's waarin je elk event zou gebruiken.
+
+## Opdracht
+
+[Maak een nieuw toetsenbordspel](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/4-typing-game/typing-game/assignment.md b/translations/nl/4-typing-game/typing-game/assignment.md
new file mode 100644
index 00000000..ad4d01a3
--- /dev/null
+++ b/translations/nl/4-typing-game/typing-game/assignment.md
@@ -0,0 +1,26 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
+  "translation_date": "2025-08-27T21:10:11+00:00",
+  "source_file": "4-typing-game/typing-game/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Maak een nieuw toetsenbordspel
+
+## Instructies
+
+Maak een klein spel dat gebruikmaakt van toetsenbordgebeurtenissen om taken uit te voeren. Het kan een ander soort typspel zijn, of een kunstachtig spel dat pixels op het scherm schildert bij toetsaanslagen. Wees creatief!
+
+## Beoordelingscriteria
+
+| Criteria | Uitmuntend               | Voldoende                | Verbetering Nodig |
+| -------- | ------------------------ | ------------------------ | ----------------- |
+|          | Een volledig spel wordt gepresenteerd | Het spel is erg minimaal | Het spel bevat bugs |
+|          |                          |                          |                   |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, willen we u erop wijzen dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/1-about-browsers/README.md b/translations/nl/5-browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..117979e7
--- /dev/null
+++ b/translations/nl/5-browser-extension/1-about-browsers/README.md
@@ -0,0 +1,182 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0bb55e0b98600afab801eea115228873",
+  "translation_date": "2025-08-27T20:47:12+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/README.md",
+  "language_code": "nl"
+}
+-->
+# Browser Extensie Project Deel 1: Alles over Browsers
+
+![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.nl.jpg)
+> Sketchnote door [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-Les Quiz
+
+[Pre-les quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
+
+### Introductie
+
+Browserextensies voegen extra functionaliteit toe aan een browser. Maar voordat je er een gaat bouwen, is het handig om eerst wat te leren over hoe browsers werken.
+
+### Over de browser
+
+In deze serie lessen leer je hoe je een browserextensie bouwt die werkt op Chrome, Firefox en Edge browsers. In dit deel ontdek je hoe browsers werken en zet je de basis op voor de elementen van de browserextensie.
+
+Maar wat is een browser precies? Het is een softwaretoepassing waarmee een eindgebruiker inhoud van een server kan ophalen en deze kan weergeven op webpagina's.
+
+✅ Een beetje geschiedenis: de eerste browser heette 'WorldWideWeb' en werd in 1990 gemaakt door Sir Timothy Berners-Lee.
+
+![vroegtijdige browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.nl.jpg)
+> Enkele vroege browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Wanneer een gebruiker verbinding maakt met het internet via een URL (Uniform Resource Locator) adres, meestal via Hypertext Transfer Protocol met een `http` of `https` adres, communiceert de browser met een webserver en haalt een webpagina op.
+
+Op dat moment toont de rendering engine van de browser de pagina op het apparaat van de gebruiker, zoals een mobiele telefoon, desktop of laptop.
+
+Browsers hebben ook de mogelijkheid om inhoud te cachen, zodat deze niet elke keer opnieuw van de server hoeft te worden opgehaald. Ze kunnen de geschiedenis van de browse-activiteit van een gebruiker bijhouden, 'cookies' opslaan, kleine stukjes data die informatie bevatten over de activiteit van een gebruiker, en meer.
+
+Een belangrijk punt om te onthouden over browsers is dat ze niet allemaal hetzelfde zijn! Elke browser heeft zijn sterke en zwakke punten, en een professionele webontwikkelaar moet begrijpen hoe webpagina's goed kunnen presteren in verschillende browsers. Dit omvat het omgaan met kleine schermen zoals die van een mobiele telefoon, evenals een gebruiker die offline is.
+
+Een zeer handige website die je waarschijnlijk zou moeten bookmarken in de browser die je verkiest, is [caniuse.com](https://www.caniuse.com). Wanneer je webpagina's bouwt, is het erg nuttig om de lijsten met ondersteunde technologieën van caniuse te gebruiken, zodat je je gebruikers optimaal kunt ondersteunen.
+
+✅ Hoe kun je zien welke browsers het populairst zijn bij de gebruikers van je website? Controleer je analytics - je kunt verschillende analysetools installeren als onderdeel van je webontwikkelingsproces, en deze zullen je vertellen welke browsers het meest worden gebruikt door de verschillende populaire browsers.
+
+## Browserextensies
+
+Waarom zou je een browserextensie willen bouwen? Het is een handige toevoeging aan je browser wanneer je snel toegang nodig hebt tot taken die je vaak herhaalt. Bijvoorbeeld, als je vaak kleuren moet controleren op verschillende webpagina's waarmee je interacteert, kun je een kleurkiezer-browserextensie installeren. Als je moeite hebt om wachtwoorden te onthouden, kun je een wachtwoordbeheer-browserextensie gebruiken.
+
+Browserextensies zijn ook leuk om te ontwikkelen. Ze beheren meestal een beperkt aantal taken die ze goed uitvoeren.
+
+✅ Wat zijn jouw favoriete browserextensies? Welke taken voeren ze uit?
+
+### Extensies installeren
+
+Voordat je begint met bouwen, kijk eens naar het proces van het bouwen en implementeren van een browserextensie. Hoewel elke browser enigszins verschilt in hoe ze deze taak beheren, is het proces vergelijkbaar op Chrome en Firefox met dit voorbeeld op Edge:
+
+![screenshot van de Edge browser met de geopende edge://extensions pagina en het geopende instellingenmenu](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.nl.png)
+
+> Opmerking: Zorg ervoor dat je de ontwikkelaarsmodus inschakelt en extensies van andere winkels toestaat.
+
+In essentie zal het proces zijn:
+
+- bouw je extensie met `npm run build` 
+- navigeer in de browser naar het extensiepaneel via de knop "Instellingen en meer" (het `...` icoon) rechtsboven
+- als het een nieuwe installatie is, kies `load unpacked` om een nieuwe extensie te uploaden vanuit de buildmap (in ons geval is dat `/dist`) 
+- of klik op `reload` als je de al geïnstalleerde extensie opnieuw laadt
+
+✅ Deze instructies hebben betrekking op extensies die je zelf bouwt; om extensies te installeren die zijn uitgebracht in de browserextensiewinkel die bij elke browser hoort, moet je naar die [winkels](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) navigeren en de extensie van je keuze installeren.
+
+### Aan de slag
+
+Je gaat een browserextensie bouwen die de CO2-voetafdruk van jouw regio weergeeft, inclusief het energieverbruik en de bron van de energie. De extensie zal een formulier hebben dat een API-sleutel verzamelt zodat je toegang hebt tot de API van CO2 Signal.
+
+**Je hebt nodig:**
+
+- [een API-sleutel](https://www.co2signal.com/); voer je e-mailadres in het vak op deze pagina in en er wordt een sleutel naar je verzonden
+- de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
+- de [startcode](../../../../5-browser-extension/start). Download de `start` map; je zult code in deze map voltooien.
+- [NPM](https://www.npmjs.com) - NPM is een pakketbeheerder; installeer het lokaal en de pakketten die in je `package.json` bestand staan, worden geïnstalleerd voor gebruik door je webasset
+
+✅ Leer meer over pakketbeheer in deze [uitstekende Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+
+Neem even de tijd om de codebase te bekijken:
+
+dist
+    -|manifest.json (standaardinstellingen hier)
+    -|index.html (front-end HTML markup hier)
+    -|background.js (achtergrond JS hier)
+    -|main.js (gebouwde JS)
+src
+    -|index.js (jouw JS code komt hier)
+
+✅ Zodra je je API-sleutel en regiocode bij de hand hebt, sla deze ergens op in een notitie voor toekomstig gebruik.
+
+### Bouw de HTML voor de extensie
+
+Deze extensie heeft twee weergaven. Eén om de API-sleutel en regiocode te verzamelen:
+
+![screenshot van de voltooide extensie geopend in een browser, met een formulier met invoervelden voor regio en API-sleutel.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.nl.png)
+
+En de tweede om het koolstofgebruik van de regio weer te geven:
+
+![screenshot van de voltooide extensie die waarden toont voor koolstofgebruik en percentage fossiele brandstoffen voor de US-NEISO regio.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.nl.png)
+
+Laten we beginnen met het bouwen van de HTML voor het formulier en het stylen met CSS.
+
+In de `/dist` map bouw je een formulier en een resultaatgebied. In het `index.html` bestand vul je het afgebakende formuliergebied in:
+
+```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>	
+```
+Dit is het formulier waar je opgeslagen informatie wordt ingevoerd en opgeslagen in de lokale opslag.
+
+Maak vervolgens het resultaatgebied; voeg onder de laatste form-tag enkele divs toe:
+
+```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>
+```
+Op dit punt kun je een build proberen. Zorg ervoor dat je de pakketafhankelijkheden van deze extensie installeert:
+
+```
+npm install
+```
+
+Deze opdracht gebruikt npm, de Node Package Manager, om webpack te installeren voor het buildproces van je extensie. Webpack is een bundelaar die code compileert. Je kunt de output van dit proces bekijken door te kijken in `/dist/main.js` - je ziet dat de code is gebundeld.
+
+Voor nu zou de extensie moeten bouwen en, als je deze in Edge implementeert als extensie, zie je een formulier netjes weergegeven.
+
+Gefeliciteerd, je hebt de eerste stappen gezet richting het bouwen van een browserextensie. In de volgende lessen maak je het functioneler en nuttiger.
+
+---
+
+## 🚀 Uitdaging
+
+Bekijk een browserextensiewinkel en installeer er een in je browser. Je kunt de bestanden op interessante manieren onderzoeken. Wat ontdek je?
+
+## Post-Les Quiz
+
+[Post-les quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
+
+## Review & Zelfstudie
+
+In deze les heb je een beetje geleerd over de geschiedenis van de webbrowser; neem de tijd om meer te leren over hoe de uitvinders van het World Wide Web het gebruik ervan voor ogen hadden door meer te lezen over de geschiedenis. Enkele nuttige sites zijn:
+
+[De geschiedenis van webbrowsers](https://www.mozilla.org/firefox/browsers/browser-history/)
+
+[Geschiedenis van het web](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Een interview met 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)
+
+## Opdracht 
+
+[Restyle je extensie](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/1-about-browsers/assignment.md b/translations/nl/5-browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..9530689f
--- /dev/null
+++ b/translations/nl/5-browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "e3c6f2a03c2336e60412612d870af547",
+  "translation_date": "2025-08-27T20:48:07+00:00",
+  "source_file": "5-browser-extension/1-about-browsers/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Restyle je Extensie
+
+## Instructies
+
+De codebasis voor deze extensie wordt geleverd met stijlen, maar je hoeft deze niet te gebruiken; maak de extensie helemaal van jou door de css-bestand aan te passen.
+
+## Rubriek
+
+| Criteria | Uitmuntend                                   | Voldoende             | Moet Verbeteren    |
+| -------- | -------------------------------------------- | --------------------- | ------------------ |
+|          | Code wordt ingediend met functionele nieuwe stijlen | Styling is onvolledig | Stijlen bevatten fouten |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/nl/5-browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..b412bce8
--- /dev/null
+++ b/translations/nl/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-27T20:44:37+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
+  "language_code": "nl"
+}
+-->
+# Browserextensieproject Deel 2: Een API aanroepen, gebruik maken van Local Storage
+
+## Quiz vóór de les
+
+[Quiz vóór de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
+
+### Introductie
+
+In deze les leer je hoe je een API aanroept door het formulier van je browserextensie in te vullen en de resultaten in je extensie weer te geven. Daarnaast leer je hoe je gegevens kunt opslaan in de lokale opslag van je browser voor toekomstig gebruik.
+
+✅ Volg de genummerde segmenten in de betreffende bestanden om te weten waar je je code moet plaatsen.
+
+### Stel de elementen in die je in de extensie wilt manipuleren:
+
+Tegen deze tijd heb je de HTML gebouwd voor het formulier en de `<div>` voor de resultaten van je browserextensie. Vanaf nu werk je in het bestand `/src/index.js` en bouw je je extensie stap voor stap verder uit. Raadpleeg de [vorige les](../1-about-browsers/README.md) om je project op te zetten en meer te leren over het bouwproces.
+
+Werkend in je `index.js`-bestand, begin je met het aanmaken van enkele `const`-variabelen om de waarden vast te houden die horen bij verschillende velden:
+
+```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');
+```
+
+Al deze velden worden gerefereerd via hun CSS-class, zoals je hebt ingesteld in de HTML in de vorige les.
+
+### Voeg event listeners toe
+
+Voeg vervolgens event listeners toe aan het formulier en de resetknop die het formulier reset, zodat er iets gebeurt als een gebruiker het formulier indient of op de resetknop klikt. Voeg ook de aanroep toe om de app te initialiseren onderaan het bestand:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Let op de verkorte notatie die wordt gebruikt om te luisteren naar een submit- of klikgebeurtenis, en hoe de gebeurtenis wordt doorgegeven aan de functies handleSubmit of reset. Kun je het equivalent van deze verkorte notatie in een langere vorm schrijven? Welke vorm heeft jouw voorkeur?
+
+### Bouw de init()-functie en de reset()-functie uit:
+
+Nu ga je de functie bouwen die de extensie initialiseert, genaamd 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();
+}
+
+```
+
+In deze functie zit interessante logica. Als je het doorleest, kun je zien wat er gebeurt?
+
+- Twee `const` worden ingesteld om te controleren of de gebruiker een APIKey en regiocode heeft opgeslagen in de lokale opslag.
+- Als een van deze null is, wordt het formulier weergegeven door de stijl ervan in te stellen op 'block'.
+- De resultaten, de laadindicator en de resetknop worden verborgen en eventuele foutmeldingen worden leeggemaakt.
+- Als er een sleutel en regio bestaan, wordt een routine gestart om:
+  - De API aan te roepen om gegevens over koolstofgebruik op te halen.
+  - Het resultatengebied te verbergen.
+  - Het formulier te verbergen.
+  - De resetknop weer te geven.
+
+Voordat je verdergaat, is het handig om meer te leren over een belangrijk concept dat beschikbaar is in browsers: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage is een handige manier om strings op te slaan in de browser als een `key-value`-paar. Dit type webopslag kan worden gemanipuleerd met JavaScript om gegevens in de browser te beheren. LocalStorage verloopt niet, terwijl SessionStorage, een ander soort webopslag, wordt gewist wanneer de browser wordt gesloten. De verschillende soorten opslag hebben hun eigen voor- en nadelen.
+
+> Opmerking - je browserextensie heeft zijn eigen lokale opslag; het hoofdvenster van de browser is een andere instantie en werkt afzonderlijk.
+
+Je stelt bijvoorbeeld je APIKey in met een stringwaarde, en je kunt zien dat deze is ingesteld in Edge door een webpagina te "inspecteren" (je kunt met de rechtermuisknop op een browser klikken om te inspecteren) en naar het tabblad Toepassingen te gaan om de opslag te bekijken.
+
+![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.nl.png)
+
+✅ Denk na over situaties waarin je bepaalde gegevens NIET in LocalStorage zou willen opslaan. Over het algemeen is het een slecht idee om API-sleutels in LocalStorage op te slaan! Kun je zien waarom? In ons geval, omdat onze app puur bedoeld is om te leren en niet zal worden gepubliceerd in een app store, gebruiken we deze methode.
+
+Merk op dat je de Web API gebruikt om LocalStorage te manipuleren, ofwel met `getItem()`, `setItem()` of `removeItem()`. Het wordt breed ondersteund in browsers.
+
+Voordat je de functie `displayCarbonUsage()` bouwt die wordt aangeroepen in `init()`, laten we de functionaliteit bouwen om de initiële formulierindiening af te handelen.
+
+### Verwerk de formulierindiening
+
+Maak een functie genaamd `handleSubmit` die een gebeurtenisargument `(e)` accepteert. Stop de gebeurtenis van propagatie (in dit geval willen we voorkomen dat de browser ververst) en roep een nieuwe functie aan, `setUpUser`, waarbij je de argumenten `apiKey.value` en `region.value` doorgeeft. Op deze manier gebruik je de twee waarden die via het initiële formulier worden ingevoerd wanneer de betreffende velden zijn ingevuld.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+
+✅ Verfris je geheugen - de HTML die je in de vorige les hebt ingesteld, heeft twee invoervelden waarvan de `values` worden vastgelegd via de `const` die je bovenaan het bestand hebt ingesteld, en ze zijn beide `required`, zodat de browser voorkomt dat gebruikers null-waarden invoeren.
+
+### Stel de gebruiker in
+
+Ga verder met de functie `setUpUser`, waar je de waarden voor apiKey en regionName in de lokale opslag instelt. Voeg een nieuwe functie toe:
+
+```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);
+}
+```
+
+Deze functie stelt een laadbericht in dat wordt weergegeven terwijl de API wordt aangeroepen. Op dit punt ben je aangekomen bij het maken van de belangrijkste functie van deze browserextensie!
+
+### Toon koolstofgebruik
+
+Eindelijk is het tijd om de API aan te roepen!
+
+Voordat we verder gaan, moeten we het hebben over API's. API's, of [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), zijn een cruciaal onderdeel van de gereedschapskist van een webontwikkelaar. Ze bieden standaardmanieren voor programma's om met elkaar te communiceren en te integreren. Als je bijvoorbeeld een website bouwt die een database moet raadplegen, kan iemand een API hebben gemaakt die je kunt gebruiken. Hoewel er veel soorten API's zijn, is een van de populairste een [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ De term 'REST' staat voor 'Representational State Transfer' en maakt gebruik van verschillende geconfigureerde URL's om gegevens op te halen. Doe wat onderzoek naar de verschillende soorten API's die beschikbaar zijn voor ontwikkelaars. Welke vorm spreekt jou het meest aan?
+
+Er zijn belangrijke dingen om op te merken over deze functie. Ten eerste, let op het [`async`-sleutelwoord](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Door je functies asynchroon te schrijven, zorg je ervoor dat ze wachten op een actie, zoals het retourneren van gegevens, voordat ze doorgaan.
+
+Hier is een korte video over `async`:
+
+[![Async en Await voor het beheren van promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async en Await voor het beheren van promises")
+
+> 🎥 Klik op de afbeelding hierboven voor een video over async/await.
+
+Maak een nieuwe functie om de C02Signal API aan te roepen:
+
+```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.';
+	}
+}
+```
+
+Dit is een grote functie. Wat gebeurt hier?
+
+- Volgens best practices gebruik je het `async`-sleutelwoord om deze functie asynchroon te laten werken. De functie bevat een `try/catch`-blok omdat deze een belofte retourneert wanneer de API gegevens retourneert. Omdat je geen controle hebt over de snelheid waarmee de API reageert (of helemaal niet reageert!), moet je met deze onzekerheid omgaan door deze asynchroon aan te roepen.
+- Je roept de co2signal API aan om gegevens van je regio op te halen, met behulp van je API-sleutel. Om die sleutel te gebruiken, moet je een vorm van authenticatie gebruiken in je headerparameters.
+- Zodra de API reageert, wijs je verschillende elementen van de responsgegevens toe aan de delen van je scherm die je hebt ingesteld om deze gegevens weer te geven.
+- Als er een fout is, of als er geen resultaat is, toon je een foutmelding.
+
+✅ Het gebruik van asynchrone programmeerpatronen is een andere zeer nuttige vaardigheid in je gereedschapskist. Lees [over de verschillende manieren](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) waarop je dit type code kunt configureren.
+
+Gefeliciteerd! Als je je extensie bouwt (`npm run build`) en deze vernieuwt in je extensiepaneel, heb je een werkende extensie! Het enige dat nog niet werkt, is het pictogram, en dat los je op in de volgende les.
+
+---
+
+## 🚀 Uitdaging
+
+We hebben in deze lessen verschillende soorten API's besproken. Kies een web-API en onderzoek in detail wat deze biedt. Kijk bijvoorbeeld naar API's die beschikbaar zijn binnen browsers, zoals de [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Wat maakt volgens jou een goede API?
+
+## Quiz na de les
+
+[Quiz na de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
+
+## Herhaling & Zelfstudie
+
+In deze les heb je geleerd over LocalStorage en API's, beide zeer nuttig voor de professionele webontwikkelaar. Kun je bedenken hoe deze twee dingen samenwerken? Denk na over hoe je een website zou ontwerpen die items opslaat om te worden gebruikt door een API.
+
+## Opdracht
+
+[Adopteer een API](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/nl/5-browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..6c57a8cd
--- /dev/null
+++ b/translations/nl/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-27T20:46:07+00:00",
+  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Adopteer een API
+
+## Instructies
+
+API's kunnen erg leuk zijn om mee te werken. Hier is een [lijst met veel gratis API's](https://github.com/public-apis/public-apis). Kies een API en bouw een browserextensie die een probleem oplost. Het kan een klein probleem zijn, zoals het gebrek aan genoeg foto's van huisdieren (probeer bijvoorbeeld de [dog CEO API](https://dog.ceo/dog-api/)) of iets groters - veel plezier!
+
+## Rubriek
+
+| Criteria | Uitmuntend                                                                  | Voldoende                                 | Moet Verbeteren         |
+| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
+|          | Een complete browserextensie wordt ingediend met gebruik van een API uit de bovenstaande lijst | Een gedeeltelijke browserextensie wordt ingediend | De inzending bevat fouten |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..839b2e5a
--- /dev/null
+++ b/translations/nl/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-27T20:49:48+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
+  "language_code": "nl"
+}
+-->
+# Browserextensieproject Deel 3: Leer over Achtergrondtaken en Prestaties
+
+## Pre-lezing Quiz
+
+[Pre-lezing quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
+
+### Introductie
+
+In de laatste twee lessen van dit module heb je geleerd hoe je een formulier en een weergavegebied kunt bouwen voor gegevens die worden opgehaald uit een API. Dit is een zeer standaard manier om een webaanwezigheid te creëren. Je hebt zelfs geleerd hoe je gegevens asynchroon kunt ophalen. Je browserextensie is bijna compleet.
+
+Het blijft nog om enkele achtergrondtaken te beheren, waaronder het verversen van de kleur van het pictogram van de extensie. Dit is een goed moment om te bespreken hoe de browser dit soort taken beheert. Laten we nadenken over deze browsertaken in de context van de prestaties van je webassets terwijl je ze bouwt.
+
+## Basisprincipes van Webprestaties
+
+> "Websiteprestaties gaan over twee dingen: hoe snel de pagina laadt en hoe snel de code erop wordt uitgevoerd." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+Het onderwerp hoe je je websites razendsnel kunt maken op allerlei soorten apparaten, voor allerlei soorten gebruikers, in allerlei situaties, is niet verrassend enorm. Hier zijn enkele punten om in gedachten te houden terwijl je een standaard webproject of een browserextensie bouwt.
+
+Het eerste wat je moet doen om ervoor te zorgen dat je site efficiënt werkt, is gegevens verzamelen over de prestaties ervan. De eerste plek om dit te doen is in de ontwikkelaarstools van je webbrowser. In Edge kun je de knop "Instellingen en meer" selecteren (het pictogram met drie stippen rechtsboven in de browser), vervolgens navigeren naar Meer Hulpmiddelen > Ontwikkelaarstools en het tabblad Prestaties openen. Je kunt ook de sneltoetsen `Ctrl` + `Shift` + `I` op Windows of `Option` + `Command` + `I` op Mac gebruiken om ontwikkelaarstools te openen.
+
+Het tabblad Prestaties bevat een Profiling-tool. Open een website (probeer bijvoorbeeld [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) en klik op de knop 'Record', ververs vervolgens de site. Stop de opname op elk moment en je kunt de routines zien die worden gegenereerd om de site te 'scripten', 'renderen' en 'schilderen':
+
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.nl.png)
+
+✅ Bezoek de [Microsoft Documentatie](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) over het Prestaties-paneel in Edge
+
+> Tip: om een nauwkeurige meting van de opstarttijd van je website te krijgen, wis je de cache van je browser
+
+Selecteer elementen van de profiel-tijdlijn om in te zoomen op gebeurtenissen die plaatsvinden terwijl je pagina laadt.
+
+Krijg een momentopname van de prestaties van je pagina door een deel van de profiel-tijdlijn te selecteren en naar het samenvattingspaneel te kijken:
+
+![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.nl.png)
+
+Controleer het Gebeurtenislogpaneel om te zien of een gebeurtenis langer dan 15 ms duurde:
+
+![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.nl.png)
+
+✅ Leer je profiler kennen! Open de ontwikkelaarstools op deze site en kijk of er knelpunten zijn. Wat is het langzaamst ladende asset? Het snelst?
+
+## Profiling-controles
+
+Over het algemeen zijn er enkele "probleemgebieden" waar elke webontwikkelaar op moet letten bij het bouwen van een site om nare verrassingen te voorkomen wanneer het tijd is om naar productie te gaan.
+
+**Assetgroottes**: Het web is de afgelopen jaren 'zwaarder' en dus langzamer geworden. Een deel van dit gewicht heeft te maken met het gebruik van afbeeldingen.
+
+✅ Bekijk het [Internet Archief](https://httparchive.org/reports/page-weight) voor een historisch overzicht van paginagewicht en meer.
+
+Een goede praktijk is ervoor te zorgen dat je afbeeldingen zijn geoptimaliseerd en worden geleverd op de juiste grootte en resolutie voor je gebruikers.
+
+**DOM-traversals**: De browser moet zijn Document Object Model bouwen op basis van de code die je schrijft, dus het is in het belang van goede pagina-prestaties om je tags minimaal te houden, alleen te gebruiken en te stylen wat de pagina nodig heeft. Tot dit punt kan overtollige CSS die aan een pagina is gekoppeld worden geoptimaliseerd; stijlen die alleen op één pagina hoeven te worden gebruikt, hoeven bijvoorbeeld niet te worden opgenomen in het hoofdstijlblad.
+
+**JavaScript**: Elke JavaScript-ontwikkelaar moet letten op 'render-blocking' scripts die moeten worden geladen voordat de rest van de DOM kan worden doorlopen en naar de browser kan worden geschilderd. Overweeg het gebruik van `defer` met je inline scripts (zoals gedaan in het Terrarium-module).
+
+✅ Probeer enkele sites op een [Site Speed Test website](https://www.webpagetest.org/) om meer te leren over de gebruikelijke controles die worden uitgevoerd om de prestaties van een site te bepalen.
+
+Nu je een idee hebt van hoe de browser de assets rendert die je naar hem stuurt, laten we kijken naar de laatste paar dingen die je moet doen om je extensie te voltooien:
+
+### Maak een functie om kleur te berekenen
+
+Werkend in `/src/index.js`, voeg een functie genaamd `calculateColor()` toe na de reeks `const`-variabelen die je hebt ingesteld om toegang te krijgen tot de 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 } });
+}
+```
+
+Wat gebeurt hier? Je geeft een waarde door (de koolstofintensiteit) van de API-aanroep die je in de laatste les hebt voltooid, en vervolgens bereken je hoe dicht de waarde bij de index in de kleurenarray ligt. Vervolgens stuur je die dichtstbijzijnde kleurwaarde naar de chrome runtime.
+
+De chrome.runtime heeft [een API](https://developer.chrome.com/extensions/runtime) die allerlei achtergrondtaken afhandelt, en je extensie maakt hier gebruik van:
+
+> "Gebruik de chrome.runtime API om de achtergrondpagina op te halen, details over het manifest te retourneren en te luisteren naar en te reageren op gebeurtenissen in de levenscyclus van de app of extensie. Je kunt deze API ook gebruiken om het relatieve pad van URL's om te zetten naar volledig gekwalificeerde URL's."
+
+✅ Als je deze browserextensie voor Edge ontwikkelt, kan het je verrassen dat je een chrome API gebruikt. De nieuwere Edge-browserversies draaien op de Chromium-browserengine, dus je kunt deze tools gebruiken.
+
+> Let op, als je een browserextensie wilt profileren, start je de ontwikkelaarstools vanuit de extensie zelf, aangezien dit een aparte browserinstantie is.
+
+### Stel een standaard pictogramkleur in
+
+Stel nu in de `init()`-functie het pictogram in op een generieke groene kleur door opnieuw de `updateIcon`-actie van chrome aan te roepen:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+
+### Roep de functie aan, voer de oproep uit
+
+Roep vervolgens de functie die je zojuist hebt gemaakt aan door deze toe te voegen aan de belofte die wordt geretourneerd door de C02Signal API:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+En tot slot, in `/dist/background.js`, voeg de listener toe voor deze achtergrondactie-oproepen:
+
+```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);
+}
+```
+
+In deze code voeg je een listener toe voor alle berichten die naar de backend-taakbeheerder worden verzonden. Als het 'updateIcon' wordt genoemd, wordt de volgende code uitgevoerd om een pictogram van de juiste kleur te tekenen met behulp van de Canvas API.
+
+✅ Je leert meer over de Canvas API in de [Space Game-lessen](../../6-space-game/2-drawing-to-canvas/README.md).
+
+Bouw nu je extensie opnieuw (`npm run build`), ververs en start je extensie, en kijk hoe de kleur verandert. Is het een goed moment om een boodschap te doen of de afwas te doen? Nu weet je het!
+
+Gefeliciteerd, je hebt een nuttige browserextensie gebouwd en meer geleerd over hoe de browser werkt en hoe je de prestaties ervan kunt profileren.
+
+---
+
+## 🚀 Uitdaging
+
+Onderzoek enkele open source websites die al lang bestaan, en kijk op basis van hun GitHub-geschiedenis of je kunt bepalen hoe ze in de loop der jaren zijn geoptimaliseerd voor prestaties, indien überhaupt. Wat is het meest voorkomende pijnpunt?
+
+## Post-lezing Quiz
+
+[Post-lezing quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
+
+## Review & Zelfstudie
+
+Overweeg je aan te melden voor een [prestaties-nieuwsbrief](https://perf.email/)
+
+Onderzoek enkele manieren waarop browsers webprestaties meten door de prestatietabbladen in hun webtools te bekijken. Vind je grote verschillen?
+
+## Opdracht
+
+[Analyseer een site op prestaties](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/nl/5-browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..223f7329
--- /dev/null
+++ b/translations/nl/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-27T20:51:18+00:00",
+  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Analyseer een site op prestaties
+
+Geef een gedetailleerd rapport van een website, waarin gebieden worden aangegeven waar de prestaties problematisch zijn. Analyseer waarom de site traag is en wat je kunt doen om deze te versnellen. Vertrouw niet alleen op de browsertools, maar doe ook onderzoek naar andere tools die je rapport kunnen ondersteunen.
+
+## Rubriek
+
+| Criteria | Uitmuntend                                                                                                 | Voldoende                   | Verbetering nodig             |
+| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|          | Een rapport wordt gepresenteerd met details die niet alleen afkomstig zijn van browsertools, maar ook van externe tools indien beschikbaar | Een basisrapport wordt gepresenteerd | Een minimaal rapport wordt gepresenteerd |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/README.md b/translations/nl/5-browser-extension/README.md
new file mode 100644
index 00000000..6d7d96d8
--- /dev/null
+++ b/translations/nl/5-browser-extension/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b121a279a6ab39878491f3e572673515",
+  "translation_date": "2025-08-27T20:42:44+00:00",
+  "source_file": "5-browser-extension/README.md",
+  "language_code": "nl"
+}
+-->
+# Een browserextensie bouwen
+
+Het bouwen van browserextensies is een leuke en interessante manier om na te denken over de prestaties van je apps terwijl je een ander type webasset ontwikkelt. Deze module bevat lessen over hoe browsers werken, hoe je een browserextensie implementeert, hoe je een formulier bouwt, een API aanroept, lokale opslag gebruikt, en hoe je de prestaties van je website kunt beoordelen en verbeteren.
+
+Je gaat een browserextensie bouwen die werkt op Edge, Chrome en Firefox. Deze extensie, die lijkt op een mini-website die is afgestemd op een zeer specifieke taak, controleert de [C02 Signal API](https://www.co2signal.com) voor het elektriciteitsverbruik en de koolstofintensiteit van een bepaalde regio, en geeft een meting van de koolstofvoetafdruk van die regio.
+
+Deze extensie kan ad hoc door een gebruiker worden opgeroepen zodra een API-sleutel en regiocode zijn ingevoerd in een formulier om het lokale elektriciteitsverbruik te bepalen. Hierdoor kan data worden aangeboden die de elektriciteitskeuzes van een gebruiker kunnen beïnvloeden. Bijvoorbeeld, het kan beter zijn om het gebruik van een wasdroger (een koolstofintensieve activiteit) uit te stellen tijdens een periode van hoog elektriciteitsverbruik in jouw regio.
+
+### Onderwerpen
+
+1. [Over de browser](1-about-browsers/README.md)
+2. [Formulieren en lokale opslag](2-forms-browsers-local-storage/README.md)
+3. [Achtergrondtaken en prestaties](3-background-tasks-and-performance/README.md)
+
+### Credits
+
+![een groene browserextensie](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png)
+
+## Credits
+
+Het idee voor deze web carbon trigger werd aangedragen door Asim Hussain, leider bij Microsoft van het Green Cloud Advocacy-team en auteur van de [Green Principles](https://principles.green/). Het was oorspronkelijk een [websiteproject](https://github.com/jlooper/green).
+
+De structuur van de browserextensie is beïnvloed door [Adebola Adeniran's COVID-extensie](https://github.com/onedebos/covtension).
+
+Het concept achter het 'dot'-icoonsysteem werd voorgesteld door de icoonstructuur van de [Energy Lollipop](https://energylollipop.com/) browserextensie voor emissies in Californië.
+
+Deze lessen zijn geschreven met ♥️ door [Jen Looper](https://www.twitter.com/jenlooper)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen om nauwkeurigheid te waarborgen, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/solution/README.md b/translations/nl/5-browser-extension/solution/README.md
new file mode 100644
index 00000000..a4e8def4
--- /dev/null
+++ b/translations/nl/5-browser-extension/solution/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "fab4e6b4f0efcd587a9029d82991f597",
+  "translation_date": "2025-08-27T20:51:38+00:00",
+  "source_file": "5-browser-extension/solution/README.md",
+  "language_code": "nl"
+}
+-->
+# Carbon Trigger Browser Extensie: Voltooide Code
+
+Gebruik de CO2 Signal API van tmrow om het elektriciteitsverbruik bij te houden en bouw een browserextensie zodat je direct in je browser een herinnering hebt over hoe zwaar het elektriciteitsverbruik in jouw regio is. Door deze extensie ad hoc te gebruiken, kun je beter beslissingen nemen over je activiteiten op basis van deze informatie.
+
+![extensie screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png)
+
+## Aan de slag
+
+Je moet [npm](https://npmjs.com) geïnstalleerd hebben. Download een kopie van deze code naar een map op je computer.
+
+Installeer alle benodigde pakketten:
+
+```
+npm install
+```
+
+Bouw de extensie met webpack:
+
+```
+npm run build
+```
+
+Om de extensie op Edge te installeren, gebruik je het menu met de 'drie stippen' rechtsboven in de browser om het Extensies-paneel te vinden. Selecteer daar 'Load Unpacked' om een nieuwe extensie te laden. Open de 'dist'-map wanneer hierom wordt gevraagd en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([hier via e-mail verkrijgen](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
+
+![installeren](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png)
+
+Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zou de gekleurde stip in de browserextensiebalk moeten veranderen om het energieverbruik in jouw regio weer te geven. Het geeft je een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om uit te voeren. Het concept achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop extensie](https://energylollipop.com/) voor emissies in Californië.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/solution/translation/README.es.md b/translations/nl/5-browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..53b02a30
--- /dev/null
+++ b/translations/nl/5-browser-extension/solution/translation/README.es.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
+  "translation_date": "2025-08-27T20:52:03+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.es.md",
+  "language_code": "nl"
+}
+-->
+# Browserextensie Carbon Trigger: Volledige code
+
+Met behulp van de CO2-signaal-API van tmrow om het elektriciteitsverbruik te volgen, maak je een browserextensie zodat je direct in je browser een herinnering hebt over het elektriciteitsverbruik in jouw regio. Het gebruik van deze ad-hocextensie helpt je om beslissingen te nemen over je activiteiten op basis van deze informatie.
+
+![extensie screenshot](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.nl.png)
+
+## Aan de slag
+
+Je moet [npm](https://npmjs.com) geïnstalleerd hebben. Download een kopie van deze code naar een map op je computer.
+
+Installeer alle benodigde pakketten:
+
+```
+npm install
+```
+
+Bouw de extensie met webpack:
+
+```
+npm run build
+```
+
+Om de extensie in Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensiepaneel te vinden. Selecteer daar 'Uitgepakte extensie laden' om een nieuwe extensie te laden. Open de map 'dist' wanneer hierom wordt gevraagd, en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er hier via e-mail een](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
+
+![installeren](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.nl.png)
+
+Zodra de API-sleutel en de regio in de extensie-interface zijn ingevoerd, zou het gekleurde punt in de extensiebalk van de browser moeten veranderen om het energieverbruik in jouw regio weer te geven. Het geeft je een indicatie van welke activiteiten met een hoog energieverbruik geschikt zijn. Het concept achter dit "puntensysteem" is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor de emissies in Californië.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/solution/translation/README.fr.md b/translations/nl/5-browser-extension/solution/translation/README.fr.md
new file mode 100644
index 00000000..2f1ab963
--- /dev/null
+++ b/translations/nl/5-browser-extension/solution/translation/README.fr.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9361268ca430b2579375009e1eceb5e5",
+  "translation_date": "2025-08-27T20:53:24+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.fr.md",
+  "language_code": "nl"
+}
+-->
+# Carbon Trigger Browserextensie: Voltooide Code
+
+Met behulp van de CO2 Signal API van tmrow om het elektriciteitsverbruik te volgen, maak je een browserextensie zodat je direct in je browser een herinnering kunt krijgen over het elektriciteitsverbruik in jouw regio. Het gebruik van deze ad-hoc extensie helpt je om je activiteiten te beoordelen op basis van deze informatie.
+
+![extensie screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png)
+
+## Aan de slag
+
+Je moet [npm](https://npmjs.com) geïnstalleerd hebben. Download een kopie van deze code naar een map op je computer.
+
+Installeer alle vereiste pakketten:
+
+```
+npm install
+```
+
+Bouw de extensie met webpack
+
+```
+npm run build
+```
+
+Om de extensie op Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Selecteer daar 'Uitgepakte extensie laden' om een nieuwe extensie te laden. Open de map 'dist' wanneer daarom wordt gevraagd, en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er hier een via e-mail](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
+
+![installatie](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png)
+
+Zodra de API-sleutel en de regio zijn ingevoerd in de extensie-interface, zou het gekleurde puntje in de extensiebalk van de browser moeten veranderen om het energieverbruik in jouw regio weer te geven. Dit geeft je een indicatie van welke energie-intensieve activiteiten op dat moment geschikt zijn. Het concept achter dit 'puntensysteem' is geïnspireerd door de [Energy Lollipop extensie](https://energylollipop.com/) voor emissies in Californië.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons inzetten voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/solution/translation/README.hi.md b/translations/nl/5-browser-extension/solution/translation/README.hi.md
new file mode 100644
index 00000000..9fbb7c7e
--- /dev/null
+++ b/translations/nl/5-browser-extension/solution/translation/README.hi.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "dd58ae1b7707034f055718c1b68bc8de",
+  "translation_date": "2025-08-27T20:52:30+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.hi.md",
+  "language_code": "nl"
+}
+-->
+# Carbon Trigger Browser-extensie: Voltooide Code
+
+Met behulp van de CO2 Signal API van tmrow om het elektriciteitsverbruik te volgen, bouwen we een browser-extensie die je eraan herinnert hoe zwaar het elektriciteitsverbruik in jouw regio is. Door deze extensie te gebruiken, kun je op basis van deze informatie beslissingen nemen over je activiteiten.
+
+![Extensie Screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png)
+
+## Aan de slag
+
+Je moet [npm](https://npmjs.com) installeren. Download een kopie van deze code naar een map op je computer.
+
+Installeer alle benodigde pakketten:
+
+```
+npm install
+```
+
+Bouw de extensie met Webpack:
+
+```
+npm run build
+```
+
+Om te installeren in Edge, gebruik het 'drie-puntjes'-menu in de rechterbovenhoek van de browser om het extensiepaneel te vinden. Kies daar 'Ongepakte extensie laden'. Open de 'dist'-map in de prompt en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijgbaar via e-mail hier](https://www.co2signal.com/) - voer je e-mailadres in het vak op die pagina in) en [de code voor jouw regio](http://api.electricitymap.org/v3/zones) van [Electricity Map](https://www.electricitymap.org/map) (bijvoorbeeld, in Boston gebruik ik 'US-NEISO').
+
+![installeren](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png)
+
+Zodra de API-sleutel en regio in de extensie-interface zijn ingevoerd, zou de gekleurde stip in de browser-extensiebalk moeten veranderen om het energieverbruik in jouw regio weer te geven. Dit geeft je een indicatie van welke energie-intensieve activiteiten geschikt zijn op dat moment. Het idee achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/solution/translation/README.it.md b/translations/nl/5-browser-extension/solution/translation/README.it.md
new file mode 100644
index 00000000..81fa7197
--- /dev/null
+++ b/translations/nl/5-browser-extension/solution/translation/README.it.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9a6b22a2eff0f499b66236be973b24ad",
+  "translation_date": "2025-08-27T20:53:56+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.it.md",
+  "language_code": "nl"
+}
+-->
+# Carbon Trigger Browserextensie: Code om te Starten
+
+We zullen de Signal CO2 API van tmrow gebruiken om het elektriciteitsverbruik te monitoren en een browserextensie te maken. Zo kun je direct in je browser een herinnering krijgen over hoe zwaar het elektriciteitsverbruik in jouw regio is. Het gebruik van deze op maat gemaakte extensie helpt je om je activiteiten te evalueren op basis van deze informatie.
+
+![screenshot van de extensie](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png)
+
+## Aan de Slag
+
+Zorg ervoor dat [npm](https://npmjs.com) is geïnstalleerd. Download een kopie van deze code naar een map op je computer.
+
+Installeer alle vereiste pakketten:
+
+```
+npm install
+```
+
+Maak de extensie met webpack:
+
+```
+npm run build
+```
+
+Om de extensie in Edge te installeren, gebruik je het menu met de "drie puntjes" in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Als het nog niet is ingeschakeld, zet dan de Ontwikkelaarsmodus aan (linksonder). Selecteer "Uitgepakte extensie laden" om een nieuwe extensie te laden. Open de map "dist" in het prompt, en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API (je kunt er [hier via e-mail een krijgen](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [elektriciteitskaart](https://www.electricitymap.org/map) (bijvoorbeeld, in Boston is dat "US-NEISO").
+
+![installatie](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png)
+
+Zodra de API-sleutel en de regio zijn ingevoerd in de interface van de extensie, zou het gekleurde puntje in de browserextensiebalk moeten veranderen om het energieverbruik van de regio weer te geven. Het biedt ook een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om uit te voeren. Het concept achter dit "puntensysteem" is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/solution/translation/README.ja.md b/translations/nl/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..84c2bf8b
--- /dev/null
+++ b/translations/nl/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
+  "translation_date": "2025-08-27T20:54:25+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ja.md",
+  "language_code": "nl"
+}
+-->
+# Carbon Trigger Browser-extensie: Voltooide Code
+
+Bouw een browserextensie die, met behulp van de CO2 Signal API van tmrow, het energieverbruik in jouw regio bijhoudt en dit als een herinnering op je browser weergeeft. Door deze extensie ad-hoc te gebruiken, kun je je activiteiten baseren op deze informatie.
+
+![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png)
+
+## Aan de slag
+
+Je moet [npm](https://npmjs.com) geïnstalleerd hebben. Download een kopie van deze code naar een map op je computer.
+
+Installeer alle benodigde pakketten.
+
+```
+npm install
+```
+
+Bouw de extensie met webpack.
+
+```
+npm run build
+```
+
+Om de extensie in Edge te installeren, ga je naar het "drie stippen"-menu rechtsboven in de browser en zoek je het paneel "Extensies". Kies daar "Load Unpacked" en laad de nieuwe extensie. Wanneer je wordt gevraagd, open je de "dist"-map om de extensie te laden. Om de extensie te gebruiken, heb je een API-sleutel van de CO2 Signal API nodig ([hier via e-mail verkrijgen](https://www.co2signal.com/) - voer je e-mailadres in het vak op die pagina in) en een [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (bijvoorbeeld, voor Boston gebruik je 'US-NEISO').
+
+![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png)
+
+Wanneer je de API-sleutel en regio invoert in de extensie-interface, verandert de gekleurde stip die in de extensiebalk van je browser wordt weergegeven. Deze stip weerspiegelt het energieverbruik in jouw regio en geeft aan welke activiteiten geschikt zijn op basis van het energieverbruik. Het concept van dit "stip"-systeem is geïnspireerd door de [Energy Lollipop extension](https://energylollipop.com/) voor emissies in Californië.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/solution/translation/README.ms.md b/translations/nl/5-browser-extension/solution/translation/README.ms.md
new file mode 100644
index 00000000..2d54e7b6
--- /dev/null
+++ b/translations/nl/5-browser-extension/solution/translation/README.ms.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "21b364c158c8e4f698de65eeac16c9fe",
+  "translation_date": "2025-08-27T20:52:57+00:00",
+  "source_file": "5-browser-extension/solution/translation/README.ms.md",
+  "language_code": "nl"
+}
+-->
+# Carbon Trigger Browserextensie: Volledige Code
+
+Gebruik de CO2 Signal API van tmrow om het elektriciteitsverbruik te monitoren en bouw een browserextensie waarmee je waarschuwingen kunt ontvangen over hoe zwaar het elektriciteitsverbruik in jouw regio is. Het gebruik van deze extensie helpt je om je activiteiten beter af te stemmen op deze informatie.
+
+![screenshot van browserextensie](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png)
+
+## Aan de Slag
+
+Je moet [npm](https://npmjs.com) installeren. Download een kopie van deze code naar een map op je computer.
+
+Installeer alle benodigde pakketten:
+
+```
+npm install
+```
+
+Bouw de extensie met webpack:
+
+```
+npm run build
+```
+
+Om de extensie in Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Kies daar 'Load Unpacked' om een nieuwe extensie te laden. Open de 'dist'-map wanneer hierom wordt gevraagd en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er een via e-mail hier](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en [de code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
+
+![bezig met downloaden](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png)
+
+Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zal de gekleurde stip in de browserextensiebalk veranderen om het energieverbruik in jouw regio weer te geven en je een indicatie geven van welke zware activiteiten geschikt zijn om te doen. Het idee achter dit 'stip'-systeem is geïnspireerd door [de Energy Lollipop browserextensie](https://energylollipop.com/) voor de uitstoot in Californië.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/5-browser-extension/start/README.md b/translations/nl/5-browser-extension/start/README.md
new file mode 100644
index 00000000..d9bfd47a
--- /dev/null
+++ b/translations/nl/5-browser-extension/start/README.md
@@ -0,0 +1,41 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
+  "translation_date": "2025-08-27T20:46:28+00:00",
+  "source_file": "5-browser-extension/start/README.md",
+  "language_code": "nl"
+}
+-->
+# Carbon Trigger Browserextensie: Startcode
+
+Met behulp van de CO2 Signal API van tmrow om elektriciteitsgebruik bij te houden, bouw je een browserextensie zodat je direct in je browser een herinnering hebt over hoe zwaar het elektriciteitsgebruik in jouw regio is. Door deze extensie ad hoc te gebruiken, kun je beter beslissingen nemen over je activiteiten op basis van deze informatie.
+
+![extensie screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png)
+
+## Aan de slag
+
+Je moet [npm](https://npmjs.com) geïnstalleerd hebben. Download een kopie van deze code naar een map op je computer.
+
+Installeer alle benodigde pakketten:
+
+```
+npm install
+```
+
+Bouw de extensie met webpack:
+
+```
+npm run build
+```
+
+Om de extensie op Edge te installeren, gebruik je het menu met de 'drie puntjes' rechtsboven in de browser om het Extensiepaneel te vinden. Selecteer daar 'Load Unpacked' om een nieuwe extensie te laden. Open de map 'dist' wanneer daarom wordt gevraagd, en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([hier aanvragen via e-mail](https://www.co2signal.com/) - voer je e-mailadres in op deze pagina) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
+
+![installeren](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png)
+
+Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zou de gekleurde stip in de browserextensiebalk moeten veranderen om het energiegebruik in jouw regio weer te geven. Het geeft je ook een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om te doen. Het idee achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/1-introduction/README.md b/translations/nl/6-space-game/1-introduction/README.md
new file mode 100644
index 00000000..6565c72e
--- /dev/null
+++ b/translations/nl/6-space-game/1-introduction/README.md
@@ -0,0 +1,238 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
+  "translation_date": "2025-08-27T20:28:22+00:00",
+  "source_file": "6-space-game/1-introduction/README.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Ruimtespel Deel 1: Introductie
+
+![video](../../../../6-space-game/images/pewpew.gif)
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
+
+### Overerving en Compositie in gameontwikkeling
+
+In eerdere lessen hoefde je je niet veel zorgen te maken over de ontwerpstructuur van de apps die je bouwde, omdat de projecten erg klein van omvang waren. Maar naarmate je applicaties groter worden, worden architecturale beslissingen belangrijker. Er zijn twee belangrijke benaderingen om grotere applicaties in JavaScript te maken: *compositie* of *overerving*. Beide hebben voor- en nadelen, maar laten we ze uitleggen in de context van een spel.
+
+✅ Een van de beroemdste programmeerboeken ooit geschreven gaat over [ontwerppatronen](https://en.wikipedia.org/wiki/Design_Patterns).
+
+In een spel heb je `game objects`, objecten die op een scherm bestaan. Dit betekent dat ze een locatie hebben in een cartesiaans coördinatensysteem, gekarakteriseerd door een `x`- en `y`-coördinaat. Tijdens het ontwikkelen van een spel zul je merken dat al je game-objecten een standaard eigenschap hebben, gemeenschappelijk voor elk spel dat je maakt, namelijk elementen die:
+
+- **locatie-gebaseerd** zijn. De meeste, zo niet alle, spelelementen zijn locatie-gebaseerd. Dit betekent dat ze een locatie hebben, een `x` en `y`.
+- **beweegbaar** zijn. Dit zijn objecten die naar een nieuwe locatie kunnen bewegen. Dit is meestal een held, een monster of een NPC (non-player character), maar bijvoorbeeld niet een statisch object zoals een boom.
+- **zelfvernietigend** zijn. Deze objecten bestaan slechts voor een bepaalde tijd voordat ze zichzelf klaarzetten voor verwijdering. Meestal wordt dit weergegeven door een `dead` of `destroyed` boolean die aangeeft aan de game-engine dat dit object niet langer gerenderd moet worden.
+- **cool-down** hebben. 'Cool-down' is een typische eigenschap van kortlevende objecten. Een typisch voorbeeld is een stuk tekst of een grafisch effect zoals een explosie dat slechts enkele milliseconden zichtbaar moet zijn.
+
+✅ Denk aan een spel zoals Pac-Man. Kun je de vier hierboven genoemde objecttypen in dit spel identificeren?
+
+### Gedrag uitdrukken
+
+Alles wat we hierboven beschreven, zijn gedragingen die game-objecten kunnen hebben. Maar hoe coderen we die? We kunnen dit gedrag uitdrukken als methoden die geassocieerd zijn met klassen of objecten.
+
+**Klassen**
+
+Het idee is om `klassen` te gebruiken in combinatie met `overerving` om bepaald gedrag aan een klasse toe te voegen.
+
+✅ Overerving is een belangrijk concept om te begrijpen. Lees meer in [MDN's artikel over overerving](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+In code uitgedrukt kan een game-object er typisch zo uitzien:
+
+```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();
+```
+
+✅ Neem een paar minuten om een Pac-Man-held (bijvoorbeeld Inky, Pinky of Blinky) opnieuw te bedenken en hoe deze in JavaScript zou worden geschreven.
+
+**Compositie**
+
+Een andere manier om objectovererving te behandelen is door gebruik te maken van *Compositie*. Objecten drukken hun gedrag dan als volgt uit:
+
+```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'); 
+```
+
+**Welk patroon moet ik gebruiken?**
+
+Het is aan jou welk patroon je kiest. JavaScript ondersteunt beide paradigma's.
+
+--
+
+Een ander patroon dat vaak voorkomt in gameontwikkeling, richt zich op het probleem van het beheren van de gebruikerservaring en prestaties van het spel.
+
+## Pub/sub-patroon
+
+✅ Pub/Sub staat voor 'publish-subscribe'
+
+Dit patroon richt zich op het idee dat de verschillende delen van je applicatie niets van elkaar hoeven te weten. Waarom is dat? Het maakt het veel gemakkelijker om in het algemeen te begrijpen wat er gebeurt als de verschillende delen gescheiden zijn. Het maakt het ook eenvoudiger om gedrag plotseling te veranderen als dat nodig is. Hoe bereiken we dit? Door enkele concepten vast te stellen:
+
+- **bericht**: Een bericht is meestal een tekststring, vergezeld van een optionele payload (een stukje data dat verduidelijkt waar het bericht over gaat). Een typisch bericht in een spel kan zijn `KEY_PRESSED_ENTER`.
+- **publisher**: Dit element *publiceert* een bericht en stuurt het naar alle abonnees.
+- **subscriber**: Dit element *luistert* naar specifieke berichten en voert een taak uit als gevolg van het ontvangen van dit bericht, zoals het afvuren van een laser.
+
+De implementatie is vrij klein van omvang, maar het is een zeer krachtig patroon. Hier is hoe het kan worden geïmplementeerd:
+
+```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))
+    }
+  }
+}
+
+```
+
+Om de bovenstaande code te gebruiken, kunnen we een zeer kleine implementatie maken:
+
+```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)
+  }
+});
+```
+
+Hierboven verbinden we een toetsenbordgebeurtenis, `ArrowLeft`, en sturen het bericht `HERO_MOVE_LEFT`. We luisteren naar dat bericht en verplaatsen de `hero` als gevolg. De kracht van dit patroon is dat de event listener en de held niets van elkaar weten. Je kunt de `ArrowLeft` opnieuw toewijzen aan de `A`-toets. Daarnaast zou het mogelijk zijn om iets heel anders te doen bij `ArrowLeft` door een paar aanpassingen te maken aan de `on`-functie van de eventEmitter:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+Naarmate je spel groeit en complexer wordt, blijft dit patroon even eenvoudig en blijft je code overzichtelijk. Het wordt sterk aanbevolen om dit patroon te gebruiken.
+
+---
+
+## 🚀 Uitdaging
+
+Denk na over hoe het pub-sub-patroon een spel kan verbeteren. Welke onderdelen zouden gebeurtenissen moeten uitzenden, en hoe zou het spel daarop moeten reageren? Dit is je kans om creatief te worden en na te denken over een nieuw spel en hoe de onderdelen ervan zich zouden kunnen gedragen.
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
+
+## Review & Zelfstudie
+
+Leer meer over Pub/Sub door [er meer over te lezen](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+## Opdracht
+
+[Maak een mock-up van een spel](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/1-introduction/assignment.md b/translations/nl/6-space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..e4a92eac
--- /dev/null
+++ b/translations/nl/6-space-game/1-introduction/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "009bdedee9cc82988264be8cb31f9bf4",
+  "translation_date": "2025-08-27T20:29:05+00:00",
+  "source_file": "6-space-game/1-introduction/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Maak een spelontwerp
+
+## Instructies
+
+Gebruik de codevoorbeelden uit de les om een representatie te maken van een spel dat je leuk vindt. Het moet een eenvoudig spel zijn, maar het doel is om ofwel het class- of het composition-patroon en het pub/sub-patroon te gebruiken om te laten zien hoe een spel kan starten. Wees creatief!
+
+## Rubriek
+
+| Criteria | Uitmuntend                                              | Voldoende                                             | Moet Verbeteren                                    |
+| -------- | ------------------------------------------------------- | ----------------------------------------------------- | -------------------------------------------------- |
+|          | Drie elementen worden op het scherm geplaatst en gemanipuleerd | Twee elementen worden op het scherm geplaatst en gemanipuleerd | Eén element wordt op het scherm geplaatst en gemanipuleerd |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/2-drawing-to-canvas/README.md b/translations/nl/6-space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..114b57ab
--- /dev/null
+++ b/translations/nl/6-space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,230 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
+  "translation_date": "2025-08-27T20:24:58+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Ruimtespel Deel 2: Teken Held en Monsters op Canvas
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
+
+## Het Canvas
+
+Het canvas is een HTML-element dat standaard geen inhoud heeft; het is een leeg vlak. Je moet er zelf op tekenen om er iets aan toe te voegen.
+
+✅ Lees [meer over de Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) op MDN.
+
+Hier is hoe het meestal wordt gedeclareerd, als onderdeel van de body van de pagina:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Hierboven stellen we de `id`, `width` en `height` in.
+
+- `id`: stel dit in zodat je er een referentie naar kunt verkrijgen wanneer je ermee wilt werken.
+- `width`: dit is de breedte van het element.
+- `height`: dit is de hoogte van het element.
+
+## Eenvoudige geometrie tekenen
+
+Het canvas gebruikt een cartesiaans coördinatensysteem om dingen te tekenen. Het gebruikt dus een x-as en y-as om uit te drukken waar iets zich bevindt. De locatie `0,0` is de positie linksboven en rechtsonder is wat je hebt ingesteld als de BREEDTE en HOOGTE van het canvas.
+
+![het raster van het canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.nl.png)  
+> Afbeelding van [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Om op het canvas-element te tekenen, moet je de volgende stappen doorlopen:
+
+1. **Verkrijg een referentie** naar het Canvas-element.  
+2. **Verkrijg een referentie** naar het Context-element dat op het canvas-element zit.  
+3. **Voer een tekenoperatie uit** met behulp van het context-element.  
+
+De code voor bovenstaande stappen ziet er meestal zo uit:
+
+```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
+```
+
+✅ De Canvas API richt zich voornamelijk op 2D-vormen, maar je kunt ook 3D-elementen tekenen op een website; hiervoor kun je de [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) gebruiken.
+
+Je kunt allerlei dingen tekenen met de Canvas API, zoals:
+
+- **Geometrische vormen**, we hebben al laten zien hoe je een rechthoek tekent, maar er is nog veel meer dat je kunt tekenen.  
+- **Tekst**, je kunt tekst tekenen met elk gewenst lettertype en kleur.  
+- **Afbeeldingen**, je kunt een afbeelding tekenen op basis van een afbeeldingsbestand zoals een .jpg of .png.  
+
+✅ Probeer het! Je weet hoe je een rechthoek tekent, kun je een cirkel tekenen op een pagina? Bekijk enkele interessante Canvas-tekeningen op CodePen. Hier is een [bijzonder indrukwekkend voorbeeld](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Een afbeeldingsbestand laden en tekenen
+
+Je laadt een afbeeldingsbestand door een `Image`-object te maken en de `src`-eigenschap in te stellen. Vervolgens luister je naar het `load`-event om te weten wanneer het klaar is om te worden gebruikt. De code ziet er als volgt uit:
+
+### Bestand laden
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Laadpatroon voor bestanden
+
+Het wordt aanbevolen om het bovenstaande in een construct zoals deze te verpakken, zodat het gemakkelijker te gebruiken is en je alleen probeert het te manipuleren wanneer het volledig is geladen:
+
+```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')
+}
+
+```
+
+Om spelassets op een scherm te tekenen, zou je code er als volgt uitzien:
+
+```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);
+}
+```
+
+## Nu is het tijd om je spel te gaan bouwen
+
+### Wat te bouwen
+
+Je gaat een webpagina bouwen met een Canvas-element. Het moet een zwart scherm renderen van `1024*768`. We hebben je twee afbeeldingen gegeven:
+
+- Heldenschip  
+
+   ![Heldenschip](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.nl.png)
+
+- 5*5 monster  
+
+   ![Monsterschip](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.nl.png)
+
+### Aanbevolen stappen om te beginnen met ontwikkelen
+
+Vind de bestanden die voor je zijn aangemaakt in de submap `your-work`. Het zou het volgende moeten bevatten:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Open een kopie van deze map in Visual Studio Code. Je moet een lokale ontwikkelomgeving hebben ingesteld, bij voorkeur met Visual Studio Code met NPM en Node geïnstalleerd. Als je `npm` niet hebt ingesteld op je computer, [hier is hoe je dat doet](https://www.npmjs.com/get-npm).
+
+Start je project door naar de map `your_work` te navigeren:
+
+```bash
+cd your-work
+npm start
+```
+
+Hiermee wordt een HTTP-server gestart op het adres `http://localhost:5000`. Open een browser en voer dat adres in. Het is nu een lege pagina, maar dat zal veranderen.
+
+> Opmerking: om wijzigingen op je scherm te zien, vernieuw je je browser.
+
+### Code toevoegen
+
+Voeg de benodigde code toe aan `your-work/app.js` om het onderstaande op te lossen:
+
+1. **Teken** een canvas met zwarte achtergrond  
+   > tip: voeg twee regels toe onder de juiste TODO in `/app.js`, waarbij je het `ctx`-element instelt op zwart en de boven/links-coördinaten op 0,0 en de hoogte en breedte gelijk aan die van het canvas.  
+2. **Laad** texturen  
+   > tip: voeg de speler- en vijandafbeeldingen toe met behulp van `await loadTexture` en geef het afbeeldingspad door. Je ziet ze nog niet op het scherm!  
+3. **Teken** de held in het midden van het scherm in de onderste helft  
+   > tip: gebruik de `drawImage` API om heroImg op het scherm te tekenen, waarbij je `canvas.width / 2 - 45` en `canvas.height - canvas.height / 4)` instelt.  
+4. **Teken** 5*5 monsters  
+   > tip: Nu kun je de code om vijanden op het scherm te tekenen deblokkeren. Ga vervolgens naar de functie `createEnemies` en bouw deze uit.  
+
+   Stel eerst enkele constanten in:
+
+    ```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;
+    ```
+
+    Maak vervolgens een lus om de array van monsters op het scherm te tekenen:
+
+    ```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);
+        }
+      }
+    ```
+
+## Resultaat
+
+Het eindresultaat zou er als volgt uit moeten zien:
+
+![Zwart scherm met een held en 5*5 monsters](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.nl.png)
+
+## Oplossing
+
+Probeer het eerst zelf op te lossen, maar als je vastloopt, bekijk dan een [oplossing](../../../../6-space-game/2-drawing-to-canvas/solution/app.js).
+
+---
+
+## 🚀 Uitdaging
+
+Je hebt geleerd over tekenen met de 2D-georiënteerde Canvas API; bekijk de [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) en probeer een 3D-object te tekenen.
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
+
+## Review & Zelfstudie
+
+Leer meer over de Canvas API door [erover te lezen](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+## Opdracht
+
+[Speel met de Canvas API](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/2-drawing-to-canvas/assignment.md b/translations/nl/6-space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..4f33db48
--- /dev/null
+++ b/translations/nl/6-space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
+  "translation_date": "2025-08-27T20:25:48+00:00",
+  "source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Speel met de Canvas API
+
+## Instructies
+
+Kies een element van de Canvas API en maak iets interessants ermee. Kun je een kleine sterrenstelsel van herhaalde sterren creëren? Kun je een interessante textuur van gekleurde lijnen maken? Je kunt op CodePen kijken voor inspiratie (maar niet kopiëren).
+
+## Rubric
+
+| Criteria | Uitmuntend                                                | Voldoende                          | Verbetering nodig     |
+| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
+|          | Code is ingediend en toont een interessante textuur of vorm | Code is ingediend, maar werkt niet | Code is niet ingediend |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/3-moving-elements-around/README.md b/translations/nl/6-space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..f39cb7b3
--- /dev/null
+++ b/translations/nl/6-space-game/3-moving-elements-around/README.md
@@ -0,0 +1,402 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "23f088add24f0f1fa51014a9e27ea280",
+  "translation_date": "2025-08-27T20:23:10+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/README.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Ruimtespel Deel 3: Beweging Toevoegen
+
+## Quiz Voorafgaand aan de Les
+
+[Quiz voorafgaand aan de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
+
+Games worden pas echt leuk als er aliens over het scherm bewegen! In dit spel maken we gebruik van twee soorten bewegingen:
+
+- **Toetsenbord/Muisbeweging**: wanneer de gebruiker een object op het scherm beweegt door interactie met het toetsenbord of de muis.
+- **Spelgeïnduceerde beweging**: wanneer het spel een object met een bepaald tijdsinterval beweegt.
+
+Maar hoe bewegen we dingen op een scherm? Het draait allemaal om cartesiaanse coördinaten: we veranderen de locatie (x, y) van het object en tekenen vervolgens het scherm opnieuw.
+
+Meestal zijn de volgende stappen nodig om *beweging* op een scherm te realiseren:
+
+1. **Stel een nieuwe locatie in** voor een object; dit is nodig om het object als verplaatst waar te nemen.
+2. **Maak het scherm leeg**, het scherm moet tussen de tekeningen door worden gewist. Dit kan door een rechthoek te tekenen die we vullen met een achtergrondkleur.
+3. **Teken het object opnieuw** op de nieuwe locatie. Hiermee bereiken we uiteindelijk dat het object van de ene naar de andere locatie beweegt.
+
+Hier is hoe dat er in code uit kan zien:
+
+```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);
+```
+
+✅ Kun je bedenken waarom het herhaaldelijk opnieuw tekenen van je held met veel frames per seconde prestatiekosten met zich mee kan brengen? Lees meer over [alternatieven voor dit patroon](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+
+## Toetsenbordgebeurtenissen Afhandelen
+
+Je handelt gebeurtenissen af door specifieke gebeurtenissen aan code te koppelen. Toetsenbordgebeurtenissen worden geactiveerd op het hele venster, terwijl muisgebeurtenissen zoals een `klik` kunnen worden gekoppeld aan het klikken op een specifiek element. We zullen toetsenbordgebeurtenissen gebruiken in dit project.
+
+Om een gebeurtenis af te handelen, gebruik je de `addEventListener()`-methode van het venster en geef je twee invoerparameters op. De eerste parameter is de naam van de gebeurtenis, bijvoorbeeld `keyup`. De tweede parameter is de functie die moet worden aangeroepen als gevolg van de gebeurtenis.
+
+Hier is een voorbeeld:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+Voor toetsgebeurtenissen zijn er twee eigenschappen op de gebeurtenis die je kunt gebruiken om te zien welke toets is ingedrukt:
+
+- `key`, dit is een stringrepresentatie van de ingedrukte toets, bijvoorbeeld `ArrowUp`.
+- `keyCode`, dit is een numerieke representatie, bijvoorbeeld `37`, wat overeenkomt met `ArrowLeft`.
+
+✅ Het manipuleren van toetsgebeurtenissen is ook nuttig buiten game-ontwikkeling. Aan welke andere toepassingen kun je denken voor deze techniek?
+
+### Speciale toetsen: een kanttekening
+
+Er zijn enkele *speciale* toetsen die invloed hebben op het venster. Dit betekent dat als je luistert naar een `keyup`-gebeurtenis en je deze speciale toetsen gebruikt om je held te bewegen, dit ook horizontaal scrollen veroorzaakt. Daarom wil je mogelijk dit ingebouwde browsergedrag *uitschakelen* terwijl je je spel ontwikkelt. Hiervoor heb je code zoals deze nodig:
+
+```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);
+```
+
+De bovenstaande code zorgt ervoor dat de pijltjestoetsen en de spatiebalk hun *standaard* gedrag uitschakelen. Het *uitschakel*-mechanisme vindt plaats wanneer we `e.preventDefault()` aanroepen.
+
+## Spelgeïnduceerde Beweging
+
+We kunnen objecten automatisch laten bewegen door timers te gebruiken, zoals de `setTimeout()`- of `setInterval()`-functie, die de locatie van het object bij elke tik of tijdsinterval bijwerken. Hier is hoe dat eruit kan zien:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## De Spelloop
+
+De spelloop is een concept dat in wezen een functie is die op regelmatige intervallen wordt aangeroepen. Het wordt de spelloop genoemd omdat alles wat zichtbaar moet zijn voor de gebruiker in de loop wordt getekend. De spelloop maakt gebruik van alle spelobjecten die deel uitmaken van het spel en tekent ze, tenzij ze om een bepaalde reden niet langer deel uitmaken van het spel. Bijvoorbeeld, als een object een vijand is die door een laser is geraakt en explodeert, maakt het geen deel meer uit van de huidige spelloop (je leert hier meer over in latere lessen).
+
+Hier is hoe een spelloop er typisch uitziet, uitgedrukt in code:
+
+```javascript
+let gameLoopId = setInterval(() =>
+  function gameLoop() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    drawHero();
+    drawEnemies();
+    drawStaticObjects();
+}, 200);
+```
+
+De bovenstaande loop wordt elke `200` milliseconden aangeroepen om het canvas opnieuw te tekenen. Je kunt het beste interval kiezen dat logisch is voor jouw spel.
+
+## Het Ruimtespel Voortzetten
+
+Je neemt de bestaande code en breidt deze uit. Begin met de code die je hebt voltooid tijdens deel I of gebruik de code in [Deel II - starter](../../../../6-space-game/3-moving-elements-around/your-work).
+
+- **De held bewegen**: je voegt code toe om ervoor te zorgen dat je de held kunt bewegen met de pijltjestoetsen.
+- **Vijanden bewegen**: je voegt ook code toe om ervoor te zorgen dat de vijanden van boven naar beneden bewegen met een bepaald tempo.
+
+## Aanbevolen Stappen
+
+Zoek de bestanden die voor je zijn aangemaakt in de map `your-work`. Deze map zou het volgende moeten bevatten:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Start je project in de map `your_work` door het volgende in te typen:
+
+```bash
+cd your-work
+npm start
+```
+
+Hiermee start je een HTTP-server op adres `http://localhost:5000`. Open een browser en voer dat adres in. Op dit moment zou het de held en alle vijanden moeten weergeven; er beweegt nog niets - nog niet!
+
+### Code Toevoegen
+
+1. **Voeg toegewijde objecten toe** voor `hero`, `enemy` en `game object`. Deze moeten `x`- en `y`-eigenschappen hebben. (Onthoud het gedeelte over [Overerving of compositie](../README.md)).
+
+   *TIP*: `game object` moet degene zijn met `x` en `y` en de mogelijkheid om zichzelf op een canvas te tekenen.
+
+   >tip: begin met het toevoegen van een nieuwe GameObject-klasse met de constructor zoals hieronder, en teken deze vervolgens op het 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);
+      }
+    }
+    ```
+
+    Breid nu dit GameObject uit om de Hero en Enemy te maken.
+    
+    ```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. **Voeg toetsgebeurtenis-handlers toe** om toetsnavigatie af te handelen (beweeg de held omhoog/omlaag, links/rechts).
+
+   *ONTHOUD*: het is een cartesiaans systeem, linksboven is `0,0`. Vergeet ook niet code toe te voegen om *standaardgedrag* te stoppen.
+
+   >tip: maak je onKeyDown-functie en koppel deze aan het venster:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Controleer op dit punt je browserconsole en bekijk de geregistreerde toetsaanslagen.
+
+3. **Implementeer** het [Pub-sub patroon](../README.md), dit houdt je code overzichtelijk terwijl je de resterende delen volgt.
+
+   Om dit laatste deel te doen, kun je:
+
+   1. **Een gebeurtenislistener toevoegen** aan het venster:
+
+       ```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. **Een EventEmitter-klasse maken** om berichten te publiceren en te abonneren:
+
+        ```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. **Constanten toevoegen** en de EventEmitter instellen:
+
+        ```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. **Het spel initialiseren**
+
+    ```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. **De spelloop instellen**
+
+   Refactor de window.onload-functie om het spel te initialiseren en een spelloop in te stellen op een goed interval. Je voegt ook een laserstraal toe:
+
+    ```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. **Voeg code toe** om vijanden met een bepaald interval te laten bewegen.
+
+    Refactor de `createEnemies()`-functie om de vijanden te maken en ze in de nieuwe gameObjects-klasse te plaatsen:
+
+    ```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);
+        }
+      }
+    }
+    ```
+    
+    en voeg een `createHero()`-functie toe om een soortgelijk proces voor de held uit te voeren.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    en voeg ten slotte een `drawGameObjects()`-functie toe om het tekenen te starten:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Je vijanden zouden nu je heldenruimteschip moeten naderen!
+
+---
+
+## 🚀 Uitdaging
+
+Zoals je kunt zien, kan je code veranderen in 'spaghetticode' wanneer je functies, variabelen en klassen toevoegt. Hoe kun je je code beter organiseren zodat deze leesbaarder wordt? Schets een systeem om je code te organiseren, zelfs als het nog steeds in één bestand staat.
+
+## Quiz Na de Les
+
+[Quiz na de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
+
+## Herziening & Zelfstudie
+
+Hoewel we ons spel schrijven zonder frameworks, zijn er veel op JavaScript gebaseerde canvas-frameworks voor game-ontwikkeling. Neem de tijd om wat [te lezen over deze](https://github.com/collections/javascript-game-engines).
+
+## Opdracht
+
+[Geef commentaar op je code](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/3-moving-elements-around/assignment.md b/translations/nl/6-space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..20c220ea
--- /dev/null
+++ b/translations/nl/6-space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
+  "translation_date": "2025-08-27T20:24:25+00:00",
+  "source_file": "6-space-game/3-moving-elements-around/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Geef commentaar op je code
+
+## Instructies
+
+Bekijk je huidige /app.js-bestand in je game-map en zoek manieren om het te voorzien van commentaar en op te schonen. Code kan heel snel onoverzichtelijk worden, en dit is een goed moment om commentaar toe te voegen zodat je later begrijpelijke code hebt die je kunt gebruiken.
+
+## Rubriek
+
+| Criteria | Uitzonderlijk                                                      | Voldoende                            | Moet worden verbeterd                                         |
+| -------- | ------------------------------------------------------------------ | ------------------------------------- | ------------------------------------------------------------- |
+|          | `app.js`-code is volledig voorzien van commentaar en georganiseerd in logische blokken | `app.js`-code is voldoende voorzien van commentaar | `app.js`-code is enigszins ongeorganiseerd en mist goede commentaar |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/4-collision-detection/README.md b/translations/nl/6-space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..72efdb75
--- /dev/null
+++ b/translations/nl/6-space-game/4-collision-detection/README.md
@@ -0,0 +1,311 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
+  "translation_date": "2025-08-27T20:26:27+00:00",
+  "source_file": "6-space-game/4-collision-detection/README.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Ruimtespel Deel 4: Een Laser Toevoegen en Botsingen Detecteren
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
+
+In deze les leer je hoe je lasers kunt afvuren met JavaScript! We voegen twee dingen toe aan ons spel:
+
+- **Een laser**: deze laser wordt afgevuurd vanuit het ruimteschip van de held en beweegt verticaal omhoog.
+- **Botsingsdetectie**, als onderdeel van het implementeren van de mogelijkheid om te *schieten* voegen we ook enkele leuke spelregels toe:
+   - **Laser raakt vijand**: Vijand sterft als hij wordt geraakt door een laser.
+   - **Laser raakt bovenkant scherm**: Een laser wordt vernietigd als hij de bovenkant van het scherm raakt.
+   - **Botsing tussen vijand en held**: Een vijand en de held worden vernietigd als ze elkaar raken.
+   - **Vijand raakt onderkant scherm**: Een vijand en de held worden vernietigd als de vijand de onderkant van het scherm raakt.
+
+Kortom, jij -- *de held* -- moet alle vijanden raken met een laser voordat ze de onderkant van het scherm bereiken.
+
+✅ Doe wat onderzoek naar het allereerste computerspel ooit geschreven. Wat was de functionaliteit ervan?
+
+Laten we samen heldhaftig zijn!
+
+## Botsingsdetectie
+
+Hoe doen we botsingsdetectie? We moeten onze spelobjecten zien als rechthoeken die bewegen. Waarom, vraag je je misschien af? Nou, de afbeelding die wordt gebruikt om een spelobject te tekenen is een rechthoek: het heeft een `x`, `y`, `breedte` en `hoogte`.
+
+Als twee rechthoeken, bijvoorbeeld een held en een vijand, *overlappen*, heb je een botsing. Wat er dan moet gebeuren, hangt af van de spelregels. Om botsingsdetectie te implementeren, heb je het volgende nodig:
+
+1. Een manier om een rechthoekrepresentatie van een spelobject te krijgen, zoals dit:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Een vergelijkingsfunctie, deze functie kan er als volgt uitzien:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## Hoe vernietigen we dingen
+
+Om dingen in een spel te vernietigen, moet je het spel laten weten dat het dit object niet langer moet tekenen in de spelcyclus die op een bepaald interval wordt geactiveerd. Een manier om dit te doen is door een spelobject als *dood* te markeren wanneer er iets gebeurt, zoals dit:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Vervolgens kun je *dode* objecten verwijderen voordat je het scherm opnieuw tekent, zoals dit:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## Hoe vuren we een laser af
+
+Een laser afvuren betekent reageren op een toetsgebeurtenis en een object creëren dat in een bepaalde richting beweegt. We moeten daarom de volgende stappen uitvoeren:
+
+1. **Creëer een laserobject**: vanaf de bovenkant van het ruimteschip van de held, dat bij het aanmaken omhoog begint te bewegen richting de bovenkant van het scherm.
+2. **Koppel code aan een toetsgebeurtenis**: we moeten een toets op het toetsenbord kiezen die het afvuren van de laser door de speler vertegenwoordigt.
+3. **Creëer een spelobject dat eruitziet als een laser** wanneer de toets wordt ingedrukt.
+
+## Cooldown voor onze laser
+
+De laser moet elke keer worden afgevuurd wanneer je een toets indrukt, bijvoorbeeld *spatiebalk*. Om te voorkomen dat het spel in korte tijd te veel lasers produceert, moeten we dit oplossen. De oplossing is het implementeren van een zogenaamde *cooldown*, een timer, die ervoor zorgt dat een laser slechts met een bepaalde frequentie kan worden afgevuurd. Je kunt dit als volgt implementeren:
+
+```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.
+    }
+  }
+}
+```
+
+✅ Raadpleeg les 1 in de ruimtespelserie om jezelf te herinneren aan *cooldowns*.
+
+## Wat te bouwen
+
+Je neemt de bestaande code (die je zou moeten hebben opgeschoond en gerefactord) van de vorige les en breidt deze uit. Begin met de code van deel II of gebruik de code bij [Deel III - starter](../../../../../../../../../your-work).
+
+> tip: de laser waarmee je gaat werken bevindt zich al in je assets-map en wordt door je code verwezen.
+
+- **Voeg botsingsdetectie toe**, wanneer een laser iets raakt, moeten de volgende regels gelden:
+   1. **Laser raakt vijand**: vijand sterft als hij wordt geraakt door een laser.
+   2. **Laser raakt bovenkant scherm**: Een laser wordt vernietigd als hij de bovenkant van ons scherm raakt.
+   3. **Botsing tussen vijand en held**: een vijand en de held worden vernietigd als ze elkaar raken.
+   4. **Vijand raakt onderkant scherm**: Een vijand en de held worden vernietigd als de vijand de onderkant van het scherm raakt.
+
+## Aanbevolen stappen
+
+Zoek de bestanden die voor je zijn aangemaakt in de submap `your-work`. Het zou het volgende moeten bevatten:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Start je project in de map `your_work` door het volgende in te typen:
+
+```bash
+cd your-work
+npm start
+```
+
+Hiermee wordt een HTTP-server gestart op adres `http://localhost:5000`. Open een browser en voer dat adres in, op dit moment zou het de held en alle vijanden moeten weergeven, maar er beweegt nog niets :).
+
+### Code toevoegen
+
+1. **Stel een rechthoekrepresentatie van je spelobject in om botsingen te verwerken**. De onderstaande code stelt je in staat om een rechthoekrepresentatie van een `GameObject` te krijgen. Bewerk je GameObject-klasse om dit uit te breiden:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Voeg code toe die botsingen controleert**. Dit wordt een nieuwe functie die test of twee rechthoeken elkaar overlappen:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Voeg de mogelijkheid toe om een laser af te vuren**
+   1. **Voeg een toetsgebeurtenis toe**. De *spatiebalk* moet een laser creëren net boven het ruimteschip van de held. Voeg drie constanten toe in het Messages-object:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Verwerk de spatiebalk**. Bewerk de `window.addEventListener` keyup-functie om spaties te verwerken:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Voeg luisteraars toe**. Bewerk de `initGame()`-functie om ervoor te zorgen dat de held kan schieten wanneer de spatiebalk wordt ingedrukt:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       en voeg een nieuwe `eventEmitter.on()`-functie toe om gedrag te garanderen wanneer een vijand botst met een laser:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Beweeg object**, Zorg ervoor dat de laser geleidelijk naar de bovenkant van het scherm beweegt. Je maakt een nieuwe Laser-klasse die `GameObject` uitbreidt, zoals je eerder hebt gedaan: 
+   
+      ```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. **Verwerk botsingen**, Implementeer botsingsregels voor de laser. Voeg een `updateGameObjects()`-functie toe die botsende objecten test op treffers:
+
+      ```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);
+      }  
+      ```
+
+      Zorg ervoor dat je `updateGameObjects()` toevoegt aan je spelcyclus in `window.onload`.
+
+   4. **Implementeer cooldown** voor de laser, zodat deze slechts met een bepaalde frequentie kan worden afgevuurd.
+
+      Bewerk ten slotte de Hero-klasse zodat deze een cooldown kan hebben:
+
+       ```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;
+        }
+      }
+      ```
+
+Op dit punt heeft je spel enige functionaliteit! Je kunt navigeren met je pijltjestoetsen, een laser afvuren met je spatiebalk en vijanden verdwijnen wanneer je ze raakt. Goed gedaan!
+
+---
+
+## 🚀 Uitdaging
+
+Voeg een explosie toe! Bekijk de spelassets in [de Space Art-repo](../../../../6-space-game/solution/spaceArt/readme.txt) en probeer een explosie toe te voegen wanneer de laser een alien raakt.
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
+
+## Review & Zelfstudie
+
+Experimenteer met de intervallen in je spel tot nu toe. Wat gebeurt er als je ze verandert? Lees meer over [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Opdracht
+
+[Ontdek botsingen](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/4-collision-detection/assignment.md b/translations/nl/6-space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..cf852080
--- /dev/null
+++ b/translations/nl/6-space-game/4-collision-detection/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8a0a097b45e7c75a611e2795e4013f16",
+  "translation_date": "2025-08-27T20:27:23+00:00",
+  "source_file": "6-space-game/4-collision-detection/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Verken Botsingen
+
+## Instructies
+
+Om beter te begrijpen hoe botsingen werken, bouw een heel klein spel met een paar objecten die botsen. Laat ze bewegen via toetsenbordinvoer of muisklikken, en zorg ervoor dat er iets gebeurt met een van de objecten wanneer het geraakt wordt. Het kan bijvoorbeeld een meteoriet zijn die de aarde raakt, of botsauto's. Wees creatief!
+
+## Rubric
+
+| Criteria | Uitzonderlijk                                                                                                           | Voldoende                      | Moet Verbeteren   |
+| -------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ----------------- |
+|          | Een volledig werkend codevoorbeeld wordt geproduceerd, met objecten getekend op het canvas, basisbotsingen en reacties | Code is op bepaalde punten incompleet | Code werkt niet goed |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen om nauwkeurigheid te garanderen, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/4-collision-detection/solution/README.md b/translations/nl/6-space-game/4-collision-detection/solution/README.md
new file mode 100644
index 00000000..55bb0b4b
--- /dev/null
+++ b/translations/nl/6-space-game/4-collision-detection/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:27:52+00:00",
+  "source_file": "6-space-game/4-collision-detection/solution/README.md",
+  "language_code": "nl"
+}
+-->
+Dit is een tijdelijke aanduiding, opzettelijk leeg gelaten
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/4-collision-detection/your-work/README.md b/translations/nl/6-space-game/4-collision-detection/your-work/README.md
new file mode 100644
index 00000000..1d20e45b
--- /dev/null
+++ b/translations/nl/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-27T20:27:40+00:00",
+  "source_file": "6-space-game/4-collision-detection/your-work/README.md",
+  "language_code": "nl"
+}
+-->
+Dit is een tijdelijke aanduiding, opzettelijk leeg gelaten
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/5-keeping-score/README.md b/translations/nl/6-space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..2571b773
--- /dev/null
+++ b/translations/nl/6-space-game/5-keeping-score/README.md
@@ -0,0 +1,203 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
+  "translation_date": "2025-08-27T20:21:15+00:00",
+  "source_file": "6-space-game/5-keeping-score/README.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Ruimtespel Deel 5: Score en Levens
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
+
+In deze les leer je hoe je een score toevoegt aan een spel en levens berekent.
+
+## Tekst op het scherm weergeven
+
+Om een spelscore op het scherm te tonen, moet je weten hoe je tekst op het scherm plaatst. Het antwoord is het gebruik van de `fillText()`-methode op het canvas-object. Je kunt ook andere aspecten regelen, zoals welk lettertype je gebruikt, de kleur van de tekst en zelfs de uitlijning (links, rechts, midden). Hieronder staat wat code die tekst op het scherm tekent.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Lees meer over [hoe je tekst toevoegt aan een canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), en voel je vrij om het er mooier uit te laten zien!
+
+## Leven, als spelconcept
+
+Het concept van een leven in een spel is simpelweg een getal. In de context van een ruimtespel is het gebruikelijk om een aantal levens toe te wijzen die één voor één worden afgetrokken wanneer je schip schade oploopt. Het is leuk als je dit grafisch kunt weergeven, bijvoorbeeld met mini-schepen of hartjes in plaats van een getal.
+
+## Wat gaan we bouwen
+
+Laten we het volgende aan je spel toevoegen:
+
+- **Spelscore**: Voor elk vijandelijk schip dat wordt vernietigd, moet de held punten krijgen. We stellen 100 punten per schip voor. De spelscore moet linksonder worden weergegeven.
+- **Levens**: Je schip heeft drie levens. Je verliest een leven elke keer dat een vijandelijk schip met je botst. Een levensscore moet rechtsonder worden weergegeven en bestaan uit de volgende afbeelding ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.nl.png).
+
+## Aanbevolen stappen
+
+Zoek de bestanden die voor je zijn aangemaakt in de submap `your-work`. Deze map zou het volgende moeten bevatten:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Start je project in de map `your_work` door het volgende in te typen:
+
+```bash
+cd your-work
+npm start
+```
+
+Hiermee start je een HTTP-server op het adres `http://localhost:5000`. Open een browser en voer dat adres in. Op dit moment zou het de held en alle vijanden moeten weergeven, en als je op de linker- en rechterpijltjes drukt, beweegt de held en kan hij vijanden neerschieten.
+
+### Code toevoegen
+
+1. **Kopieer de benodigde assets** van de map `solution/assets/` naar de map `your-work`; je voegt een `life.png`-asset toe. Voeg de lifeImg toe aan de window.onload-functie:
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Voeg de `lifeImg` toe aan de lijst met assets:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Voeg variabelen toe**. Voeg code toe die je totale score (0) en resterende levens (3) vertegenwoordigt, en toon deze scores op het scherm.
+
+3. **Breid de `updateGameObjects()`-functie uit**. Breid de `updateGameObjects()`-functie uit om vijandelijke botsingen af te handelen:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Voeg `life` en `points` toe**. 
+   1. **Initialiseer variabelen**. Onder `this.cooldown = 0` in de `Hero`-klasse, stel life en points in:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Teken variabelen op het scherm**. Teken deze waarden op het scherm:
+
+        ```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. **Voeg methoden toe aan de gameloop**. Zorg ervoor dat je deze functies toevoegt aan je window.onload-functie onder `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Implementeer spelregels**. Implementeer de volgende spelregels:
+
+   1. **Voor elke botsing tussen held en vijand**, trek een leven af.
+   
+      Breid de `Hero`-klasse uit om deze aftrekking te doen:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Voor elke laser die een vijand raakt**, verhoog de spelscore met 100 punten.
+
+      Breid de Hero-klasse uit om deze verhoging te doen:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Voeg deze functies toe aan je 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();
+        });
+        ```
+
+✅ Doe wat onderzoek naar andere spellen die zijn gemaakt met JavaScript/Canvas. Wat zijn hun gemeenschappelijke kenmerken?
+
+Aan het einde van dit werk zou je de kleine 'leven'-schepen rechtsonder moeten zien, punten linksonder, en je zou je levensaantal moeten zien afnemen wanneer je met vijanden botst en je punten zien toenemen wanneer je vijanden neerschiet. Goed gedaan! Je spel is bijna klaar.
+
+---
+
+## 🚀 Uitdaging
+
+Je code is bijna compleet. Kun je je volgende stappen bedenken?
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
+
+## Review & Zelfstudie
+
+Onderzoek enkele manieren waarop je spelscores en levens kunt verhogen en verlagen. Er zijn interessante game-engines zoals [PlayFab](https://playfab.com). Hoe zou het gebruik van een van deze je spel kunnen verbeteren?
+
+## Opdracht
+
+[Bouw een Scoringsspel](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/5-keeping-score/assignment.md b/translations/nl/6-space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..f4e6293d
--- /dev/null
+++ b/translations/nl/6-space-game/5-keeping-score/assignment.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "81f292dbda01685b91735e0398dc0504",
+  "translation_date": "2025-08-27T20:22:01+00:00",
+  "source_file": "6-space-game/5-keeping-score/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Score Spel
+
+## Instructies
+
+Maak een spel waarin je op een creatieve manier levens en punten weergeeft. Een suggestie is om de levens als hartjes te tonen en de punten als een groot getal in het midden onderaan het scherm. Kijk hier voor [Gratis spelbronnen](https://www.kenney.nl/)
+
+# Beoordelingscriteria
+
+| Criteria | Uitstekend             | Voldoende                  | Verbetering Nodig          |
+| -------- | ---------------------- | -------------------------- | -------------------------- |
+|          | volledig spel gepresenteerd | spel is gedeeltelijk gepresenteerd | gedeeltelijk spel bevat fouten |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/5-keeping-score/solution/README.md b/translations/nl/6-space-game/5-keeping-score/solution/README.md
new file mode 100644
index 00000000..f7c267b4
--- /dev/null
+++ b/translations/nl/6-space-game/5-keeping-score/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:22:29+00:00",
+  "source_file": "6-space-game/5-keeping-score/solution/README.md",
+  "language_code": "nl"
+}
+-->
+Dit is een tijdelijke aanduiding, opzettelijk leeg gelaten
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/5-keeping-score/your-work/README.md b/translations/nl/6-space-game/5-keeping-score/your-work/README.md
new file mode 100644
index 00000000..01e2b73f
--- /dev/null
+++ b/translations/nl/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-27T20:22:17+00:00",
+  "source_file": "6-space-game/5-keeping-score/your-work/README.md",
+  "language_code": "nl"
+}
+-->
+Dit is een tijdelijke aanduiding, opzettelijk leeg gelaten
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/6-end-condition/README.md b/translations/nl/6-space-game/6-end-condition/README.md
new file mode 100644
index 00000000..349119fb
--- /dev/null
+++ b/translations/nl/6-space-game/6-end-condition/README.md
@@ -0,0 +1,236 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "01336cddd638242e99b133614111ea40",
+  "translation_date": "2025-08-27T20:29:35+00:00",
+  "source_file": "6-space-game/6-end-condition/README.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Ruimtespel Deel 6: Einde en Herstart
+
+## Quiz voor de les
+
+[Quiz voor de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
+
+Er zijn verschillende manieren om een *eindconditie* in een spel uit te drukken. Het is aan jou als maker van het spel om te bepalen waarom het spel eindigt. Hier zijn enkele redenen, ervan uitgaande dat we het hebben over het ruimtespel dat je tot nu toe hebt gebouwd:
+
+- **`N` Vijandelijke schepen zijn vernietigd**: Het is vrij gebruikelijk dat je een spel in verschillende niveaus verdeelt en dat je `N` vijandelijke schepen moet vernietigen om een niveau te voltooien.
+- **Je schip is vernietigd**: Er zijn zeker spellen waarin je verliest als je schip wordt vernietigd. Een andere veelvoorkomende aanpak is het concept van levens. Elke keer dat je schip wordt vernietigd, verlies je een leven. Zodra alle levens verloren zijn, verlies je het spel.
+- **Je hebt `N` punten verzameld**: Een andere veelvoorkomende eindconditie is dat je punten verzamelt. Hoe je punten krijgt, is aan jou, maar het is vrij gebruikelijk om punten toe te kennen aan verschillende activiteiten, zoals het vernietigen van een vijandelijk schip of het verzamelen van items die worden *gedropt* wanneer ze worden vernietigd.
+- **Voltooi een niveau**: Dit kan verschillende voorwaarden omvatten, zoals `X` vijandelijke schepen vernietigd, `Y` punten verzameld of misschien dat een specifiek item is verzameld.
+
+## Herstarten
+
+Als mensen je spel leuk vinden, willen ze het waarschijnlijk opnieuw spelen. Zodra het spel om welke reden dan ook eindigt, moet je een optie bieden om opnieuw te starten.
+
+✅ Denk eens na over de voorwaarden waaronder een spel eindigt en hoe je wordt gevraagd om opnieuw te starten.
+
+## Wat te bouwen
+
+Je gaat deze regels aan je spel toevoegen:
+
+1. **Het spel winnen**. Zodra alle vijandelijke schepen zijn vernietigd, win je het spel. Toon daarnaast een soort overwinningsbericht.
+1. **Herstarten**. Zodra al je levens verloren zijn of het spel is gewonnen, moet je een manier bieden om het spel opnieuw te starten. Vergeet niet! Je moet het spel opnieuw initialiseren en de vorige spelstatus wissen.
+
+## Aanbevolen stappen
+
+Vind de bestanden die voor je zijn gemaakt in de submap `your-work`. Deze map zou het volgende moeten bevatten:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Start je project in de map `your_work` door het volgende in te typen:
+
+```bash
+cd your-work
+npm start
+```
+
+Hiermee wordt een HTTP-server gestart op het adres `http://localhost:5000`. Open een browser en voer dat adres in. Je spel zou in een speelbare staat moeten zijn.
+
+> tip: om waarschuwingen in Visual Studio Code te vermijden, bewerk de functie `window.onload` zodat deze `gameLoopId` aanroept zoals het is (zonder `let`), en declareer de gameLoopId bovenaan het bestand, onafhankelijk: `let gameLoopId;`
+
+### Code toevoegen
+
+1. **Eindconditie bijhouden**. Voeg code toe die het aantal vijanden bijhoudt of controleert of het heldenschip is vernietigd door deze twee functies toe te voegen:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Logica toevoegen aan berichtverwerkers**. Bewerk de `eventEmitter` om deze voorwaarden te verwerken:
+
+    ```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. **Nieuwe berichttypes toevoegen**. Voeg deze berichten toe aan het constants-object:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Herstartcode toevoegen**. Voeg code toe die het spel opnieuw start bij het indrukken van een geselecteerde knop.
+
+   1. **Luister naar toetsdruk `Enter`**. Bewerk de eventListener van je venster om naar deze toetsdruk te luisteren:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Herstartbericht toevoegen**. Voeg dit bericht toe aan je Messages constant:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Spelregels implementeren**. Implementeer de volgende spelregels:
+
+   1. **Winconditie voor speler**. Wanneer alle vijandelijke schepen zijn vernietigd, toon een overwinningsbericht.
+
+      1. Maak eerst een functie `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. Maak een functie `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. **Herstartlogica**. Wanneer alle levens verloren zijn of de speler het spel heeft gewonnen, toon dat het spel opnieuw kan worden gestart. Start het spel opnieuw wanneer de *herstart* toets wordt ingedrukt (je kunt zelf bepalen welke toets hiervoor wordt gebruikt).
+
+      1. Maak de functie `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. Voeg een oproep toe aan de `eventEmitter` om het spel opnieuw in te stellen in `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Voeg een functie `clear()` toe aan de EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Gefeliciteerd, Kapitein! Je spel is compleet! Goed gedaan! 🚀 💥 👽
+
+---
+
+## 🚀 Uitdaging
+
+Voeg een geluid toe! Kun je een geluid toevoegen om je spelervaring te verbeteren, bijvoorbeeld wanneer er een laser wordt geraakt, of wanneer de held sterft of wint? Bekijk deze [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) om te leren hoe je geluid afspeelt met JavaScript.
+
+## Quiz na de les
+
+[Quiz na de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
+
+## Review & Zelfstudie
+
+Je opdracht is om een nieuw voorbeeldspel te maken, dus verken enkele interessante spellen om te zien wat voor soort spel je zou kunnen bouwen.
+
+## Opdracht
+
+[Maak een voorbeeldspel](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/6-end-condition/assignment.md b/translations/nl/6-space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..8a28deee
--- /dev/null
+++ b/translations/nl/6-space-game/6-end-condition/assignment.md
@@ -0,0 +1,33 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
+  "translation_date": "2025-08-27T20:30:18+00:00",
+  "source_file": "6-space-game/6-end-condition/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Voorbeeldspel
+
+## Instructies
+
+Probeer een klein spel te maken waarin je oefent met verschillende eindvoorwaarden. Varieer tussen het behalen van een aantal punten, de held verliest alle levens of alle monsters worden verslagen. Bouw iets eenvoudigs zoals een console-gebaseerd avonturenspel. Gebruik de onderstaande spelverloop als inspiratie:
+
+```
+Hero> Strikes with broadsword - orc takes 3p damage
+Orc> Hits with club - hero takes 2p damage
+Hero> Kicks - orc takes 1p damage
+Game> Orc is defeated - Hero collects 2 coins
+Game> ****No more monsters, you have conquered the evil fortress****
+```
+
+## Rubric
+
+| Criteria | Uitmuntend             | Voldoende                   | Verbetering Nodig          |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | volledig spel wordt gepresenteerd | spel wordt gedeeltelijk gepresenteerd | gedeeltelijk spel bevat fouten |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/6-end-condition/solution/README.md b/translations/nl/6-space-game/6-end-condition/solution/README.md
new file mode 100644
index 00000000..76985ac5
--- /dev/null
+++ b/translations/nl/6-space-game/6-end-condition/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:30:45+00:00",
+  "source_file": "6-space-game/6-end-condition/solution/README.md",
+  "language_code": "nl"
+}
+-->
+Dit is een tijdelijke aanduiding, opzettelijk leeg gelaten
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/6-end-condition/your-work/README.md b/translations/nl/6-space-game/6-end-condition/your-work/README.md
new file mode 100644
index 00000000..e125c671
--- /dev/null
+++ b/translations/nl/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-27T20:30:33+00:00",
+  "source_file": "6-space-game/6-end-condition/your-work/README.md",
+  "language_code": "nl"
+}
+-->
+Dit is een tijdelijke aanduiding, opzettelijk leeg gelaten
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/README.md b/translations/nl/6-space-game/README.md
new file mode 100644
index 00000000..8685536a
--- /dev/null
+++ b/translations/nl/6-space-game/README.md
@@ -0,0 +1,45 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c40a698395ee5102715f7880bba3f2e7",
+  "translation_date": "2025-08-27T20:20:42+00:00",
+  "source_file": "6-space-game/README.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Ruimtespel
+
+Een ruimtespel om meer geavanceerde JavaScript-fundamenten te leren
+
+In deze les leer je hoe je je eigen ruimtespel kunt bouwen. Als je ooit het spel "Space Invaders" hebt gespeeld, heeft dit spel hetzelfde idee: een ruimteschip besturen en schieten op monsters die van boven komen. Zo ziet het voltooide spel eruit:
+
+![Voltooid spel](../../../6-space-game/images/pewpew.gif)
+
+In deze zes lessen leer je het volgende:
+
+- **Interactie** met het Canvas-element om dingen op een scherm te tekenen
+- **Begrijp** het cartesiaanse coördinatensysteem
+- **Leer** het Pub-Sub patroon om een solide spelarchitectuur te creëren die gemakkelijker te onderhouden en uit te breiden is
+- **Benut** Async/Await om spelbronnen te laden
+- **Behandel** toetsenbordgebeurtenissen
+
+## Overzicht
+
+- Theorie
+   - [Introductie tot het bouwen van spellen met JavaScript](1-introduction/README.md)
+- Praktijk
+   - [Tekenen op canvas](2-drawing-to-canvas/README.md)
+   - [Elementen over het scherm bewegen](3-moving-elements-around/README.md)
+   - [Botsingsdetectie](4-collision-detection/README.md)
+   - [Score bijhouden](5-keeping-score/README.md)
+   - [Het spel beëindigen en opnieuw starten](6-end-condition/README.md)
+
+## Credits
+
+De gebruikte assets voor dit spel komen van https://www.kenney.nl/.  
+Als je geïnteresseerd bent in het bouwen van spellen, zijn dit echt goede assets. Veel is gratis en sommige zijn betaald.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/6-space-game/solution/README.md b/translations/nl/6-space-game/solution/README.md
new file mode 100644
index 00000000..5f6eb521
--- /dev/null
+++ b/translations/nl/6-space-game/solution/README.md
@@ -0,0 +1,15 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
+  "translation_date": "2025-08-27T20:30:58+00:00",
+  "source_file": "6-space-game/solution/README.md",
+  "language_code": "nl"
+}
+-->
+Dit is een tijdelijke aanduiding, opzettelijk leeg gelaten
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/7-bank-project/1-template-route/README.md b/translations/nl/7-bank-project/1-template-route/README.md
new file mode 100644
index 00000000..d941bc19
--- /dev/null
+++ b/translations/nl/7-bank-project/1-template-route/README.md
@@ -0,0 +1,322 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
+  "translation_date": "2025-08-27T21:01:52+00:00",
+  "source_file": "7-bank-project/1-template-route/README.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Bankapp Deel 1: HTML-sjablonen en Routes in een Webapp
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
+
+### Introductie
+
+Sinds de komst van JavaScript in browsers worden websites interactiever en complexer dan ooit. Webtechnologieën worden nu vaak gebruikt om volledig functionele applicaties te maken die direct in een browser draaien, wat we [webapplicaties](https://en.wikipedia.org/wiki/Web_application) noemen. Omdat webapps zeer interactief zijn, willen gebruikers niet wachten op een volledige paginavernieuwing elke keer dat een actie wordt uitgevoerd. Daarom wordt JavaScript gebruikt om de HTML direct bij te werken via de DOM, om een soepelere gebruikerservaring te bieden.
+
+In deze les leggen we de basis om een bankwebapp te maken, waarbij we HTML-sjablonen gebruiken om meerdere schermen te creëren die kunnen worden weergegeven en bijgewerkt zonder de hele HTML-pagina te herladen.
+
+### Vereisten
+
+Je hebt een lokale webserver nodig om de webapp te testen die we in deze les gaan bouwen. Als je er geen hebt, kun je [Node.js](https://nodejs.org) installeren en het commando `npx lite-server` gebruiken vanuit je projectmap. Dit maakt een lokale webserver aan en opent je app in een browser.
+
+### Voorbereiding
+
+Maak op je computer een map genaamd `bank` met daarin een bestand genaamd `index.html`. We beginnen met deze 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-sjablonen
+
+Als je meerdere schermen voor een webpagina wilt maken, zou een oplossing zijn om een apart HTML-bestand te maken voor elk scherm dat je wilt weergeven. Deze aanpak heeft echter enkele nadelen:
+
+- Je moet de hele HTML herladen bij het wisselen van scherm, wat traag kan zijn.
+- Het is moeilijk om gegevens te delen tussen de verschillende schermen.
+
+Een andere aanpak is om slechts één HTML-bestand te hebben en meerdere [HTML-sjablonen](https://developer.mozilla.org/docs/Web/HTML/Element/template) te definiëren met behulp van het `<template>`-element. Een sjabloon is een herbruikbaar HTML-blok dat niet door de browser wordt weergegeven en dat tijdens runtime met JavaScript moet worden geïnstantieerd.
+
+### Taak
+
+We maken een bankapp met twee schermen: de inlogpagina en het dashboard. Laten we eerst in de HTML-body een tijdelijke aanduidingselement toevoegen dat we zullen gebruiken om de verschillende schermen van onze app te instantiëren:
+
+```html
+<div id="app">Loading...</div>
+```
+
+We geven het een `id` om het later gemakkelijker met JavaScript te kunnen vinden.
+
+> Tip: omdat de inhoud van dit element wordt vervangen, kunnen we een laadbericht of indicator toevoegen die wordt weergegeven terwijl de app wordt geladen.
+
+Vervolgens voegen we onderaan de HTML-sjabloon voor de inlogpagina toe. Voor nu plaatsen we daar alleen een titel en een sectie met een link die we zullen gebruiken voor de navigatie.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <a href="/dashboard">Login</a>
+  </section>
+</template>
+```
+
+Daarna voegen we een andere HTML-sjabloon toe voor de dashboardpagina. Deze pagina bevat verschillende secties:
+
+- Een header met een titel en een uitloglink
+- Het huidige saldo van de bankrekening
+- Een lijst met transacties, weergegeven in een tabel
+
+```html
+<template id="dashboard">
+  <header>
+    <h1>Bank App</h1>
+    <a href="/login">Logout</a>
+  </header>
+  <section>
+    Balance: 100$
+  </section>
+  <section>
+    <h2>Transactions</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Object</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </section>
+</template>
+```
+
+> Tip: bij het maken van HTML-sjablonen, als je wilt zien hoe het eruit zal zien, kun je de `<template>`- en `</template>`-regels uitcommentariëren door ze te omringen met `<!-- -->`.
+
+✅ Waarom denk je dat we `id`-attributen gebruiken op de sjablonen? Kunnen we iets anders gebruiken, zoals klassen?
+
+## Sjablonen weergeven met JavaScript
+
+Als je je huidige HTML-bestand in een browser probeert, zie je dat het blijft hangen op `Loading...`. Dat komt omdat we wat JavaScript-code moeten toevoegen om de HTML-sjablonen te instantiëren en weer te geven.
+
+Het instantiëren van een sjabloon gebeurt meestal in 3 stappen:
+
+1. Haal het sjabloonelement op in de DOM, bijvoorbeeld met [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
+2. Kopieer het sjabloonelement met [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
+3. Voeg het toe aan de DOM onder een zichtbaar element, bijvoorbeeld met [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+
+✅ Waarom moeten we het sjabloon klonen voordat we het aan de DOM toevoegen? Wat denk je dat er zou gebeuren als we deze stap overslaan?
+
+### Taak
+
+Maak een nieuw bestand genaamd `app.js` in je projectmap en importeer dat bestand in de `<head>`-sectie van je HTML:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Nu maken we in `app.js` een nieuwe functie genaamd `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);
+}
+```
+
+Wat we hier doen, zijn precies de 3 hierboven beschreven stappen. We instantiëren het sjabloon met de id `templateId` en plaatsen de gekloonde inhoud binnen onze app-tijdelijke aanduiding. Merk op dat we `cloneNode(true)` moeten gebruiken om de hele substructuur van het sjabloon te kopiëren.
+
+Roep nu deze functie aan met een van de sjablonen en bekijk het resultaat.
+
+```js
+updateRoute('login');
+```
+
+✅ Wat is het doel van deze code `app.innerHTML = '';`? Wat gebeurt er zonder?
+
+## Routes maken
+
+Bij een webapp noemen we *Routing* het proces waarbij **URL's** worden gekoppeld aan specifieke schermen die moeten worden weergegeven. Op een website met meerdere HTML-bestanden gebeurt dit automatisch omdat de bestandsstructuur wordt weerspiegeld in de URL. Bijvoorbeeld, met deze bestanden in je projectmap:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Als je een webserver maakt met `mywebsite` als root, zal de URL-mapping zijn:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Voor onze webapp gebruiken we echter een enkel HTML-bestand dat alle schermen bevat, dus dit standaardgedrag helpt ons niet. We moeten deze mapping handmatig maken en het weergegeven sjabloon bijwerken met JavaScript.
+
+### Taak
+
+We gebruiken een eenvoudig object om een [map](https://en.wikipedia.org/wiki/Associative_array) te implementeren tussen URL-paden en onze sjablonen. Voeg dit object toe bovenaan je `app.js`-bestand.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Laten we nu de `updateRoute`-functie een beetje aanpassen. In plaats van direct de `templateId` als argument door te geven, willen we deze ophalen door eerst naar de huidige URL te kijken en vervolgens onze map te gebruiken om de bijbehorende template-ID-waarde te krijgen. We kunnen [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) gebruiken om alleen het padgedeelte van de URL te krijgen.
+
+```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);
+}
+```
+
+Hier hebben we de routes die we hebben gedeclareerd gekoppeld aan het bijbehorende sjabloon. Je kunt testen of het correct werkt door de URL handmatig in je browser te wijzigen.
+
+✅ Wat gebeurt er als je een onbekend pad invoert in de URL? Hoe zouden we dit kunnen oplossen?
+
+## Navigatie toevoegen
+
+De volgende stap voor onze app is om de mogelijkheid toe te voegen om tussen pagina's te navigeren zonder de URL handmatig te hoeven wijzigen. Dit houdt twee dingen in:
+
+1. De huidige URL bijwerken
+2. Het weergegeven sjabloon bijwerken op basis van de nieuwe URL
+
+We hebben het tweede deel al afgehandeld met de `updateRoute`-functie, dus we moeten uitzoeken hoe we de huidige URL kunnen bijwerken.
+
+We zullen JavaScript moeten gebruiken, en meer specifiek [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), waarmee we de URL kunnen bijwerken en een nieuwe invoer in de browsegeschiedenis kunnen maken zonder de HTML te herladen.
+
+> Opmerking: Hoewel het HTML-anker-element [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) op zichzelf kan worden gebruikt om hyperlinks naar verschillende URL's te maken, zal het standaard de HTML herladen. Het is noodzakelijk om dit gedrag te voorkomen bij het afhandelen van routing met aangepaste JavaScript, door de functie `preventDefault()` te gebruiken op het klikgebeurtenis.
+
+### Taak
+
+Laten we een nieuwe functie maken die we kunnen gebruiken om in onze app te navigeren:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, path);
+  updateRoute();
+}
+```
+
+Deze methode werkt eerst de huidige URL bij op basis van het opgegeven pad en werkt vervolgens het sjabloon bij. De eigenschap `window.location.origin` retourneert de root-URL, zodat we een volledige URL kunnen reconstrueren vanuit een opgegeven pad.
+
+Nu we deze functie hebben, kunnen we het probleem aanpakken dat we hebben als een pad niet overeenkomt met een gedefinieerde route. We passen de `updateRoute`-functie aan door een fallback toe te voegen naar een van de bestaande routes als we geen overeenkomst kunnen vinden.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Als een route niet kan worden gevonden, worden we nu doorgestuurd naar de `login`-pagina.
+
+Laten we nu een functie maken om de URL te krijgen wanneer op een link wordt geklikt en om het standaardgedrag van de browserlink te voorkomen:
+
+```js
+function onLinkClick(event) {
+  event.preventDefault();
+  navigate(event.target.href);
+}
+```
+
+Laten we het navigatiesysteem voltooien door bindings toe te voegen aan onze *Login*- en *Logout*-links in de HTML.
+
+```html
+<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+...
+<a href="/login" onclick="onLinkClick(event)">Logout</a>
+```
+
+Het `event`-object hierboven legt het `click`-gebeurtenis vast en geeft het door aan onze `onLinkClick`-functie.
+
+Met behulp van het [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick)-attribuut binden we het `click`-gebeurtenis aan JavaScript-code, hier de aanroep van de `navigate()`-functie.
+
+Probeer op deze links te klikken. Je zou nu tussen de verschillende schermen van je app moeten kunnen navigeren.
+
+✅ De `history.pushState`-methode maakt deel uit van de HTML5-standaard en is geïmplementeerd in [alle moderne browsers](https://caniuse.com/?search=pushState). Als je een webapp bouwt voor oudere browsers, is er een truc die je kunt gebruiken in plaats van deze API: door een [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) voor het pad te gebruiken, kun je routing implementeren die werkt met reguliere anker-navigatie en de pagina niet herlaadt, omdat het bedoeld was om interne links binnen een pagina te maken.
+
+## Omgaan met de terug- en vooruitknoppen van de browser
+
+Het gebruik van `history.pushState` maakt nieuwe invoeren in de navigatiegeschiedenis van de browser. Je kunt dat controleren door de *terugknop* van je browser ingedrukt te houden. Het zou iets moeten weergeven zoals dit:
+
+![Screenshot van navigatiegeschiedenis](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.nl.png)
+
+Als je een paar keer op de terugknop klikt, zie je dat de huidige URL verandert en de geschiedenis wordt bijgewerkt, maar hetzelfde sjabloon blijft weergegeven.
+
+Dat komt omdat de applicatie niet weet dat we `updateRoute()` moeten aanroepen elke keer dat de geschiedenis verandert. Als je kijkt naar de [`history.pushState`-documentatie](https://developer.mozilla.org/docs/Web/API/History/pushState), zie je dat als de status verandert - wat betekent dat we naar een andere URL zijn gegaan - het [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event)-gebeurtenis wordt geactiveerd. We zullen dat gebruiken om dit probleem op te lossen.
+
+### Taak
+
+Om ervoor te zorgen dat het weergegeven sjabloon wordt bijgewerkt wanneer de browsegeschiedenis verandert, voegen we een nieuwe functie toe die `updateRoute()` aanroept. We doen dat onderaan ons `app.js`-bestand:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Opmerking: we hebben hier een [pijlfunctie](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) gebruikt om onze `popstate`-eventhandler te declareren voor beknoptheid, maar een reguliere functie zou hetzelfde werken.
+
+Hier is een opfrisvideo over pijlfuncties:
+
+[![Pijlfuncties](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Pijlfuncties")
+
+> 🎥 Klik op de afbeelding hierboven voor een video over pijlfuncties.
+
+Probeer nu de terug- en vooruitknoppen van je browser te gebruiken en controleer of de weergegeven route deze keer correct wordt bijgewerkt.
+
+---
+
+## 🚀 Uitdaging
+
+Voeg een nieuw sjabloon en een route toe voor een derde pagina die de credits voor deze app toont.
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
+
+## Review & Zelfstudie
+
+Routing is een van de verrassend lastige onderdelen van webontwikkeling, vooral nu het web verschuift van paginavernieuwingen naar Single Page Application-paginavernieuwingen. Lees wat meer over [hoe de Azure Static Web App-service](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) omgaat met routing. Kun je uitleggen waarom sommige van de beslissingen die in dat document worden beschreven noodzakelijk zijn?
+
+## Opdracht
+
+[Verbeter de routing](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/7-bank-project/1-template-route/assignment.md b/translations/nl/7-bank-project/1-template-route/assignment.md
new file mode 100644
index 00000000..18f6725d
--- /dev/null
+++ b/translations/nl/7-bank-project/1-template-route/assignment.md
@@ -0,0 +1,28 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "8223e429218befa731dd5bfd22299520",
+  "translation_date": "2025-08-27T21:03:29+00:00",
+  "source_file": "7-bank-project/1-template-route/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Verbeter de routing
+
+## Instructies
+
+De routeverklaring bevat momenteel alleen de template-ID die gebruikt moet worden. Maar bij het weergeven van een nieuwe pagina is soms wat meer nodig. Laten we onze routingimplementatie verbeteren met twee extra functies:
+
+- Geef titels aan elke template en werk de titel van het venster bij met deze nieuwe titel wanneer de template verandert.
+- Voeg een optie toe om wat code uit te voeren nadat de template verandert. We willen `'Dashboard is shown'` afdrukken in de ontwikkelaarsconsole elke keer dat de dashboardpagina wordt weergegeven.
+
+## Rubric
+
+| Criteria | Uitmuntend                                                                                                                         | Voldoende                                                                                                                                                                                 | Verbetering Nodig                                      |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+|          | De twee functies zijn geïmplementeerd en werken. Titel en code-uitvoering werken ook voor een nieuwe route die is toegevoegd in de `routes`-verklaring. | De twee functies werken, maar het gedrag is hardcoded en niet configureerbaar via de `routes`-verklaring. Het toevoegen van een derde route met titel en code-uitvoering werkt niet of werkt gedeeltelijk. | Eén van de functies ontbreekt of werkt niet goed.     |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/7-bank-project/2-forms/README.md b/translations/nl/7-bank-project/2-forms/README.md
new file mode 100644
index 00000000..82f94c4c
--- /dev/null
+++ b/translations/nl/7-bank-project/2-forms/README.md
@@ -0,0 +1,312 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
+  "translation_date": "2025-08-27T20:56:29+00:00",
+  "source_file": "7-bank-project/2-forms/README.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Bankapp Deel 2: Maak een Login- en Registratieformulier
+
+## Quiz voorafgaand aan de les
+
+[Quiz voorafgaand aan de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
+
+### Introductie
+
+In bijna alle moderne webapps kun je een account aanmaken om je eigen privéruimte te hebben. Omdat meerdere gebruikers tegelijkertijd toegang kunnen hebben tot een webapp, heb je een mechanisme nodig om de persoonlijke gegevens van elke gebruiker afzonderlijk op te slaan en te bepalen welke informatie wordt weergegeven. We zullen niet behandelen hoe je [gebruikersidentiteit veilig beheert](https://en.wikipedia.org/wiki/Authentication), omdat dit een uitgebreid onderwerp op zich is, maar we zorgen ervoor dat elke gebruiker één (of meer) bankrekeningen kan aanmaken in onze app.
+
+In dit deel gebruiken we HTML-formulieren om login en registratie toe te voegen aan onze webapp. We zullen zien hoe we gegevens programmatisch naar een server-API kunnen sturen en uiteindelijk hoe we basisvalidatieregels voor gebruikersinvoer kunnen definiëren.
+
+### Vereisten
+
+Je moet het onderdeel [HTML-sjablonen en routing](../1-template-route/README.md) van de webapp hebben voltooid voor deze les. Je moet ook [Node.js](https://nodejs.org) installeren en de [server-API](../api/README.md) lokaal uitvoeren, zodat je gegevens kunt verzenden om accounts aan te maken.
+
+**Let op**
+Je hebt twee terminals nodig die tegelijkertijd draaien, zoals hieronder vermeld:
+1. Voor de hoofd-bankapp die we hebben gebouwd in de les [HTML-sjablonen en routing](../1-template-route/README.md)
+2. Voor de [Bankapp-server-API](../api/README.md) die we zojuist hebben opgezet.
+
+Je moet beide servers draaiende hebben om de rest van de les te kunnen volgen. Ze luisteren op verschillende poorten (poort `3000` en poort `5000`), dus alles zou goed moeten werken.
+
+Je kunt testen of de server correct draait door dit commando in een terminal uit te voeren:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Formulier en besturingselementen
+
+Het `<form>`-element omvat een sectie van een HTML-document waarin de gebruiker gegevens kan invoeren en indienen met interactieve besturingselementen. Er zijn allerlei soorten gebruikersinterface (UI)-besturingselementen die binnen een formulier kunnen worden gebruikt, waarvan de meest voorkomende de `<input>`- en `<button>`-elementen zijn.
+
+Er zijn veel verschillende [typen](https://developer.mozilla.org/docs/Web/HTML/Element/input) `<input>`. Om bijvoorbeeld een veld te maken waarin de gebruiker zijn gebruikersnaam kan invoeren, kun je dit gebruiken:
+
+```html
+<input id="username" name="username" type="text">
+```
+
+Het `name`-attribuut wordt gebruikt als de eigenschapsnaam wanneer de formuliergegevens worden verzonden. Het `id`-attribuut wordt gebruikt om een `<label>` te koppelen aan het formulierbesturingselement.
+
+> Bekijk de volledige lijst van [`<input>`-typen](https://developer.mozilla.org/docs/Web/HTML/Element/input) en [andere formulierbesturingselementen](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) om een idee te krijgen van alle native UI-elementen die je kunt gebruiken bij het bouwen van je UI.
+
+✅ Merk op dat `<input>` een [leeg element](https://developer.mozilla.org/docs/Glossary/Empty_element) is waarop je *geen* bijbehorend sluitend tag moet toevoegen. Je kunt echter de zelfsluitende `<input/>`-notatie gebruiken, maar dit is niet verplicht.
+
+Het `<button>`-element binnen een formulier is een beetje speciaal. Als je het `type`-attribuut niet specificeert, zal het automatisch de formuliergegevens naar de server verzenden wanneer erop wordt gedrukt. Hier zijn de mogelijke `type`-waarden:
+
+- `submit`: De standaardwaarde binnen een `<form>`, de knop activeert de formulierverzendactie.
+- `reset`: De knop reset alle formulierbesturingselementen naar hun oorspronkelijke waarden.
+- `button`: Wijs geen standaardgedrag toe wanneer op de knop wordt gedrukt. Je kunt er vervolgens aangepaste acties aan toewijzen met JavaScript.
+
+### Taak
+
+Laten we beginnen met het toevoegen van een formulier aan de `login`-sjabloon. We hebben een veld voor *gebruikersnaam* en een *Login*-knop nodig.
+
+```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>
+```
+
+Als je goed kijkt, zie je dat we hier ook een `<label>`-element hebben toegevoegd. `<label>`-elementen worden gebruikt om een naam toe te voegen aan UI-besturingselementen, zoals ons gebruikersnaamveld. Labels zijn belangrijk voor de leesbaarheid van je formulieren, maar bieden ook extra voordelen:
+
+- Door een label te koppelen aan een formulierbesturingselement, helpt het gebruikers die gebruik maken van hulpmiddelen (zoals een schermlezer) te begrijpen welke gegevens ze moeten invoeren.
+- Je kunt op het label klikken om direct de focus op het gekoppelde invoerveld te plaatsen, wat het gemakkelijker maakt om te gebruiken op apparaten met een touchscreen.
+
+> [Toegankelijkheid](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) op het web is een zeer belangrijk onderwerp dat vaak over het hoofd wordt gezien. Dankzij [semantische HTML-elementen](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) is het niet moeilijk om toegankelijke inhoud te maken als je ze correct gebruikt. Je kunt [meer lezen over toegankelijkheid](https://developer.mozilla.org/docs/Web/Accessibility) om veelgemaakte fouten te vermijden en een verantwoordelijke ontwikkelaar te worden.
+
+Nu voegen we een tweede formulier toe voor de registratie, direct onder het vorige:
+
+```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>
+```
+
+Met het `value`-attribuut kunnen we een standaardwaarde definiëren voor een bepaald invoerveld. Merk ook op dat het invoerveld voor `balance` het type `number` heeft. Ziet het er anders uit dan de andere invoervelden? Probeer ermee te werken.
+
+✅ Kun je navigeren en werken met de formulieren met alleen een toetsenbord? Hoe zou je dat doen?
+
+## Gegevens naar de server verzenden
+
+Nu we een functionele UI hebben, is de volgende stap om de gegevens naar onze server te sturen. Laten we een snelle test doen met onze huidige code: wat gebeurt er als je op de *Login*- of *Register*-knop klikt?
+
+Merkte je de verandering in de URL-sectie van je browser op?
+
+![Screenshot van de URL-verandering in de browser na het klikken op de knop Register](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.nl.png)
+
+De standaardactie voor een `<form>` is om het formulier naar de huidige server-URL te verzenden met behulp van de [GET-methode](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), waarbij de formuliergegevens direct aan de URL worden toegevoegd. Deze methode heeft echter enkele nadelen:
+
+- De verzonden gegevens zijn zeer beperkt in grootte (ongeveer 2000 tekens).
+- De gegevens zijn direct zichtbaar in de URL (niet ideaal voor wachtwoorden).
+- Het werkt niet met het uploaden van bestanden.
+
+Daarom kun je het wijzigen om de [POST-methode](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) te gebruiken, die de formuliergegevens naar de server verzendt in de body van het HTTP-verzoek, zonder de eerder genoemde beperkingen.
+
+> Hoewel POST de meest gebruikte methode is om gegevens te verzenden, is het [in sommige specifieke scenario's](https://www.w3.org/2001/tag/doc/whenToUseGet.html) beter om de GET-methode te gebruiken, bijvoorbeeld bij het implementeren van een zoekveld.
+
+### Taak
+
+Voeg `action`- en `method`-eigenschappen toe aan het registratieformulier:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Probeer nu een nieuw account te registreren met je naam. Na het klikken op de *Register*-knop zou je iets als dit moeten zien:
+
+![Een browservenster op het adres localhost:5000/api/accounts, met een JSON-string met gebruikersgegevens](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.nl.png)
+
+Als alles goed gaat, zou de server je verzoek moeten beantwoorden met een [JSON](https://www.json.org/json-en.html)-antwoord dat de aangemaakte accountgegevens bevat.
+
+✅ Probeer opnieuw te registreren met dezelfde naam. Wat gebeurt er?
+
+## Gegevens verzenden zonder de pagina te herladen
+
+Zoals je waarschijnlijk hebt gemerkt, is er een klein probleem met de aanpak die we zojuist hebben gebruikt: bij het indienen van het formulier verlaten we onze app en wordt de browser doorgestuurd naar de server-URL. We proberen alle paginareloads te vermijden met onze webapp, omdat we een [Single-page application (SPA)](https://en.wikipedia.org/wiki/Single-page_application) maken.
+
+Om de formuliergegevens naar de server te sturen zonder een paginareload af te dwingen, moeten we JavaScript gebruiken. In plaats van een URL in de `action`-eigenschap van een `<form>`-element te plaatsen, kun je elke JavaScript-code gebruiken voorafgegaan door de string `javascript:` om een aangepaste actie uit te voeren. Dit betekent ook dat je enkele taken moet implementeren die eerder automatisch door de browser werden uitgevoerd:
+
+- De formuliergegevens ophalen.
+- De formuliergegevens converteren en coderen naar een geschikt formaat.
+- Het HTTP-verzoek maken en naar de server sturen.
+
+### Taak
+
+Vervang de `action` van het registratieformulier door:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Open `app.js` en voeg een nieuwe functie toe genaamd `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Hier halen we het formulier-element op met behulp van `getElementById()` en gebruiken we de [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData)-helper om de waarden uit formulierbesturingselementen te halen als een set sleutel/waarde-paren. Vervolgens converteren we de gegevens naar een regulier object met [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) en serialiseren we de gegevens uiteindelijk naar [JSON](https://www.json.org/json-en.html), een formaat dat vaak wordt gebruikt voor gegevensuitwisseling op het web.
+
+De gegevens zijn nu klaar om naar de server te worden verzonden. Maak een nieuwe functie genaamd `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' };
+  }
+}
+```
+
+Wat doet deze functie? Merk eerst het `async`-trefwoord op. Dit betekent dat de functie code bevat die [**asynchroon**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) wordt uitgevoerd. Wanneer het samen met het `await`-trefwoord wordt gebruikt, kun je wachten tot asynchrone code wordt uitgevoerd - zoals wachten op de serverreactie hier - voordat je verdergaat.
+
+Hier is een korte video over het gebruik van `async/await`:
+
+[![Async en Await voor het beheren van promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async en Await voor het beheren van promises")
+
+> 🎥 Klik op de afbeelding hierboven voor een video over async/await.
+
+We gebruiken de `fetch()`-API om JSON-gegevens naar de server te sturen. Deze methode neemt 2 parameters:
+
+- De URL van de server, dus we plaatsen hier `//localhost:5000/api/accounts`.
+- De instellingen van het verzoek. Hier stellen we de methode in op `POST` en geven we de `body` van het verzoek op. Omdat we JSON-gegevens naar de server sturen, moeten we ook de `Content-Type`-header instellen op `application/json`, zodat de server weet hoe de inhoud moet worden geïnterpreteerd.
+
+Omdat de server zal reageren op het verzoek met JSON, kunnen we `await response.json()` gebruiken om de JSON-inhoud te parseren en het resulterende object terug te geven. Merk op dat deze methode asynchroon is, dus we gebruiken hier het `await`-trefwoord voordat we verdergaan om ervoor te zorgen dat eventuele fouten tijdens het parseren ook worden opgevangen.
+
+Voeg nu wat code toe aan de `register`-functie om `createAccount()` aan te roepen:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Omdat we hier het `await`-trefwoord gebruiken, moeten we het `async`-trefwoord toevoegen vóór de registerfunctie:
+
+```js
+async function register() {
+```
+
+Tot slot voegen we wat logs toe om het resultaat te controleren. De uiteindelijke functie zou er zo uit moeten zien:
+
+```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);
+}
+```
+
+Dat was een beetje lang, maar we zijn er! Als je de [ontwikkelaarstools van je browser](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) opent en probeert een nieuw account te registreren, zou je geen verandering op de webpagina moeten zien, maar er verschijnt een bericht in de console dat bevestigt dat alles werkt.
+
+![Screenshot met logbericht in de browserconsole](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.nl.png)
+
+✅ Denk je dat de gegevens veilig naar de server worden verzonden? Wat als iemand het verzoek zou kunnen onderscheppen? Je kunt meer lezen over [HTTPS](https://en.wikipedia.org/wiki/HTTPS) om meer te weten te komen over veilige gegevenscommunicatie.
+
+## Gegevensvalidatie
+
+Als je probeert een nieuw account te registreren zonder eerst een gebruikersnaam in te stellen, zie je dat de server een fout retourneert met statuscode [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Voordat je gegevens naar een server stuurt, is het een goede gewoonte om [de formuliergegevens te valideren](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) wanneer mogelijk, om ervoor te zorgen dat je een geldig verzoek verzendt. HTML5-formulierbesturingselementen bieden ingebouwde validatie met behulp van verschillende attributen:
+
+- `required`: het veld moet worden ingevuld, anders kan het formulier niet worden verzonden.
+- `minlength` en `maxlength`: definieert het minimum- en maximumaantal tekens in tekstvelden.
+- `min` en `max`: definieert de minimum- en maximumwaarde van een numeriek veld.
+- `type`: definieert het soort gegevens dat wordt verwacht, zoals `number`, `email`, `file` of [andere ingebouwde typen](https://developer.mozilla.org/docs/Web/HTML/Element/input). Dit attribuut kan ook de visuele weergave van het formulierbesturingselement veranderen.
+- `pattern`: stelt je in staat om een [regular expression](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions)-patroon te definiëren om te testen of de ingevoerde gegevens geldig zijn of niet.
+> Tip: je kunt de uitstraling van je formulierbesturingselementen aanpassen afhankelijk van of ze geldig of ongeldig zijn door gebruik te maken van de CSS-pseudoklassen `:valid` en `:invalid`.
+### Taak
+
+Er zijn 2 verplichte velden nodig om een geldig nieuw account aan te maken: de gebruikersnaam en valuta. De andere velden zijn optioneel. Werk de HTML van het formulier bij door zowel het `required` attribuut als tekst in het label van het veld toe te voegen zodat:
+
+```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>
+```
+
+Hoewel deze specifieke serverimplementatie geen specifieke limieten afdwingt op de maximale lengte van de velden, is het altijd een goede gewoonte om redelijke limieten te definiëren voor tekstinvoer door gebruikers.
+
+Voeg een `maxlength` attribuut toe aan de tekstvelden:
+
+```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">
+```
+
+Als je nu op de knop *Registreren* drukt en een veld voldoet niet aan een validatieregel die we hebben gedefinieerd, zou je iets zoals dit moeten zien:
+
+![Screenshot die de validatiefout toont bij het proberen te verzenden van het formulier](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.nl.png)
+
+Validatie zoals deze, die wordt uitgevoerd *voordat* gegevens naar de server worden verzonden, wordt **client-side** validatie genoemd. Maar let op dat het niet altijd mogelijk is om alle controles uit te voeren zonder de gegevens te verzenden. Bijvoorbeeld, we kunnen hier niet controleren of er al een account bestaat met dezelfde gebruikersnaam zonder een verzoek naar de server te sturen. Extra validatie die op de server wordt uitgevoerd, wordt **server-side** validatie genoemd.
+
+Meestal moeten beide worden geïmplementeerd, en hoewel het gebruik van client-side validatie de gebruikerservaring verbetert door directe feedback te geven, is server-side validatie cruciaal om ervoor te zorgen dat de gebruikersgegevens die je verwerkt betrouwbaar en veilig zijn.
+
+---
+
+## 🚀 Uitdaging
+
+Toon een foutmelding in de HTML als de gebruiker al bestaat.
+
+Hier is een voorbeeld van hoe de uiteindelijke inlogpagina eruit kan zien na wat styling:
+
+![Screenshot van de inlogpagina na het toevoegen van CSS-stijlen](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.nl.png)
+
+## Quiz na de les
+
+[Quiz na de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
+
+## Review & Zelfstudie
+
+Ontwikkelaars zijn erg creatief geworden in hun inspanningen om formulieren te bouwen, vooral wat betreft validatiestrategieën. Leer meer over verschillende formulierstromen door te kijken op [CodePen](https://codepen.com); kun je interessante en inspirerende formulieren vinden?
+
+## Opdracht
+
+[Style je bankapp](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/7-bank-project/2-forms/assignment.md b/translations/nl/7-bank-project/2-forms/assignment.md
new file mode 100644
index 00000000..35c76de4
--- /dev/null
+++ b/translations/nl/7-bank-project/2-forms/assignment.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "474f3ab1ee755ca980fc9104a0316e17",
+  "translation_date": "2025-08-27T20:58:03+00:00",
+  "source_file": "7-bank-project/2-forms/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Style je bankapp
+
+## Instructies
+
+Maak een nieuw bestand genaamd `styles.css` en voeg een link naar dit bestand toe in je huidige `index.html` bestand. Voeg in het CSS-bestand dat je zojuist hebt gemaakt wat styling toe om de *Login*- en *Dashboard*-pagina er netjes en overzichtelijk uit te laten zien. Probeer een kleurenthema te creëren om je app een eigen uitstraling te geven.
+
+> Tip: je kunt de HTML aanpassen en nieuwe elementen en klassen toevoegen indien nodig.
+
+## Rubriek
+
+| Criteria | Uitmuntend                                                                                                              | Voldoende                                                                      | Verbetering Nodig                                                                             |
+| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+|          | Alle pagina's zien er schoon en leesbaar uit, met een consistent kleurenthema en duidelijk onderscheidende secties.     | Pagina's zijn gestyled, maar zonder thema of met secties die niet duidelijk afgebakend zijn. | Pagina's missen styling, de secties zien er rommelig uit en de informatie is moeilijk te lezen. |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/7-bank-project/3-data/README.md b/translations/nl/7-bank-project/3-data/README.md
new file mode 100644
index 00000000..08a489ba
--- /dev/null
+++ b/translations/nl/7-bank-project/3-data/README.md
@@ -0,0 +1,347 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
+  "translation_date": "2025-08-27T20:59:09+00:00",
+  "source_file": "7-bank-project/3-data/README.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Bankapp Deel 3: Methoden voor het Ophalen en Gebruiken van Gegevens
+
+## Pre-Les Quiz
+
+[Pre-les quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
+
+### Introductie
+
+Aan de kern van elke webapplicatie staat *data*. Data kan vele vormen aannemen, maar het hoofddoel is altijd om informatie aan de gebruiker te tonen. Met webapps die steeds interactiever en complexer worden, is hoe de gebruiker toegang krijgt tot en interactie heeft met informatie een belangrijk onderdeel van webontwikkeling.
+
+In deze les gaan we bekijken hoe we gegevens asynchroon van een server kunnen ophalen en deze gegevens kunnen gebruiken om informatie op een webpagina weer te geven zonder de HTML opnieuw te laden.
+
+### Vereisten
+
+Je moet het [Login- en Registratieformulier](../2-forms/README.md) van de webapp hebben gebouwd voor deze les. Je moet ook [Node.js](https://nodejs.org) installeren en [de server-API](../api/README.md) lokaal uitvoeren om toegang te krijgen tot accountgegevens.
+
+Je kunt testen of de server correct werkt door dit commando in een terminal uit te voeren:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX en gegevens ophalen
+
+Traditionele websites werken de weergegeven inhoud bij wanneer de gebruiker een link selecteert of gegevens indient via een formulier, door de volledige HTML-pagina opnieuw te laden. Elke keer dat nieuwe gegevens moeten worden geladen, retourneert de webserver een volledig nieuwe HTML-pagina die door de browser moet worden verwerkt, wat de huidige gebruikersactie onderbreekt en interacties tijdens het herladen beperkt. Deze workflow wordt ook wel een *Multi-Page Application* of *MPA* genoemd.
+
+![Update workflow in een multi-page application](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.nl.png)
+
+Toen webapplicaties complexer en interactiever begonnen te worden, ontstond een nieuwe techniek genaamd [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)). Deze techniek stelt webapps in staat om gegevens asynchroon van een server te verzenden en op te halen met JavaScript, zonder de HTML-pagina opnieuw te laden, wat resulteert in snellere updates en soepelere gebruikersinteracties. Wanneer nieuwe gegevens van de server worden ontvangen, kan de huidige HTML-pagina ook worden bijgewerkt met JavaScript via de [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API. In de loop van de tijd is deze aanpak geëvolueerd tot wat nu een [*Single-Page Application* of *SPA*](https://en.wikipedia.org/wiki/Single-page_application) wordt genoemd.
+
+![Update workflow in een single-page application](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.nl.png)
+
+Toen AJAX voor het eerst werd geïntroduceerd, was de enige beschikbare API om gegevens asynchroon op te halen [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Maar moderne browsers implementeren nu ook de meer handige en krachtige [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), die gebruikmaakt van promises en beter geschikt is voor het manipuleren van JSON-gegevens.
+
+> Hoewel alle moderne browsers de `Fetch API` ondersteunen, is het altijd een goed idee om de [compatibiliteitstabel op caniuse.com](https://caniuse.com/fetch) te controleren als je wilt dat je webapplicatie werkt op oudere browsers.
+
+### Taak
+
+In [de vorige les](../2-forms/README.md) hebben we het registratieformulier geïmplementeerd om een account aan te maken. We gaan nu code toevoegen om in te loggen met een bestaand account en de gegevens op te halen. Open het bestand `app.js` en voeg een nieuwe `login`-functie toe:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Hier beginnen we met het ophalen van het formulier-element met `getElementById()`, en vervolgens halen we de gebruikersnaam op uit de invoer met `loginForm.user.value`. Elk formuliercontrole-element kan worden benaderd via zijn naam (ingesteld in de HTML met het `name`-attribuut) als een eigenschap van het formulier.
+
+Net zoals we deden voor de registratie, maken we een andere functie om een serververzoek uit te voeren, maar deze keer om de accountgegevens op te halen:
+
+```js
+async function getAccount(user) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+We gebruiken de `fetch` API om de gegevens asynchroon van de server op te halen, maar deze keer hebben we geen extra parameters nodig behalve de URL die we willen aanroepen, omdat we alleen gegevens opvragen. Standaard maakt `fetch` een [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP-verzoek, wat precies is wat we hier nodig hebben.
+
+✅ `encodeURIComponent()` is een functie die speciale tekens voor een URL ontsnapt. Welke problemen zouden we kunnen tegenkomen als we deze functie niet aanroepen en de `user`-waarde direct in de URL gebruiken?
+
+Laten we nu onze `login`-functie bijwerken om `getAccount` te gebruiken:
+
+```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');
+}
+```
+
+Omdat `getAccount` een asynchrone functie is, moeten we deze combineren met het `await`-keyword om te wachten op het serverresultaat. Zoals bij elk serververzoek, moeten we ook omgaan met foutgevallen. Voor nu voegen we alleen een logbericht toe om de fout weer te geven en komen we hier later op terug.
+
+Vervolgens moeten we de gegevens ergens opslaan zodat we ze later kunnen gebruiken om de dashboardinformatie weer te geven. Omdat de `account`-variabele nog niet bestaat, maken we een globale variabele bovenaan ons bestand:
+
+```js
+let account = null;
+```
+
+Nadat de gebruikersgegevens in een variabele zijn opgeslagen, kunnen we van de *login*-pagina naar het *dashboard* navigeren met behulp van de `navigate()`-functie die we al hebben.
+
+Ten slotte moeten we onze `login`-functie aanroepen wanneer het loginformulier wordt ingediend, door de HTML te wijzigen:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Test of alles correct werkt door een nieuw account te registreren en te proberen in te loggen met hetzelfde account.
+
+Voordat we verder gaan met het volgende deel, kunnen we ook de `register`-functie voltooien door dit aan het einde van de functie toe te voegen:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Wist je dat je standaard alleen server-API's kunt aanroepen vanaf hetzelfde domein en dezelfde poort als de webpagina die je bekijkt? Dit is een beveiligingsmechanisme dat door browsers wordt afgedwongen. Maar wacht, onze webapp draait op `localhost:3000` terwijl de server-API draait op `localhost:5000`, waarom werkt het dan? Door gebruik te maken van een techniek genaamd [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), is het mogelijk om cross-origin HTTP-verzoeken uit te voeren als de server speciale headers toevoegt aan de respons, waardoor uitzonderingen voor specifieke domeinen worden toegestaan.
+
+> Leer meer over API's door deze [les](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) te volgen.
+
+## HTML bijwerken om gegevens weer te geven
+
+Nu we de gebruikersgegevens hebben, moeten we de bestaande HTML bijwerken om deze weer te geven. We weten al hoe we een element uit de DOM kunnen ophalen, bijvoorbeeld met `document.getElementById()`. Nadat je een basiselement hebt, zijn hier enkele API's die je kunt gebruiken om het te wijzigen of kindelementen toe te voegen:
+
+- Met de [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent)-eigenschap kun je de tekst van een element wijzigen. Merk op dat het wijzigen van deze waarde alle kinderen van het element (indien aanwezig) verwijdert en vervangt door de opgegeven tekst. Het is dus ook een efficiënte methode om alle kinderen van een gegeven element te verwijderen door een lege string `''` toe te wijzen.
+
+- Met [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) in combinatie met de [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append)-methode kun je een of meer nieuwe kindelementen maken en toevoegen.
+
+✅ Met de [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML)-eigenschap van een element is het ook mogelijk om de HTML-inhoud te wijzigen, maar deze moet worden vermeden omdat het kwetsbaar is voor [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting)-aanvallen.
+
+### Taak
+
+Voordat we verder gaan met het dashboard-scherm, moeten we nog iets doen op de *login*-pagina. Momenteel, als je probeert in te loggen met een gebruikersnaam die niet bestaat, wordt er een bericht weergegeven in de console, maar voor een normale gebruiker verandert er niets en weet je niet wat er aan de hand is.
+
+Laten we een placeholder-element toevoegen in het loginformulier waar we indien nodig een foutmelding kunnen weergeven. Een goede plek zou net voor de login-`<button>` zijn:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+Dit `<div>`-element is leeg, wat betekent dat er niets op het scherm wordt weergegeven totdat we er inhoud aan toevoegen. We geven het ook een `id` zodat we het gemakkelijk kunnen ophalen met JavaScript.
+
+Ga terug naar het bestand `app.js` en maak een nieuwe hulpfunctie `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+Deze functie is vrij eenvoudig: gegeven een element-*id* en *tekst*, zal het de tekstinhoud van het DOM-element met de bijbehorende `id` bijwerken. Laten we deze methode gebruiken in plaats van het vorige foutbericht in de `login`-functie:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Nu, als je probeert in te loggen met een ongeldig account, zou je iets moeten zien zoals dit:
+
+![Screenshot met de foutmelding weergegeven tijdens het inloggen](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.nl.png)
+
+Nu hebben we fouttekst die visueel wordt weergegeven, maar als je het probeert met een schermlezer, zul je merken dat er niets wordt aangekondigd. Om ervoor te zorgen dat tekst die dynamisch aan een pagina wordt toegevoegd wordt aangekondigd door schermlezers, moet het gebruik maken van iets dat een [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) wordt genoemd. Hier gaan we een specifiek type live region gebruiken, genaamd een alert:
+
+```html
+<div id="loginError" role="alert"></div>
+```
+
+Implementeer hetzelfde gedrag voor de fouten in de `register`-functie (vergeet niet de HTML bij te werken).
+
+## Informatie weergeven op het dashboard
+
+Met dezelfde technieken die we zojuist hebben gezien, gaan we ook de accountinformatie weergeven op de dashboardpagina.
+
+Dit is hoe een accountobject dat van de server wordt ontvangen eruitziet:
+
+```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 }
+  ],
+}
+```
+
+> Opmerking: om het je gemakkelijker te maken, kun je het vooraf bestaande `test`-account gebruiken dat al is gevuld met gegevens.
+
+### Taak
+
+Laten we beginnen met het vervangen van de "Balance"-sectie in de HTML om placeholder-elementen toe te voegen:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+We voegen ook een nieuwe sectie toe net eronder om de accountbeschrijving weer te geven:
+
+```html
+<h2 id="description"></h2>
+```
+
+✅ Omdat de accountbeschrijving functioneert als een titel voor de inhoud eronder, is deze semantisch gemarkeerd als een heading. Leer meer over hoe [heading-structuur](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) belangrijk is voor toegankelijkheid, en bekijk de pagina kritisch om te bepalen wat nog meer een heading zou kunnen zijn.
+
+Vervolgens maken we een nieuwe functie in `app.js` om de placeholder in te vullen:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+Eerst controleren we of we de benodigde accountgegevens hebben voordat we verder gaan. Vervolgens gebruiken we de `updateElement()`-functie die we eerder hebben gemaakt om de HTML bij te werken.
+
+> Om de balansweergave mooier te maken, gebruiken we de methode [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) om de waarde met 2 cijfers na de komma weer te geven.
+
+Nu moeten we onze `updateDashboard()`-functie aanroepen elke keer dat het dashboard wordt geladen. Als je de [les 1 opdracht](../1-template-route/assignment.md) al hebt voltooid, zou dit eenvoudig moeten zijn, anders kun je de volgende implementatie gebruiken.
+
+Voeg deze code toe aan het einde van de `updateRoute()`-functie:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+En werk de route-definitie bij met:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+Met deze wijziging wordt de functie `updateDashboard()` elke keer dat de dashboardpagina wordt weergegeven, aangeroepen. Na een login zou je dan de accountbalans, valuta en beschrijving moeten kunnen zien.
+
+## Tabelrijen dynamisch maken met HTML-sjablonen
+
+In de [eerste les](../1-template-route/README.md) hebben we HTML-sjablonen gebruikt in combinatie met de [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild)-methode om de navigatie in onze app te implementeren. Sjablonen kunnen ook kleiner zijn en worden gebruikt om herhalende delen van een pagina dynamisch in te vullen.
+
+We gaan een vergelijkbare aanpak gebruiken om de lijst met transacties in de HTML-tabel weer te geven.
+
+### Taak
+
+Voeg een nieuwe sjabloon toe in de HTML `<body>`:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+Deze sjabloon vertegenwoordigt een enkele tabelrij, met de 3 kolommen die we willen invullen: *datum*, *object* en *bedrag* van een transactie.
+
+Voeg vervolgens deze `id`-eigenschap toe aan het `<tbody>`-element van de tabel binnen de dashboard-sjabloon om het gemakkelijker te vinden met JavaScript:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+Onze HTML is klaar, laten we overschakelen naar JavaScript-code en een nieuwe functie `createTransactionRow` maken:
+
+```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;
+}
+```
+
+Deze functie doet precies wat de naam impliceert: met behulp van de sjabloon die we eerder hebben gemaakt, maakt het een nieuwe tabelrij en vult het de inhoud in met transactiegegevens. We gaan dit gebruiken in onze `updateDashboard()`-functie om de tabel in te vullen:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+Hier gebruiken we de methode [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) die een nieuw DOM-fragment maakt waarop we kunnen werken, voordat we het uiteindelijk aan onze HTML-tabel koppelen.
+
+Er is nog één ding dat we moeten doen voordat deze code kan werken, aangezien onze `updateElement()`-functie momenteel alleen tekstinhoud ondersteunt. Laten we de code een beetje aanpassen:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+```
+
+We gebruiken de [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append)-methode omdat deze het mogelijk maakt om zowel tekst als [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) aan een ouderelement toe te voegen, wat perfect is voor al onze gebruiksscenario's.
+Als je probeert in te loggen met het `test` account, zou je nu een transactielijst op het dashboard moeten zien 🎉.
+
+---
+
+## 🚀 Uitdaging
+
+Werk samen om de dashboardpagina eruit te laten zien als een echte bankapp. Als je je app al hebt gestyled, probeer dan [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) te gebruiken om een [responsief ontwerp](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) te maken dat goed werkt op zowel desktop- als mobiele apparaten.
+
+Hier is een voorbeeld van een gestylede dashboardpagina:
+
+![Screenshot van een voorbeeldresultaat van het dashboard na styling](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.nl.png)
+
+## Quiz na de les
+
+[Quiz na de les](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
+
+## Opdracht
+
+[Refactor en voorzie je code van commentaar](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/7-bank-project/3-data/assignment.md b/translations/nl/7-bank-project/3-data/assignment.md
new file mode 100644
index 00000000..d5641759
--- /dev/null
+++ b/translations/nl/7-bank-project/3-data/assignment.md
@@ -0,0 +1,29 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
+  "translation_date": "2025-08-27T21:00:53+00:00",
+  "source_file": "7-bank-project/3-data/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Refactor en voorzie je code van commentaar
+
+## Instructies
+
+Naarmate je codebase groeit, is het belangrijk om je code regelmatig te refactoren om deze leesbaar en onderhoudbaar te houden. Voeg commentaar toe en refactor je `app.js` om de codekwaliteit te verbeteren:
+
+- Haal constanten, zoals de basis-URL van de server-API, apart
+- Bundel vergelijkbare code: bijvoorbeeld door een `sendRequest()`-functie te maken die de code groepeert die wordt gebruikt in zowel `createAccount()` als `getAccount()`
+- Herorganiseer de code om deze makkelijker leesbaar te maken en voeg commentaar toe
+
+## Beoordelingscriteria
+
+| Criteria | Uitmuntend                                                                                                                                                     | Voldoende                                                                                         | Verbetering Nodig                                                                     |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+|          | Code is van commentaar voorzien, goed georganiseerd in verschillende secties en makkelijk te lezen. Constanten zijn apart gehaald en een gefactoriseerde `sendRequest()`-functie is gemaakt. | Code is schoon, maar kan nog verbeterd worden met meer commentaar, het apart halen van constanten of factorisatie. | Code is rommelig, niet van commentaar voorzien, constanten zijn niet apart gehaald en code is niet gefactoriseerd. |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/7-bank-project/4-state-management/README.md b/translations/nl/7-bank-project/4-state-management/README.md
new file mode 100644
index 00000000..5040ee3f
--- /dev/null
+++ b/translations/nl/7-bank-project/4-state-management/README.md
@@ -0,0 +1,294 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
+  "translation_date": "2025-08-27T21:04:57+00:00",
+  "source_file": "7-bank-project/4-state-management/README.md",
+  "language_code": "nl"
+}
+-->
+# Bouw een Bankapp Deel 4: Concepten van State Management
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
+
+### Introductie
+
+Naarmate een webapplicatie groeit, wordt het een uitdaging om alle datastromen bij te houden. Welke code haalt de data op, welke pagina gebruikt het, waar en wanneer moet het worden bijgewerkt... het is gemakkelijk om te eindigen met rommelige code die moeilijk te onderhouden is. Dit geldt vooral wanneer je data moet delen tussen verschillende pagina's van je app, zoals gebruikersgegevens. Het concept van *state management* heeft altijd bestaan in allerlei soorten programma's, maar nu webapps steeds complexer worden, is het een belangrijk punt om over na te denken tijdens de ontwikkeling.
+
+In dit laatste deel bekijken we de app die we hebben gebouwd opnieuw om te heroverwegen hoe de state wordt beheerd, zodat ondersteuning voor browserverversing op elk moment mogelijk is en gegevens behouden blijven tussen gebruikerssessies.
+
+### Vereisten
+
+Je moet het [data ophalen](../3-data/README.md) deel van de webapp hebben voltooid voor deze les. Je moet ook [Node.js](https://nodejs.org) installeren en de [server API](../api/README.md) lokaal draaien, zodat je accountgegevens kunt beheren.
+
+Je kunt testen of de server correct draait door dit commando in een terminal uit te voeren:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Herzie state management
+
+In de [vorige les](../3-data/README.md) hebben we een basisconcept van state in onze app geïntroduceerd met de globale `account`-variabele die de bankgegevens bevat van de momenteel ingelogde gebruiker. Onze huidige implementatie heeft echter enkele gebreken. Probeer de pagina te verversen terwijl je op het dashboard bent. Wat gebeurt er?
+
+Er zijn 3 problemen met de huidige code:
+
+- De state wordt niet behouden, omdat een browserverversing je terugbrengt naar de inlogpagina.
+- Er zijn meerdere functies die de state wijzigen. Naarmate de app groeit, kan dit het moeilijk maken om de wijzigingen bij te houden en is het gemakkelijk om te vergeten iets bij te werken.
+- De state wordt niet opgeruimd, dus wanneer je op *Uitloggen* klikt, zijn de accountgegevens er nog steeds, zelfs als je op de inlogpagina bent.
+
+We zouden onze code kunnen bijwerken om deze problemen één voor één aan te pakken, maar dat zou meer code duplicatie creëren en de app complexer en moeilijker te onderhouden maken. Of we zouden een paar minuten kunnen pauzeren en onze strategie heroverwegen.
+
+> Welke problemen proberen we hier echt op te lossen?
+
+[State management](https://en.wikipedia.org/wiki/State_management) draait om het vinden van een goede aanpak om deze twee specifieke problemen op te lossen:
+
+- Hoe houden we de datastromen in een app begrijpelijk?
+- Hoe houden we de state data altijd in sync met de gebruikersinterface (en vice versa)?
+
+Als je deze hebt aangepakt, zijn eventuele andere problemen die je hebt mogelijk al opgelost of gemakkelijker op te lossen. Er zijn veel mogelijke benaderingen om deze problemen op te lossen, maar we kiezen voor een veelgebruikte oplossing die bestaat uit **het centraliseren van de data en de manieren om deze te wijzigen**. De datastromen zouden er als volgt uitzien:
+
+![Schema dat de datastromen toont tussen de HTML, gebruikersacties en state](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.nl.png)
+
+> We behandelen hier niet het deel waarin de data automatisch de weergave bijwerkt, omdat dit gekoppeld is aan meer geavanceerde concepten van [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming). Dit is een goed onderwerp om verder in te duiken als je er klaar voor bent.
+
+✅ Er zijn veel bibliotheken met verschillende benaderingen voor state management, waarbij [Redux](https://redux.js.org) een populaire optie is. Bekijk de concepten en patronen die worden gebruikt, omdat dit vaak een goede manier is om te leren welke potentiële problemen je kunt tegenkomen in grote webapps en hoe deze kunnen worden opgelost.
+
+### Taak
+
+We beginnen met een beetje refactoring. Vervang de `account`-declaratie:
+
+```js
+let account = null;
+```
+
+Met:
+
+```js
+let state = {
+  account: null
+};
+```
+
+Het idee is om *alle appdata te centraliseren* in een enkel state-object. We hebben nu alleen `account` in de state, dus het verandert niet veel, maar het creëert een pad voor toekomstige uitbreidingen.
+
+We moeten ook de functies bijwerken die het gebruiken. Vervang in de functies `register()` en `login()` `account = ...` door `state.account = ...`;
+
+Voeg aan het begin van de `updateDashboard()`-functie deze regel toe:
+
+```js
+const account = state.account;
+```
+
+Deze refactoring op zichzelf heeft niet veel verbeteringen gebracht, maar het idee was om de basis te leggen voor de volgende wijzigingen.
+
+## Houd dataveranderingen bij
+
+Nu we het `state`-object hebben geïntroduceerd om onze data op te slaan, is de volgende stap om de updates te centraliseren. Het doel is om het gemakkelijker te maken om eventuele wijzigingen en wanneer ze plaatsvinden bij te houden.
+
+Om te voorkomen dat wijzigingen worden aangebracht in het `state`-object, is het ook een goede gewoonte om het te beschouwen als [*immutable*](https://en.wikipedia.org/wiki/Immutable_object), wat betekent dat het helemaal niet kan worden gewijzigd. Dit betekent ook dat je een nieuw state-object moet maken als je iets wilt wijzigen. Door dit te doen, bouw je een bescherming tegen mogelijk ongewenste [bijwerkingen](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) en open je mogelijkheden voor nieuwe functies in je app, zoals het implementeren van ongedaan maken/herhalen, terwijl het ook gemakkelijker wordt om te debuggen. Je zou bijvoorbeeld elke wijziging in de state kunnen loggen en een geschiedenis van de wijzigingen kunnen bijhouden om de bron van een bug te begrijpen.
+
+In JavaScript kun je [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) gebruiken om een immutable versie van een object te maken. Als je probeert wijzigingen aan te brengen in een immutable object, wordt er een uitzondering gegenereerd.
+
+✅ Weet je het verschil tussen een *shallow* en een *deep* immutable object? Je kunt er [hier](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) meer over lezen.
+
+### Taak
+
+Laten we een nieuwe `updateState()`-functie maken:
+
+```js
+function updateState(property, newData) {
+  state = Object.freeze({
+    ...state,
+    [property]: newData
+  });
+}
+```
+
+In deze functie maken we een nieuw state-object en kopiëren we data van de vorige state met behulp van de [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Vervolgens overschrijven we een specifieke eigenschap van het state-object met de nieuwe data met behulp van de [bracket notatie](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` voor toewijzing. Ten slotte vergrendelen we het object om wijzigingen te voorkomen met `Object.freeze()`. We hebben momenteel alleen de `account`-eigenschap opgeslagen in de state, maar met deze aanpak kun je zoveel eigenschappen toevoegen als je nodig hebt.
+
+We zullen ook de `state`-initialisatie bijwerken om ervoor te zorgen dat de initiële state ook bevroren is:
+
+```js
+let state = Object.freeze({
+  account: null
+});
+```
+
+Daarna werk je de `register`-functie bij door de toewijzing `state.account = result;` te vervangen door:
+
+```js
+updateState('account', result);
+```
+
+Doe hetzelfde met de `login`-functie, vervang `state.account = data;` door:
+
+```js
+updateState('account', data);
+```
+
+We nemen nu de kans om het probleem op te lossen waarbij accountgegevens niet worden gewist wanneer de gebruiker op *Uitloggen* klikt.
+
+Maak een nieuwe functie `logout()`:
+
+```js
+function logout() {
+  updateState('account', null);
+  navigate('/login');
+}
+```
+
+Vervang in `updateDashboard()` de omleiding `return navigate('/login');` door `return logout();`
+
+Probeer een nieuw account te registreren, uit te loggen en opnieuw in te loggen om te controleren of alles nog steeds correct werkt.
+
+> Tip: je kunt alle state-wijzigingen bekijken door `console.log(state)` toe te voegen onderaan `updateState()` en de console in de ontwikkelaarstools van je browser te openen.
+
+## Bewaar de state
+
+De meeste webapps moeten data opslaan om correct te kunnen werken. Alle kritieke data wordt meestal opgeslagen in een database en benaderd via een server-API, zoals de gebruikersaccountgegevens in ons geval. Maar soms is het ook interessant om bepaalde data op te slaan in de client-app die in je browser draait, voor een betere gebruikerservaring of om de laadtijd te verbeteren.
+
+Wanneer je data in je browser wilt opslaan, zijn er een paar belangrijke vragen die je jezelf moet stellen:
+
+- *Zijn de gegevens gevoelig?* Je moet vermijden om gevoelige gegevens op de client op te slaan, zoals gebruikerswachtwoorden.
+- *Hoe lang moet je deze gegevens bewaren?* Wil je deze gegevens alleen voor de huidige sessie gebruiken of wil je dat ze voor altijd worden opgeslagen?
+
+Er zijn meerdere manieren om informatie op te slaan in een webapp, afhankelijk van wat je wilt bereiken. Je kunt bijvoorbeeld de URL's gebruiken om een zoekopdracht op te slaan en deze deelbaar te maken tussen gebruikers. Je kunt ook [HTTP-cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies) gebruiken als de gegevens moeten worden gedeeld met de server, zoals [authenticatie](https://en.wikipedia.org/wiki/Authentication) informatie.
+
+Een andere optie is om een van de vele browser-API's te gebruiken voor het opslaan van gegevens. Twee daarvan zijn bijzonder interessant:
+
+- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): een [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) waarmee je gegevens kunt opslaan die specifiek zijn voor de huidige website en die bewaard blijven tussen verschillende sessies. De opgeslagen gegevens verlopen nooit.
+- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): dit werkt hetzelfde als `localStorage`, behalve dat de gegevens die erin zijn opgeslagen worden gewist wanneer de sessie eindigt (wanneer de browser wordt gesloten).
+
+Merk op dat beide API's alleen [strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) toestaan. Als je complexe objecten wilt opslaan, moet je deze serialiseren naar het [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)-formaat met behulp van [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+✅ Als je een webapp wilt maken die niet met een server werkt, is het ook mogelijk om een database op de client te maken met de [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Dit is gereserveerd voor geavanceerde use-cases of als je een aanzienlijke hoeveelheid gegevens moet opslaan, omdat het complexer is om te gebruiken.
+
+### Taak
+
+We willen dat onze gebruikers ingelogd blijven totdat ze expliciet op de knop *Uitloggen* klikken, dus we gebruiken `localStorage` om de accountgegevens op te slaan. Laten we eerst een sleutel definiëren die we zullen gebruiken om onze gegevens op te slaan.
+
+```js
+const storageKey = 'savedAccount';
+```
+
+Voeg vervolgens deze regel toe aan het einde van de `updateState()`-functie:
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+
+Hiermee worden de gebruikersaccountgegevens opgeslagen en altijd up-to-date gehouden, omdat we eerder al onze state-updates hebben gecentraliseerd. Dit is waar we beginnen te profiteren van al onze eerdere refactors 🙂.
+
+Omdat de gegevens worden opgeslagen, moeten we er ook voor zorgen dat ze worden hersteld wanneer de app wordt geladen. Aangezien we meer initialisatiecode beginnen te krijgen, is het misschien een goed idee om een nieuwe `init`-functie te maken, die ook onze eerdere code onderaan `app.js` bevat:
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // Our previous initialization code
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+
+Hier halen we de opgeslagen gegevens op, en als er gegevens zijn, werken we de state dienovereenkomstig bij. Het is belangrijk om dit *voor* het bijwerken van de route te doen, omdat er mogelijk code is die afhankelijk is van de state tijdens de pagina-update.
+
+We kunnen ook de *Dashboard*-pagina de standaardpagina van onze applicatie maken, aangezien we nu de accountgegevens opslaan. Als er geen gegevens worden gevonden, zorgt het dashboard ervoor dat er wordt omgeleid naar de *Login*-pagina. Vervang in `updateRoute()` de fallback `return navigate('/login');` door `return navigate('/dashboard');`.
+
+Log nu in op de app en probeer de pagina te verversen. Je zou op het dashboard moeten blijven. Met die update hebben we al onze initiële problemen opgelost...
+
+## Vernieuw de gegevens
+
+...Maar we hebben misschien ook een nieuw probleem gecreëerd. Oeps!
+
+Ga naar het dashboard met het `test`-account en voer vervolgens dit commando uit in een terminal om een nieuwe transactie te maken:
+
+```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
+```
+
+Probeer nu de dashboardpagina in de browser te verversen. Wat gebeurt er? Zie je de nieuwe transactie?
+
+De state wordt oneindig bewaard dankzij de `localStorage`, maar dat betekent ook dat deze nooit wordt bijgewerkt totdat je uitlogt en opnieuw inlogt!
+
+Een mogelijke strategie om dit op te lossen is om de accountgegevens elke keer dat het dashboard wordt geladen opnieuw te laden, om verouderde gegevens te voorkomen.
+
+### Taak
+
+Maak een nieuwe functie `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);
+}
+```
+
+Deze methode controleert of we momenteel zijn ingelogd en laadt vervolgens de accountgegevens opnieuw van de server.
+
+Maak een andere functie genaamd `refresh`:
+
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+
+Deze functie werkt de accountgegevens bij en zorgt er vervolgens voor dat de HTML van de dashboardpagina wordt bijgewerkt. Dit is wat we moeten aanroepen wanneer de dashboardroute wordt geladen. Werk de routedefinitie bij met:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+
+Probeer nu het dashboard te verversen, het zou de bijgewerkte accountgegevens moeten weergeven.
+
+---
+
+## 🚀 Uitdaging
+
+Nu we de accountgegevens elke keer dat het dashboard wordt geladen opnieuw laden, denk je dat we nog steeds *alle accountgegevens* moeten opslaan?
+
+Probeer samen te werken om te veranderen wat wordt opgeslagen en geladen vanuit `localStorage`, zodat alleen wordt opgenomen wat absoluut nodig is voor de app om te werken.
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
+
+## Opdracht
+
+[Implementeer de dialoog "Transactie toevoegen"](assignment.md)
+
+Hier is een voorbeeldresultaat na het voltooien van de opdracht:
+
+![Screenshot met een voorbeeld van de dialoog "Transactie toevoegen"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.nl.png)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/7-bank-project/4-state-management/assignment.md b/translations/nl/7-bank-project/4-state-management/assignment.md
new file mode 100644
index 00000000..c5ea380d
--- /dev/null
+++ b/translations/nl/7-bank-project/4-state-management/assignment.md
@@ -0,0 +1,38 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "f23a868536c07da991b1d4e773161e25",
+  "translation_date": "2025-08-27T21:06:32+00:00",
+  "source_file": "7-bank-project/4-state-management/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Implementeer de dialoog "Transactie toevoegen"
+
+## Instructies
+
+Onze bankapp mist nog een belangrijke functie: de mogelijkheid om nieuwe transacties in te voeren. Gebruik alles wat je hebt geleerd in de vier voorgaande lessen om een dialoog "Transactie toevoegen" te implementeren:
+
+- Voeg een knop "Transactie toevoegen" toe op de dashboardpagina
+- Maak ofwel een nieuwe pagina met een HTML-sjabloon, of gebruik JavaScript om de HTML van de dialoog te tonen/verbergen zonder de dashboardpagina te verlaten (je kunt hiervoor de [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden)-eigenschap of CSS-klassen gebruiken)
+- Zorg ervoor dat je rekening houdt met [toegankelijkheid voor toetsenbord en schermlezers](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) voor de dialoog
+- Implementeer een HTML-formulier om invoergegevens te ontvangen
+- Maak JSON-gegevens van de formuliergegevens en stuur deze naar de API
+- Werk de dashboardpagina bij met de nieuwe gegevens
+
+Bekijk de [server-API-specificaties](../api/README.md) om te zien welke API je moet aanroepen en wat het verwachte JSON-formaat is.
+
+Hier is een voorbeeldresultaat na het voltooien van de opdracht:
+
+![Screenshot van een voorbeeld van de dialoog "Transactie toevoegen"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.nl.png)
+
+## Beoordelingscriteria
+
+| Criteria | Uitmuntend                                                                                       | Voldoende                                                                                                              | Onvoldoende                                 |
+| -------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
+|          | Het toevoegen van een transactie is volledig geïmplementeerd volgens alle best practices uit de lessen. | Het toevoegen van een transactie is geïmplementeerd, maar niet volgens de best practices uit de lessen, of werkt slechts gedeeltelijk. | Het toevoegen van een transactie werkt helemaal niet. |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/7-bank-project/README.md b/translations/nl/7-bank-project/README.md
new file mode 100644
index 00000000..04018cd8
--- /dev/null
+++ b/translations/nl/7-bank-project/README.md
@@ -0,0 +1,35 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "830359535306594b448db6575ce5cdee",
+  "translation_date": "2025-08-27T20:54:51+00:00",
+  "source_file": "7-bank-project/README.md",
+  "language_code": "nl"
+}
+-->
+# :dollar: Bouw een Bank
+
+In dit project leer je hoe je een fictieve bank kunt bouwen. Deze lessen bevatten instructies over hoe je een webapp kunt opzetten en routes kunt toevoegen, formulieren kunt bouwen, de status kunt beheren en gegevens kunt ophalen van een API waarmee je de gegevens van de bank kunt ophalen.
+
+| ![Scherm1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.nl.png) | ![Scherm2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.nl.png) |
+|--------------------------------|--------------------------------|
+
+## Lessen
+
+1. [HTML-sjablonen en routes in een webapp](1-template-route/README.md)
+2. [Een inlog- en registratieformulier bouwen](2-forms/README.md)
+3. [Methoden om gegevens op te halen en te gebruiken](3-data/README.md)
+4. [Concepten van statusbeheer](4-state-management/README.md)
+
+### Credits
+
+Deze lessen zijn met :hearts: geschreven door [Yohan Lasorsa](https://twitter.com/sinedied).
+
+Als je geïnteresseerd bent in hoe je de [server-API](/7-bank-project/api/README.md) kunt bouwen die in deze lessen wordt gebruikt, kun je [deze videoserie](https://aka.ms/NodeBeginner) volgen (met name video's 17 tot en met 21).
+
+Je kunt ook een kijkje nemen bij [deze interactieve Learn-tutorial](https://aka.ms/learn/express-api).
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/7-bank-project/api/README.md b/translations/nl/7-bank-project/api/README.md
new file mode 100644
index 00000000..bd81c45f
--- /dev/null
+++ b/translations/nl/7-bank-project/api/README.md
@@ -0,0 +1,48 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "9884f8c8a61cf56214450f8b16a094ce",
+  "translation_date": "2025-08-27T20:55:14+00:00",
+  "source_file": "7-bank-project/api/README.md",
+  "language_code": "nl"
+}
+-->
+# Bank API
+
+> Bank API gebouwd met [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+De API is al voor je gebouwd en maakt geen deel uit van de oefening.
+
+Als je echter wilt leren hoe je een API zoals deze kunt bouwen, kun je deze serie video's volgen: https://aka.ms/NodeBeginner (video's 17 tot en met 21 behandelen precies deze API).
+
+Je kunt ook deze interactieve tutorial bekijken: https://aka.ms/learn/express-api
+
+## De server starten
+
+Zorg ervoor dat je [Node.js](https://nodejs.org) geïnstalleerd hebt.
+
+1. Clone deze repository [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) met Git.
+2. Open je terminal en navigeer naar de map `Web-Dev-For-Beginners/7-bank-project/api`.
+3. Voer `npm install` uit en wacht tot de pakketten zijn geïnstalleerd (dit kan even duren, afhankelijk van de kwaliteit van je internetverbinding).
+4. Wanneer de installatie voltooid is, voer `npm start` uit en je bent klaar om te beginnen.
+
+De server zou moeten starten en luisteren op poort `5000`.
+*Deze server zal samen draaien met de hoofdserver van de bankapplicatie (luistert op poort `3000`), sluit deze niet af.*
+
+> Opmerking: alle gegevens worden in het geheugen opgeslagen en niet permanent bewaard, dus wanneer de server wordt gestopt, gaan alle gegevens verloren.
+
+## API details
+
+Route                                        | Beschrijving
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Haal serverinformatie op
+POST   /api/accounts/                        | Maak een account aan, bijv.: `{ user: 'Yohan', description: 'Mijn budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Haal alle gegevens op voor het opgegeven account
+DELETE /api/accounts/:user                   | Verwijder het opgegeven account
+POST   /api/accounts/:user/transactions      | Voeg een transactie toe, bijv.: `{ date: '2020-07-23T18:25:43.511Z', object: 'Boek gekocht', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Verwijder de opgegeven transactie
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen om nauwkeurigheid te garanderen, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/7-bank-project/solution/README.md b/translations/nl/7-bank-project/solution/README.md
new file mode 100644
index 00000000..45505c46
--- /dev/null
+++ b/translations/nl/7-bank-project/solution/README.md
@@ -0,0 +1,27 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
+  "translation_date": "2025-08-27T21:03:51+00:00",
+  "source_file": "7-bank-project/solution/README.md",
+  "language_code": "nl"
+}
+-->
+# Bank-app
+
+> Voorbeeldoplossing voor het bank-app project, gebouwd met pure HTML5, CSS en JavaScript (geen frameworks of bibliotheken gebruikt).
+
+## De app uitvoeren
+
+Zorg er eerst voor dat je de [API-server](../api/README.md) hebt draaien.
+
+Elke webserver kan worden gebruikt om de app uit te voeren, maar aangezien je [Node.js](https://nodejs.org) toch al geïnstalleerd moet hebben om de API te draaien, kun je het volgende doen:
+
+1. Clone deze repository met Git.
+2. Open een terminal, navigeer naar deze map en voer `npx lite-server .` uit. Dit start een ontwikkel-webserver op poort `3000`.
+3. Open `http://localhost:3000` in een browser om de app te gebruiken.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/8-code-editor/1-using-a-code-editor/README.md b/translations/nl/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..934d63a7
--- /dev/null
+++ b/translations/nl/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-27T20:40:22+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
+  "language_code": "nl"
+}
+-->
+# Een code-editor gebruiken
+
+Deze les behandelt de basisprincipes van het gebruik van [VSCode.dev](https://vscode.dev), een webgebaseerde code-editor, zodat je wijzigingen kunt aanbrengen in je code en kunt bijdragen aan een project zonder iets op je computer te installeren.
+
+## Leerdoelen
+
+In deze les leer je:
+
+- Een code-editor gebruiken in een codeproject
+- Wijzigingen bijhouden met versiebeheer
+- De editor aanpassen voor ontwikkeling
+
+### Vereisten
+
+Voordat je begint, moet je een account aanmaken bij [GitHub](https://github.com). Ga naar [GitHub](https://github.com/) en maak een account aan als je dat nog niet hebt gedaan.
+
+### Introductie
+
+Een code-editor is een essentieel hulpmiddel voor het schrijven van programma's en het samenwerken aan bestaande codeprojecten. Zodra je de basisprincipes van een editor begrijpt en weet hoe je de functies kunt gebruiken, kun je deze toepassen bij het schrijven van code.
+
+## Aan de slag met VSCode.dev
+
+[VSCode.dev](https://vscode.dev) is een code-editor op het web. Je hoeft niets te installeren om het te gebruiken, net zoals je een andere website opent. Om te beginnen met de editor, open je de volgende link: [https://vscode.dev](https://vscode.dev). Als je niet bent ingelogd bij [GitHub](https://github.com/), volg dan de aanwijzingen om in te loggen of een nieuw account aan te maken en log vervolgens in.
+
+Zodra het is geladen, zou het er ongeveer zo uit moeten zien:
+
+![Standaard VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.nl.png)
+
+Er zijn drie hoofdsecties, van links naar rechts:
+
+1. De _activiteitsbalk_ met enkele pictogrammen, zoals het vergrootglas 🔎, het tandwiel ⚙️, en een paar andere.
+2. De uitgebreide activiteitsbalk die standaard de _Explorer_ toont, ook wel de _zijbalk_ genoemd.
+3. En tot slot het codegebied aan de rechterkant.
+
+Klik op elk van de pictogrammen om een ander menu weer te geven. Als je klaar bent, klik je op de _Explorer_ zodat je terug bent waar je begon.
+
+Wanneer je begint met het maken of wijzigen van code, gebeurt dit in het grootste gebied aan de rechterkant. Je gebruikt dit gebied ook om bestaande code te bekijken, wat je hierna zult doen.
+
+## Een GitHub-repository openen
+
+Het eerste wat je nodig hebt, is een GitHub-repository openen. Er zijn meerdere manieren om een repository te openen. In deze sectie zie je twee verschillende manieren waarop je een repository kunt openen om wijzigingen aan te brengen.
+
+### 1. Met de editor
+
+Gebruik de editor zelf om een externe repository te openen. Als je naar [VSCode.dev](https://vscode.dev) gaat, zie je een knop _"Open Remote Repository"_:
+
+![Externe repository openen](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.nl.png)
+
+Je kunt ook de opdrachtpalet gebruiken. De opdrachtpalet is een invoerveld waarin je een woord kunt typen dat deel uitmaakt van een opdracht of actie om de juiste opdracht te vinden en uit te voeren. Gebruik het menu linksboven, selecteer _View_, en kies vervolgens _Command Palette_, of gebruik de volgende sneltoets: Ctrl-Shift-P (op MacOS is dat Command-Shift-P).
+
+![Paletmenu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.nl.png)
+
+Wanneer het menu opent, typ je _open remote repository_ en selecteer je de eerste optie. Meerdere repositories waar je deel van uitmaakt of die je onlangs hebt geopend, worden weergegeven. Je kunt ook een volledige GitHub-URL gebruiken om er een te selecteren. Gebruik de volgende URL en plak deze in het vak:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Als het succesvol is, zie je alle bestanden van deze repository geladen in de teksteditor.
+
+### 2. Met de URL
+
+Je kunt ook direct een URL gebruiken om een repository te laden. Bijvoorbeeld, de volledige URL voor de huidige repository is [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), maar je kunt het GitHub-domein vervangen door `VSCode.dev/github` en de repository direct laden. De resulterende URL zou zijn: [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+## Bestanden bewerken
+
+Zodra je de repository hebt geopend in de browser/vscode.dev, is de volgende stap het maken van updates of wijzigingen in het project.
+
+### 1. Een nieuw bestand maken
+
+Je kunt een bestand maken in een bestaande map of in de hoofdmap. Om een nieuw bestand te maken, open je een locatie/map waar je het bestand wilt opslaan en selecteer je het pictogram _'New file ...'_ op de activiteitsbalk _(links)_, geef het een naam en druk op enter.
+
+![Een nieuw bestand maken](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.nl.png)
+
+### 2. Een bestand bewerken en opslaan in de repository
+
+Het gebruik van vscode.dev is handig wanneer je snel updates wilt maken aan je project zonder software lokaal te laden.  
+Om je code bij te werken, klik je op het pictogram 'Explorer', ook te vinden op de activiteitsbalk, om bestanden en mappen in de repository te bekijken.  
+Selecteer een bestand om het te openen in het codegebied, maak je wijzigingen en sla op.
+
+![Een bestand bewerken](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.nl.png)
+
+Wanneer je klaar bent met het bijwerken van je project, selecteer je het pictogram _`source control`_, dat alle nieuwe wijzigingen bevat die je hebt aangebracht in je repository.
+
+Om de wijzigingen te bekijken die je hebt aangebracht, selecteer je de bestanden in de map `Changes` in de uitgebreide activiteitsbalk. Dit opent een 'Working Tree' waarin je visueel de wijzigingen kunt zien die je hebt aangebracht in het bestand. Rood toont een verwijdering in het project, terwijl groen een toevoeging aangeeft.
+
+![Wijzigingen bekijken](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.nl.png)
+
+Als je tevreden bent met de wijzigingen die je hebt aangebracht, hover je over de map `Changes` en klik je op de knop `+` om de wijzigingen te stage-en. Stage-en betekent simpelweg dat je je wijzigingen voorbereidt om ze te committen naar GitHub.
+
+Als je echter niet tevreden bent met sommige wijzigingen en ze wilt verwijderen, hover je over de map `Changes` en selecteer je het pictogram `undo`.
+
+Typ vervolgens een `commit message` _(Een beschrijving van de wijziging die je hebt aangebracht in het project)_, klik op het `check-pictogram` om te committen en je wijzigingen te pushen.
+
+Wanneer je klaar bent met werken aan je project, selecteer je het `hamburgermenu-pictogram` linksboven om terug te keren naar de repository op github.com.
+
+![Wijzigingen stage-en & committen](../../../../8-code-editor/images/edit-vscode.dev.gif)
+
+## Extensies gebruiken
+
+Het installeren van extensies in VSCode stelt je in staat om nieuwe functies en opties voor een aangepaste ontwikkelomgeving toe te voegen aan je editor om je ontwikkelworkflow te verbeteren. Deze extensies helpen je ook ondersteuning toe te voegen voor meerdere programmeertalen en zijn vaak generieke extensies of taalgebaseerde extensies.
+
+Om door de lijst van alle beschikbare extensies te bladeren, klik je op het pictogram _`Extensions`_ op de activiteitsbalk en begin je de naam van de extensie te typen in het tekstveld met het label _'Search Extensions in Marketplace'_.  
+Je ziet een lijst met extensies, elk met **de naam van de extensie, de naam van de uitgever, een korte beschrijving, het aantal downloads** en **een sterbeoordeling**.
+
+![Details van extensies](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.nl.png)
+
+Je kunt ook alle eerder geïnstalleerde extensies bekijken door de map _`Installed`_ uit te vouwen, populaire extensies die door de meeste ontwikkelaars worden gebruikt in de map _`Popular`_ en aanbevolen extensies voor jou, gebaseerd op gebruikers in dezelfde werkruimte of op je recent geopende bestanden, in de map _`Recommended`_.
+
+![Extensies bekijken](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.nl.png)
+
+### 1. Extensies installeren
+
+Om een extensie te installeren, typ je de naam van de extensie in het zoekveld en klik je erop om aanvullende informatie over de extensie te bekijken in het codegebied zodra deze verschijnt in de uitgebreide activiteitsbalk.
+
+Je kunt op de _blauwe install-knop_ klikken in de uitgebreide activiteitsbalk om te installeren of de install-knop gebruiken die verschijnt in het codegebied zodra je de extensie selecteert om aanvullende informatie te laden.
+
+![Extensies installeren](../../../../8-code-editor/images/install-extension.gif)
+
+### 2. Extensies aanpassen
+
+Na het installeren van de extensie moet je mogelijk het gedrag aanpassen en personaliseren op basis van je voorkeuren. Om dit te doen, selecteer je het pictogram Extensions, en deze keer verschijnt je extensie in de map _Installed_. Klik op het _**tandwielpictogram**_ en navigeer naar _Extensions Setting_.
+
+![Extensie-instellingen aanpassen](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.nl.png)
+
+### 3. Extensies beheren
+
+Na het installeren en gebruiken van je extensie biedt vscode.dev opties om je extensie te beheren op basis van verschillende behoeften. Bijvoorbeeld, je kunt ervoor kiezen om:
+
+- **Uitschakelen:** _(Je schakelt een extensie tijdelijk uit wanneer je deze niet meer nodig hebt, maar wilt deze niet volledig verwijderen.)_
+
+    Selecteer de geïnstalleerde extensie in de uitgebreide activiteitsbalk > klik op het tandwielpictogram > selecteer 'Disable' of 'Disable (Workspace)' **OF** open de extensie in het codegebied en klik op de blauwe Disable-knop.
+
+- **Verwijderen:** Selecteer de geïnstalleerde extensie in de uitgebreide activiteitsbalk > klik op het tandwielpictogram > selecteer 'Uninstall' **OF** open de extensie in het codegebied en klik op de blauwe Uninstall-knop.
+
+---
+
+## Opdracht
+
+[Maak een cv-website met vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+## Review & Zelfstudie
+
+Lees meer over [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) en enkele van de andere functies ervan.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/8-code-editor/1-using-a-code-editor/assignment.md b/translations/nl/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..fdfecbc2
--- /dev/null
+++ b/translations/nl/8-code-editor/1-using-a-code-editor/assignment.md
@@ -0,0 +1,263 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "2fcb983b8dbadadb1bc2e97f8c12dac5",
+  "translation_date": "2025-08-27T20:41:38+00:00",
+  "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
+  "language_code": "nl"
+}
+-->
+# Maak een cv-website met vscode.dev
+
+_Hoe gaaf zou het zijn als een recruiter om je cv vraagt en je stuurt ze een url?_ 😎
+
+<!----
+TODO: voeg een optionele afbeelding toe
+![Een code-editor gebruiken](../../../../translated_images/webdev101-vscode-dev.f53c14e8dad231ea09d9e07a2db4a01551d2dc6cdf21225038389e11156af023.nl.png)
+> Sketchnote door [Auteur naam](https://example.com)
+---->
+
+<!---
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+---->
+
+## Doelstellingen
+
+Na deze opdracht leer je hoe je:
+
+- Een website maakt om je cv te presenteren
+
+### Vereisten
+
+1. Een GitHub-account. Ga naar [GitHub](https://github.com/) en maak een account aan als je er nog geen hebt.
+
+## Stappen
+
+**Stap 1:** Maak een nieuwe GitHub-repository en geef deze de naam `my-resume`
+
+**Stap 2** Maak een `index.html`-bestand in je repository. We voegen ten minste één bestand toe terwijl we nog op github.com zijn, omdat je geen lege repository kunt openen op vscode.dev.
+
+Klik op de link `creating a new file`, typ de naam `index.html` en selecteer de knop `Commit new file`.
+
+![Maak een nieuw bestand op github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.nl.png)
+
+**Stap 3:** Open [VSCode.dev](https://vscode.dev) en selecteer de knop `Open Remote Repository`.
+
+Kopieer de url van de repository die je zojuist hebt gemaakt voor je cv-website en plak deze in het invoerveld:
+
+_Vervang `your-username` door je GitHub-gebruikersnaam_
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ Als het succesvol is, zie je je project en het index.html-bestand geopend in de teksteditor in de browser.
+
+![Maak een nieuw bestand](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.nl.png)
+
+**Stap 4:** Open het `index.html`-bestand, plak de onderstaande code in je codegebied en sla op.
+
+<details>
+    <summary><b>HTML-code verantwoordelijk voor de inhoud van je cv-website.</b></summary>
+    
+        <html>
+
+            <head>
+                <link href="style.css" rel="stylesheet">
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+                <title>Jouw Naam Hier!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- cv-header met je naam en titel -->
+                    <h1>Jouw Naam Hier!</h1>
+                    <hr>
+                    Jouw Rol!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>CONTACT</h2>
+                            <!-- contactinformatie inclusief sociale media -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Schrijf hier je e-mailadres</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Schrijf hier je gebruikersnaam!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Schrijf hier je gebruikersnaam!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>VAARDIGHEDEN</h2>
+                            <!-- jouw vaardigheden -->
+                            <ul>
+                                <li>Vaardigheid 1!</li>
+                                <li>Vaardigheid 2!</li>
+                                <li>Vaardigheid 3!</li>
+                                <li>Vaardigheid 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>OPLEIDING</h2>
+                            <!-- jouw opleiding -->
+                            <h3>Schrijf hier je opleiding!</h3>
+                            <p>
+                                Schrijf hier je onderwijsinstelling!
+                            </p>
+                            <p>
+                                Start - Einddatum
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>OVER</h2>
+                            <!-- over jou -->
+                            <p>Schrijf een korte tekst over jezelf!</p>
+                        </section>
+                        <section>
+                            <h2>WERKERVARING</h2>
+                            <!-- jouw werkervaring -->
+                            <h3>Functietitel</h3>
+                            <p>
+                                Naam van de organisatie | Startmaand – Eindmaand
+                            </p>
+                            <ul>
+                                    <li>Taak 1 - Schrijf wat je hebt gedaan!</li>
+                                    <li>Taak 2 - Schrijf wat je hebt gedaan!</li>
+                                    <li>Schrijf de resultaten/impact van je bijdrage</li>
+                                    
+                            </ul>
+                            <h3>Functietitel 2</h3>
+                            <p>
+                                Naam van de organisatie | Startmaand – Eindmaand
+                            </p>
+                            <ul>
+                                    <li>Taak 1 - Schrijf wat je hebt gedaan!</li>
+                                    <li>Taak 2 - Schrijf wat je hebt gedaan!</li>
+                                    <li>Schrijf de resultaten/impact van je bijdrage</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Vervang de _placeholdertekst_ in de html-code door je cv-details.
+
+**Stap 5:** Beweeg over de My-Resume-map, klik op het `New File ...`-icoon en maak 2 nieuwe bestanden in je project: `style.css` en `codeswing.json`.
+
+**Stap 6:** Open het `style.css`-bestand, plak de onderstaande code en sla op.
+
+<details>
+        <summary><b>CSS-code om de lay-out van de site te formatteren.</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>
+
+**Stap 6:** Open het `codeswing.json`-bestand, plak de onderstaande code en sla op.
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+**Stap 7:** Installeer de `Codeswing-extensie` om de cv-website te visualiseren in het codegebied.
+
+Klik op het _`Extensions`_-icoon in de activiteitenbalk en typ Codeswing. Klik op de _blauwe install-knop_ in de uitgebreide activiteitenbalk om te installeren of gebruik de install-knop die verschijnt in het codegebied zodra je de extensie selecteert om aanvullende informatie te laden. Direct na het installeren van de extensie zie je veranderingen in je project 😃
+
+![Extensies installeren](../../../../8-code-editor/images/install-extension.gif)
+
+Dit is wat je ziet op je scherm nadat je de extensie hebt geïnstalleerd.
+
+![Codeswing-extensie in actie](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.nl.png)
+
+Als je tevreden bent met de veranderingen die je hebt aangebracht, beweeg over de `Changes`-map en klik op de `+`-knop om de veranderingen te stage-en.
+
+Typ een commit-bericht _(Een beschrijving van de verandering die je hebt aangebracht in het project)_ en commit je veranderingen door op de `check` te klikken. Zodra je klaar bent met je project, selecteer je het hamburgermenu-icoon linksboven om terug te keren naar de repository op GitHub.
+
+Gefeliciteerd 🎉 Je hebt zojuist je cv-website gemaakt met vscode.dev in een paar stappen.
+
+## 🚀 Uitdaging
+
+Open een remote repository waar je toestemming hebt om wijzigingen aan te brengen en werk enkele bestanden bij. Probeer vervolgens een nieuwe branch te maken met je wijzigingen en maak een Pull Request.
+
+<!----
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+---->
+
+## Review & Zelfstudie
+
+Lees meer over [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) en enkele van de andere functies ervan.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/CODE_OF_CONDUCT.md b/translations/nl/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..5803ab0a
--- /dev/null
+++ b/translations/nl/CODE_OF_CONDUCT.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b0a9b4cccd918195f58224d5793da1a6",
+  "translation_date": "2025-08-27T20:03:10+00:00",
+  "source_file": "CODE_OF_CONDUCT.md",
+  "language_code": "nl"
+}
+-->
+# Microsoft Open Source Gedragscode
+
+Dit project heeft de [Microsoft Open Source Gedragscode](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) aangenomen.
+
+Bronnen:
+
+- [Microsoft Open Source Gedragscode](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
+- [Microsoft Gedragscode FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
+- Neem contact op met [opencode@microsoft.com](mailto:opencode@microsoft.com) voor vragen of zorgen
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen om nauwkeurigheid te waarborgen, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/CONTRIBUTING.md b/translations/nl/CONTRIBUTING.md
new file mode 100644
index 00000000..19a4722d
--- /dev/null
+++ b/translations/nl/CONTRIBUTING.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "777400e9f0336c7ee2f9a1200a88478f",
+  "translation_date": "2025-08-27T20:04:27+00:00",
+  "source_file": "CONTRIBUTING.md",
+  "language_code": "nl"
+}
+-->
+# Bijdragen
+
+Dit project verwelkomt bijdragen en suggesties. De meeste bijdragen vereisen dat je akkoord gaat met een Contributor License Agreement (CLA), waarin je verklaart dat je het recht hebt om, en daadwerkelijk doet, ons de rechten te geven om jouw bijdrage te gebruiken. Voor meer details, bezoek [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Wanneer je een pull request indient, zal een CLA-bot automatisch bepalen of je een CLA moet indienen en de PR dienovereenkomstig voorzien van een label of opmerking. Volg simpelweg de instructies die door de bot worden gegeven. Je hoeft dit slechts één keer te doen voor alle repositories die onze CLA gebruiken. Probeer ons ook te laten weten waarom je die wijziging hebt aangebracht, zodat we je verzoek beter begrijpen.
+
+Dit project heeft de [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) aangenomen.  
+Voor meer informatie, zie de [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)  
+of neem contact op met [opencode@microsoft.com](mailto:opencode@microsoft.com) voor eventuele aanvullende vragen of opmerkingen.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/README.md b/translations/nl/README.md
new file mode 100644
index 00000000..b3bf4fdc
--- /dev/null
+++ b/translations/nl/README.md
@@ -0,0 +1,207 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b672130244189715ac084c3259f6ab58",
+  "translation_date": "2025-08-27T19:59:51+00:00",
+  "source_file": "README.md",
+  "language_code": "nl"
+}
+-->
+[![GitHub licentie](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
+[![GitHub bijdragers](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 Welkom](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 sterren](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)  
+
+# Webontwikkeling voor Beginners - Een Curriculum  
+
+Leer de basisprincipes van webontwikkeling met onze 12-weekse uitgebreide cursus van Microsoft Cloud Advocates. Elke van de 24 lessen behandelt JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Versterk je vaardigheden en optimaliseer je kennisbehoud met onze effectieve projectgerichte aanpak. Begin vandaag nog met je codeerreis!  
+
+#### 🧑‍🎓 _Ben je een student?_  
+
+Bezoek de [**Student Hub-pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersbronnen, studentpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en regelmatig wilt bekijken, aangezien we maandelijks de inhoud vernieuwen.  
+
+### 📣 Aankondiging - _Nieuw Curriculum_ over Generatieve AI voor JavaScript is net uitgebracht  
+
+Mis ons nieuwe curriculum over Generatieve AI niet!  
+
+Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen!  
+
+<div>  
+  <img src="./images/background.png" width="600px" />  
+</div>  
+
+- Lessen die alles behandelen, van de basis tot RAG.  
+- Interactie met historische personages via GenAI en onze begeleidende app.  
+- Een leuke en boeiende verhaallijn, je zult tijdreizen!  
+
+<div>  
+  <img src="./images/character.png" width="600px" />  
+</div>  
+
+Elke les bevat een opdracht om te voltooien, een kennischeck en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals:  
+- Prompting en prompt engineering  
+- Tekst- en afbeeldingsapp-generatie  
+- Zoekapps  
+
+Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen!  
+
+## 🌱 Aan de slag  
+
+> **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe je dit curriculum kunt gebruiken. We horen graag je feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+
+**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, begin voor elke les met een quiz voorafgaand aan de lezing en ga verder met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je begrip met de quiz na de lezing.  
+
+Om je leerervaring te verbeteren, werk samen met je medestudenten aan de projecten! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden.  
+
+Om je opleiding verder te verdiepen, raden we aan om [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) te verkennen voor aanvullende studiematerialen.  
+
+### 📋 Je omgeving instellen  
+
+Dit curriculum heeft een ontwikkelomgeving die klaar is voor gebruik! Bij het starten kun je ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving zonder installaties_), of lokaal op je computer met behulp van een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+#### Maak je repository aan  
+Om je werk eenvoudig op te slaan, raden we aan om een eigen kopie van deze repository te maken. Dit kun je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository in je GitHub-account met een kopie van het curriculum.  
+
+Volg deze stappen:  
+1. **Fork de repository**: Klik op de knop "Fork" rechtsboven op deze pagina.  
+2. **Clone de repository**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+
+#### Het curriculum draaien in een Codespace  
+
+In je kopie van deze repository die je hebt aangemaakt, klik op de knop **Code** en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace aan waarin je kunt werken.  
+
+<img src="./images/createcodespace.png" alt="Codespace aanmaken" style="width:270px;"/>  
+
+#### Het curriculum lokaal draaien op je computer  
+
+Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een commandoregeltool nodig. Onze eerste les, [Introductie tot programmeertalen en tools](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), begeleidt je door verschillende opties voor elk van deze tools, zodat je kunt kiezen wat het beste bij je past.  
+
+Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) te gebruiken als je editor, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+
+1. Clone je repository naar je computer. Dit kun je doen door op de knop **Code** te klikken en de URL te kopiëren:  
+
+    <img src="./images/createcodespace.png" alt="Kopieer je repository-URL" style="width:270px;"/>  
+
+    Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij je `<your-repository-url>` vervangt door de URL die je zojuist hebt gekopieerd:  
+
+    ```bash 
+    git clone <your-repository-url>
+    ```  
+
+2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **File** > **Open Folder** en de map te selecteren die je zojuist hebt gecloned.  
+
+>  Aanbevolen Visual Studio Code-extensies:  
+>  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's te bekijken binnen Visual Studio Code  
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om je te helpen sneller code te schrijven  
+
+## 📂 Elke les bevat:  
+
+- optionele sketchnote  
+- optionele aanvullende video  
+- quiz voorafgaand aan de les  
+- geschreven les  
+- voor projectgerichte lessen, stapsgewijze handleidingen om het project te bouwen  
+- kennischecks  
+- een uitdaging  
+- aanvullende literatuur  
+- opdracht  
+- quiz na de les  
+
+> **Een opmerking over quizzen**: Alle quizzen bevinden zich in de Quiz-app-map, in totaal 48 quizzen van elk drie vragen. Ze zijn gelinkt vanuit de lessen en de quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de `quiz-app`-map. Ze worden geleidelijk gelokaliseerd.  
+
+## 🗃️ Lessen  
+
+|     |                       Projectnaam                       |                            Behandelde Concepten                             | Leerdoelen                                                                                                                 |                                                         Gelinkte Les                                                          |         Auteur          |  
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
+| 01  |                     Aan de slag                      |           Introductie tot programmeren en tools van het vak           | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt bij hun werk | [Introductie tot programmeertalen en tools van het vak](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     Aan de slag                      |             Basisprincipes van GitHub, inclusief samenwerken in een team             | Hoe je GitHub gebruikt in je project, hoe je samenwerkt met anderen aan een codebase                                                    |                            [Introductie tot GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     Aan de slag                      |                             Toegankelijkheid                              | Leer de basisprincipes van webtoegankelijkheid                                                                                               |                       [Basisprincipes van toegankelijkheid](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 04  |                        JS Basis                         |                         JavaScript Datatypes                          | De basisprincipes van JavaScript-datatypes                                                                                                 |                                       [Datatypes](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
+| 05  |                        JS Basis                         |                         Functies en Methodes                          | Leer over functies en methodes om de logische stroom van een applicatie te beheren                                                             |                              [Functies en Methodes](/2-js-basics/2-functions-methods/README.md)                               | Jasmine en Christopher |  
+| 06  |                        JS Basis                         |                        Beslissingen nemen met JS                        | Leer hoe je voorwaarden in je code maakt met behulp van besluitvormingsmethoden                                                           |                                 [Beslissingen nemen](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 07  |                        JS Basis                         |                            Arrays en Lussen                            | Werk met data met behulp van arrays en lussen in JavaScript                                                                                 |                                   [Arrays en Lussen](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
+| 08  |       [Terrarium](/3-terrarium/solution/README.md)       |                            HTML in de praktijk                            | Bouw de HTML om een online terrarium te maken, met de focus op het bouwen van een lay-out                                                         |                                 [Introductie tot HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 09  |       [Terrarium](/3-terrarium/solution/README.md)       |                            CSS in de praktijk                             | Bouw de CSS om het online terrarium te stylen, met de focus op de basisprincipes van CSS, inclusief het responsief maken van de pagina                     |                                  [Introductie tot CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
+| 10  |            [Terrarium](/3-terrarium/solution/README.md)            |                 JavaScript Closures, DOM-manipulatie                  | Bouw de JavaScript om het terrarium te laten functioneren als een drag/drop-interface, met de focus op closures en DOM-manipulatie             |                  [JavaScript Closures, DOM-manipulatie](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
+| 11  |          [Typingspel](/4-typing-game/solution/README.md)          |                          Bouw een Typingspel                           | Leer hoe je toetsenbordgebeurtenissen gebruikt om de logica van je JavaScript-app aan te sturen                                                          |                                [Event-Driven Programming](/4-typing-game/typing-game/README.md)                                |       Christopher       |  
+| 12  | [Green Browser Extension](/5-browser-extension/solution/README.md) |                         Werken met browsers                          | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie opzet                              |                               [Over Browsers](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](/5-browser-extension/solution/README.md) | Een formulier bouwen, een API aanroepen en variabelen opslaan in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen die in lokale opslag zijn opgeslagen     |                [API's, Formulieren en Lokale Opslag](/5-browser-extension/2-forms-browsers-local-storage/README.md)            |           Jen           |
+| 14  | [Green Browser Extension](/5-browser-extension/solution/README.md) |          Achtergrondprocessen in de browser, webprestaties          | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en enkele optimalisaties |             [Achtergrondtaken en Prestaties](/5-browser-extension/3-background-tasks-and-performance/README.md)               |           Jen           |
+| 15  |           [Space Game](/6-space-game/solution/README.md)           |             Meer Geavanceerde Gameontwikkeling met JavaScript             | Leer over overerving met zowel klassen als compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel           |                      [Introductie tot Geavanceerde Gameontwikkeling](/6-space-game/1-introduction/README.md)                   |          Chris          |
+| 16  |           [Space Game](/6-space-game/solution/README.md)           |                           Tekenen op canvas                            | Leer over de Canvas API, die wordt gebruikt om elementen op een scherm te tekenen                                                    |                                [Tekenen op Canvas](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](/6-space-game/solution/README.md)           |                   Elementen bewegen op het scherm                    | Ontdek hoe elementen beweging kunnen krijgen met behulp van cartesiaanse coördinaten en de Canvas API                                |                           [Elementen Bewegen](/6-space-game/3-moving-elements-around/README.md)                                |          Chris          |
+| 18  |           [Space Game](/6-space-game/solution/README.md)           |                          Botsingsdetectie                           | Laat elementen met elkaar botsen en reageren op toetsen, en implementeer een cooldown-functie om de prestaties van het spel te verbeteren |                              [Botsingsdetectie](/6-space-game/4-collision-detection/README.md)                                |          Chris          |
+| 19  |           [Space Game](/6-space-game/solution/README.md)           |                             Score bijhouden                              | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel                                                   |                                    [Score Bijhouden](/6-space-game/5-keeping-score/README.md)                                  |          Chris          |
+| 20  |           [Space Game](/6-space-game/solution/README.md)           |                     Het spel beëindigen en opnieuw starten                     | Leer hoe je het spel beëindigt en opnieuw start, inclusief het opruimen van assets en het resetten van variabelen                    |                                [De Eindconditie](/6-space-game/6-end-condition/README.md)                                      |          Chris          |
+| 21  |         [Banking App](/7-bank-project/solution/README.md)          |                 HTML-sjablonen en routes in een webapp                 | Leer hoe je de structuur van een meerpaginawebsite opzet met routing en HTML-sjablonen                                               |                            [HTML-sjablonen en Routes](/7-bank-project/1-template-route/README.md)                              |          Yohan          |
+| 22  |         [Banking App](/7-bank-project/solution/README.md)          |                  Een inlog- en registratieformulier bouwen                   | Leer hoe je formulieren bouwt en validatieroutines afhandelt                                                                         |                                           [Formulieren](/7-bank-project/2-forms/README.md)                                     |          Yohan          |
+| 23  |         [Banking App](/7-bank-project/solution/README.md)          |                   Methoden voor het ophalen en gebruiken van gegevens                   | Hoe gegevens in en uit je app stromen, hoe je ze ophaalt, opslaat en verwijdert                                                      |                                            [Gegevens](/7-bank-project/3-data/README.md)                                        |          Yohan          |
+| 24  |         [Banking App](/7-bank-project/solution/README.md)          |                      Concepten van statusbeheer                      | Leer hoe je app de status behoudt en hoe je deze programmatisch beheert                                                              |                                [Statusbeheer](/7-bank-project/4-state-management/README.md)                                    |          Yohan          |
+
+
+## 🏫 Pedagogiek
+
+Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
+* projectmatig leren
+* frequente quizzen
+
+Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die door moderne webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door een typgame, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl spel en een bankapp voor bedrijven te bouwen. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgedaan.
+
+
+> 🎓 Je kunt de eerste paar lessen in dit curriculum volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn!
+
+Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het begrip van concepten versterkt. We hebben ook verschillende startlessen geschreven over de basisprincipes van JavaScript om concepten te introduceren, gecombineerd met een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan dit curriculum.
+
+Daarnaast zorgt een laagdrempelige quiz vóór een les ervoor dat de student zich richt op het leren van een onderwerp, terwijl een tweede quiz na de les verdere retentie bevordert. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan in zijn geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden tegen het einde van de 12-weekse cyclus steeds complexer.
+
+Hoewel we bewust hebben vermeden JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat een framework wordt aangenomen, zou een goede volgende stap na het voltooien van dit curriculum zijn om meer te leren over Node.js via een andere collectie video's: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+
+> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We verwelkomen je constructieve feedback!
+
+
+## 🧭 Offline toegang
+
+Je kunt deze documentatie offline uitvoeren met behulp van [Docsify](https://docsify.js.org/#/). Fork deze repo, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de hoofdmap van deze repo `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`.
+
+## 📘 PDF
+
+Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
+
+
+## 🎒 Andere Cursussen
+
+Ons team produceert andere cursussen! Bekijk:
+
+- [Generatieve AI voor Beginners](https://aka.ms/genai-beginners)
+- [Generatieve AI voor Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
+- [Generatieve AI met JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
+- [Generatieve AI met Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
+- [AI voor Beginners](https://aka.ms/ai-beginners)
+- [Data Science voor Beginners](https://aka.ms/datascience-beginners)
+- [ML voor Beginners](https://aka.ms/ml-beginners)
+- [Cybersecurity voor Beginners](https://github.com/microsoft/Security-101)
+- [Webontwikkeling voor Beginners](https://aka.ms/webdev-beginners)
+- [IoT voor Beginners](https://aka.ms/iot-beginners)
+- [XR Ontwikkeling voor Beginners](https://github.com/microsoft/xr-development-for-beginners)
+- [Mastering GitHub Copilot voor Agentic gebruik](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
+- [Mastering GitHub Copilot voor C#/.NET Ontwikkelaars](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
+- [Kies Je Eigen Copilot Avontuur](https://github.com/microsoft/CopilotAdventures)
+
+## Licentie
+
+Deze repository is gelicentieerd onder de MIT-licentie. Zie het [LICENSE](../../LICENSE) bestand voor meer informatie.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/SECURITY.md b/translations/nl/SECURITY.md
new file mode 100644
index 00000000..93200a44
--- /dev/null
+++ b/translations/nl/SECURITY.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
+  "translation_date": "2025-08-27T20:03:50+00:00",
+  "source_file": "SECURITY.md",
+  "language_code": "nl"
+}
+-->
+## Beveiliging
+
+Microsoft neemt de beveiliging van onze softwareproducten en -diensten serieus, inclusief alle broncode-opslagplaatsen die worden beheerd via onze GitHub-organisaties, waaronder [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) en [onze GitHub-organisaties](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
+
+Als u denkt dat u een beveiligingskwetsbaarheid hebt gevonden in een opslagplaats die eigendom is van Microsoft en die voldoet aan [Microsoft's definitie van een beveiligingskwetsbaarheid](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), meld dit dan aan ons zoals hieronder beschreven.
+
+## Beveiligingsproblemen Melden
+
+**Meld beveiligingskwetsbaarheden niet via openbare GitHub-issues.**
+
+Meld ze in plaats daarvan aan het Microsoft Security Response Center (MSRC) via [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
+
+Als u liever zonder in te loggen een melding maakt, stuur dan een e-mail naar [secure@microsoft.com](mailto:secure@microsoft.com). Indien mogelijk, versleutel uw bericht met onze PGP-sleutel; download deze van de [Microsoft Security Response Center PGP Key-pagina](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
+
+U zou binnen 24 uur een reactie moeten ontvangen. Als dat om de een of andere reden niet gebeurt, volg dan op via e-mail om te bevestigen dat we uw oorspronkelijke bericht hebben ontvangen. Meer informatie is te vinden op [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
+
+Voeg de onderstaande gevraagde informatie toe (voor zover mogelijk) om ons te helpen de aard en omvang van het mogelijke probleem beter te begrijpen:
+
+  * Type probleem (bijv. buffer overflow, SQL-injectie, cross-site scripting, enz.)
+  * Volledige paden van de bronbestanden die verband houden met de manifestatie van het probleem
+  * De locatie van de getroffen broncode (tag/branch/commit of directe URL)
+  * Eventuele speciale configuratie die nodig is om het probleem te reproduceren
+  * Stapsgewijze instructies om het probleem te reproduceren
+  * Proof-of-concept of exploitcode (indien mogelijk)
+  * Impact van het probleem, inclusief hoe een aanvaller het probleem zou kunnen misbruiken
+
+Deze informatie helpt ons om uw melding sneller te beoordelen.
+
+Als u rapporteert voor een bug bounty, kunnen meer complete rapporten bijdragen aan een hogere beloning. Bezoek onze [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon)-pagina voor meer details over onze actieve programma's.
+
+## Voorkeurs Talen
+
+We geven de voorkeur aan communicatie in het Engels.
+
+## Beleid
+
+Microsoft volgt het principe van [Gecoördineerde Kwetsbaarheidsmelding](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/SUPPORT.md b/translations/nl/SUPPORT.md
new file mode 100644
index 00000000..53b07c9a
--- /dev/null
+++ b/translations/nl/SUPPORT.md
@@ -0,0 +1,25 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
+  "translation_date": "2025-08-27T20:02:18+00:00",
+  "source_file": "SUPPORT.md",
+  "language_code": "nl"
+}
+-->
+# Ondersteuning
+
+## Hoe problemen te melden en hulp te krijgen  
+
+Dit project gebruikt GitHub Issues om bugs en functieverzoeken bij te houden. Zoek eerst tussen de bestaande problemen voordat je een nieuw probleem meldt om duplicaten te voorkomen. Voor nieuwe problemen kun je je bug of functieverzoek indienen als een nieuw Issue.
+
+Voor hulp en vragen over het gebruik van dit project, raadpleeg [onze richtlijnen voor bijdragen](CONTRIBUTING.md).
+
+## Microsoft Ondersteuningsbeleid  
+
+Ondersteuning voor dit project is beperkt tot de hierboven vermelde bronnen.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/_404.md b/translations/nl/_404.md
new file mode 100644
index 00000000..cd13c1c5
--- /dev/null
+++ b/translations/nl/_404.md
@@ -0,0 +1,21 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
+  "translation_date": "2025-08-27T20:03:27+00:00",
+  "source_file": "_404.md",
+  "language_code": "nl"
+}
+-->
+# Werk in uitvoering
+
+We werken aan deze pagina. Kom later nog eens terug.
+
+Open een [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) als je vragen hebt.
+
+**[Terug naar home](../../../../../../..)**
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/docs/_navbar.md b/translations/nl/docs/_navbar.md
new file mode 100644
index 00000000..de937f66
--- /dev/null
+++ b/translations/nl/docs/_navbar.md
@@ -0,0 +1,34 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "3bd2f51ecf4ac9b39277cba748943793",
+  "translation_date": "2025-08-27T20:20:20+00:00",
+  "source_file": "docs/_navbar.md",
+  "language_code": "nl"
+}
+-->
+- Vertalingen
+  - [Engels (Verenigde Staten)](../../../docs/README)
+  - [বাংলা](../../../docs/README.bn)
+  - [中文(中国)](../../../docs/README.zh-cn)
+  - [中文(台湾)](../../../docs/README.zh-tw)
+  - [Spaans](../../../docs/README.es)
+  - [Frans](../../../docs/README.fr)
+  - [Grieks](../../../docs/README.el)
+  - [Hindi](../../../docs/README.hi)
+  - [Bahasa Melayu](../../../docs/README.ms)
+  - [Malayalam](../../../docs/README.ml)
+  - [Tamil](../../../docs/README.ta)
+  - [Telugu](../../../docs/README.te)
+  - [Bahasa Indonesia](../../../docs/README.id)
+  - [Italiaans](../../../docs/README.it)
+  - [Japans](../../../docs/README.ja)
+  - [Nederlands](../../../docs/README.nl)
+  - [Nepalees](../../../docs/README.np)
+  - [Portugees](../../../docs/README.pt)
+  - [Russisch](../../../docs/README.ru)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/docs/_sidebar.md b/translations/nl/docs/_sidebar.md
new file mode 100644
index 00000000..4e41707f
--- /dev/null
+++ b/translations/nl/docs/_sidebar.md
@@ -0,0 +1,51 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
+  "translation_date": "2025-08-27T20:19:56+00:00",
+  "source_file": "docs/_sidebar.md",
+  "language_code": "nl"
+}
+-->
+- Introductie
+  - [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 Basisprincipes
+  - [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)
+
+- Typingspel
+  - [11](../4-typing-game/typing-game/README.md)
+  
+- Browserextensie
+  - [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)
+
+- Ruimtespel
+  - [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)
+
+- Bankproject
+  - [21](../7-bank-project/1-template-route/README.md)
+  - [22](../7-bank-project/2-forms/README.md)
+  - [23](../7-bank-project/3-data/README.md)
+  - [24](../7-bank-project/4-state-management/README.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/for-teachers.md b/translations/nl/for-teachers.md
new file mode 100644
index 00000000..68224fba
--- /dev/null
+++ b/translations/nl/for-teachers.md
@@ -0,0 +1,47 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
+  "translation_date": "2025-08-27T20:02:40+00:00",
+  "source_file": "for-teachers.md",
+  "language_code": "nl"
+}
+-->
+## Voor Docenten
+
+Wilt u dit lesprogramma in uw klas gebruiken? Voel u vrij om dat te doen!
+
+U kunt het zelfs direct binnen GitHub gebruiken door gebruik te maken van GitHub Classroom.
+
+Om dit te doen, fork deze repository. U zult een aparte repository moeten maken voor elke les, dus u moet elke map in een aparte repository plaatsen. Op die manier kan [GitHub Classroom](https://classroom.github.com/classrooms) elke les afzonderlijk oppakken.
+
+Deze [volledige instructies](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) geven u een idee van hoe u uw klaslokaal kunt opzetten.
+
+## Gebruik in Moodle, Canvas of Blackboard
+
+Dit lesprogramma werkt goed in deze Learning Management Systems! Gebruik het [Moodle uploadbestand](../../../../../../../teaching-files/webdev-moodle.mbz) voor de volledige inhoud, of probeer het [Common Cartridge-bestand](../../../../../../../teaching-files/webdev-common-cartridge.imscc) dat een deel van de inhoud bevat. Moodle Cloud ondersteunt geen volledige Common Cartridge-exporten, dus het is beter om het Moodle-downloadbestand te gebruiken, dat kan worden geüpload in Canvas. Laat ons weten hoe we deze ervaring kunnen verbeteren.
+
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.nl.png)
+> Het lesprogramma in een Moodle-klaslokaal
+
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.nl.png)
+> Het lesprogramma in Canvas
+
+## Gebruik van de repository zoals deze is
+
+Als u deze repository wilt gebruiken zoals deze nu is, zonder gebruik te maken van GitHub Classroom, is dat ook mogelijk. U moet dan met uw studenten communiceren over welke les ze samen moeten doorlopen.
+
+In een online format (Zoom, Teams of andere) kunt u breakout rooms maken voor de quizzen en studenten begeleiden om hen klaar te stomen om te leren. Nodig vervolgens studenten uit voor de quizzen en laat hen hun antwoorden indienen als 'issues' op een bepaald moment. U kunt hetzelfde doen met opdrachten als u wilt dat studenten openlijk samenwerken.
+
+Als u de voorkeur geeft aan een meer privéformat, vraag uw studenten dan om het lesprogramma, les voor les, te forken naar hun eigen privé GitHub-repositories en geef u toegang. Vervolgens kunnen ze quizzen en opdrachten privé voltooien en deze via issues op uw klaslokaal-repository aan u indienen.
+
+Er zijn veel manieren om dit te laten werken in een online klaslokaal. Laat ons weten wat voor u het beste werkt!
+
+## Geef ons uw mening!
+
+We willen dit lesprogramma laten werken voor u en uw studenten. Neem contact met ons op via de [Teacher corner](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) en open een [**nieuw issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) voor verzoeken, bugs en feedback.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/lesson-template/README.md b/translations/nl/lesson-template/README.md
new file mode 100644
index 00000000..9fe87191
--- /dev/null
+++ b/translations/nl/lesson-template/README.md
@@ -0,0 +1,65 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "0494be70ad7fadd13a8c3d549c23e355",
+  "translation_date": "2025-08-27T21:06:58+00:00",
+  "source_file": "lesson-template/README.md",
+  "language_code": "nl"
+}
+-->
+# [Lesonderwerp]
+
+![Voeg hier een video in](../../../lesson-template/video-url)
+
+## [Quiz voorafgaand aan de les](../../../lesson-template/quiz-url)
+
+[Beschrijf wat we gaan leren]
+
+### Introductie
+
+Beschrijf wat er behandeld zal worden
+
+> Notities
+
+### Vereisten
+
+Welke stappen moeten al zijn behandeld voordat deze les begint?
+
+### Voorbereiding
+
+Voorbereidende stappen om met deze les te beginnen
+
+---
+
+[Doorloop de inhoud in blokken]
+
+## [Onderwerp 1]
+
+### Taak:
+
+Werk samen om je codebase stapsgewijs te verbeteren en het project te bouwen met gedeelde code:
+
+```html
+code blocks
+```
+
+✅ Kennischeck - gebruik dit moment om de kennis van studenten te vergroten met open vragen
+
+## [Onderwerp 2]
+
+## [Onderwerp 3]
+
+🚀 Uitdaging: Voeg een uitdaging toe voor studenten om samen in de klas aan te werken om het project te verbeteren
+
+Optioneel: voeg een screenshot toe van de gebruikersinterface van de voltooide les, indien van toepassing
+
+## [Quiz na de les](../../../lesson-template/quiz-url)
+
+## Herhaling & Zelfstudie
+
+**Opdracht inleveren [MM/JJ]**: [Opdrachtnaam](assignment.md)
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/lesson-template/assignment.md b/translations/nl/lesson-template/assignment.md
new file mode 100644
index 00000000..4cf630c4
--- /dev/null
+++ b/translations/nl/lesson-template/assignment.md
@@ -0,0 +1,23 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
+  "translation_date": "2025-08-27T21:07:18+00:00",
+  "source_file": "lesson-template/assignment.md",
+  "language_code": "nl"
+}
+-->
+# [Opdrachtnaam]
+
+## Instructies
+
+## Rubriek
+
+| Criteria | Uitmuntend | Voldoende | Moet Verbeteren |
+| -------- | ---------- | --------- | --------------- |
+|          |            |           |                 |
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file
diff --git a/translations/nl/quiz-app/README.md b/translations/nl/quiz-app/README.md
new file mode 100644
index 00000000..c19a5cb5
--- /dev/null
+++ b/translations/nl/quiz-app/README.md
@@ -0,0 +1,191 @@
+<!--
+CO_OP_TRANSLATOR_METADATA:
+{
+  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
+  "translation_date": "2025-08-27T21:10:37+00:00",
+  "source_file": "quiz-app/README.md",
+  "language_code": "nl"
+}
+-->
+# Quiz-app
+
+Deze quizzen zijn de pre- en post-lecture quizzen voor het data science curriculum op https://aka.ms/webdev-beginners
+
+## Een vertaalde quizset toevoegen
+
+Voeg een quizvertaling toe door bijpassende quizstructuren te maken in de map `assets/translations`. De originele quizzen staan in `assets/translations/en`. De quizzen zijn onderverdeeld in verschillende groepen. Zorg ervoor dat de nummering overeenkomt met de juiste quizsectie. Er zijn in totaal 40 quizzen in dit curriculum, waarbij de telling begint bij 0.
+
+  
+<details>
+<summary>Hier is de structuur van een vertaalbestand:</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>
+
+Na het bewerken van de vertalingen, bewerk het bestand index.js in de vertaalmap om alle bestanden te importeren volgens de conventies in `en`.
+
+Bewerk het bestand `index.js` in `assets/translations` om de nieuw vertaalde bestanden te importeren. 
+
+Bijvoorbeeld, als je vertaalde JSON-bestand `ex.json` heet, maak dan 'ex' de lokalisatiesleutel en voer het als volgt in om het te importeren:
+
+<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>
+
+## De Quiz-app lokaal uitvoeren
+
+### Vereisten
+
+- Een GitHub-account
+- [Node.js en Git](https://nodejs.org/)
+
+### Installatie & Setup
+
+1. Maak een repository aan via deze [template](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 
+
+1. Clone je nieuwe repository en navigeer naar de quiz-app
+
+   ```bash
+   git clone https://github.com/your-github-organization/repo-name
+   cd repo-name/quiz-app
+   ```
+
+1. Installeer de npm-pakketten en afhankelijkheden
+
+   ```bash
+   npm install
+   ```
+
+### De app bouwen
+
+1. Om de oplossing te bouwen, voer uit:
+
+   ```bash
+   npm run build
+   ```
+
+### De app starten
+
+1. Om de oplossing uit te voeren, voer uit:
+
+    ```bash
+    npm run dev
+    ```
+
+### [Optioneel] Linting
+
+1. Om ervoor te zorgen dat de code linted is, voer uit:
+
+    ```bash
+    npm run lint
+    ```
+
+## De Quiz-app naar Azure deployen 
+
+### Vereisten
+- Een Azure-abonnement. Meld je hier gratis aan [hier](https://aka.ms/azure-free).
+
+    _Kostenraming voor het deployen van deze quiz-app: GRATIS_
+
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+Zodra je bent ingelogd op Azure via de bovenstaande link, selecteer een abonnement en resourcegroep, en:
+
+- Details van Static Web App: Geef een naam op en selecteer een hostingplan
+- GitHub Login: Stel je deploymentbron in als GitHub, log in en vul de vereiste velden in op het formulier:
+    - *Organisatie* – Kies je organisatie.
+    - *Repository* – Selecteer de Web Dev for Beginners curriculum repository. 
+    - *Branch* - Selecteer een branch (main) 
+- Build Presets: Azure Static Web Apps gebruikt een detectie-algoritme om het framework te detecteren dat in je applicatie wordt gebruikt. 
+    - *App locatie* - ./quiz-app
+    - *Api locatie* -
+    - *Output locatie* - dist
+- Deployment: Klik op 'Review + Create', en vervolgens op 'Create'
+
+    Zodra de app is gedeployed, wordt er een workflowbestand aangemaakt in de map *.github* van je repository. Dit workflowbestand bevat instructies over gebeurtenissen die een her-deployment van de app naar Azure zullen triggeren, bijvoorbeeld _een **push** op branch **main**_ etc.
+
+    <details>
+    <summary>Voorbeeld Workflow Bestand</summary>
+    Hier is een voorbeeld van hoe het GitHub Actions workflowbestand eruit zou kunnen zien:
+    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: Nadat de deployment is voltooid, klik op 'Go to Deployment' en vervolgens op 'View app in browser'.
+
+Zodra je GitHub Action (workflow) succesvol is uitgevoerd, ververs de live pagina om je applicatie te bekijken.
+
+---
+
+**Disclaimer**:  
+Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
\ No newline at end of file