From 6d36b32e35897aef305794fc157ea7d2f0cec685 Mon Sep 17 00:00:00 2001
From: freeCodeCamp's Camper Bot <camperbot@users.noreply.github.com>
Date: Mon, 15 Jul 2024 22:45:43 -0500
Subject: [PATCH] chore(i18n,learn): processed translations (#55516)

---
 .../60f5c3e399ff1a05629964e4.md               |  6 ++
 .../63507c4b63731437227b0134.md               | 10 ++--
 .../656472ed8f552d2f2b3f7883.md               |  2 +-
 .../64e4e78a7ea4a168de4e6a38.md               |  4 +-
 .../60f5c3e399ff1a05629964e4.md               |  6 ++
 .../63507c4b63731437227b0134.md               | 10 ++--
 .../656472ed8f552d2f2b3f7883.md               |  2 +-
 .../64e4e78a7ea4a168de4e6a38.md               |  4 +-
 .../60f5c3e399ff1a05629964e4.md               |  6 ++
 .../63507c4b63731437227b0134.md               | 10 ++--
 .../656472ed8f552d2f2b3f7883.md               |  2 +-
 .../64e4e78a7ea4a168de4e6a38.md               |  4 +-
 .../60f5c3e399ff1a05629964e4.md               |  6 ++
 .../63507c4b63731437227b0134.md               | 10 ++--
 .../656472ed8f552d2f2b3f7883.md               |  2 +-
 .../64e4e78a7ea4a168de4e6a38.md               |  4 +-
 .../60f5c3e399ff1a05629964e4.md               |  6 ++
 .../63507c4b63731437227b0134.md               | 10 ++--
 .../656472ed8f552d2f2b3f7883.md               |  2 +-
 .../64e4e78a7ea4a168de4e6a38.md               |  4 +-
 .../60f5c3e399ff1a05629964e4.md               |  6 ++
 .../63507c4b63731437227b0134.md               | 10 ++--
 .../656472ed8f552d2f2b3f7883.md               |  2 +-
 .../64e4e78a7ea4a168de4e6a38.md               |  4 +-
 .../60f5c3e399ff1a05629964e4.md               |  6 ++
 .../63507c4b63731437227b0134.md               | 10 ++--
 .../656472ed8f552d2f2b3f7883.md               |  2 +-
 .../64e4e78a7ea4a168de4e6a38.md               |  4 +-
 .../60f5c3e399ff1a05629964e4.md               |  6 ++
 .../63507c4b63731437227b0134.md               | 10 ++--
 .../656472ed8f552d2f2b3f7883.md               |  2 +-
 .../64e4e78a7ea4a168de4e6a38.md               |  4 +-
 .../60f5c3e399ff1a05629964e4.md               |  6 ++
 .../63507c4b63731437227b0134.md               | 10 ++--
 .../656472ed8f552d2f2b3f7883.md               |  2 +-
 .../64e4e78a7ea4a168de4e6a38.md               |  4 +-
 .../60f5c3e399ff1a05629964e4.md               |  6 ++
 .../63507c4b63731437227b0134.md               | 10 ++--
 .../656472ed8f552d2f2b3f7883.md               |  2 +-
 .../64e4e78a7ea4a168de4e6a38.md               |  4 +-
 .../60f5c3e399ff1a05629964e4.md               |  6 ++
 .../63507c4b63731437227b0134.md               | 10 ++--
 .../656472ed8f552d2f2b3f7883.md               |  2 +-
 .../64e4e78a7ea4a168de4e6a38.md               |  4 +-
 .../introduction-flexbox-lesson-a.md          | 38 ++++++------
 .../introduction-flexbox-lesson-f.md          |  2 +-
 .../introduction-flexbox-lesson-g.md          |  2 +-
 .../introduction-flexbox-lesson-h.md          |  2 +-
 .../introduction-flexbox-lesson-i.md          |  2 +-
 .../introduction-flexbox-lesson-j.md          |  2 +-
 .../introduction-flexbox-lesson-k.md          |  2 +-
 .../learn-arrays-and-loops-lesson-e.md        |  2 +-
 .../learn-arrays-and-loops-lesson-f.md        |  2 +-
 .../learn-arrays-and-loops-lesson-g.md        |  2 +-
 .../learn-arrays-and-loops-lesson-h.md        |  2 +-
 .../learn-block-and-inline-lesson-a.md        | 10 ++--
 .../learn-block-and-inline-lesson-b.md        | 16 ++---
 .../learn-block-and-inline-lesson-c.md        | 14 ++---
 .../learn-block-and-inline-lesson-d.md        | 14 ++---
 .../learn-block-and-inline-lesson-e.md        | 14 ++---
 .../learn-block-and-inline-lesson-f.md        | 14 ++---
 .../learn-block-and-inline-lesson-g.md        | 14 ++---
 .../learn-block-and-inline-lesson-h.md        | 14 ++---
 .../learn-block-and-inline-lesson-i.md        | 12 ++--
 .../learn-block-and-inline-lesson-j.md        | 14 ++---
 .../learn-block-and-inline-lesson-k.md        | 14 ++---
 .../css-foundations-lesson-a.md               | 14 ++---
 .../css-foundations-lesson-b.md               | 24 ++++----
 .../css-foundations-lesson-c.md               | 10 ++--
 .../css-foundations-lesson-d.md               | 16 ++---
 .../the-cascade-of-css-lesson-a.md            | 18 +++---
 .../the-cascade-of-css-lesson-b.md            | 22 +++----
 .../the-cascade-of-css-lesson-c.md            | 16 ++---
 .../the-cascade-of-css-lesson-d.md            | 16 ++---
 .../the-cascade-of-css-lesson-e.md            | 16 ++---
 .../the-cascade-of-css-lesson-f.md            | 10 ++--
 .../the-cascade-of-css-lesson-g.md            | 18 +++---
 .../the-cascade-of-css-lesson-h.md            | 18 +++---
 ...rn-data-types-and-conditionals-lesson-l.md |  2 +-
 .../html-foundations-lesson-a.md              | 22 +++----
 .../html-foundations-lesson-b.md              | 18 +++---
 .../html-foundations-lesson-c.md              | 30 +++++-----
 .../html-foundations-lesson-d.md              | 20 +++----
 .../html-foundations-lesson-e.md              | 30 +++++-----
 .../html-foundations-lesson-f.md              | 20 +++----
 .../html-foundations-lesson-g.md              | 12 ++--
 .../html-foundations-lesson-h.md              | 12 ++--
 .../learn-variables-and-operators-lesson-h.md | 26 ++++----
 .../links-and-images-lesson-a.md              | 32 +++++-----
 .../links-and-images-lesson-b.md              | 36 +++++------
 .../links-and-images-lesson-c.md              | 30 +++++-----
 .../links-and-images-lesson-d.md              | 50 ++++++++--------
 .../links-and-images-lesson-e.md              | 54 ++++++++---------
 .../links-and-images-lesson-f.md              | 58 +++++++++---------
 .../links-and-images-lesson-g.md              | 52 ++++++++--------
 .../links-and-images-lesson-h.md              | 60 +++++++++----------
 .../the-box-model-lesson-a.md                 | 20 +++----
 .../the-box-model-lesson-b.md                 | 20 +++----
 .../the-box-model-lesson-c.md                 | 22 +++----
 .../the-box-model-lesson-d.md                 | 22 +++----
 .../the-box-model-lesson-e.md                 | 16 ++---
 .../the-box-model-lesson-f.md                 | 18 +++---
 .../the-box-model-lesson-g.md                 | 30 +++++-----
 .../the-box-model-lesson-h.md                 | 14 ++---
 .../the-box-model-lesson-i.md                 | 14 ++---
 .../the-box-model-lesson-j.md                 | 14 ++---
 .../the-box-model-lesson-k.md                 |  6 +-
 .../the-box-model-lesson-l.md                 | 10 ++--
 .../the-box-model-lesson-m.md                 |  6 +-
 .../working-with-text-lesson-a.md             | 20 +++----
 .../working-with-text-lesson-b.md             | 20 +++----
 .../working-with-text-lesson-c.md             | 18 +++---
 .../working-with-text-lesson-d.md             | 14 ++---
 .../working-with-text-lesson-e.md             | 24 ++++----
 .../working-with-text-lesson-f.md             | 24 ++++----
 .../working-with-text-lesson-g.md             | 10 ++--
 .../working-with-text-lesson-h.md             | 28 ++++-----
 .../working-with-text-lesson-i.md             | 18 +++---
 .../working-with-text-lesson-j.md             | 18 +++---
 119 files changed, 842 insertions(+), 776 deletions(-)

diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
index 0f052b2d74f..a95911ad15f 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -30,6 +30,12 @@ assert.notEqual(document.querySelector('form')?.action, window?.location?.href);
 assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
 ```
 
+Your `form` element should have a closing tag `</form>`.
+
+```js
+assert.match(code, /<\/form\>/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
index e32488bb058..426ce3d0ec0 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
@@ -21,16 +21,16 @@ Add a callback function to your `.map()` method that converts each element to a
 
 # --hints--
 
-Your `.map()` method should have a callback function which takes an `el` parameter.
+Your `.map()` method should have a callback function.
 
 ```js
-assert.match(calculate.toString(), /array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{/)
+assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
 ```
 
-Your callback function should use the `Number` constructor to convert `el` to a number.
+Your callback function should use the `Number` constructor to convert each array element to a number.
 
 ```js
-assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
 ```
 
 Your callback function should not use the `new` keyword with the `Number` constructor.
@@ -42,7 +42,7 @@ assert.notMatch(calculate.toString(), /new/);
 Your callback function should return the element converted to a number.
 
 ```js
-assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{)\s*(return\s+)?Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index 2a0f5d60ff7..1482f8906cd 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -7,7 +7,7 @@ dashedName: step-39
 
 # --description--
 
-Add an `else` block to handle the current song's position in the playlist.
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
 
 Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.
 
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
index 39ddfc1b493..17a02196a59 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -17,9 +17,9 @@ The `toggle` method will add the class if it is not present on the element, and
 element.classList.toggle("class-to-toggle");
 ```
 
-Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
+Add an event listener to the `openTaskFormBtn` element and pass in a `"click"` event for the first argument and an anonymous callback function for the second argument.
 
-For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
+Inside the callback function, use the `classList.toggle()` method to toggle the `"hidden"` class on the `taskForm` element.
 
 Now you can `click` on the "Add new Task" button and see the form modal.
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
index 1a73e23bd8e..056bfe4bd35 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -30,6 +30,12 @@ assert.notEqual(document.querySelector('form')?.action, window?.location?.href);
 assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
 ```
 
+Your `form` element should have a closing tag `</form>`.
+
+```js
+assert.match(code, /<\/form\>/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
index fa7a472ae10..69a45701e82 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
@@ -21,16 +21,16 @@ Add a callback function to your `.map()` method that converts each element to a
 
 # --hints--
 
-Your `.map()` method should have a callback function which takes an `el` parameter.
+Your `.map()` method should have a callback function.
 
 ```js
-assert.match(calculate.toString(), /array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{/)
+assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
 ```
 
-Your callback function should use the `Number` constructor to convert `el` to a number.
+Your callback function should use the `Number` constructor to convert each array element to a number.
 
 ```js
-assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
 ```
 
 Your callback function should not use the `new` keyword with the `Number` constructor.
@@ -42,7 +42,7 @@ assert.notMatch(calculate.toString(), /new/);
 Your callback function should return the element converted to a number.
 
 ```js
-assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{)\s*(return\s+)?Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index 2a0f5d60ff7..1482f8906cd 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -7,7 +7,7 @@ dashedName: step-39
 
 # --description--
 
-Add an `else` block to handle the current song's position in the playlist.
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
 
 Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.
 
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
index 0edd9ab82d5..0d9e1cc3dd6 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -17,9 +17,9 @@ The `toggle` method will add the class if it is not present on the element, and
 element.classList.toggle("class-to-toggle");
 ```
 
-Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
+Add an event listener to the `openTaskFormBtn` element and pass in a `"click"` event for the first argument and an anonymous callback function for the second argument.
 
-For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
+Inside the callback function, use the `classList.toggle()` method to toggle the `"hidden"` class on the `taskForm` element.
 
 Now you can `click` on the "Add new Task" button and see the form modal.
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
index 6fb90653425..3cf4b7f469c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -30,6 +30,12 @@ assert.notEqual(document.querySelector('form')?.action, window?.location?.href);
 assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
 ```
 
+Your `form` element should have a closing tag `</form>`.
+
+```js
+assert.match(code, /<\/form\>/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
index fa7a472ae10..69a45701e82 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
@@ -21,16 +21,16 @@ Add a callback function to your `.map()` method that converts each element to a
 
 # --hints--
 
-Your `.map()` method should have a callback function which takes an `el` parameter.
+Your `.map()` method should have a callback function.
 
 ```js
-assert.match(calculate.toString(), /array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{/)
+assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
 ```
 
-Your callback function should use the `Number` constructor to convert `el` to a number.
+Your callback function should use the `Number` constructor to convert each array element to a number.
 
 ```js
-assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
 ```
 
 Your callback function should not use the `new` keyword with the `Number` constructor.
@@ -42,7 +42,7 @@ assert.notMatch(calculate.toString(), /new/);
 Your callback function should return the element converted to a number.
 
 ```js
-assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{)\s*(return\s+)?Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index 2a0f5d60ff7..1482f8906cd 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -7,7 +7,7 @@ dashedName: step-39
 
 # --description--
 
-Add an `else` block to handle the current song's position in the playlist.
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
 
 Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.
 
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
index b5985862443..4f6753d9e85 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -17,9 +17,9 @@ The `toggle` method will add the class if it is not present on the element, and
 element.classList.toggle("class-to-toggle");
 ```
 
-Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
+Add an event listener to the `openTaskFormBtn` element and pass in a `"click"` event for the first argument and an anonymous callback function for the second argument.
 
-For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
+Inside the callback function, use the `classList.toggle()` method to toggle the `"hidden"` class on the `taskForm` element.
 
 Now you can `click` on the "Add new Task" button and see the form modal.
 
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
index cd102dad3d0..bbda1f15a54 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -30,6 +30,12 @@ Debes dar al `action` un valor de `https://register-demo.freecodecamp.org`.
 assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
 ```
 
+Your `form` element should have a closing tag `</form>`.
+
+```js
+assert.match(code, /<\/form\>/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
index 95837e6a64e..0d4de1a0ac0 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
@@ -21,16 +21,16 @@ Add a callback function to your `.map()` method that converts each element to a
 
 # --hints--
 
-Your `.map()` method should have a callback function which takes an `el` parameter.
+Your `.map()` method should have a callback function.
 
 ```js
-assert.match(calculate.toString(), /array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{/)
+assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
 ```
 
-Your callback function should use the `Number` constructor to convert `el` to a number.
+Your callback function should use the `Number` constructor to convert each array element to a number.
 
 ```js
-assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
 ```
 
 Your callback function should not use the `new` keyword with the `Number` constructor.
@@ -42,7 +42,7 @@ assert.notMatch(calculate.toString(), /new/);
 Your callback function should return the element converted to a number.
 
 ```js
-assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{)\s*(return\s+)?Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index 2a0f5d60ff7..1482f8906cd 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -7,7 +7,7 @@ dashedName: step-39
 
 # --description--
 
-Add an `else` block to handle the current song's position in the playlist.
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
 
 Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.
 
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
index bbe7fa3a7a5..a9a30c9c66d 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -17,9 +17,9 @@ The `toggle` method will add the class if it is not present on the element, and
 element.classList.toggle("class-to-toggle");
 ```
 
-Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
+Add an event listener to the `openTaskFormBtn` element and pass in a `"click"` event for the first argument and an anonymous callback function for the second argument.
 
-For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
+Inside the callback function, use the `classList.toggle()` method to toggle the `"hidden"` class on the `taskForm` element.
 
 Now you can `click` on the "Add new Task" button and see the form modal.
 
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
index ce5e5230b51..20f7dfca2ee 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -30,6 +30,12 @@ Du solltest der `action` einen Wert von `https://register-demo.freecodecamp.org`
 assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
 ```
 
+Dein `form`-Element sollte einen schließenden Tag haben `</form>`.
+
+```js
+assert.match(code, /<\/form\>/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
index 40e42e246ec..3488594d07e 100644
--- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
@@ -21,16 +21,16 @@ Füge deiner `.map()`-Methode eine Callback-Funktion hinzu, die jedes Element in
 
 # --hints--
 
-Deine `.map()`-Methode sollte eine Callback-Funktion haben, die einen `el`-Parameter verwendet.
+Your `.map()` method should have a callback function.
 
 ```js
-assert.match(calculate.toString(), /array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{/)
+assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
 ```
 
-Deine Callback-Funktion sollte den `Number`-Konstruktor verwenden, um `el` in eine Zahl umzuwandeln.
+Your callback function should use the `Number` constructor to convert each array element to a number.
 
 ```js
-assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
 ```
 
 Deine Callback-Funktion sollte das `new`-Schlüsselwort nicht mit dem `Number`-Konstruktor verwenden.
@@ -42,7 +42,7 @@ assert.notMatch(calculate.toString(), /new/);
 Deine Callback-Funktion sollte das in eine Zahl umgewandelte Element zurückgeben.
 
 ```js
-assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{)\s*(return\s+)?Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index 2a0f5d60ff7..1482f8906cd 100644
--- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -7,7 +7,7 @@ dashedName: step-39
 
 # --description--
 
-Add an `else` block to handle the current song's position in the playlist.
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
 
 Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.
 
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
index bd6903d317b..471864b1000 100644
--- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -17,9 +17,9 @@ The `toggle` method will add the class if it is not present on the element, and
 element.classList.toggle("class-to-toggle");
 ```
 
-Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
+Add an event listener to the `openTaskFormBtn` element and pass in a `"click"` event for the first argument and an anonymous callback function for the second argument.
 
-For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
+Inside the callback function, use the `classList.toggle()` method to toggle the `"hidden"` class on the `taskForm` element.
 
 Now you can `click` on the "Add new Task" button and see the form modal.
 
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
index d58f9e57f16..1e157d279d2 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -30,6 +30,12 @@ Dovresti assegnare all'attributo `action` il valore `https://register-demo.freec
 assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
 ```
 
+Your `form` element should have a closing tag `</form>`.
+
+```js
+assert.match(code, /<\/form\>/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
index 6e502d6bb5c..b990c85b16c 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
@@ -21,16 +21,16 @@ Aggiungi al metodo `.map()` una funzione callback che converte ogni elemento in
 
 # --hints--
 
-Your `.map()` method should have a callback function which takes an `el` parameter.
+Your `.map()` method should have a callback function.
 
 ```js
-assert.match(calculate.toString(), /array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{/)
+assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
 ```
 
-La funzione callback dovrebbe utilizzare il costruttore `Number` per convertire `el` in un numero.
+Your callback function should use the `Number` constructor to convert each array element to a number.
 
 ```js
-assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
 ```
 
 La funzione callback non dovrebbe usare la parola chiave `new` con il costruttore `Number`.
@@ -42,7 +42,7 @@ assert.notMatch(calculate.toString(), /new/);
 La funzione callback dovrebbe restituire l'elemento convertito in un numero.
 
 ```js
-assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{)\s*(return\s+)?Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index 2a0f5d60ff7..1482f8906cd 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -7,7 +7,7 @@ dashedName: step-39
 
 # --description--
 
-Add an `else` block to handle the current song's position in the playlist.
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
 
 Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.
 
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
index 9cafc4b1195..b3bc8f116a1 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -17,9 +17,9 @@ The `toggle` method will add the class if it is not present on the element, and
 element.classList.toggle("class-to-toggle");
 ```
 
-Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
+Add an event listener to the `openTaskFormBtn` element and pass in a `"click"` event for the first argument and an anonymous callback function for the second argument.
 
-For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
+Inside the callback function, use the `classList.toggle()` method to toggle the `"hidden"` class on the `taskForm` element.
 
 Now you can `click` on the "Add new Task" button and see the form modal.
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
index 03b13041aeb..67e648f3709 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -30,6 +30,12 @@ assert.notEqual(document.querySelector('form')?.action, window?.location?.href);
 assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
 ```
 
+Your `form` element should have a closing tag `</form>`.
+
+```js
+assert.match(code, /<\/form\>/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
index fa7a472ae10..69a45701e82 100644
--- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
@@ -21,16 +21,16 @@ Add a callback function to your `.map()` method that converts each element to a
 
 # --hints--
 
-Your `.map()` method should have a callback function which takes an `el` parameter.
+Your `.map()` method should have a callback function.
 
 ```js
-assert.match(calculate.toString(), /array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{/)
+assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
 ```
 
-Your callback function should use the `Number` constructor to convert `el` to a number.
+Your callback function should use the `Number` constructor to convert each array element to a number.
 
 ```js
-assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
 ```
 
 Your callback function should not use the `new` keyword with the `Number` constructor.
@@ -42,7 +42,7 @@ assert.notMatch(calculate.toString(), /new/);
 Your callback function should return the element converted to a number.
 
 ```js
-assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{)\s*(return\s+)?Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index 2a0f5d60ff7..1482f8906cd 100644
--- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -7,7 +7,7 @@ dashedName: step-39
 
 # --description--
 
-Add an `else` block to handle the current song's position in the playlist.
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
 
 Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.
 
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
index 9cafc4b1195..b3bc8f116a1 100644
--- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -17,9 +17,9 @@ The `toggle` method will add the class if it is not present on the element, and
 element.classList.toggle("class-to-toggle");
 ```
 
-Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
+Add an event listener to the `openTaskFormBtn` element and pass in a `"click"` event for the first argument and an anonymous callback function for the second argument.
 
-For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
+Inside the callback function, use the `classList.toggle()` method to toggle the `"hidden"` class on the `taskForm` element.
 
 Now you can `click` on the "Add new Task" button and see the form modal.
 
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
index e2a45a4d87f..38cc7e07571 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -30,6 +30,12 @@ You should give the `action` a value of `https://register-demo.freecodecamp.org`
 assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
 ```
 
+Your `form` element should have a closing tag `</form>`.
+
+```js
+assert.match(code, /<\/form\>/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
index fa7a472ae10..69a45701e82 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
@@ -21,16 +21,16 @@ Add a callback function to your `.map()` method that converts each element to a
 
 # --hints--
 
-Your `.map()` method should have a callback function which takes an `el` parameter.
+Your `.map()` method should have a callback function.
 
 ```js
-assert.match(calculate.toString(), /array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{/)
+assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
 ```
 
-Your callback function should use the `Number` constructor to convert `el` to a number.
+Your callback function should use the `Number` constructor to convert each array element to a number.
 
 ```js
-assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
 ```
 
 Your callback function should not use the `new` keyword with the `Number` constructor.
@@ -42,7 +42,7 @@ assert.notMatch(calculate.toString(), /new/);
 Your callback function should return the element converted to a number.
 
 ```js
-assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{)\s*(return\s+)?Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index 2a0f5d60ff7..1482f8906cd 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -7,7 +7,7 @@ dashedName: step-39
 
 # --description--
 
-Add an `else` block to handle the current song's position in the playlist.
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
 
 Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.
 
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
index 9cafc4b1195..b3bc8f116a1 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -17,9 +17,9 @@ The `toggle` method will add the class if it is not present on the element, and
 element.classList.toggle("class-to-toggle");
 ```
 
-Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
+Add an event listener to the `openTaskFormBtn` element and pass in a `"click"` event for the first argument and an anonymous callback function for the second argument.
 
-For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
+Inside the callback function, use the `classList.toggle()` method to toggle the `"hidden"` class on the `taskForm` element.
 
 Now you can `click` on the "Add new Task" button and see the form modal.
 
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
index d54fb655b97..14b3975a200 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -30,6 +30,12 @@ Você deve dar ao atributo `action` um valor de `https://register-demo.freecodec
 assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
 ```
 
+O elemento `form` deve ter uma tag de fechamento `</form>`.
+
+```js
+assert.match(code, /<\/form\>/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
index a40b8c7c554..0e1d08b6c0b 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
@@ -21,16 +21,16 @@ Adicione uma função de callback ao método `.map()` que converte cada elemento
 
 # --hints--
 
-Your `.map()` method should have a callback function which takes an `el` parameter.
+Your `.map()` method should have a callback function.
 
 ```js
-assert.match(calculate.toString(), /array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{/)
+assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
 ```
 
-A função de callback deve usar o construtor `Number` para converter `el` para um número.
+Your callback function should use the `Number` constructor to convert each array element to a number.
 
 ```js
-assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
 ```
 
 A função de callback não deve usar a palavra-chave `new` com o construtor `Number`.
@@ -42,7 +42,7 @@ assert.notMatch(calculate.toString(), /new/);
 A função de callback deve retornar o elemento convertido em um número.
 
 ```js
-assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{)\s*(return\s+)?Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index bdbfea98c48..488694aa994 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -7,7 +7,7 @@ dashedName: step-39
 
 # --description--
 
-Add an `else` block to handle the current song's position in the playlist.
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
 
 Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.
 
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
index 47c4ed5e78b..f9d3d5b6ab6 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -17,9 +17,9 @@ The `toggle` method will add the class if it is not present on the element, and
 element.classList.toggle("class-to-toggle");
 ```
 
-Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
+Add an event listener to the `openTaskFormBtn` element and pass in a `"click"` event for the first argument and an anonymous callback function for the second argument.
 
-For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
+Inside the callback function, use the `classList.toggle()` method to toggle the `"hidden"` class on the `taskForm` element.
 
 Now you can `click` on the "Add new Task" button and see the form modal.
 
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
index 621da984985..ba45943bc49 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -30,6 +30,12 @@ Unapaswa kuipa `action` thamani ya `https://register-demo.freecodecamp.org`.
 assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
 ```
 
+Your `form` element should have a closing tag `</form>`.
+
+```js
+assert.match(code, /<\/form\>/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
index 59cfa29b150..0a72e8ba639 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
@@ -21,16 +21,16 @@ Add a callback function to your `.map()` method that converts each element to a
 
 # --hints--
 
-Your `.map()` method should have a callback function which takes an `el` parameter.
+Your `.map()` method should have a callback function.
 
 ```js
-assert.match(calculate.toString(), /array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{/)
+assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
 ```
 
-Your callback function should use the `Number` constructor to convert `el` to a number.
+Your callback function should use the `Number` constructor to convert each array element to a number.
 
 ```js
-assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
 ```
 
 Your callback function should not use the `new` keyword with the `Number` constructor.
@@ -42,7 +42,7 @@ assert.notMatch(calculate.toString(), /new/);
 Your callback function should return the element converted to a number.
 
 ```js
-assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{)\s*(return\s+)?Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index 2a0f5d60ff7..1482f8906cd 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -7,7 +7,7 @@ dashedName: step-39
 
 # --description--
 
-Add an `else` block to handle the current song's position in the playlist.
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
 
 Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.
 
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
index 3f0a704b0db..b83401be570 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -17,9 +17,9 @@ The `toggle` method will add the class if it is not present on the element, and
 element.classList.toggle("class-to-toggle");
 ```
 
-Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
+Add an event listener to the `openTaskFormBtn` element and pass in a `"click"` event for the first argument and an anonymous callback function for the second argument.
 
-For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
+Inside the callback function, use the `classList.toggle()` method to toggle the `"hidden"` class on the `taskForm` element.
 
 Now you can `click` on the "Add new Task" button and see the form modal.
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
index a8380ea14b4..d975f65b9a4 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -30,6 +30,12 @@ assert.notEqual(document.querySelector('form')?.action, window?.location?.href);
 assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
 ```
 
+Your `form` element should have a closing tag `</form>`.
+
+```js
+assert.match(code, /<\/form\>/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
index d70fb5de15d..ec256f0bf4d 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
@@ -21,16 +21,16 @@ array.map(el => {
 
 # --hints--
 
-Метод `.map()` повинен мати функцію зворотного виклику, яка приймає параметр `el`.
+Your `.map()` method should have a callback function.
 
 ```js
-assert.match(calculate.toString(), /array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{/)
+assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
 ```
 
-Функція зворотного виклику повинна використовувати конструктор `Number`, щоб перетворити `el` у число.
+Your callback function should use the `Number` constructor to convert each array element to a number.
 
 ```js
-assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
 ```
 
 Функція зворотного виклику не повинна використовувати ключове слово `new` з конструктором `Number`.
@@ -42,7 +42,7 @@ assert.notMatch(calculate.toString(), /new/);
 Функція зворотного виклику повинна повернути елемент, перетворений у число.
 
 ```js
-assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*el\s*\)|el)\s*=>|array\.map\(\s*function\s*\(\s*el\s*\)\s*\{)\s*(return\s+)?Number\(\s*el\s*\)/);
+assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
index c219dda22f0..658c26e5d99 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/656472ed8f552d2f2b3f7883.md
@@ -7,7 +7,7 @@ dashedName: step-39
 
 # --description--
 
-Add an `else` block to handle the current song's position in the playlist.
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
 
 Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.
 
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
index 1c33bdc7519..3475f668497 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
@@ -17,9 +17,9 @@ The `toggle` method will add the class if it is not present on the element, and
 element.classList.toggle("class-to-toggle");
 ```
 
-Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
+Add an event listener to the `openTaskFormBtn` element and pass in a `"click"` event for the first argument and an anonymous callback function for the second argument.
 
-For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
+Inside the callback function, use the `classList.toggle()` method to toggle the `"hidden"` class on the `taskForm` element.
 
 Now you can `click` on the "Add new Task" button and see the form modal.
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
index 84fa81be0c8..72303c658e4 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
@@ -1,59 +1,59 @@
 ---
 id: 6571b2fccc1de61d7b4dd37f
-title: Introduction to Flexbox Lesson A
+title: Вступ до гнучкого контейнера. Урок №1
 challengeType: 15
 dashedName: introduction-flexbox-lesson-a
 ---
 
 # --description--
 
-## Before we get started
+## Перш ніж почнемо
 
-Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.
+Макети гнучкого контейнера можуть бути складними. У попередньому уроці ви дізнались, як провести огляд та налаштування за допомогою інструментів розробника в браузері. Ці інструменти будуть надзвичайно важливими в наступних уроках. Якщо щось працює не так, як ви очікуєте, в першу чергу потрібно провести перевірку в інструментах розробника.
 
-Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and <strong>play with all of the code examples.</strong>
+Гнучкий контейнер не складніший за інші поняття, які ми вже розглянули, але в нього трохи більше складових. На перших уроках буде складно побачити суцільну картину, допоки ви не дійдете до кінця, де поєднаєте все вивчене. Під час проходження уроків бажано <strong>звертати увагу на приклади коду.</strong>
 
-You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.
+Найімовірніше, вам доведеться повертатися і посилатися на ці уроки (або інші матеріали, які ми надаємо) під час виконання завдань в кінці розділу. Але якщо ви виділите час і експериментуватимете з усіма наданими прикладами коду, ви краще зрозумієте, що робити у певний момент.
 
-## Let’s flex
+## Пофлексимо
 
-Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.
+Гнучкий контейнер — це спосіб розташувати предмети в рядки та стовпці. Ці предмети будуть гнутись (тобто збільшуватись або зменшуватись) на основі певних простих правил, які можна визначити. Для початку розглянемо простий приклад.
 
-> We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!
+> Ми впровадили багато інтерактивних прикладів у цих уроках. Настав час поекспериментувати з ними, щоб запам’ятати всі поняття!
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy"></iframe>
 
-We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the `/*` and `*/` tags surrounding them, then check out the result.
+Незабаром розберемося, що тут відбувається. Наразі розкоментуємо два пов’язаних гнучкі оголошення CSS з Codepen вище, видаливши теги `/*` та `*/` навколо них, а потім глянемо на результат.
 
-> Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses `/*` as an opening comment tag and `*/` as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.
+> Коментарі заважають браузеру тлумачити рядки як код і використовуються між певними тегами. CSS використовує `/*` як початковий тег коментаря та `*/` як кінцевий тег коментаря, а HTML та JavaScript мають власний синтаксис. Прокоментовані рядки коду можна знову активувати, просто видаливши теги коментарів навколо коду.
 
-All 3 divs should now be arranged horizontally. If you resize the results frame with the `1x`, `.5x` and `.25x` buttons you’ll also see that the `div` elements will "flex". They will fill the available area and will each have equal width.
+Тепер всі три елементи div мають розташовуватись горизонтально. Якщо змінити їхній розмір за допомогою кнопок `1x`, `.5x` та `.25x`, ви побачите, як елементи `div` почнуть «гнутись». Вони заповнять доступну площу та матимуть однакову ширину.
 
-If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
+Якщо до HTML всередині `.flex-container` додати ще один `div`, він з’явиться поруч з іншими елементами та все погнеться, щоб поміститись в межах доступної площі.
 
-> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
+> Якщо важко побачити зміни в невеликому вбудованому CodePen, натисніть на кнопку «Edit on CodePen» або «Fork on CodePen». Це покаже приклад у повноекранному середовищі. Це особливо знадобиться для деяких наступних прикладів.
 
 # --question--
 
 ## --text--
 
-What happens when the two flex related CSS declarations in the CodePen are uncommented?
+Що відбудеться, якщо розкоментувати два пов’язаних гнучкі оголошення CSS в CodePen?
 
 ## --answers--
 
-The `div` elements become hidden from view, losing their visibility within the container.
+Елементи `div` стануть прихованими, втративши видимість всередині контейнера.
 
 ---
 
-All 3 `div` elements are arranged horizontally, and they flex to fill the available area with equal width.
+Усі три елементи `div` розташуються горизонтально і розтягнуться, щоб заповнити доступну площу однаковою шириною.
 
 ---
 
-Each `div` element enlarges and covers the entire container, overlapping each other.
+Усі елементи `div` збільшаться і покриють весь контейнер, перекривши один одного.
 
 ---
 
-The `div` elements align vertically in a single column, ignoring the flex-related CSS declarations.
+Елементи `div` вирівняються вертикально в один стовпець, ігноруючи оголошення CSS.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
index 4eaf7c90e6a..e77b42f1e7a 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
@@ -11,7 +11,7 @@ dashedName: introduction-flexbox-lesson-f
 
 In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
 
 # --question--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
index ec641fb8038..61e5a3eb1f6 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
@@ -13,7 +13,7 @@ The default shrink factor is `flex-shrink: 1`, which means all items will shrink
 
 Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
 
 An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
index 7f370e28917..92d9cf138d5 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
@@ -11,7 +11,7 @@ No matter which direction you're using, you need to think of your flex-container
 
 In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
 
 # --question--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
index af3b6bc7af9..5b5eccbd977 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
@@ -7,7 +7,7 @@ dashedName: introduction-flexbox-lesson-i
 
 # --description--
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
 
 One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
index d2ad72a1ea2..c100f536466 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
@@ -9,7 +9,7 @@ dashedName: introduction-flexbox-lesson-j
 
 Let's look at an example.
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
 
 You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
index d3137b0af56..1f8f6e0d718 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
@@ -9,7 +9,7 @@ dashedName: introduction-flexbox-lesson-k
 
 <iframe allowfullscreen="true" allowpaymentrequest="true"
 style="width: 100%; overflow:hidden; display:block;"
-allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="Вставка CodePen" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
 
 To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
index 28382318c19..b53521c0d93 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
@@ -7,7 +7,7 @@ dashedName: learn-arrays-and-loops-lesson-e
 
 # --description--
 
-Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
+Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. Синтаксис циклу `while` такий:
 
 ```javascript
 while (condition) {
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
index b5908948394..202f076dd80 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
@@ -7,7 +7,7 @@ dashedName: learn-arrays-and-loops-lesson-f
 
 # --description--
 
-The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
+The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. Синтаксис циклу `for` такий:
 
 ```javascript
 for (initialization; condition; increment/decrement) {
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
index f73a588c036..80447f5149a 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
@@ -7,7 +7,7 @@ dashedName: learn-arrays-and-loops-lesson-g
 
 # --description--
 
-Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. Синтаксис методу `map()` такий:
 
 ```javascript
 const array = [1, 2, 3, 4, 5];
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
index 9c024e353e5..b833cac5170 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
@@ -7,7 +7,7 @@ dashedName: learn-arrays-and-loops-lesson-h
 
 # --description--
 
-One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
+One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. Синтаксис методу `filter()` такий:
 
 ```javascript
 const numbers = [2, 5, 6, 1, 9, -1]
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
index e4e05c6caa9..6eab40b71a4 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
@@ -1,27 +1,27 @@
 ---
 id: 6570447ce7b02272663824df
-title: Learn Block and Inline Lesson A
+title: Блокові та рядкові елементи. Урок №1
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-a
 ---
 
 # --description--
 
-Most of the elements that you have learned about so far are block elements. In other words, their default style is `display: block`. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
+Більшість елементів, про які ви вже дізнались, є блоковими елементами. Іншими словами, їхнім стилем за замовчуванням є `display: block`. За замовчуванням блокові елементи з’являються на сторінці один на одному, а кожен новий елемент починається з нового рядка.
 
 # --question--
 
 ## --text--
 
-Which of the following statements about block elements is true?
+Яке з тверджень про блокові елементи є правильним?
 
 ## --answers--
 
-Block elements take up only the space necessary for their content.
+Блокові елементи займають лише місце, необхідне для свого вмісту.
 
 ---
 
-Block elements start on a new line and take up the full width available.
+Блокові елементи починаються з нового рядка та займають всю доступну ширину.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
index 1adf9ce84ff..a17f68fb7b9 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
@@ -1,39 +1,39 @@
 ---
 id: 6570447de7b02272663824e0
-title: Learn Block and Inline Lesson B
+title: Блокові та рядкові елементи. Урок №2
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-b
 ---
 
 # --description--
 
-Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or `<a>` tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. <a  href="https://www.freecodecamp.org/" target="_blank">(Like this)</a> The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
+А ось рядкові елементи не починаються з нового рядка. Вони з’являються в рядку з будь-якими елементами, біля яких їх розташували. Хорошим прикладом рядкового елемента є посилання (тег `<a>`). Якщо розмістити один з таких елементів всередині абзацу тексту, то він поводитиметься як частина абзацу. <a  href="https://www.freecodecamp.org/ukrainian/" target="_blank">(Ось так)</a> Текст посилання знаходитиметься між іншими словами абзацу. До того ж відступ та поле рядкових елементів поводяться по-іншому. Загалом, не намагайтесь надати додатковий відступ або поле до рядкових елементів.
 
 # --question--
 
 ## --assignment--
 
-Search the web for a list of `block` elements and a list of `inline` elements.
+Знайдіть в інтернеті список блокових та рядкових елементів.
 
 ## --text--
 
-What is the difference between a `block` element and an `inline` element?
+Яка різниця між блоковими та рядковими елементами?
 
 ## --answers--
 
-`block` elements are displayed without line breaks, while `inline` elements are displayed with line breaks.
+Блокові елементи відтворюються без розірваних рядків, а рядкові елементи відтворюються з розірваними рядками.
 
 ---
 
-`block` elements take up the full width available, while `inline` elements only take up the space necessary for their content.
+Блокові елементи займають всю доступну ширину, а рядкові елементи займають місце, необхідне для свого вмісту.
 
 ---
 
-`block` elements are always positioned horizontally, while `inline` elements are positioned vertically.
+Блокові елементи завжди розташовані горизонтально, а рядкові елементи розташовані вертикально.
 
 ---
 
-`block` elements are used for small sections of text, while `inline` elements are used for larger chunks of content.
+Блокові елементи використовують для малих розділів тексту, а рядкові елементи використовують для великих частин вмісту.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
index 8d5a6c6a1e7..ca82ac96f43 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
@@ -1,35 +1,35 @@
 ---
 id: 6570447ee7b02272663824e1
-title: Learn Block and Inline Lesson C
+title: Блокові та рядкові елементи. Урок №3
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-c
 ---
 
 # --description--
 
-Padding is used to create space around an element's content, inside of any defined borders. With inline elements, padding adds space to the left, right, top, and bottom of the content. However, it's important to note that while padding does affect the space around the content, it does not affect the layout of other elements around the inline element. This means that horizontal padding (left and right) is respected, but vertical padding (top and bottom) does not cause other elements to move away.
+Відступ використовують, щоб створити місце навколо вмісту елемента всередині будь-яких визначених кордонів. Відступ в рядкових елементах додає місце зліва, справа, зверху та знизу вмісту. Однак важливо зазначити, що відступ впливає на місце навколо вмісту, але не впливає на макет інших елементів навколо рядкового елемента. Тобто це впливає на горизонтальний відступ (зліва та справа), а вертикальний відступ (зверху та знизу) не змушує інші елементи віддалятись.
 
 # --question--
 
 ## --text--
 
-How does `padding` affect `inline` elements?
+Як відступ впливає на рядкові елементи?
 
 ## --answers--
 
-Padding has no effect on `inline` elements.
+Відступ не впливає на рядкові елементи.
 
 ---
 
-Padding increases the width and height of `inline` elements.
+Відступ збільшує ширину та висоту рядкових елементів.
 
 ---
 
-Padding only affects the horizontal spacing of `inline` elements.
+Відступ впливає лише на горизонтальний інтервал рядкових елементів.
 
 ---
 
-Padding only affects the vertical spacing of `inline` elements.
+Відступ впливає лише на вертикальний інтервал рядкових елементів.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
index 8fb0f2e731e..35902c99eea 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
@@ -1,35 +1,35 @@
 ---
 id: 6570447ee7b02272663824e2
-title: Learn Block and Inline Lesson D
+title: Блокові та рядкові елементи. Урок №4
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-d
 ---
 
 # --description--
 
-Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top margin to an `inline` element?
+Тепер у вас є базове розуміння того, як додати ширину та висоту до рядкових елементів. Що ж відбудеться, якщо додати верхнє поле до рядкового елемента?
 
 # --question--
 
 ## --text--
 
-How does `margin-top` affect `inline` elements?
+Як `margin-top` впливає на рядкові елементи?
 
 ## --answers--
 
-`margin-top` has no impact on the layout of `inline` elements
+`margin-top` не впливає на макет рядкових елементів.
 
 ---
 
-`margin-top` increases the height of `inline` elements.
+`margin-top` збільшує висоту рядкових елементів.
 
 ---
 
-`margin-top` adds space above the `inline` element.
+`margin-top` додає місце зверху рядкових елементів.
 
 ---
 
-`margin-top` only affects the horizontal spacing of `inline` elements.
+`margin-top` впливає лише на горизонтальний інтервал рядкових елементів.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
index edd07ca1499..da78ae637ff 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
@@ -1,35 +1,35 @@
 ---
 id: 6570447fe7b02272663824e3
-title: Learn Block and Inline Lesson E
+title: Блокові та рядкові елементи. Урок №5
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-e
 ---
 
 # --description--
 
-Inline-block elements behave like inline elements, but with block-style padding and margin. `display: inline-block` is a useful tool to know about, but in practice, you'll probably end up reaching for flexbox more often if you're trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
+Рядково-блокові елементи поводяться як рядкові елементи, але мають відступ та поле блокових елементів. Про `display: inline-block` корисно знати, однак на практиці, швидше за все, ви частіше послуговуватиметесь гнучким контейнером, якщо намагатиметесь вирівняти декілька блоків. У наступному уроці детальніше розглянемо гнучкий контейнер.
 
 # --question--
 
 ## --text--
 
-What is the difference between an `inline` element and an `inline-block` element?
+Яка різниця між рядковими та рядково-блоковими елементами?
 
 ## --answers--
 
-`inline` elements are displayed without line breaks, while `inline-block` elements are displayed with line breaks.
+Рядкові елементи відтворюються без розірваних рядків, а рядково-блокові елементи відтворюються з розірваними рядками.
 
 ---
 
-`inline` elements do not allow setting width and height, while `inline-block` elements allow setting width and height.
+Рядкові елементи не дозволяють налаштувати ширину та висоту, а рядково-блокові елементи дозволяють налаштувати ширину та висоту.
 
 ---
 
-`inline` elements are always positioned horizontally, while `inline-block` elements are positioned vertically.
+Рядкові елементи завжди розташовані горизонтально, а рядково-блокові елементи розташовані вертикально.
 
 ---
 
-`inline` elements can contain block-level elements, while `inline-block` elements cannot contain other elements.
+Рядкові елементи можуть містити блокові елементи, а рядково-блокові елементи не можуть містити інших елементів.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
index 1833bdad58b..9de6e905ddb 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
@@ -1,35 +1,35 @@
 ---
 id: 65704480e7b02272663824e4
-title: Learn Block and Inline Lesson F
+title: Блокові та рядкові елементи. Урок №6
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-f
 ---
 
 # --description--
 
-The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" target="_blank">Normal Flow</a> from MDN to make sure you understand how elements lay themselves out by default.
+Поняття «нормального потоку» (англ. Normal flow) використовується в матеріалах блокової моделі, однак не викладене конкретно. Див. <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" target="_blank">Normal Flow</a> від MDN (англійською мовою), щоб підтвердити своє розуміння того, як елементи розташовуються за замовчуванням.
 
 # --question--
 
 ## --text--
 
-What is the "Normal flow" in CSS layouts?
+Що таке «нормальний потік» в макетах CSS?
 
 ## --answers--
 
-Normal flow refers to the process of animating elements in a CSS layout.
+Нормальний потік стосується процесу анімації елементів на макеті CSS.
 
 ---
 
-Normal flow is a CSS property used to control the visibility of elements in a layout.
+Нормальний потік — це властивість CSS, яку використовують для контролю видимості елементів на макеті.
 
 ---
 
-Normal flow is a CSS rule that defines the order of media queries for responsive design.
+Нормальний потік — це правило CSS, яке визначає порядок медіазапитів для адаптивного дизайну.
 
 ---
 
-Normal flow in CSS layouts refers to the default positioning of elements on a webpage.
+Нормальний потік в макетах CSS стосується розташування елементів на вебсторінці за замовчуванням.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
index cdd4d5aa872..112efe5871a 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
@@ -1,35 +1,35 @@
 ---
 id: 65704482e7b02272663824e5
-title: Learn Block and Inline Lesson G
+title: Блокові та рядкові елементи. Урок №7
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-g
 ---
 
 # --description--
 
-Now that you have some basic understanding of `block` and inline `elements`, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+Тепер у вас є базове розуміння блокових та рядкових елементів. Поверніться до списку блокових та рядкових елементів з попереднього завдання та перевірте, чи зможете ідентифікувати блокові та рядкові елементи.
 
 # --question--
 
 ## --text--
 
-Which of the following is NOT an `inline` element?
+Що з переліченого НЕ є рядковим елементом?
 
 ## --answers--
 
-form element
+Елемент form
 
 ---
 
-anchor element
+Елемент anchor
 
 ---
 
-image element
+Елемент image
 
 ---
 
-span element
+Елемент span
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
index a5880579050..d45eb6c6e23 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
@@ -1,35 +1,35 @@
 ---
 id: 65704483e7b02272663824e6
-title: Learn Block and Inline Lesson H
+title: Блокові та рядкові елементи. Урок №8
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-h
 ---
 
 # --description--
 
-Now that you have some basic understanding of `block` and inline elements, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+Тепер у вас є базове розуміння блокових та рядкових елементів. Поверніться до списку блокових та рядкових елементів з попереднього завдання та перевірте, чи зможете ідентифікувати блокові та рядкові елементи.
 
 # --question--
 
 ## --text--
 
-Which of the following is NOT a `block` level element?
+Що з переліченого НЕ є блоковим елементом?
 
 ## --answers--
 
-paragraph element
+Елемент paragraph
 
 ---
 
-image element
+Елемент image
 
 ---
 
-unordered list element
+Елемент unordered list
 
 ---
 
-footer element
+Елемент footer
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
index 9a9b79ea930..af862db1ad4 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
@@ -1,31 +1,31 @@
 ---
 id: 65704484e7b02272663824e7
-title: Learn Block and Inline Lesson I
+title: Блокові та рядкові елементи. Урок №9
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-i
 ---
 
 # --description--
 
-You can't talk about `block` and `inline` elements without discussing `div`s and `span`s. All the other HTML elements you have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, `div`s and `span`s give no particular meaning to their content. They are just generic boxes that can contain anything.
+Про блокові та рядкові елементи неможливо говорити, не згадавши елементи `div` та `span`. Всі інші елементи HTML, з якими ви стикались, надають значення своєму вмісту. Наприклад, елементи `paragraph` повідомляють браузеру відтворювати текст у вигляді абзацу. Елементи `strong` повідомляють браузеру який текст важливий і так далі. А ось елементи `div` та `span` не надають певного значення своєму вмісту. Вони є звичайними блоками, які містять що завгодно.
 
 # --question--
 
 ## --text--
 
-What is the primary difference of `span` and `div` elements from other elements?
+Яка основна різниця елементів `span` та `div` від інших елементів?
 
 ## --answers--
 
-Unlike specific HTML elements that carry inherent meanings, `span` and `div` elements are versatile and are primarily used for styling and layout purposes.
+На відміну від певних елементів HTML, які містять властиве значення, елементи `span` та `div` є гнучкими та здебільшого використовуються з метою стилізації та макетування.
 
 ---
 
-`span` and `div` elements do not impart any specific semantic meaning to the content they contain, unlike other HTML elements such as paragraphs or headings.
+Елементи `span` та `div` не передають семантичного значення вмісту на відміну від інших елементів HTML, як-от абзаци та заголовки.
 
 ---
 
-`span` and `div` elements are generic containers that allow developers to apply CSS styles and structure content without any particular semantic significance.
+Елементи `span` та `div` є загальними контейнерами, які дозволяють розробникам застосувати стилі CSS та структурувати вміст без будь-якого семантичного значення.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
index 5f6cd8f9636..2758501de50 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
@@ -1,35 +1,35 @@
 ---
 id: 65704485e7b02272663824e8
-title: Learn Block and Inline Lesson J
+title: Блокові та рядкові елементи. Урок №10
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-j
 ---
 
 # --description--
 
-Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top padding of 10 pixels to a `span` element?
+Тепер у вас є базове розуміння того, як додати ширину та висоту до рядкових елементів. Що ж відбудеться, якщо додати верхній відступ зі значенням 10 пікселів до елемента `span`?
 
 # --question--
 
 ## --text--
 
-What happens when you add `padding-top: 10px;` to a `span` element?
+Що відбудеться, якщо додати `padding-top: 10px;` до елемента `span`?
 
 ## --answers--
 
-The `span` element's content will shift downward by 10 pixels.
+Вміст елемента `span` переміститься вниз на 10 пікселів.
 
 ---
 
-The `span` element will gain additional space above its content.
+Елемент `span` отримає додаткове місце зверху свого вмісту.
 
 ---
 
-The `span` element's width will increase by 10 pixels.
+Ширина елемента `span` збільшиться на 10 пікселів.
 
 ---
 
-Padding has no effect on the layout of a `span` element.
+Відступ не впливає на макет елемента `span`.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
index 8a395de16e6..31c1ec3f11b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
@@ -1,35 +1,35 @@
 ---
 id: 65704486e7b02272663824e9
-title: Learn Block and Inline Lesson K
+title: Блокові та рядкові елементи. Урок №11
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-k
 ---
 
 # --description--
 
-Now that you have a basic understanding on how adding width and height to `inline` elements works.
+Тепер ви знаєте, як додавати ширину та висоту до рядкових елементів.
 
 # --question--
 
 ## --text--
 
-What happens when you add a bottom padding of 15 pixels to a `span` element with display set to `inline-block`?
+Що відбудеться, якщо додати нижній відступ зі значенням 15 пікселів до елемента `span` з властивістю `display` зі значенням `inline-block`?
 
 ## --answers--
 
-The `span` element's content will shift upward by 15 pixels.
+Вміст елемента `span` переміститься вгору на 15 пікселів.
 
 ---
 
-The `span` element's width will increase by 15 pixels.
+Ширина елемента `span` збільшиться на 15 пікселів.
 
 ---
 
-The `span` element will gain additional space below its content.
+Елемент `span` отримає додаткове місце знизу свого вмісту.
 
 ---
 
-Padding has no effect on the layout of an `inline-block` `span` element.
+Відступ не впливає на макет `inline-block` елемента `span`.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
index 30d70604443..891bb08fe69 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
@@ -1,14 +1,14 @@
 ---
 id: 63ee351d0d8d4841c3a7091a
 videoId: LGQuIIv2RVA
-title: CSS Foundations Lesson A
+title: Основи CSS. Урок №1
 challengeType: 15
 dashedName: css-foundations-lesson-a
 ---
 
 # --description--
 
-A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
+Селектор типу (або селектор елемента) обирає всі елементи наданого типу, а синтаксисом є назва елемента:
 
 ```html
 <!-- index.html -->
@@ -27,25 +27,25 @@ div {
 }
 ```
 
-Here, all three `<div>` elements would be selected, while the `<p>` element wouldn’t be.
+У цьому прикладі будуть обрані всі три елементи `<div>`, а елемент `<p>` — ні.
 
 # --question--
 
 ## --text--
 
-Which of the following best describes the CSS code given above?
+Що з переліченого найкраще описує код CSS, поданий вище?
 
 ## --answers--
 
-The code applies a `white` color to all elements in the HTML file.
+Код надає колір зі значенням `white` всім елементам у файлі HTML.
 
 ---
 
-The code applies a `white` color to all `div` elements in the HTML file.
+Код надає колір зі значенням `white` всім елементам `div` у файлі HTML.
 
 ---
 
-The code applies a `white` color to all `p` elements in the HTML file.
+Код надає колір зі значенням `white` всім елементам `p` у файлі HTML.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
index 4431d278eef..d547ffbda62 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
@@ -1,14 +1,14 @@
 ---
 id: 63ee35240d8d4841c3a7091b
 videoId: LGQuIIv2RVA
-title: CSS Foundations Lesson B
+title: Основи CSS. Урок №2
 challengeType: 15
 dashedName: css-foundations-lesson-b
 ---
 
 # --description--
 
-Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:
+Селектори класу обирають всі елементи з наданим `class`, що є звичайним атрибутом, розміщеним в елементі HTML. Ось так ви додаєте клас до тегу HTML та обираєте його в CSS:
 
 ```html
 <!-- index.html -->
@@ -26,12 +26,12 @@ Class selectors will select all elements with the given `class`, which is just a
 }
 ```
 
-Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want.
+Примітка щодо синтаксису для селекторів `class`: після крапки пишеться значення атрибуту класу, яке чутливе до регістру. Класи не повинні бути унікальними, тому ви можете використовувати однаковий `class` для декількох елементів.
 
-Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
+Завдяки атрибуту `class` також можна додати декілька класів до одного елемента, розділивши їх пробілом, як-от `class="alert-text severe-alert"`. Оскільки пробіл використовують, щоб розділити назви `class`, не використовуйте пробіли у назвах з декількома словами (натомість використовуйте дефіси).
 
-## ID Selectors
-ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element:
+## Селектори ID
+Селектори ID схожі до селекторів `class`. Вони обирають елемент з наданим `id`, що є ще одним атрибутом елемента HTML:
 
 ```html
 <!-- index.html -->
@@ -47,27 +47,27 @@ ID selectors are similar to `class` selectors. They select an element with the g
 }
 ```
 
-Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all).
+Замість коми потрібно використовувати знак решітки, після якого пишеться значення атрибута `id`, чутливе до регістру. Люди часто помиляються, використовуючи атрибут `id` там, де немає потреби і можна було використати класи. Хоча є випадки, коли логічніше використовувати `id` (наприклад, щоб використати переваги специфічності чи перенаправити до розділу поточної сторінки).
 
-The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all.
+Головною відмінністю між класами та ID є те, що елемент може мати лише один `id`. `id` не може повторюватись на сторінці, а атрибут `id` не повинен містити пробілів.
 
 # --question--
 
 ## --text--
 
-What is the syntax for class and ID selectors?
+Який синтаксис для селекторів класу та ID?
 
 ## --answers--
 
-To select a `class` you use `$` and to select an `id` you use `#`
+Щоб обрати `class`, використовують `$`; щоб обрати `id`, використовують `#`
 
 ---
 
-To select a `class` you use `.` and to select an `id` you use `*`
+Щоб обрати `class`, використовують `.`; щоб обрати `id`, використовують `*`
 
 ---
 
-To select a `class` you use `.` and to select an `id` you use `#`
+Щоб обрати `class`, використовують `.`; щоб обрати `id`, використовують `#`
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
index 03f093145ff..e0979d05e5d 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
@@ -1,14 +1,14 @@
 ---
 id: 63ee352b0d8d4841c3a7091c
 videoId: LGQuIIv2RVA
-title: CSS Foundations Lesson C
+title: Основи CSS. Урок №3
 challengeType: 15
 dashedName: css-foundations-lesson-c
 ---
 
 # --description--
 
-What if you have two groups of elements that share some of their style declarations?
+Що робити, якщо у вас є дві групи елементів, які мають спільні оголошення стилів?
 
 ```css
 .read {
@@ -24,7 +24,7 @@ What if you have two groups of elements that share some of their style declarati
 }
 ```
 
-Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
+Обидва селектори (`.read` та `.unread`) мають спільні оголошення `color: white;` та `background-color: black;`, але окрім них вони мають декілька власних унікальних оголошень. Щоб зменшити повторення, ви можете згрупувати ці два селектори разом у вигляді списку, розділеного комами:
 
 ```css
 .read,
@@ -42,13 +42,13 @@ Both our `.read` and `.unread` selectors share the `color: white;` and `backgrou
 }
 ```
 
-Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
+Обидва наведені вище приклади (з групуванням і без нього) матимуть однаковий результат, але другий приклад зменшує повтори оголошень та полегшує одночасне редагування `color` чи `background-color` для обох класів.
 
 # --question--
 
 ## --text--
 
-How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
+Як би ви застосували одне правило до двох різних селекторів: `.red-box` та `.yellow-box`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
index 9dc6044c89b..2844f14df5b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
@@ -1,14 +1,14 @@
 ---
 id: 63ee35300d8d4841c3a7091d
 videoId: LGQuIIv2RVA
-title: CSS Foundations Lesson D
+title: Основи CSS. Урок №4
 challengeType: 15
 dashedName: css-foundations-lesson-d
 ---
 
 # --description--
 
-Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML:
+Ще один спосіб використовувати селектори — об’єднати їх у списку без відокремлень. Скажімо, ви маєте такий HTML:
 
 ```html
 <div>
@@ -17,7 +17,7 @@ Another way to use selectors is to chain them as a list without any separation.
 </div>
 ```
 
-You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
+У вас є два елементи з класом `subsection`, які мають відносно унікальні стилі. Вам потрібно застосувати окреме правило до елемента, який також має `header` як другий клас. Що робитимете? Ви можете об’єднати селектори `class` у CSS:
 
 ```css
 .subsection.header {
@@ -25,9 +25,9 @@ You have two elements with the `subsection` class that have some sort of unique
 }
 ```
 
-What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
+`.subsection.header` обирає будь-який елемент, який має класи `subsection` та `header`. Зверніть увагу, що між селекторами `class` `.subsection` та `.header` немає пробілу. Цей синтаксис в основному працює для об’єднання будь-якої комбінації селекторів, за винятком об’єднання декількох селекторів типу.
 
-This can also be used to chain a class and an ID, as shown below:
+Його можна використати, щоб об’єднати клас та ID:
 
 ```html
 <div>
@@ -36,7 +36,7 @@ This can also be used to chain a class and an ID, as shown below:
 </div>
 ```
 
-You can take the two elements above and combine them with the following:
+Ви можете взяти два елементи вище та поєднати їх:
 
 ```css
 .subsection.header {
@@ -48,13 +48,13 @@ You can take the two elements above and combine them with the following:
 }
 ```
 
-In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
+Ви не зможете об’єднати декілька селекторів типу, оскільки елемент може мати лише один тип. Наприклад, якщо об’єднати два селектори (`div` та `p`), ми отримаємо селектор `divp`, який не працюватиме, оскільки шукатиме елемент `<divp>`, якого не існує.
 
 # --question--
 
 ## --text--
 
-Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
+Вам надано елемент, який має `id` зі значенням `title` та `class` зі значенням `primary`. Як ви б використали обидва атрибути для одного правила?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
index 2e292c446fd..09f1c91d2e1 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -1,38 +1,38 @@
 ---
 id: 6489bcd7b7600c818dc297ea
-title: The Cascade of CSS Lesson A
+title: Каскадність CSS. Урок №1
 challengeType: 15
 dashedName: the-cascade-of-css-lesson-a
 ---
 
 # --description--
 
-Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+Іноді у нас можуть бути правила, які суперечать одне одному, внаслідок чого виникають несподівані результати. «Ці абзаци мали бути синіми, чому вони червоні, як і всі інші?!» Це дратує, однак важливо розуміти, що CSS робить так ненавмисно. CSS робить лише те, що ми просимо. Єдиним винятком є стилі за замовчуванням, які надає браузер. Ці стилі відрізняються залежно від браузера, через що деякі елементи створюють «прогалину» між собою та іншими елементами, або кнопки мають певний вигляд, хоча ми не писали жодних правил CSS для них.
 
-So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+Тому, якщо у вас виникне такий несподіваний результат, то причиною є стилі за замовчуванням, незнання властивості чи нерозуміння дрібнички під назвою «каскад».
 
-The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+Саме каскад визначає, які правила насправді застосовуються до HTML. Для цього каскад використовує різні фактори. Ми вивчимо три з цих факторів, які, сподіваємось, допоможуть уникнути слів «я ненавиджу CSS».
 
 # --question--
 ## --text--
 
-Why might you encounter unexpected behavior in CSS?
+Чому в CSS може виникнути несподівана поведінка?
 
 ## --answers--
 
-Due to conflicting rules and unexpected results
+Через конфліктуючі правила та неочікувані результати
 
 ---
 
-Due to the browser's default styles
+Через стилі браузера за замовчуванням
 
 ---
 
-Due to a lack of understanding of CSS properties
+Через недостатнє розуміння властивостей CSS
 
 ---
 
-All of the above
+Усе перелічене вище
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
index d1891dcb6cc..ae87e47552c 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -1,41 +1,41 @@
 ---
 id: 6489c96782cf2e4f86f03ae2
-title: The Cascade of CSS Lesson B
+title: Каскадність CSS. Урок №2
 challengeType: 15
 dashedName: the-cascade-of-css-lesson-b
 ---
 
 # --description--
 
-A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+Чим специфічніше оголошення CSS, тим у нього більше переваги над іншими. Вбудовані стилі, які ви розглянули минулого уроку, мають найвищу специфічність серед інших селекторів, хоча кожен тип селектора має власний рівень специфічності, який сприяє специфічності оголошення. Інші селектори сприяють специфічності, але ми фокусуємось лише на тих, які вже розглянули:
 
-1. ID selectors (most specific selector)
-2. Class selectors
-3. Type selectors
+1. селектори ID (найспецифічніший селектор);
+2. селектори класу;
+3. селектори типу.
 
-Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+Специфічність враховується лише тоді, коли елемент має декілька конфліктуючих оголошень, націлених на себе. Селектор ID завжди переважатиме будь-яку кількість селекторів класу, селектор класу завжди переважатиме будь-яку кількість селекторів типу, а селектор типу завжди переважатиме будь-яку кількість менш специфічних селекторів. Якщо жодне оголошення не має селектору вищої специфічності, то більша кількість селектору переважає меншу кількість того самого селектору.
 
 # --question--
 
 ## --text--
 
-Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+Що з переліченого показує правильний порядок специфічності селекторів CSS (від найбільш специфічного до найменш специфічного)?
 
 ## --answers--
 
-Type selectors, class selectors, ID selectors
+Селектори типу, селектори класу, селектори ID
 
 ---
 
-ID selectors, class selectors, type selectors
+Селектори ID, селектори класу, селектори типу
 
 ---
 
-Class selectors, type selectors, ID selectors
+Селектори класу, селектори типу, селектори ID
 
 ---
 
-ID selectors, type selectors, class selectors
+Селектори ID, селектори типу, селектори класу
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
index aee970d3d1f..70dc4a13347 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -1,13 +1,13 @@
 ---
 id: 6489cb0b82cf2e4f86f03ae3
-title: The Cascade of CSS Lesson C
+title: Каскадність CSS. Урок №3
 challengeType: 15
 dashedName: the-cascade-of-css-lesson-c
 ---
 
 # --description--
 
-Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+Розберемо декілька прикладів, щоб зрозуміти специфічність. Розглянемо такий код HTML та CSS:
 
 ```html
 <!-- index.html -->
@@ -29,29 +29,29 @@ Let’s take a look at a few quick examples to visualize how specificity works.
 }
 ```
 
-In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+У прикладі вище обидва правила використовують лише селектори класу, але правило №2 специфічніше, оскільки використовує більше селекторів класу.
 
 # --question--
 
 ## --text--
 
-Based on the given HTML and CSS code, which color would the `<div class="list subsection"></div>` element be rendered as?
+На основі наданого коду HTML та CSS, якого кольору буде елемент `<div class="list subsection"></div>`?
 
 ## --answers--
 
-blue
+Синього
 
 ---
 
-red
+Червоного
 
 ---
 
-purple
+Фіолетового
 
 ---
 
-black
+Чорного
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
index 18738183e1e..8093df48654 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -1,13 +1,13 @@
 ---
 id: 6489cf5882cf2e4f86f03ae5
-title: The Cascade of CSS Lesson D
+title: Каскадність CSS. Урок №4
 challengeType: 15
 dashedName: the-cascade-of-css-lesson-d
 ---
 
 # --description--
 
-Now, let’s change things a little bit:
+Тепер додамо трішки змін:
 
 ```html
 <!-- index.html -->
@@ -29,29 +29,29 @@ Now, let’s change things a little bit:
 }
 ```
 
-In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+Хоча правило №2 у прикладі вище має більше селекторів класу ніж селекторів ID, специфічнішим є правило №1, оскільки ID перемагає клас.
 
 # --question--
 
 ## --text--
 
-Based on the modified HTML and CSS code, which color would the `<div class="list" id="subsection"></div>` element be rendered as?
+На основі зміненого коду HTML та CSS, якого кольору буде елемент `<div class="list" id="subsection"></div>`?
 
 ## --answers--
 
-orange
+Оранжевого
 
 ---
 
-red
+Червоного
 
 ---
 
-blue
+Синього
 
 ---
 
-cyan
+Блакитного
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
index b7608df5093..63ca2effd9a 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -1,6 +1,6 @@
 ---
 id: 6489cf6282cf2e4f86f03ae6
-title: The Cascade of CSS Lesson E
+title: Каскадність CSS. Урок №5
 challengeType: 15
 dashedName: the-cascade-of-css-lesson-e
 ---
@@ -20,31 +20,31 @@ dashedName: the-cascade-of-css-lesson-e
 }
 ```
 
-In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+В останньому прикладі обидва правила використовують селектори ID та класу, тому жодне правило не використовує специфічнішого селектора. У такому випадку каскад перевіряє кількість кожного типу селектору. Обидва правила мають по одному селектору ID, але правило №2 має більше селекторів класу, а отже має вищу специфічність!
 
-While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+Хоча оголошення `color: red` має перевагу, оголошення `background-color: yellow` все одно буде застосовано, оскільки не виникає конфліктуючого оголошення.
 
 # --question--
 
 ## --text--
 
-Considering the updated CSS code, which of the following describes the rendering of the `<div class="list" id="subsection"></div>` element?
+Враховуючи оновлений код CSS, що з переліченого описує відтворення елемента `<div class="list" id="subsection"></div>`?
 
 ## --answers--
 
-Text color: Red, Background color: Transparent
+Колір тексту: червоний, колір фону: прозорий
 
 ---
 
-Text color: Red, Background color: Yellow
+Колір тексту: червоний, колір фону: жовтий
 
 ---
 
-Text color: Blue, Background color: Transparent
+Колір тексту: синій, колір фону: прозорий
 
 ---
 
-Text color: Blue, Background color: Yellow
+Колір тексту: синій, колір фону: жовтий
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
index 97c78768eb6..71484c44709 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -1,6 +1,6 @@
 ---
 id: 6489cf6782cf2e4f86f03ae7
-title: The Cascade of CSS Lesson F
+title: Каскадність CSS. Урок №6
 challengeType: 15
 dashedName: the-cascade-of-css-lesson-f
 ---
@@ -19,7 +19,7 @@ dashedName: the-cascade-of-css-lesson-f
 }
 ```
 
-Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+Обидва правила мають однакову специфічність. Правило №1 використовує об’єднуючий селектор (немає пробілу), а правило №2 використовує нащадка (є пробіл). Однак обидва правила мають два класи, а символ комбінатора не додає специфічності.
 
 ```css
 /* rule 1 */
@@ -32,15 +32,15 @@ Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining se
 }
 ```
 
-This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+Цей приклад показує те саме. Хоча правило №2 використовує дочірній комбінатор (`>`), значення специфічності не змінюється. Обидва правила мають два класи, тому специфічність однакова.
 
-*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+*Примітка:* не все впливає на специфічність. Порівнюючи селектори, ви можете наткнутись на спеціальні символи універсального селектора (`*`), а також комбінаторів (`+`, `~`, `>` й пробіл). Такі символи не додають жодної специфічності.
 
 # --question--
 
 ## --text--
 
-Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+На основі наданого коду CSS, який розмір шрифту буде застосовано до елементів з класом `class second-class`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
index ef09942a733..800585e1f43 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -1,15 +1,15 @@
 ---
 id: 6489cf7682cf2e4f86f03ae8
-title: The Cascade of CSS Lesson G
+title: Каскадність CSS. Урок №7
 challengeType: 15
 dashedName: the-cascade-of-css-lesson-g
 ---
 
 # --description--
 
-Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+Спадковість стосується деяких властивостей CSS, які, застосувавши до елемента, успадковуються нащадками цього елемента, навіть якщо ми не пишемо окреме правило для них. Властивості на основі типографії (`color`, `font-size`, `font-family` тощо) зазвичай успадковуються, а більшість інших властивостей — ні.
 
-The exception to this is when directly targeting an element, as this always beats inheritance:
+Виняток лише тоді, коли елемент прямо націлений, оскільки це переважає успадкування:
 
 ```html
 <!-- index.html -->
@@ -31,29 +31,29 @@ The exception to this is when directly targeting an element, as this always beat
 }
 ```
 
-Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+Хоча елемент `parent` має вищу специфічність через ID, до елемента `child` буде застосовано стиль `color: blue`, оскільки оголошення прямо націлене на нього, а `color: red` успадковується від батька.
 
 # --question--
 
 ## --text--
 
-Based on the given HTML and CSS code, what would be the color of the `<div class="child"></div>` element?
+На основі наданого коду HTML та CSS, яким буде колір елемента `<div class="child"></div>`?
 
 ## --answers--
 
-Red
+Червоний
 
 ---
 
-Blue
+Синій
 
 ---
 
-Inherited from the parent element
+Успадкований від батьківського елемента
 
 ---
 
-Transparent
+Прозорий
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
index da43c0c9240..df38ce4f9a6 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -1,15 +1,15 @@
 ---
 id: 648acb0745e79f79650fa2ac
-title: The Cascade of CSS Lesson H
+title: Каскадність CSS. Урок №8
 challengeType: 15
 dashedName: the-cascade-of-css-lesson-h
 ---
 
 # --description--
 
-The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+Кінцевий фактор, фінішна пряма, остання частина. Уявимо, що після всіх факторів, які ми розглянули, досі виникають конфліктуючі правила, націлені на елемент. Як каскад визначає, яке правило застосувати?
 
-Really simply, actually. Whichever rule was the last defined is the winner.
+Насправді дуже просто. Перемагає те правило, яке було визначене останнім.
 
 ```css
 /* styles.css */
@@ -23,28 +23,28 @@ Really simply, actually. Whichever rule was the last defined is the winner.
 }
 ```
 
-For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+Якщо елемент має класи `alert` та `warning`, каскад розгляне кожен інший фактор, включно зі спадковістю (її тут немає) та специфічністю (жодне правило не переважає над іншими). Оскільки правило `.warning` визначено останнім та жоден інший фактор не зміг визначити, яке правило застосувати, то саме це правило буде застосовано до елемента.
 
 # --question--
 ## --text--
 
-What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+Що визначає, яке правило CSS застосувати, якщо конфліктуючі правила націлені на один елемент?
 
 ## --answers--
 
-The specificity of the CSS rule.
+Специфічність правила CSS.
 
 ---
 
-The inheritance hierarchy of the element.
+Ієрархія успадкування елемента.
 
 ---
 
-The presence of classes or IDs on the element.
+Наявність класів чи ID в елемента.
 
 ---
 
-The order in which the rules were defined.
+Порядок визначення правил.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
index f17ab8ffd27..006df78ce66 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -7,7 +7,7 @@ dashedName: learn-data-types-and-conditionals-lesson-l
 
 # --description--
 
-Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. Синтаксис тернарного оператора такий:
 
 ```javascript
 let result = condition ? value1 : value2;
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
index 545705ca00f..6093d807862 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -1,44 +1,44 @@
 ---
 id: 637f4e0e72c65bc8e73dfe1e
 videoId: LGQuIIv2RVA
-title: HTML Foundations Lesson A
+title: Основи HTML. Урок №1
 challengeType: 15
 dashedName: html-foundations-lesson-a
 ---
 
 # --description--
 
-Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+Майже всі елементи на сторінці HTML насправді є простим вмістом у початкових та кінцевих тегах HTML.
 
-Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `<p>`.
+Початкові теги повідомляють браузеру про початок елемента HTML. Вони складаються з ключового слова в кутових дужках `<>`. Наприклад, початковий тег абзацу буде таким: `<p>`.
 
-Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
+Кінцеві теги повідомляють браузеру про кінець елемента. Вони майже такі самі, як і початкові теги. Єдина відмінність полягає в тому, що вони мають скісну риску перед ключовим словом. Наприклад, кінцевий тег абзацу буде таким: `</p>`.
 
-A full paragraph element looks like this:
+Повний елемент абзацу виглядає так:
 
-<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='An opening p tag, followed by the content string "some text content", followed by a closing p tag.' />
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='Початковий тег p, після якого йде рядок «some text content», а потім кінцевий тег p.' />
 
 # --assignment--
 
-Watch Kevin Powell’s <a href="https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-" target="_blank">Introduction to HTML video</a>
+Перегляньте відео Кевіна Павелла про <a href="https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-" target="_blank">вступ до HTML</a>.
 
 # --question--
 
 ## --text--
 
-What are HTML tags?
+Що таке теги у HTML?
 
 ## --answers--
 
-HTML tags tell the browser what content an element contains.
+Теги у HTML повідомляють браузеру про вміст елемента.
 
 ---
 
-HTML tags tell the browser when to load its content.
+Теги у HTML повідомляють браузеру коли завантажувати вміст.
 
 ---
 
-HTML tags tell the browser what content the next element contains.
+Теги у HTML повідомляють браузеру про вміст наступного елемента.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
index cbf924480fc..70496db84ea 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -1,37 +1,37 @@
 ---
 id: 637f4e1672c65bc8e73dfe1f
-title: HTML Foundations Lesson B
+title: Основи HTML. Урок №2
 challengeType: 15
 dashedName: html-foundations-lesson-b
 ---
 
 # --description--
 
-You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+Елементи можна вважати контейнерами, в яких зберігається вміст. Початкові та кінцеві теги повідомляють браузеру вміст, який містить елемент. Браузер використовує цю інформацію, щоб знати як інтерпретувати та форматувати вміст.
 
-There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+Деякі елементи HTML не мають кінцевих тегів. Ці елементи часто виглядають так: `<br/>` або `<img/>`, але деякі також можна використовувати без кінцевої скісної риски (наприклад, `<br>` або `<img>`). Вони відомі як самозакриваючі теги або порожні елементи, оскільки вони не обгортають жоден вміст. З деякими ви зустрінетесь у наступних завданнях, але здебільшого ви використовуватимете і початковий, і кінцевий теги.
 
-HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+HTML має великий список стандартних тегів, які можна використовувати для створення будь-яких елементів. Важливо використовувати правильні теги для вмісту. Правильні теги впливають на два аспекти: рейтинг сайтів у пошукових системах і їхня доступність для користувачів, які покладаються на допоміжні технології, щоб користуватися інтернетом (наприклад, читачі екрана).
 
-Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+Використання правильних елементів для вмісту називається семантичним HTML. Про це ви дізнаєтесь пізніше.
 
 # --question--
 
 ## --text--
 
-Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
+Чому в HTML важливі самозакриваючі теги (наприклад, `<br/>` чи `<img>`)?
 
 ## --answers--
 
-They prevent formatting issues in HTML documents.
+Вони запобігають виникненню проблем з форматуванням в документах HTML.
 
 ---
 
-They indicate empty elements and require no closing tag.
+Вони вказують на порожні елементи і не вимагають кінцевого тегу.
 
 ---
 
-They improve website performance by reducing code complexity.
+Вони покращують ефективність вебсайту, зменшуючи складність коду.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
index 51c84c3d068..9a2ed23182b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -1,52 +1,52 @@
 ---
 id: 637f4e1c72c65bc8e73dfe20
-title: HTML Foundations Lesson C
+title: Основи HTML. Урок №3
 challengeType: 15
 dashedName: html-foundations-lesson-c
 ---
 
 # --description--
 
-To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+Щоб продемонструвати шаблонний код HTML, нам треба файл HTML.
 
-Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+Створіть нову папку на своєму комп’ютері та назвіть її `html-boilerplate`. Створіть новий файл у цій папці та назвіть його `index.html`.
 
-You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+Мабуть, ви знайомі з різними типами файлів (наприклад, .doc, .pdf чи зображення).
 
-To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+Щоб комп’ютер знав, що ви хочете створити файл HTML, потрібно додати розширення `.html` до назви файлу, як ви робили при створенні файлу `index.html`.
 
-It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+Важливо зазначити, що ви назвали свій файл HTML «index». Файл HTML, який міститиме домашню сторінку вебсайту, завжди потрібно називати `index.html`. Причина в тому, що вебсервери за замовчуванням шукатимуть сторінку `index.html`, коли користувачі заходять на ваш сайт. Відсутність сторінки з такою назвою може спричинити проблеми.
 
-## The DOCTYPE
+## DOCTYPE
 
-Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply `<!DOCTYPE html>`.
+Кожна сторінка HTML починається з оголошення doctype. Мета doctype — повідомити браузеру яку версію HTML потрібно використовувати, щоб відтворити документ. Найновішою версією HTML є HTML5, а оголошенням цієї версії є `<!DOCTYPE html>`.
 
-The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+Оголошення doctype для старіших версій HTML складніше. Наприклад, оголошення doctype для HTML4:
 
 ```html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 ```
 
-However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use `<!DOCTYPE html>`.
+Ви, швидше за все, не будете використовувати старіші версії HTML, тому завжди використовуватимете `<!DOCTYPE html>`.
 
-Open the `index.html` file created earlier in your text editor and add `<!DOCTYPE html>` to the very first line.
+Відкрийте створений раніше файл `index.html` у текстовому редакторі та додайте `<!DOCTYPE html>` до першого рядка.
 
 # --question--
 ## --text--
 
-What is the purpose of the `DOCTYPE` declaration?
+Яка суть оголошення `DOCTYPE`?
 
 ## --answers--
 
-It tells the browser which version of HTML to use to render the document.
+Воно повідомляє браузеру яку версію HTML потрібно використати, щоб відтворити документ.
 
 ---
 
-It tells the browser that this document uses JavaScript.
+Воно повідомляє браузеру, що цей документ використовує JavaScript.
 
 ---
 
-It tells the browser the title of the document.
+Воно повідомляє браузеру заголовок документа.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
index 895e6f06caa..bb449cfda26 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -1,17 +1,17 @@
 ---
 id: 637f4e2872c65bc8e73dfe21
-title: HTML Foundations Lesson D
+title: Основи HTML. Урок №4
 challengeType: 15
 dashedName: html-foundations-lesson-d
 ---
 
 # --description--
 
-After you declare the doctype, you need to provide an `<html>` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+Після оголошення doctype потрібно надати елемент `<html>`. Він відомий як кореневий елемент документа, тобто всі інші елементи в документі будуть його нащадками.
 
-This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+Це буде важливо пізніше, коли ви дізнаєтесь про маніпулювання HTML з JavaScript. Наразі просто знайте, що елемент `html` повинен бути у кожному документі HTML.
 
-Back in the `index.html` file, let’s add the `<html>` element by typing out its opening and closing tags, like so:
+Повернемось до файлу `index.html`: додайте елемент `<html>`, ввівши початковий та кінцевий теги:
 
 ```html
 <!DOCTYPE html>
@@ -19,26 +19,26 @@ Back in the `index.html` file, let’s add the `<html>` element by typing out it
 </html>
 ```
 
-## What is the lang attribute?
-`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+## Що таке атрибут lang?
+`lang` вказує мову текстового вмісту в елементі. У першу чергу цей атрибут використовують, щоб покращити доступність вебсторінки. Він дозволяє допоміжним технологіям (наприклад, читачам екрана) адаптуватись відповідно до мови та відтворити правильну вимову.
 
 # --question--
 
 ## --text--
 
-What is the `html` element?
+Що таке елемент `html`?
 
 ## --answers--
 
-It is the root element in the document and tells the browser which version of HTML it should use.
+Це кореневий елемент документа, який повідомляє браузеру яку версію HTML потрібно використовувати.
 
 ---
 
-It is the root element in the document and all other elements should descend from it.
+Це кореневий елемент документа, а всі інші елементи повинні бути його нащадками.
 
 ---
 
-It is the root element in the document and all other elements should come after it.
+Це кореневий елемент документа, а всі інші елементи повинні йти після нього.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
index 6b23f758ad3..48f2f0a1a55 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -1,33 +1,33 @@
 ---
 id: 637f4e2f72c65bc8e73dfe22
-title: HTML Foundations Lesson E
+title: Основи HTML. Урок №5
 challengeType: 15
 dashedName: html-foundations-lesson-e
 ---
 
 # --description--
 
-The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage.
+В елементі `<head>` розміщується вся важлива метаінформація про вебсторінки, а також все інше, необхідне для правильного відтворення вебсторінок у браузері. Всередині `<head>` не можна використовувати елементи, які показують вміст на сторінці.
 
-## The Charset Meta Element
-You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`.
+## Елемент meta charset
+Ви завжди повинні мати тег `meta` для кодування `charset` в елементі `head`: `<meta charset="utf-8">`.
 
-Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+Налаштувати кодування символів надзвичайно важливо, оскільки це гарантує, що вебсторінка правильно показуватиме спеціальні символи різних мов.
 
-## Title Element
-Another element you should always include in the head of an HTML document is the `title` element:
+## Елемент title
+Ще одним елементом, який завжди повинен бути в голові документа HTML, є елемент `title`:
 
 ```html
 <title>My First Webpage</title>
 ```
 
-The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+Елемент `title` надає вебсторінкам заголовок, який можуть прочитати люди та який показано на вкладці вебсторінки.
 
-If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+Якщо ви не надасте елемент `title`, заголовком вебсторінки за замовчуванням буде назва файлу. У нашому випадку заголовком би був `index.html`, що не дуже змістовно для користувачів. Через це користувачу було б важко знайти вебсторінку, якщо відкрито багато вкладок.
 
-There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+У голові документа HTML можна помістити багато інших елементів. Наразі важливо знати про два елементи, які ми розглянули. Пізніше ви дізнаєтесь про більше елементів, які розміщуються в `head`.
 
-Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `<html>` tag:
+Повернемось до файлу `index.html`: додайте до нього елемент `head` з елементом `meta` `charset`, який містить `title`. Елемент `head` входить до елемента HTML та завжди повинен бути першим елементом після початкового тегу `<html>`:
 
 
 ```html
@@ -45,19 +45,19 @@ Back in `index.html` file, let’s add a `head` element with a `charset` `meta`
 
 ## --text--
 
-What is the purpose of the `head` element?
+Яка суть елемента `head`?
 
 ## --answers--
 
-The `head` element is used to display all elements that are displayed on the webpage.
+Елемент `head` використовують, щоб відтворити всі елементи, які відображаються на вебсторінці.
 
 ---
 
-The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+Елемент `head` використовують, щоб відтворити важливу інформацію про вебсторінки за допомогою елементів `meta`.
 
 ---
 
-The `head` element is used to display the header content on top of the webpage.
+Елемент `head` використовують, щоб відтворити вміст заголовка у верхній частині вебсторінки.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
index bc0d7262f1d..432eb7f9c20 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -1,46 +1,46 @@
 ---
 id: 637f4e3672c65bc8e73dfe23
 videoId: V8UAEoOvqFg
-title: HTML Foundations Lesson F
+title: Основи HTML. Урок №6
 challengeType: 15
 dashedName: html-foundations-lesson-f
 ---
 
 # --description--
 
-The final element needed to complete the HTML boilerplate is the `<body>` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+Останній елемент, необхідний для шаблонного коду HTML — елемент `<body>`. У ньому розміщується весь вміст, який побачать користувачі: текст, зображення, посилання, списки тощо.
 
-To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+Щоб закінчити шаблонний код, додайте елемент `body` до файлу `index.html`. Елемент `body` завжди розташований в елементі `html` та завжди після елемента `head`:
 
 # --assignment--
 
-Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+Перегляньте відео Кевіна Павелла про побудову першої вебсторінки (розміщене вище).
 
 ---
 
-Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+Потренуйте пам’ять, видаливши весь вміст файлу `index.html` та спробуйте написати шаблонний код ще раз. Не хвилюйтесь, якщо перші рази вам потрібно переглянути матеріал. Продовжуйте, поки не зможете написати код з пам’яті.
 
 ---
 
-Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+Запустіть свій шаблонний код через [валідатор HTML](https://www.freeformatter.com/html-validator.html). Валідатори гарантують, що розмітка є правильною. Це чудові інструменти для навчання, оскільки вони повідомляють про синтаксичні помилки, які ви можете час від часу допускати, навіть не здогадуючись про них (наприклад, відсутність кінцевих тегів або додавання зайвих пробілів).
 
 # --question--
 
 ## --text--
 
-What is the purpose of the `body` element?
+Яка суть елемента `body`?
 
 ## --answers--
 
-This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+Тут розміщена вся важлива інформація про вебсторінку (наприклад, теги `title` та `meta`).
 
 ---
 
-This is where you tell the browser how to render the webpage correctly.
+Тут вказується браузеру, як правильно відтворити вебсторінку.
 
 ---
 
-This is where all content will be displayed on the page such images, text, and links.
+Тут розміщений весь вміст, який буде показано (наприклад, зображення, текст та посилання).
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
index 5cfe098a523..71b6e958a56 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -1,31 +1,31 @@
 ---
 id: 6376327e2724a688c04636e3
-title: HTML Foundations Lesson G
+title: Основи HTML. Урок №7
 challengeType: 15
 dashedName: html-foundations-lesson-g
 ---
 
 # --description--
 
-HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+HTML та CSS — це дві мови, які працюють разом, щоб створити все, що ви бачите в інтернеті. HTML — це необроблені дані, на яких побудована вебсторінка. Весь текст, посилання, картки, списки та кнопки створюються в HTML. CSS надає стилю цим звичайним елементам. HTML розміщує інформацію на вебсторінці, а CSS робить її красивою, надаючи кольору та змінюючи шрифт.
 
 # --question--
 
 ## --text--
 
-What are the primary responsibilities of HTML and CSS in creating a webpage?
+Які основні обов’язки виконують HTML та CSS для створення вебсторінки?
 
 ## --answers--
 
-HTML structures the content, while CSS styles the elements.
+HTML структурує вміст, а CSS стилізує елементи.
 
 ---
 
-HTML creates the visual design, while CSS organizes the content.
+HTML створює візуальний дизайн, а CSS організовує вміст.
 
 ---
 
-CSS manages the functionality, while HTML controls the layout.
+CSS контролює функціоналом, а HTML — макетом.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
index 6983034f3ad..b079cd8721f 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -1,31 +1,31 @@
 ---
 id: 637633162724a688c04636e4
-title: HTML Foundations Lesson H
+title: Основи HTML. Урок №8
 challengeType: 15
 dashedName: html-foundations-lesson-h
 ---
 
 # --description--
 
-Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+Багато ресурсів продовжують називати HTML та CSS мовами програмування, але, якщо розібратися з технічної точки зору, це не зовсім правильно. Причина в тому, що їх використовують лише для представлення інформації. Їх не використовують для створення логіки програми. JavaScript, який ви вивчите в наступному розділі, є мовою програмування, оскільки його використовують для того, щоб вебсторінки виконували певні дії. Однак багато чого можна зробити, використовуючи лише HTML та CSS, тому вони обов’язково знадобляться. Наступні уроки нашої навчальної програми зосереджені на інструментах, які необхідно осягнути перед тим, як перейти до JavaScript.
 
 # --question--
 
 ## --text--
 
-Why are HTML and CSS not typically classified as programming languages?
+Чому HTML та CSS зазвичай не класифікуються як мови програмування?
 
 ## --answers--
 
-They lack the ability to create webpages.
+Їм не вистачає здатності створювати вебсторінки.
 
 ---
 
-They focus on presenting information rather than programming logic.
+Вони зосереджуються на відтворенні інформації, а не логіці програмування.
 
 ---
 
-They are outdated technologies.
+Це застарілі технології.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
index f771234359b..ed5100ecaa9 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
@@ -17,19 +17,19 @@ There are many operators in JavaScript. Every operator has a corresponding prece
 
 Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):
 
-| Precedence | Name           | Sign |
-| ---------- | -------------- | ---- |
-| ...        | ...            | ...  |
-| 14         | unary plus     | +    |
-| 14         | unary negation | -    |
-| 13         | exponentiation | **   |
-| 12         | multiplication | *    |
-| 12         | division       | /    |
-| 11         | addition       | +    |
-| 11         | subtraction    | -    |
-| ...        | ...            | ...  |
-| 2          | assignment     | =    |
-| ...        | ...            | ...  |
+| Пріоритет | Назва                 | Знак |
+| --------- | --------------------- | ---- |
+| ...       | ...                   | ...  |
+| 14        | унарний плюс          | +    |
+| 14        | унарний мінус         | -    |
+| 13        | піднесення до степеня | **   |
+| 12        | множення              | *    |
+| 12        | ділення               | /    |
+| 11        | додавання             | +    |
+| 11        | віднімання            | -    |
+| ...       | ...                   | ...  |
+| 2         | призначення           | =    |
+| ...       | ...                   | ...  |
 
 
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
index ca0dd6762c0..f7898b75f5e 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
@@ -1,55 +1,55 @@
 ---
 id: 637f704072c65bc8e73dfe36
 videoId: tsEQgGjSmkM
-title: Links and Images Lesson A
+title: Посилання та зображення. Урок №1
 challengeType: 15
 dashedName: links-and-images-lesson-a
 ---
 
 # --description--
 
-To get some practice using links and images throughout this lesson you need an HTML project to work with.
+Щоб попрактикуватись з посиланнями та зображеннями, вам потрібний проєкт HTML.
 
-- Create a new directory named `odin-links-and-images`.
+- Створіть новий каталог під назвою `odin-links-and-images`.
 
-- Within that directory, create a new file named `index.html`.
+- У цьому каталозі створіть новий файл під назвою `index.html`.
 
-- Fill in the usual HTML boilerplate.
+- Заповніть звичайний шаблонний код HTML.
 
-- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+- Вкінці додайте такий `h1` до `body`: `<h1>Homepage</h1>`
 
-## Anchor Elements
-To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+## Елементи посилання
+Щоб створити посилання в HTML, використовують елемент посилання. Щоб визначити елемент посилання, потрібно обгорнути текст або інший елемент HTML, який має бути посиланням, тегом `<a>`.
 
-Add the following to the `body` of the `index.html` page you created and open it in the browser:
+Додайте такий елемент до тіла створеної сторінки `index.html` та відкрийте сторінку у браузері:
 
 ```html
 <a>click me</a>
 ```
 
-You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+Можливо, ви помітили, що при натисканні на посилання нічого не відбувається. Тег посилання не знає куди переходити. Ви повинні сказати йому місце призначення. Для цього використовують атрибут HTML.
 
-An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. Зазвичай атрибут складається з двох частин: назви та значення, однак не всі атрибути вимагають значення. У нашому випадку потрібно додати атрибут `href` (hyperlink reference) до початкового тегу посилання. Значенням атрибута `href` є місце призначення, на яке потрібно направляти користувачів.
 
-Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+Додайте даний атрибут `href` до створеного елемента посилання та спробуйте натиснути на нього знову. Не забудьте оновити браузер, щоб застосувати нові зміни.
 
 ```html
 <a href="https://www.theodinproject.com/about">click me</a>
 ```
 
-By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+Будь-який текст з тегом посилання без атрибута `href` буде звичайним текстом. Якщо атрибут `href` наявний, браузер надасть тексту синього кольору та підкреслення, щоб вказати, що це посилання.
 
-It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+Важливо зазначити, що теги посилання можна використовувати для будь-яких ресурсів в інтернеті, а не лише документів HTML. Ви можете направляти на відео, файли pdf, зображення та інше, але здебільшого ви направлятимете на інші документи HTML.
 
 # --assignment--
 
-Watch Kevin Powell’s HTML Links video above.
+Перегляньте відео Кевіна Павелла про посилання у HTML (розміщене вище).
 
 # --question--
 
 ## --text--
 
-What HTML tag is used to create a link?
+Який тег потрібно використати, щоб створити посилання у HTML?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
index 7039766863f..3f93e04d68c 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
@@ -1,60 +1,60 @@
 ---
 id: 637f703572c65bc8e73dfe35
-title: Links and Images Lesson B
+title: Посилання та зображення. Урок №2
 challengeType: 15
 dashedName: links-and-images-lesson-b
 ---
 
 # --description--
 
-To get some practice using links and images throughout this lesson you need an HTML project to work with.
+Щоб попрактикуватись з посиланнями та зображеннями, вам потрібний проєкт HTML.
 
-- Create a new directory named `odin-links-and-images`.
+- Створіть новий каталог під назвою `odin-links-and-images`.
 
-- Within that directory, create a new file named `index.html`.
+- У цьому каталозі створіть новий файл під назвою `index.html`.
 
-- Fill in the usual HTML boilerplate.
+- Заповніть звичайний шаблонний код HTML.
 
-- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+- Вкінці додайте такий `h1` до `body`: `<h1>Homepage</h1>`
 
-## Anchor Elements
-To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+## Елементи посилання
+Щоб створити посилання в HTML, використовують елемент посилання. Щоб визначити елемент посилання, потрібно обгорнути текст або інший елемент HTML, який має бути посиланням, тегом `<a>`.
 
-Add the following to the `body` of the `index.html` page you created and open it in the browser:
+Додайте такий елемент до тіла створеної сторінки `index.html` та відкрийте сторінку у браузері:
 
 ```html
 <a>click me</a>
 ```
 
-You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+Можливо, ви помітили, що при натисканні на посилання нічого не відбувається. Тег посилання не знає куди переходити. Ви повинні сказати йому місце призначення. Для цього використовують атрибут HTML.
 
-An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. Зазвичай атрибут складається з двох частин: назви та значення, однак не всі атрибути вимагають значення. У нашому випадку потрібно додати атрибут `href` (hyperlink reference) до початкового тегу посилання. Значенням атрибута `href` є місце призначення, на яке потрібно направляти користувачів.
 
-Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+Додайте даний атрибут `href` до створеного елемента посилання та спробуйте натиснути на нього знову. Не забудьте оновити браузер, щоб застосувати нові зміни.
 
 ```html
 <a href="https://www.theodinproject.com/about">click me</a>
 ```
 
-By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+Будь-який текст з тегом посилання без атрибута `href` буде звичайним текстом. Якщо атрибут `href` наявний, браузер надасть тексту синього кольору та підкреслення, щоб вказати, що це посилання.
 
-It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+Важливо зазначити, що теги посилання можна використовувати для будь-яких ресурсів в інтернеті, а не лише документів HTML. Ви можете направляти на відео, файли pdf, зображення та інше, але здебільшого ви направлятимете на інші документи HTML.
 
 # --question--
 ## --text--
 
-What is an attribute?
+Що таке атрибут?
 ## --answers--
 
-An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag.
+Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині кінцевого тегу елемента.
 
 ---
 
-An HTML attribute is used to tell the browser what the element contains.
+Атрибут HTML повідомляє браузеру вміст елемента.
 
 ---
 
-An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.
+Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
index 4f1440bc5f3..c508ab622f6 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
@@ -1,50 +1,50 @@
 ---
 id: 637f703072c65bc8e73dfe34
-title: Links and Images Lesson C
+title: Посилання та зображення. Урок №3
 challengeType: 15
 dashedName: links-and-images-lesson-c
 ---
 
 # --description--
 
-To get some practice using links and images throughout this lesson you need an HTML project to work with.
+Щоб попрактикуватись з посиланнями та зображеннями, вам потрібний проєкт HTML.
 
-- Create a new directory named `odin-links-and-images`.
+- Створіть новий каталог під назвою `odin-links-and-images`.
 
-- Within that directory, create a new file named `index.html`.
+- У цьому каталозі створіть новий файл під назвою `index.html`.
 
-- Fill in the usual HTML boilerplate.
+- Заповніть звичайний шаблонний код HTML.
 
-- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+- Вкінці додайте такий `h1` до `body`: `<h1>Homepage</h1>`
 
-## Anchor Elements
-To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+## Елементи посилання
+Щоб створити посилання в HTML, використовують елемент посилання. Щоб визначити елемент посилання, потрібно обгорнути текст або інший елемент HTML, який має бути посиланням, тегом `<a>`.
 
-Add the following to the `body` of the `index.html` page you created and open it in the browser:
+Додайте такий елемент до тіла створеної сторінки `index.html` та відкрийте сторінку у браузері:
 
 ```html
 <a>click me</a>
 ```
 
-You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+Можливо, ви помітили, що при натисканні на посилання нічого не відбувається. Тег посилання не знає куди переходити. Ви повинні сказати йому місце призначення. Для цього використовують атрибут HTML.
 
-An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. Зазвичай атрибут складається з двох частин: назви та значення, однак не всі атрибути вимагають значення. У нашому випадку потрібно додати атрибут `href` (hyperlink reference) до початкового тегу посилання. Значенням атрибута `href` є місце призначення, на яке потрібно направляти користувачів.
 
-Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+Додайте даний атрибут `href` до створеного елемента посилання та спробуйте натиснути на нього знову. Не забудьте оновити браузер, щоб застосувати нові зміни.
 
 ```html
 <a href="https://www.theodinproject.com/about">click me</a>
 ```
 
-By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+Будь-який текст з тегом посилання без атрибута `href` буде звичайним текстом. Якщо атрибут `href` наявний, браузер надасть тексту синього кольору та підкреслення, щоб вказати, що це посилання.
 
-It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+Важливо зазначити, що теги посилання можна використовувати для будь-яких ресурсів в інтернеті, а не лише документів HTML. Ви можете направляти на відео, файли pdf, зображення та інше, але здебільшого ви направлятимете на інші документи HTML.
 
 # --question--
 
 ## --text--
 
-What attribute tells links where to go to?
+Який атрибут повідомляє посиланню про місце призначення?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
index 69bbd58d2da..35c5f5d944b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
@@ -1,7 +1,7 @@
 ---
 id: 637f702872c65bc8e73dfe33
 videoId: ta3Oxx7Yqbo
-title: Links and Images Lesson D
+title: Посилання та зображення. Урок №4
 challengeType: 15
 dashedName: links-and-images-lesson-d
 ---
@@ -9,26 +9,26 @@ dashedName: links-and-images-lesson-d
 # --description--
 
 
-Generally, there are two kinds of links you will create:
+Загалом існує два типи посилань, які ви створюватимете:
 
-- Links to pages on other websites on the internet
+- посилання на сторінки інших вебсайтів в інтернеті;
 
-- Links to pages located on your own websites
+- посилання на сторінки власних вебсайтів.
 
 
-## Absolute Links
-Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination.
+## Абсолютні посилання
+Посилання на сторінку іншого вебсайту в інтернеті називають абсолютним посиланням. Зазвичай абсолютне посилання складається з наступних частин: `protocol://domain/path`. Абсолютне посилання завжди міститиме протокол та домен місця призначення.
 
-You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain.
+Ви вже бачили абсолютне посилання в дії. Посилання на головну сторінку проєкту Odin є абсолютним посиланням, оскільки воно містить протокол та домен.
 
 `https://www.theodinproject.com/about`
 
-## Relative Links
-Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on.
+## Відносні посилання
+Посилання на іншу сторінку власного вебсайту називають відносним посиланням. Відносне посилання не містить домену, оскільки це інша сторінка на тому ж сайті, тому назва домену буде одинаковою.
 
-Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example.
+Відносні посилання містять лише шлях файлу до іншої сторінки відносно сторінки, на яку ви направляєте. Це досить абстрактно, тому розглянемо приклад.
 
-Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+У межах каталогу `odin-links-and-images` створіть ще один файл HTML під назвою `about.html` та додайте до нього такий код:
 
 ```html
 <!DOCTYPE html>
@@ -44,7 +44,7 @@ Within the `odin-links-and-images` directory, create another HTML file named `ab
 </html>
 ```
 
-Back in the `index` page, add the following anchor element to create a link to the `about` page:
+Повернемось до сторінки `index`: додайте даний елемент посилання, щоб створити посилання на сторінку `about`:
 
 ```html
 <body>
@@ -55,17 +55,17 @@ Back in the `index` page, add the following anchor element to create a link to t
 </body>
 ```
 
-Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created.
+Відкрийте файл `index.html` у браузері та натисніть на посилання, щоб перевірити, що все працює правильно. Після натискання на посилання ви маєте перейти на щойно створену сторінку `about`.
 
-This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value.
+Все працює, оскільки `index` та `about` знаходяться в одному каталозі. Це означає, що ви можете використати назву (`about.html`) як значення `href`.
 
-But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory.
+Однак зазвичай каталоги потрібно організовувати кращим способом. Зазвичай у кореневому каталозі ви б мали тільки `index.html`, а всі інші файли HTML мали власні каталоги.
 
-Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+Створіть новий каталог під назвою `pages` в межах каталогу `odin-links-and-images` та перемістіть файл `about.html` до нового каталогу.
 
-Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed.
+Оновіть сторінку `index` у браузері та натисніть на посилання `about`. Зараз воно буде недійсним. Причина в тому, що змінилось розташування сторінки `about`.
 
-To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file.
+Щоб виправити це, вам просто потрібно оновити значення `href` посилання `about`, щоб включити каталог `pages/`, оскільки це нове розташування файлу `about.html` відносно файлу `index.html`.
 
 ```html
 <body>
@@ -74,9 +74,9 @@ To fix this, you just need to update the `about` link `href` value to include th
 </body>
 ```
 
-Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+Оновіть сторінку `index` у браузері та спробуйте знову натиснути на посилання `about`. Зараз воно має працювати.
 
-In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory.
+У більшості випадків все працюватиме. Однак іноді ви можете натрапити на непередбачувані проблеми. Якщо додати `./` перед посиланням, проблем можна уникнути. За допомогою `./` ви вказуєте коду, що він повинен шукати файл/каталог відносно **поточного** каталогу.
 
 ```html
 <body>
@@ -87,25 +87,25 @@ In many cases, this will work just fine; however, you can still run into unexpec
 
 # --assignment--
 
-Watch Kevin Powell’s HTML File Structure video above.
+Перегляньте відео Кевіна Павелла про структуру файлів у HTML (розміщене вище).
 
 # --question--
 
 ## --text--
 
-What is the difference between an absolute and a relative link?
+Яка різниця між абсолютним та відносним посиланням?
 
 ## --answers--
 
-An absolute link is a link to another page on the current website. A relative link is a link to another website.
+Абсолютне посилання — посилання на іншу сторінку поточного вебсайту. Відносне посилання — посилання на інший вебсайт.
 
 ---
 
-An absolute link is a link to another website. A relative link is a link another page on the current website.
+Абсолютне посилання — посилання на інший вебсайт. Відносне посилання — посилання на іншу сторінку поточного вебсайту.
 
 ---
 
-There is no difference between absolute and relative links.
+Між абсолютним та відносним посиланням немає різниці.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
index eb4b15a8d54..95ea39ae307 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -1,32 +1,32 @@
 ---
 id: 637f702372c65bc8e73dfe32
 videoId: 0xoztJCHpbQ
-title: Links and Images Lesson E
+title: Посилання та зображення. Урок №5
 challengeType: 15
 dashedName: links-and-images-lesson-e
 ---
 
 # --description--
 
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
 
-To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `<img>`. На відміну від інших елементів, які ми вже вивчили, елемент `<img>` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег.
 
-Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
 
-For example, using an absolute path you can display an image located on The Odin Project site:
+Наприклад, використовуючи абсолютний шлях, можна відтворити зображення з сайту The Odin Project:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_gORbExZ"></iframe>
 
-To use images that you have on your own websites, you can use a relative path.
+Щоб використати зображення з власного вебсайту, можна використати відносний шлях.
 
-- Create a new directory named `images` within the `odin-links-and-images` project.
+- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`.
 
-- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the `images` directory you just created.
+- Потім завантажте <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">це зображення</a> та перемістіть його у щойно створений каталог `images`.
 
-- Rename the image to `dog.jpg`.
+- Перейменуйте зображення на `dog.jpg`.
 
-Finally add the image to the `index.html` file:
+Наприкінці додайте зображення до файлу `index.html`:
 
 ```html
 <body>
@@ -39,47 +39,47 @@ Finally add the image to the `index.html` file:
 </body>
 ```
 
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
+Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі.
 
 
-## Parent Directories
+## Батьківські каталоги
 
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Перш ніж отримати доступ до каталогу зображень, вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу.
 
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../`. Розглянемо це в дії: в межах `body` файлу `about.html` додайте таке зображення під заголовком, який ви додали раніше:
 
 ```html
 <img src="../images/dog.jpg">
 ```
 
-To break this down:
+Розіб’ємо на частини:
 
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
 
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
 
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
 
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
 
-## `Alt` attribute
+## Атрибут `alt`
 
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
 
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
 
-This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+Ось так виглядає логотип The Odin Project з атрибутом `alt`:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
 
 # --assignment--
 
-Watch Kevin Powell’s HTML Images Video above.
+Перегляньте відео Кевіна Павелла про зображення у HTML (розміщене вище).
 
 # --question--
 
 ## --text--
 
-Which tag is used to display an image?
+За допомогою якого тега відтворюють зображення?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
index 5ea069897aa..7bcc72e3d7b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -1,31 +1,31 @@
 ---
 id: 637f701c72c65bc8e73dfe31
-title: Links and Images Lesson F
+title: Посилання та зображення. Урок №6
 challengeType: 15
 dashedName: links-and-images-lesson-f
 ---
 
 # --description--
 
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
 
-To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `<img>`. На відміну від інших елементів, які ми вже вивчили, елемент `<img>` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег.
 
-Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
 
-For example, using an absolute path you can display an image located on The Odin Project site:
+Наприклад, використовуючи абсолютний шлях, можна відтворити зображення з сайту The Odin Project:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_gORbExZ"></iframe>
 
-To use images that you have on your own websites, you can use a relative path.
+Щоб використати зображення з власного вебсайту, можна використати відносний шлях.
 
-- Create a new directory named `images` within the `odin-links-and-images` project.
+- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`.
 
-- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+- Потім завантажте <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">це зображення</a> та перемістіть його у щойно створений каталог зображень.
 
-- Rename the image to `dog.jpg`.
+- Перейменуйте зображення на `dog.jpg`.
 
-Finally add the image to the `index.html` file:
+Наприкінці додайте зображення до файлу `index.html`:
 
 ```html
 <body>
@@ -38,55 +38,55 @@ Finally add the image to the `index.html` file:
 </body>
 ```
 
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
+Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі.
 
 
-## Parent Directories
+## Батьківські каталоги
 
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Перш ніж отримати доступ до каталогу зображень, вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу.
 
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../`. Розглянемо це в дії: в межах `body` файлу `about.html` додайте таке зображення під заголовком, який ви додали раніше:
 
 ```html
 <img src="../images/dog.jpg">
 ```
 
-To break this down:
+Розіб’ємо на частини:
 
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
 
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
 
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
 
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
 
-## Alt attribute
+## Атрибут alt
 
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
 
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
 
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+Ось так виглядає логотип The Odin Project з атрибутом alt:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
 
 # --question--
 
 ## --text--
 
-What two attributes do images always need to have?
+Які атрибути повинні мати зображення?
 
 ## --answers--
 
-`href` and `alt`
+`href` та `alt`
 
 ---
 
-`name` and `href`
+`name` та `href`
 
 ---
 
-`alt` and `src`
+`alt` та `src`
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
index 71bdf4add9b..42c4cc0450d 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -1,31 +1,31 @@
 ---
 id: 637f701572c65bc8e73dfe30
-title: Links and Images Lesson G
+title: Посилання та зображення. Урок №7
 challengeType: 15
 dashedName: links-and-images-lesson-g
 ---
 
 # --description--
 
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
 
-To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `<img>`. На відміну від інших елементів, які ми вже вивчили, елемент `<img>` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег.
 
-Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
 
-For example, using an absolute path you can display an image located on The Odin Project site:
+Наприклад, використовуючи абсолютний шлях, можна відтворити зображення з сайту The Odin Project:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_gORbExZ"></iframe>
 
-To use images that you have on your own websites, you can use a relative path.
+Щоб використати зображення з власного вебсайту, можна використати відносний шлях.
 
-- Create a new directory named `images` within the `odin-links-and-images` project.
+- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`.
 
-- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+- Потім завантажте <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">це зображення</a> та перемістіть його у щойно створений каталог зображень.
 
-- Rename the image to `dog.jpg`.
+- Перейменуйте зображення на `dog.jpg`.
 
-Finally add the image to the `index.html` file:
+Наприкінці додайте зображення до файлу `index.html`:
 
 ```html
 <body>
@@ -38,43 +38,43 @@ Finally add the image to the `index.html` file:
 </body>
 ```
 
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
+Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі.
 
 
-## Parent Directories
+## Батьківські каталоги
 
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Перш ніж отримати доступ до каталогу зображень, вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу.
 
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../`. Розглянемо це в дії: в межах `body` файлу `about.html` додайте таке зображення під заголовком, який ви додали раніше:
 
 ```html
 <img src="../images/dog.jpg">
 ```
 
-To break this down:
+Розіб’ємо на частини:
 
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
 
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
 
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
 
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
 
-## Alt attribute
+## Атрибут alt
 
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
 
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
 
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+Ось так виглядає логотип The Odin Project з атрибутом alt:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
 
 # --question--
 
 ## --text--
 
-How do you access a parent directory in a filepath?
+Як отримати доступ до батьківського каталогу у шляху до файлу?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
index 2f78b640e8f..8b4ddec910b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -1,31 +1,31 @@
 ---
 id: 637f700b72c65bc8e73dfe2f
-title: Links and Images Lesson H
+title: Посилання та зображення. Урок №8
 challengeType: 15
 dashedName: links-and-images-lesson-h
 ---
 
 # --description--
 
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
 
-To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `<img>`. На відміну від інших елементів, які ми вже вивчили, елемент `<img>` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег.
 
-Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
 
-For example, using an absolute path you can display an image located on The Odin Project site:
+Наприклад, використовуючи абсолютний шлях, можна відтворити зображення з сайту The Odin Project:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_gORbExZ"></iframe>
 
-To use images that you have on your own websites, you can use a relative path.
+Щоб використати зображення з власного вебсайту, можна використати відносний шлях.
 
-- Create a new directory named `images` within the `odin-links-and-images` project.
+- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`.
 
-- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+- Потім завантажте <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">це зображення</a> та перемістіть його у щойно створений каталог зображень.
 
-- Rename the image to `dog.jpg`.
+- Перейменуйте зображення на `dog.jpg`.
 
-Finally add the image to the `index.html` file:
+Наприкінці додайте зображення до файлу `index.html`:
 
 ```html
 <body>
@@ -38,59 +38,59 @@ Finally add the image to the `index.html` file:
 </body>
 ```
 
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
+Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі.
 
 
-## Parent Directories
+## Батьківські каталоги
 
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Перш ніж отримати доступ до каталогу зображень, вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу.
 
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../`. Розглянемо це в дії: в межах `body` файлу `about.html` додайте таке зображення під заголовком, який ви додали раніше:
 
 ```html
 <img src="../images/dog.jpg">
 ```
 
-To break this down:
+Розіб’ємо на частини:
 
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
 
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
 
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
 
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
 
-## Alt attribute
+## Атрибут alt
 
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
 
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
 
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+Ось так виглядає логотип The Odin Project з атрибутом alt:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
 
 # --assignment--
 
-Read about the <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank">four main image formats</a> that can be used on the web.
+Прочитайте про <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank">чотири основні формати зображень</a>, які можна використовувати у вебмережі (англійською мовою).
 
 # --question--
 
 ## --text--
 
-What are the four main image formats that you can use for images on the web?
+Які чотири основні формати зображення можна використовувати у вебмережі?
 
 ## --answers--
 
-MOV, GIF, PNG, and SVG.
+MOV, GIF, PNG та SVG.
 
 ---
 
-JPG, PNG, GIF, and SVG.
+JPG, PNG, GIF та SVG.
 
 ---
 
-JPG, PDF, SVG, and GIF.
+JPG, PDF, SVG та GIF.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
index a5b1babdd77..b95ba785124 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -1,43 +1,43 @@
 ---
 id: 64a5529c02815a7d323aab88
-title: The Box Model Lesson A
+title: Блокова модель. Урок №1
 challengeType: 15
 dashedName: the-box-model-lesson-a
 ---
 
 # --description--
 
-Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+Для фронтенду важливо вміти оглядати та налагоджувати HTML й CSS. У цьому уроці ми пройдемось по інструментах веброзробника Chrome, які дозволяють отримати детальну інформацію про елементи та правила CSS, а також допомагають зі знаходженням та налагодженням помилок у коді.
 
-To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+Щоб відкрити інспектора, натисніть правою кнопкою миші на будь-якому елементі вебсторінки та оберіть «Перевірити» або натисніть F12. Зробіть так прямо зараз, щоб дізнатись застосовані до цієї сторінки HTML та CSS.
 
-Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+Не лякайтесь всіх побачених інструментів! У цьому уроці ми фокусуватимемось на панелях «Елементи» та «Стилі».
 
 # --assignment--
 
-Play around with Chrome Dev Tools and see if you can answer the following question.
+Розгляньте інструменти веброзробника Chrome та дізнайтесь, чи зможете відповісти на запитання.
 
 # --question--
 
 ## --text--
 
-Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+На яких панелях в інструментах веброзробника Chrome варто фокусуватись при огляді та налагодженні HTML й CSS?
 
 ## --answers--
 
-Console and Network
+«Консоль» та «Мережа»
 
 ---
 
-Elements and Styles
+«Елементи» та «Стилі»
 
 ---
 
-Sources and Application
+«Джерела» та «Додаток»
 
 ---
 
-Performance and Memory
+«Ефективність» та «Пам’ять»
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
index 802fed2ac2f..8a9e8c0d2db 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -1,41 +1,41 @@
 ---
 id: 64a553ed02815a7d323aab89
-title: The Box Model Lesson B
+title: Блокова модель. Урок №2
 challengeType: 15
 dashedName: the-box-model-lesson-b
 ---
 
 # --description--
 
-In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+На панелі «Елементи» можна побачити повну структуру HTML. Ви можете натиснути на будь-який елемент панелі, щоб обрати певний елемент. Або ж ви можете натиснути на голубий значок зліва (показано нижче) та навести на будь-який елемент сторінки.
 
-<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Середовище веброзробки з відкритими інструментами розробника, де у верхньому лівому куті виділено синій значок інспектора для вибору елементів вебсторінки, щоб переглянути структуру та стилі HTML." />
 
-When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+Коли елемент обрано, вкладка «Стилі» покаже всі застосовані стилі, а також усі змінені стилі (у вигляді закресленого тексту). Наприклад, якщо використати інспектора та натиснути на заголовок «Your Career in Web Development Starts Here» <a href="https://www.theodinproject.com/" target="_blank">домашньої сторінки проєкту Odin</a>, справа ви побачите всі стилі, які наразі застосовані до елемента:
 
-<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="Фрагмент коду CSS на консолі розробника, що показує .hero_main-heading із застосованими margin-bottom: 100px, padding-bottom: 1,875rem, .accent color #ce973e. Правила стилю h1 включають font-size, weight, letter-spacing та замінену властивість margin-bottom: 2rem." />
 
 # --question--
 
 ## --text--
 
-When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+Припустимо, ви оглядаєте елемент в інструментах веброзробника Chrome. Що означає закреслена властивість стилю?
 
 ## --answers--
 
-The style property is currently disabled and not applied to the element.
+Наразі властивість стилю пошкоджена та не застосовується до елемента.
 
 ---
 
-The style property is overridden by a more specific CSS rule.
+Властивість стилю замінена специфічнішим правилом CSS.
 
 ---
 
-The style property is deprecated and should not be used.
+Властивість стилю нерекомендована та її бажано не використовувати.
 
 ---
 
-The style property is experimental and may not be supported by all browsers
+Властивість стилю експериментальна та може підтримуватись не всіма браузерами.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
index 76ff0d4c362..558502cda47 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -1,44 +1,44 @@
 ---
 id: 64a5551d02815a7d323aab8a
-title: The Box Model Lesson C
+title: Блокова модель. Урок №3
 challengeType: 15
 dashedName: the-box-model-lesson-c
 --- 
 # --description--
 
-In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+На панелі «Елементи» можна побачити повну структуру HTML. Ви можете натиснути на будь-який елемент панелі, щоб обрати певний елемент. Або ж ви можете натиснути на голубий значок зліва (показано нижче) та навести на будь-який елемент сторінки.
 
-<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Середовище веброзробки з відкритими інструментами розробника, де у верхньому лівому куті виділено синій значок інспектора для вибору елементів вебсторінки, щоб переглянути структуру та стилі HTML." />
 
-When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+Коли елемент обрано, вкладка «Стилі» покаже всі застосовані стилі, а також усі змінені стилі (у вигляді закресленого тексту). Наприклад, якщо використати інспектора та натиснути на заголовок «Your Career in Web Development Starts Here» <a href="https://www.theodinproject.com/" target="_blank">домашньої сторінки проєкту Odin</a>, справа ви побачите всі стилі, які наразі застосовані до елемента:
 
-<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="Фрагмент коду CSS на консолі розробника, що показує .hero_main-heading із застосованими margin-bottom: 100px, padding-bottom: 1,875rem, .accent color #ce973e. Правила стилю h1 включають font-size, weight, letter-spacing та замінену властивість margin-bottom: 2rem." />
 
 # --assignment--
 
-Play around with Chrome Dev Tools and see if you can answer the following question.
+Розгляньте інструменти веброзробника Chrome та дізнайтесь, чи зможете відповісти на запитання.
 
 # --question--
 
 ## --text--
 
-Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+Яка функція панелі елементів дозволяє вибрати будь-який елемент сторінки, навівши на нього?
 
 ## --answers--
 
-Blue-highlighted icon
+Голубий значок
 
 ---
 
-Styles tab
+Вкладка «Стилі»
 
 ---
 
-Inspector tab
+Вкладка «Інспектор»
 
 ---
 
-HTML structure view
+Вигляд структури HTML
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
index c22f53661be..d304ca86bc9 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -1,43 +1,43 @@
 ---
 id: 64a55a6102815a7d323aab8b
-title: The Box Model Lesson D
+title: Блокова модель. Урок №4
 challengeType: 15
 dashedName: the-box-model-lesson-d
 --- 
 # --description--
 
-In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+На панелі «Елементи» можна побачити повну структуру HTML. Ви можете натиснути на будь-який елемент панелі, щоб обрати певний елемент. Або ж ви можете натиснути на голубий значок зліва (показано нижче) та навести на будь-який елемент сторінки.
 
-<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Середовище веброзробки з відкритими інструментами розробника, де у верхньому лівому куті виділено синій значок інспектора для вибору елементів вебсторінки, щоб переглянути структуру та стилі HTML." />
 
-When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+Коли елемент обрано, вкладка «Стилі» покаже всі застосовані стилі, а також усі змінені стилі (у вигляді закресленого тексту). Наприклад, якщо використати інспектора та натиснути на заголовок «Your Career in Web Development Starts Here» <a href="https://www.theodinproject.com/" target="_blank">домашньої сторінки проєкту Odin</a>, справа ви побачите всі стилі, які наразі застосовані до елемента:
 
-<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="Фрагмент коду CSS на консолі розробника, що показує .hero_main-heading із застосованими margin-bottom: 100px, padding-bottom: 1,875rem, .accent color #ce973e. Правила стилю h1 включають font-size, weight, letter-spacing та замінену властивість margin-bottom: 2rem." />
 # --assignment--
 
-Play around with Chrome Dev Tools and see if you can answer the following question.
+Розгляньте інструменти веброзробника Chrome та дізнайтесь, чи зможете відповісти на запитання.
 
 # --question--
 
 ## --text--
 
-In the Styles pane, what information can you view about an element when it is selected?
+Яку інформацію щодо наведеного елемента можна переглянути на панелі «Стилі»?
 
 ## --answers--
 
-HTML structure and CSS rules
+Структуру HTML та правила CSS
 
 ---
 
-Styles tab
+Вкладку «Стилі»
 
 ---
 
-Inspector tab
+Вкладку «Інспектор»
 
 ---
 
-Applied styles and overwritten styles.
+Застосовані та змінені стилі
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
index e2b9e44febc..43360ef1bb3 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -1,36 +1,36 @@
 ---
 id: 64a669f77a7d00f97013ed0c
-title: The Box Model Lesson E
+title: Блокова модель. Урок №5
 challengeType: 15
 dashedName: the-box-model-lesson-e
 --- 
 # --description--
 
-Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+Тепер ви розумієте базовий синтаксис HTML та CSS, тому перейдемо до серйознішого. Найважливіші навички CSS, які потрібно опанувати — це позиціювання та макет сторінки. Вміти змінювати шрифт та колір теж важливо, але вміти розміщувати елементи на вебсторінці важливіше. Зрештою, на скількох вебсторінках всі елементи наліплені один на одного?
 
-Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+Навчитись розміщувати елементи на вебсторінці не так вже і важко, якщо розібратись з ключовими поняттями. На жаль, багато учнів проскакують вивчення HTML та CSS, переходять до JavaScript та не знають цих основних понять. Це призводить до розчарування, болю (та смішних гіфок), оскільки знання JavaScript стає непотрібним, якщо ви не можете розмістити елементи на потрібному місці. Маючи це на увазі, розпочнемо.
 
 # --question--
 
 ## --text--
 
-Why is it important to have a solid understanding of CSS in web development?
+Чому у веброзробці важливо розуміти CSS?
 
 ## --answers--
 
-It allows you to create complex animations and interactive effects.
+CSS дозволяє створити складні анімації та інтерактивні ефекти.
 
 ---
 
-It allows you to create complex animations and interactive effects.
+CSS дозволяє створити складні анімації та інтерактивні ефекти.
 
 ---
 
-It helps in optimizing database queries for improved performance.
+CSS допомагає оптимізувати запити бази даних для покращення роботи.
 
 ---
 
-It enables you to style and design webpages with precision and control.
+CSS дозволяє точно та контрольовано стилізувати і проєктувати вебсторінки.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
index 4cbbaec8343..25da98856dc 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -1,14 +1,14 @@
 ---
 id: 64a66c917a7d00f97013ed0d
-title: The Box Model Lesson F
+title: Блокова модель. Урок №6
 challengeType: 15
 dashedName: the-box-model-lesson-f
 --- 
 # --description--
 
-The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+Щоб бути успішним у CSS, для початку потрібно знати про блокову модель. Це не складно, але якщо пропустити це поняття — пізніше буде складніше.
 
-Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+Будь-що на вебсторінці є прямокутним блоком. Ці блоки можуть містити інші блоки, а також можуть знаходитись поруч. Щоб краще розібратись з цим, додайте кордон до кожного елемента вебсторінки:
 
 ```css
 * {
@@ -18,29 +18,29 @@ Every single thing on a webpage is a rectangular box. These boxes can have other
 
 # --assignment--
 
-Add a border to every element on the page and see how the boxes are laid out.
+Додайте кордон до кожного елемента на сторінці та подивіться, як розміщені блоки.
 
 # --question--
 
 ## --text--
 
-What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+Яке основне поняття у CSS дозволяє зрозуміти структуру елементів як прямокутних блоків?
 
 ## --answers--
 
-Box-sizing
+Розмір блоку
 
 ---
 
-Box-shadow
+Тінь блоку
 
 ---
 
-Box model
+Блокова модель
 
 ---
 
-Border-box
+Кордон блоку
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
index ab042ee7f3b..a6abd4dbed8 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -1,50 +1,50 @@
 ---
 id: 64a6702e7a7d00f97013ed0e
-title: The Box Model Lesson G
+title: Блокова модель. Урок №7
 challengeType: 15
 dashedName: the-box-model-lesson-g
 --- 
 # --description--
 
-<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components" style="width: 95%; height: 95%;" />
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="Зображення, на якому показано вебсайт проєкту Odin, оточений червоними рамками, що вказує на те, що сайт складається з декількох компонентів" style="width: 95%; height: 95%;" />
 
-OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+На зображені вище є пару кружечків… Але коли мова йде про макети, все сходиться як прямокутні блоки, а не кружечки. Зрештою, розміщення всіх елементів на вебсторінці вирішує, як ви вкладатимете та складатимете ці блоки.
 
-The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+Єдине ускладнення в тому, що існує багато способів маніпулювати розмірами блоків та простором між ними за допомогою відступів, полів і кордонів. Якщо коротко підсумувати:
 
-- `padding` increases the space between the border of a box and the content of the box.
-- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
-- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+- `padding` (відступ) збільшує простір між кордоном та вмістом блоку;
+- `margin` (поле) збільшує простір між кордонами суміжних блоків;
+- `border` (кордон) додає простір між відступом та полем, навіть якщо це лише один піксель.
 
-Be sure to study the diagrams carefully.
+Обов’язково розглядайте схеми.
 
-<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Visual representation of CSS box model with text, surrounded by 'padding' in pink, a purple 'border', and 'margin' indicated by blue arrows, explaining space between text, box edge, and window edge." />
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Візуальне представлення блокової моделі CSS з текстом, оточеним рожевим відступом (padding), фіолетовим кордоном (border) та полем (margin), позначеним стрілками, що пояснює відстань між текстом, краєм блоку та краєм вікна." />
 
 # --assignment--
 
-Add a border to every element on the page and see how the boxes are laid out.
+Додайте кордон до кожного елемента на сторінці та подивіться, як розміщені блоки.
 
 # --question--
 
 ## --text--
 
-From inside to outside, what is the order of box-model properties?
+Який порядок властивостей блокової моделі від середини до зовні?
 
 ## --answers--
 
-Content, Margin, Padding, Border
+Вміст, поле, відступ, кордон
 
 ---
 
-Margin, Padding, Content, Border
+Поле, відступ, вміст, кордон
 
 ---
 
-Content, Padding, Border, Margin
+Вміст, відступ, кордон, поле
 
 ---
 
-Padding, Content, Border, Margin
+Відступ, вміст, кордон, поле
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
index 5423c67fb5c..0be9da8d0e4 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -1,35 +1,35 @@
 ---
 id: 64a674937a7d00f97013ed0f
 videoId: rIO5326FgPE
-title: The Box Model Lesson H
+title: Блокова модель. Урок №8
 challengeType: 15
 dashedName: the-box-model-lesson-h
 --- 
 # --description--
 
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">у цьому уроці від MDN</a> (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
 
 # --question--
 
 ## --text--
 
-What does the box-sizing CSS property do?
+Що робить властивість box-sizing у CSS?
 
 ## --answers--
 
-It determines the order of the box-model properties.
+Визначає порядок властивостей блокової моделі.
 
 ---
 
-It specifies the position of an element on the webpage.
+Вказує розташування елемента на вебсторінці.
 
 ---
 
-It controls how the total width and height of an element are calculated.
+Контролює обчислення ширини та висоти елемента.
 
 ---
 
-It sets the background color of an element.
+Налаштовує колір фону елемента.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
index 0f70fbcec65..959fe5ce5a6 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -1,35 +1,35 @@
 ---
 id: 64a6749a7a7d00f97013ed10
 videoId: rIO5326FgPE
-title: The Box Model Lesson I
+title: Блокова модель. Урок №9
 challengeType: 15
 dashedName: the-box-model-lesson-i
 --- 
 # --description--
 
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">у цьому уроці від MDN</a> (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
 
 # --question--
 
 ## --text--
 
-What is the difference between the standard and alternative box model?
+Яка різниця між стандартною та альтернативною блоковими моделями?
 
 ## --answers--
 
-The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+Стандартна блокова модель обчислює ширину та висоту елементу на основі вмісту, а альтернативна блокова модель — на основі вмісту, доданого до відступу та кордону.
 
 ---
 
-The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+Стандартна блокова модель містить вміст, відступ та кордон, а альтернативна блокова модель — лише вміст.
 
 ---
 
-The standard box model and the alternative box model are the same and have no differences.
+Стандартна й альтернативна блокові моделі одинакові та не мають жодних відмінностей.
 
 ---
 
-The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+Стандартна блокова модель містить лише вміст, а альтернативна блокова модель — вміст, відступ та кордон.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
index 1b311df62dd..ac2295992b2 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -1,35 +1,35 @@
 ---
 id: 64a674a47a7d00f97013ed11
 videoId: rIO5326FgPE
-title: The Box Model Lesson J
+title: Блокова модель. Урок №10
 challengeType: 15
 dashedName: the-box-model-lesson-j
 --- 
 # --description--
 
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">у цьому уроці від MDN</a> (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
 
 # --question--
 
 ## --text--
 
-Would you use margin or padding to create more space between 2 elements?
+Що б ви використали, щоб створити більше простору між двома елементами: поле чи відступ?
 
 ## --answers--
 
-Padding
+Відступ
 
 ---
 
-Both margin and padding can be used interchangeably
+Поле та відступ можна використовувати один замість одного
 
 ---
 
-Neither margin nor padding can be used to create more space between elements
+Ні поле, ні відступ не використовують для створення простору між елементами
 
 ---
 
-Margin
+Поле
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
index b782f8bb4f9..c446bcd2e4b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -1,19 +1,19 @@
 ---
 id: 64a674ac7a7d00f97013ed12
 videoId: rIO5326FgPE
-title: The Box Model Lesson K
+title: Блокова модель. Урок №11
 challengeType: 15
 dashedName: the-box-model-lesson-k
 --- 
 # --description--
 
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">у цьому уроці від MDN</a> (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
 
 # --question--
 
 ## --text--
 
-Which CSS property would you use to create more space between the contents of an element and its border?
+Яку властивість CSS ви б використали, щоб створити більше простору між вмістом елемента та його кордоном?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
index e86aa50c732..62307dea741 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -1,27 +1,27 @@
 ---
 id: 64a674b97a7d00f97013ed13
 videoId: rIO5326FgPE
-title: The Box Model Lesson L
+title: Блокова модель. Урок №12
 challengeType: 15
 dashedName: the-box-model-lesson-l
 --- 
 # --description--
 
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">у цьому уроці від MDN</a> (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
 
 # --question--
 
 ## --text--
 
-Would you use margin or padding if you wanted two elements to overlap each other?
+Що б ви використали, щоб два елементи перекривали один одного: поле чи відступ?
 
 ## --answers--
 
-Padding
+Відступ
 
 ---
 
-Margin
+Поле
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
index d7296f95901..2c70ee80a7d 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -1,19 +1,19 @@
 ---
 id: 64a674c27a7d00f97013ed14
 videoId: rIO5326FgPE
-title: The Box Model Lesson M
+title: Блокова модель. Урок №13
 challengeType: 15
 dashedName: the-box-model-lesson-m
 --- 
 # --description--
 
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">у цьому уроці від MDN</a> (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
 
 # --question--
 
 ## --text--
 
-How do you set the alternative box model for all of your elements?
+Як налаштувати альтернативну блокову модель для всіх елементів?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
index e44f4fa7533..08191ec0f6f 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -1,14 +1,14 @@
 ---
 id: 637f4e5872c65bc8e73dfe27
 videoId: yqcd-XkxZNM
-title: Working With Text Lesson A
+title: Робота з текстом. Урок №1
 challengeType: 15
 dashedName: working-with-text-lesson-a
 ---
 
 # --description--
 
-What would you expect the following text to output on an HTML page?
+Які вихідні дані ви очікуєте від цього тексту на HTML-сторінці?
 
 ```html
 <body>
@@ -20,27 +20,27 @@ What would you expect the following text to output on an HTML page?
 </body>
 ```
 
-It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+Текст виглядає як два абзаци, і ви можете очікувати, що він відтвориться так само. Але не в цьому випадку, як можете побачити нижче:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
 
-When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+Коли браузер стикається з подібними рядками в HTML, він об’єднує їх. У результаті такого об’єднання весь текст групується в один довгий рядок.
 
-If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `<p>` tag.
+Якщо ви хочете створити абзаци в HTML, потрібно використати елемент абзацу, який додає новий рядок після кожного абзацу. Щоб створити елемент абзацу, напишіть текст в межах тегу `<p>`.
 
-Changing our example from before to use paragraph elements fixes the issue:
+Попередня проблема зникне, якщо ми використаємо елементи абзаців:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
 
 # --assignment--
 
-Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above.
+Перегляньте відео Кевіна Павелла про абзаци та заголовки у HTML (розміщене вище).
 
 # --question--
 
 ## --text--
 
-How do you create a paragraph in HTML?
+Як створити абзац в HTML?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
index 390147c9623..adcdb62532c 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
@@ -1,38 +1,38 @@
 ---
 id: 637f4e5f72c65bc8e73dfe28
-title: Working With Text Lesson B
+title: Робота з текстом. Урок №2
 challengeType: 15
 dashedName: working-with-text-lesson-b
 ---
 
 # --description--
 
-Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.
+Заголовки відрізняються від інших текстових елементів у HTML: вони більші і жирніші за інший текст, що вказує на те, що вони є заголовками.
 
-There are 6 different levels of headings starting from `<h1>` to `<h6>`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level.
+Існує 6 різних рівнів заголовків від `<h1>` до `<h6>`. Число в тегу заголовка вказує на його рівень. Найбільшим і найважливішим є заголовок `h1`, а `h6` — це найменший заголовок найнижчого рівня.
 
-Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `<h1>` tag.
+Заголовки визначаються майже як абзаци. Наприклад, щоб створити заголовок `h1`, текст заголовка треба обгорнути в тег `<h1>`.
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
 
-Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.
+Важливо використовувати заголовки відповідного рівня, оскільки рівні забезпечують ієрархію вмісту. Заголовок `h1` потрібно використовувати для всієї сторінки, а заголовки нижчих рівнів — для окремих секцій.
 
 # --question--
 ## --text--
 
-How many different levels of headings are there and what is the difference between them?
+Скільки існує рівнів заголовків і яка між ними різниця?
 
 ## --answers--
 
-There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading.
+Існує 5 рівнів заголовків. `h5` — найменший і найменш важливий заголовок, а `h1` — найбільший і найважливіший.
 
 ---
 
-There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading.
+Існує 6 рівнів заголовків. `h6` — найбільший і найважливіший заголовок, а `h1` — найменший і найменш важливий.
 
 ---
 
-There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading.
+Існує 6 рівнів заголовків. `h1` — найбільший і найважливіший заголовок, а `h6` — найменший і найменш важливий.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
index 8dee0883bbf..85f5f18ef4e 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
@@ -1,34 +1,34 @@
 ---
 id: 637f4e6672c65bc8e73dfe29
 videoId: gW6cBZLUk6M
-title: Working With Text Lesson C
+title: Робота з текстом. Урок №3
 challengeType: 15
 dashedName: working-with-text-lesson-c
 ---
 
 # --description--
 
-The `<strong>` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `<strong>` tag.
+Елемент `<strong>` робить текст жирним. Він також позначає текст як важливий, а це впливає на такі інструменти, як читачі екрана, якими користуються користувачі з порушеннями зору. Інтонація голосу деяких читачів може змінитись, щоб вказати на важливість тексту в елементі `strong`. Щоб визначити елемент `strong`, загорніть текст в тег `<strong>`.
 
-You can use `strong` on its own:
+Ви можете використовувати `strong` окремо:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
 
-But you will probably find yourself using the `strong` element much more in combination with other text elements, like this:
+Однак частіше ви будете використовувати елемент `strong` у поєднанні з іншими текстовими елементами:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqJr"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_wvewqJr"></iframe>
 
-Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum.
+Іноді потрібно зробити текст жирним, але не надаючи йому важливого значення. Пізніше на уроках CSS ви дізнаєтеся, як це зробити.
 
 # --assignment--
 
-Watch Kevin Powell’s HTML Bold and Italic Text Video above.
+Перегляньте відео Кевіна Павелла про жирний шрифт та курсив у HTML (розміщене вище).
 
 # --question--
 
 ## --text--
 
-What element should you use to make text bold and important?
+Який елемент потрібно використати, щоб зробити текст жирним та важливим?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
index 0e03f073189..fb3f7455070 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
@@ -1,25 +1,25 @@
 ---
 id: 637f4e6e72c65bc8e73dfe2a
-title: Working With Text Lesson D
+title: Робота з текстом. Урок №4
 challengeType: 15
 dashedName: working-with-text-lesson-d
 ---
 
 # --description--
 
-The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag.
+Елемент `em` робить текст курсивним. Він також робить акцент на тексті, що може вплинути на читачів екрана. Щоб визначити виділений елемент, загорніть текст в тег `<em>`.
 
-To use `em` on its own:
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>
+Ви можете використовувати `em` окремо:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_wvewqpp"></iframe>
 
-Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements:
+Як і елемент `strong`, частіше ви будете використовувати елемент `em` у поєднанні з іншими текстовими елементами:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
 
 # --question--
 ## --text--
 
-What element should you use to make text italicized to add emphasis?
+Який елемент потрібно використати, щоб зробити текст курсивним?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
index 22f949e26f5..fa39a466dd9 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
@@ -1,17 +1,17 @@
 ---
 id: 637f4e7972c65bc8e73dfe2b
-title: Working With Text Lesson E
+title: Робота з текстом. Урок №5
 challengeType: 15
 dashedName: working-with-text-lesson-e
 ---
 
 # --description--
 
-You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+Можливо, ви помітили, що в усіх прикладах цього уроку ви робите відступи для елементів, які знаходяться всередині інших елементів. Це називається вкладенням елементів.
 
-When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+Коли ви вкладаєте елементи в інші елементи, ви створюєте родинний зв’язок між ними. Вкладені елементи є дочірніми, а елемент, в який вони вкладені, є батьківським.
 
-In the following example, the `body` element is the parent and the `p` is the child:
+У цьому прикладі елемент `body` є батьківським, а `p` — дочірнім:
 
 ```html
 <html>
@@ -23,9 +23,9 @@ In the following example, the `body` element is the parent and the `p` is the ch
  </html>
 ```
 
-Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+Як і люди, батьківські елементи HTML можуть мати багато дітей. Елементи одного рівня вкладеності вважаються братськими.
 
-For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other:
+Наприклад, у цьому коді два елементи `p` є братськими, оскільки є дочірніми елементами тегу `body` та вкладені на одному рівні:
 
 ```html
 <html>
@@ -38,27 +38,27 @@ For example, the two `p` elements in the following code are siblings, since they
  </html>
 ```
 
-You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+Відступи використовують, щоб зробити рівень вкладеності зрозумілим і читабельним для себе та інших розробників, які працюватимуть із вашим HTML. Рекомендовано робити відступ будь-яких дочірніх елементів на два пробіли.
 
-The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+Батьківські, дочірні та братські стосунки між елементами будуть важливішими пізніше, коли ви почнете стилізувати свій HTML за допомогою CSS та додавати поведінку за допомогою JavaScript. Наразі важливо знати різницю між стосунками елементів і термінологією, яка використовується для опису їхніх стосунків.
 
 # --question--
 
 ## --text--
 
-What relationship do two elements have if they are at the same level of nesting?
+Які стосунки між двома елементами, вкладеними на одному рівні?
 
 ## --answers--
 
-The elements are each other's parents.
+Елементи є батьками один для одного.
 
 ---
 
-The elements are each other's children.
+Елементи є дітьми один для одного.
 
 ---
 
-The elements are siblings.
+Елементи є братськими.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
index 14c3d7faf08..8ce1eeb54a6 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
@@ -1,17 +1,17 @@
 ---
 id: 637f4e8072c65bc8e73dfe2c
-title: Working With Text Lesson F
+title: Робота з текстом. Урок №6
 challengeType: 15
 dashedName: working-with-text-lesson-f
 ---
 
 # --description--
 
-You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+Можливо, ви помітили, що в усіх прикладах цього уроку ви робите відступи для елементів, які знаходяться всередині інших елементів. Це називається вкладенням елементів.
 
-When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+Коли ви вкладаєте елементи в інші елементи, ви створюєте родинний зв’язок між ними. Вкладені елементи є дочірніми, а елемент, в який вони вкладені, є батьківським.
 
-In the following example, the body element is the parent and the paragraph is the child:
+У цьому прикладі елемент `body` є батьківським, а абзац — дочірнім:
 
 ```html
 <html>
@@ -23,9 +23,9 @@ In the following example, the body element is the parent and the paragraph is th
  </html>
 ```
 
-Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+Як і люди, батьківські елементи HTML можуть мати багато дітей. Елементи одного рівня вкладеності вважаються братськими.
 
-For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:
+Наприклад, у цьому коді два елементи абзацу є братськими, оскільки є дочірніми елементами тегу `body` та вкладені на одному рівні:
 
 ```html
 <html>
@@ -38,27 +38,27 @@ For example, the two paragraphs in the following code are siblings, since they a
  </html>
 ```
 
-You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+Відступи використовують, щоб зробити рівень вкладеності зрозумілим і читабельним для себе та інших розробників, які працюватимуть із вашим HTML. Рекомендовано робити відступ будь-яких дочірніх елементів на два пробіли.
 
-The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+Батьківські, дочірні та братські стосунки між елементами будуть важливішими пізніше, коли ви почнете стилізувати свій HTML за допомогою CSS та додавати поведінку за допомогою JavaScript. Наразі важливо знати різницю між стосунками елементів і термінологією, яка використовується для опису їхніх стосунків.
 
 # --question--
 
 ## --text--
 
-What relationship does an element have with any nested element within it?
+Які стосунки між елементом і вкладеним у нього елементом?
 
 ## --answers--
 
-The element within the other element is called the parent element.
+Елемент в межах іншого елемента називається батьківським.
 
 ---
 
-The element within the other element is called the child element.
+Елемент в межах іншого елемента називається дочірнім.
 
 ---
 
-The element within the other element is called the sibling element.
+Елемент в межах іншого елемента називається братським.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
index 1452e57ff48..f7ac8334abc 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
@@ -1,15 +1,15 @@
 ---
 id: 637f4e8772c65bc8e73dfe2d
-title: Working With Text Lesson G
+title: Робота з текстом. Урок №7
 challengeType: 15
 dashedName: working-with-text-lesson-g
 ---
 
 # --description--
 
-HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code.
+Браузер не бачить коментарі HTML: вони дозволяють коментувати код, щоб ви або інші розробники могли прочитати їх і отримати певний контекст про те, що може бути незрозумілим у коді.
 
-Writing an HTML comment is simple: You just enclose the comment with `<!--` and `-->`tags. For example:
+Написати коментар HTML просто: ви всього лиш вкладаєте коментар у теги `<!--` та `-->`. Наприклад:
 
 ```html
 <h1> View the html to see the hidden comments </h1>
@@ -23,13 +23,13 @@ Writing an HTML comment is simple: You just enclose the comment with `<!--` and
 
 # --assignment--
 
-To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites.
+Щоб трохи попрактикуватися в роботі з текстом у HTML, створіть звичайну сторінку із публікацією, у якій наявні різні заголовки та абзаци, а деякий текст в абзацах виділено жирним шрифтом і курсивом. Під час створення вебсайту можна використовувати [Lorem Ipsum](https://loremipsum.io), щоб створити фіктивний текст.
 
 # --question--
 
 ## --text--
 
-How do you create HTML comments?
+Як створити коментар у HTML?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
index 5d2c495870b..c5581154a76 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
@@ -1,52 +1,52 @@
 ---
 id: 637f4e3e72c65bc8e73dfe24
 videoId: kcHKFZBVtf4
-title: Working With Text Lesson H
+title: Робота з текстом. Урок №8
 challengeType: 15
 dashedName: working-with-text-lesson-h
 ---
 
 # --description--
 
-If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+Якщо ви хочете мати список елементів, порядок яких не має значення (наприклад, список покупок із товарами, які можна купити в будь-якому порядку), можна використати невпорядкований список.
 
-Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+Невпорядковані списки створені за допомогою елемента `<ul>`, а кожен елемент списку створений за допомогою елемента списку `<li>`.
 
-Each list item in an unordered list begins with a bullet point:
+Елементи невпорядкованого списку починаються з маркера списку:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_powjajd"></iframe>
 
-If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+Якщо ви хочете мати список елементів, порядок яких має значення (наприклад, покроковий рецепт або 10 улюблених телешоу), можна використати впорядкований список.
 
-Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+Впорядковані списки створені за допомогою елемента `<ol>`. Кожен елемент списку також створений за допомогою елемента списку `<li>`. Однак елементи впорядкованого списку починаються з числа:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
 
 # --assignment--
 
-Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.
+Перегляньте перші три хвилини відео Кевіна Павелла про впорядковані та невпорядковані списки (розміщене вище).
 
 ---
 
-Make an unordered shopping list of your favorite foods.
+Зробіть невпорядкований список їжі, яку потрібно купити.
 
 ---
 
-Make an ordered list of todo’s you need to get done today.
+Зробіть впорядкований список справ, які потрібно виконати сьогодні.
 
 ---
 
-Make an unordered list of places you’d like to visit someday.
+Зробіть невпорядкований список місць, які ви хочете відвідати.
 
 ---
 
-Make an ordered list of your all time top 5 favorite video games or movies.
+Зробіть впорядкований список з п’яти улюблених відеоігор або фільмів.
 
 # --question--
 
 ## --text--
 
-What HTML tag is used to create an unordered list?
+Який тег потрібно використати, щоб створити невпорядкований список у HTML?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
index fa63ea5db4b..0f4c18c8b2a 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
@@ -1,31 +1,31 @@
 ---
 id: 637f4e4672c65bc8e73dfe25
-title: Working With Text Lesson I
+title: Робота з текстом. Урок №9
 challengeType: 15
 dashedName: working-with-text-lesson-i
 ---
 
 # --description--
 
-If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+Якщо ви хочете мати список елементів, порядок яких не має значення (наприклад, список покупок із товарами, які можна купити в будь-якому порядку), можна використати невпорядкований список.
 
-Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+Невпорядковані списки створені за допомогою елемента `<ul>`, а кожен елемент списку створений за допомогою елемента списку `<li>`.
 
-Each list item in an unordered list begins with a bullet point:
+Елементи невпорядкованого списку починаються з маркера списку:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_powjajd"></iframe>
 
-If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+Якщо ви хочете мати список елементів, порядок яких має значення (наприклад, покроковий рецепт або 10 улюблених телешоу), можна використати впорядкований список.
 
-Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+Впорядковані списки створені за допомогою елемента `<ol>`. Кожен елемент списку також створений за допомогою елемента списку `<li>`. Однак елементи впорядкованого списку починаються з числа:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
 
 # --question--
 
 ## --text--
 
-What HTML tag is used to create an ordered list?
+Який тег потрібно використати, щоб створити впорядкований список у HTML?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
index 928259c7535..afa88fcbf22 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
@@ -1,31 +1,31 @@
 ---
 id: 637f4e5172c65bc8e73dfe26
-title: Working With Text Lesson J
+title: Робота з текстом. Урок №10
 challengeType: 15
 dashedName: working-with-text-lesson-j
 ---
 
 # --description--
 
-If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+Якщо ви хочете мати список елементів, порядок яких не має значення (наприклад, список покупок із товарами, які можна купити в будь-якому порядку), можна використати невпорядкований список.
 
-Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+Невпорядковані списки створені за допомогою елемента `<ul>`, а кожен елемент списку створений за допомогою елемента списку `<li>`.
 
-Each list item in an unordered list begins with a bullet point:
+Елементи невпорядкованого списку починаються з маркера списку:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_powjajd"></iframe>
 
-If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+Якщо ви хочете мати список елементів, порядок яких має значення (наприклад, покроковий рецепт або 10 улюблених телешоу), можна використати впорядкований список.
 
-Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+Впорядковані списки створені за допомогою елемента `<ol>`. Кожен елемент списку також створений за допомогою елемента списку `<li>`. Однак елементи впорядкованого списку починаються з числа:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
 
 # --question--
 
 ## --text--
 
-What HTML tag is used to create list items within both unordered and ordered lists?
+Який тег потрібно використати, щоб створити елементи в межах невпорядкованого та впорядковано списків у HTML?
 
 ## --answers--