chore(i18n,learn): processed translations (#55516)

2026-10-13 00:03:05 +08:00 · 2024-07-15 20:45:43 -07:00
parent b2518cc347
commit 6d36b32e35
119 changed files with 842 additions and 776 deletions
@@ -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--
@@ -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--
@@ -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`.

@@ -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.

@@ -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--
@@ -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--
@@ -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`.

@@ -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.

@@ -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--
@@ -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--
@@ -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`.

@@ -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.

@@ -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--
@@ -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--
@@ -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`.

@@ -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.

@@ -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--
@@ -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--
@@ -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`.

@@ -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.

@@ -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--
@@ -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--
@@ -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`.

@@ -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.

@@ -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--
@@ -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--
@@ -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`.

@@ -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.

@@ -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--
@@ -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--
@@ -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`.

@@ -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.

@@ -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--
@@ -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--
@@ -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`.

@@ -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.

@@ -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--
@@ -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--
@@ -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`.

@@ -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.

@@ -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--
@@ -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--
@@ -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`.

@@ -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.

@@ -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--

@@ -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--

@@ -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.

@@ -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--

@@ -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.

@@ -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!

@@ -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:

@@ -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) {
@@ -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) {
@@ -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];
@@ -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]
@@ -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--

@@ -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--
@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--
@@ -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--
@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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;
@@ -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--
@@ -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--
@@ -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--
@@ -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--
@@ -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--
@@ -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--
@@ -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--
@@ -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--

@@ -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         | призначення           | =    |
+| ...       | ...                   | ...  |



@@ -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--

@@ -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--
@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--

@@ -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--
@@ -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--

@@ -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--
@@ -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--
--- a/Show More
+++ b/Show More