diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
index fb59c32bfd8..ede0ad4e0a5 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
@@ -27,63 +27,45 @@ console.log(myBreed);
字符串 `Doberman` 將會出現在控制檯中。
-使用這一概念的另一種情況是:屬性的名字是在程序運行期間動態收集得到的。如下所示:
-
-```js
-const someObj = {
- propName: "John"
-};
-
-function propPrefix(str) {
- const s = "prop";
- return s + str;
-}
-
-const someProp = propPrefix("Name");
-console.log(someObj[someProp]);
-```
-
-`someProp` 的值將爲字符串 `propName`,並且字符串 `John` 將會出現在控制檯中。
-
-注意,當使用變量名訪問屬性時,我們*沒有*使用引號包裹它,因爲我們正在使用的是變量的*值*,而不是變量的*名字*。
+請注意,我們在使用變量名訪問屬性時,*不要*使用引號引起來,因爲我們使用的是 *值*,而不是 *屬性名*。
# --instructions--
-將變量 `playerNumber` 設置爲 `16`。 然後,使用該變量查找玩家的名字,並將其賦值給`player`。
+將 `playerNumber` 變量設置爲 `16`。 然後,使用該變量查找播放器的名稱並將其分配給 `player`。
# --hints--
-`playerNumber` 應該是一個數字
+`playerNumber` 應該是一個數字。
```js
assert(typeof playerNumber === 'number');
```
-變量 `player` 應該是一個字符串
+變量 `player` 應該是一個字符串。
```js
assert(typeof player === 'string');
```
-`player` 的值應該爲字符串 `Montana`
+`player` 的值應該是字符串 `Montana`。
```js
assert(player === 'Montana');
```
-你應該使用方括號訪問 `testObj`
+你應該使用括號表示法來訪問 `testObj`。
```js
assert(/testObj\s*?\[.*?\]/.test(code));
```
-你不應該直接將值 `Montana` 賦給變量 `player`。
+你不應將值 `Montana` 直接分配給變量 `player`。
```js
assert(!code.match(/player\s*=\s*"|\'\s*Montana\s*"|\'\s*;/gi));
```
-你應該在你的方括號內使用變量 `playerNumber`。
+你應該在括號符號中使用變量 `playerNumber`。
```js
assert(/testObj\s*?\[\s*playerNumber\s*\]/.test(code));
diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
index 8dfafe09e26..6e3a579e9d7 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
@@ -66,6 +66,12 @@ assert.isUndefined(addTogether(2)([3]));
assert.isUndefined(addTogether('2', 3));
```
+`addTogether(5, undefined)` 應該返回 `undefined`。
+
+```js
+assert.isUndefined(addTogether(5, undefined));
+```
+
# --seed--
## --seed-contents--
diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
index f4f2333b697..b4726828e35 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
@@ -97,6 +97,15 @@ assert.deepEqual(
);
```
+`whatIsInAName([{"a": 1, "b": 2, "c": 3, "d": 9999}], {"a": 1, "b": 9999, "c": 3})` 應該返回 `[]`。
+
+```js
+assert.deepEqual(
+ whatIsInAName([{ a: 1, b: 2, c: 3, d: 9999 }], { a: 1, b: 9999, c: 3 }),
+ []
+);
+```
+
# --seed--
## --seed-contents--
diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
index 229bb209627..9151b2913b9 100644
--- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
+++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
@@ -27,63 +27,45 @@ console.log(myBreed);
字符串 `Doberman` 将会出现在控制台中。
-使用这一概念的另一种情况是:属性的名字是在程序运行期间动态收集得到的。如下所示:
-
-```js
-const someObj = {
- propName: "John"
-};
-
-function propPrefix(str) {
- const s = "prop";
- return s + str;
-}
-
-const someProp = propPrefix("Name");
-console.log(someObj[someProp]);
-```
-
-`someProp` 的值将为字符串 `propName`,并且字符串 `John` 将会出现在控制台中。
-
-注意,当使用变量名访问属性时,我们*没有*使用引号包裹它,因为我们正在使用的是变量的*值*,而不是变量的*名字*。
+请注意,我们在使用变量名访问属性时,*不要*使用引号引起来,因为我们使用的是 *值*,而不是 *属性名*。
# --instructions--
-将变量 `playerNumber` 设置为 `16`。 然后,使用该变量查找玩家的名字,并将其赋值给`player`。
+将 `playerNumber` 变量设置为 `16`。 然后,使用该变量查找播放器的名称并将其分配给 `player`。
# --hints--
-`playerNumber` 应该是一个数字
+`playerNumber` 应该是一个数字。
```js
assert(typeof playerNumber === 'number');
```
-变量 `player` 应该是一个字符串
+变量 `player` 应该是一个字符串。
```js
assert(typeof player === 'string');
```
-`player` 的值应该为字符串 `Montana`
+`player` 的值应该是字符串 `Montana`。
```js
assert(player === 'Montana');
```
-你应该使用方括号访问 `testObj`
+你应该使用括号表示法来访问 `testObj`。
```js
assert(/testObj\s*?\[.*?\]/.test(code));
```
-你不应该直接将值 `Montana` 赋给变量 `player`。
+你不应将值 `Montana` 直接分配给变量 `player`。
```js
assert(!code.match(/player\s*=\s*"|\'\s*Montana\s*"|\'\s*;/gi));
```
-你应该在你的方括号内使用变量 `playerNumber`。
+你应该在括号符号中使用变量 `playerNumber`。
```js
assert(/testObj\s*?\[\s*playerNumber\s*\]/.test(code));
diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
index dd6979abc83..0595e9bbf54 100644
--- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
+++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
@@ -66,6 +66,12 @@ assert.isUndefined(addTogether(2)([3]));
assert.isUndefined(addTogether('2', 3));
```
+`addTogether(5, undefined)` 应该返回 `undefined`。
+
+```js
+assert.isUndefined(addTogether(5, undefined));
+```
+
# --seed--
## --seed-contents--
diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
index e4806598854..02009d15d9b 100644
--- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
+++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
@@ -97,6 +97,15 @@ assert.deepEqual(
);
```
+`whatIsInAName([{"a": 1, "b": 2, "c": 3, "d": 9999}], {"a": 1, "b": 9999, "c": 3})` 应该返回 `[]`。
+
+```js
+assert.deepEqual(
+ whatIsInAName([{ a: 1, b: 2, c: 3, d: 9999 }], { a: 1, b: 9999, c: 3 }),
+ []
+);
+```
+
# --seed--
## --seed-contents--
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
index a4d65505b04..3bd46acfc4b 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
@@ -66,6 +66,12 @@ assert.isUndefined(addTogether(2)([3]));
assert.isUndefined(addTogether('2', 3));
```
+`addTogether(5, undefined)` dovrebbe restituire `undefined`.
+
+```js
+assert.isUndefined(addTogether(5, undefined));
+```
+
# --seed--
## --seed-contents--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
index ace7f3bfb44..0226645aaa4 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
@@ -14,31 +14,33 @@ Aggiungi un elemento `p` all'interno del `footer`. Poi, annida un elemento di an
Non dovresti modificare l'elemento `footer` esistente.
```js
-assert($('footer').length === 1);
+assert(document.querySelectorAll("footer").length === 1);
```
-Il nuovo elemento `p` dovrebbe essere annidato nell'elemento `footer`.
+Il nuovo elemento `p` dovrebbe essere annidato nell'elemento `footer`. Dovresti aggiungere solo un elemento `p`.
```js
-assert($('footer').children('p').length === 1);
+assert(document.querySelectorAll("footer > p").length === 1);
+assert(document.querySelectorAll("footer p").length === 1);
```
-Il nuovo elemento `a` dovrebbe essere annidato nell'elemento `p`.
+Il nuovo elemento `a` dovrebbe essere annidato nel nuovo elemento `p`. Dovresti aggiungere solo un elemento `a`.
```js
-assert($('footer').children('p').children('a').length === 1);
+assert(document.querySelectorAll("footer > p > a").length === 1);
+assert(document.querySelectorAll("footer a").length === 1);
```
Il nuovo elemento `a` dovrebbe avere il testo `Visit our website`.
```js
-assert($('footer').find('a')[0].innerText.match(/Visit our website/i));
+assert(document.querySelector("footer > p > a")?.innerText === "Visit our website");
```
Il nuovo elemento `a` dovrebbe contenere il link `https://www.freecodecamp.org`. Ricorda che gli elementi `a` utilizzano l'attributo `href` per creare un link.
```js
-assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org');
+assert(document.querySelector("footer > p > a")?.href === "https://www.freecodecamp.org/");
```
# --seed--
@@ -97,6 +99,7 @@ assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org');
--fcc-editable-region--
--fcc-editable-region--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md
index a777b662e71..298b64272e0 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md
@@ -9,6 +9,8 @@ dashedName: step-1
Inizia con il testo HTML standard. Aggiungi la dichiarazione `DOCTYPE` e gli elementi `html`, `head` e `body`.
+Aggiungi l'attributo `lang` al tag di apertura `` impostando il suo valore su `en`.
+
# --hints--
Il codice dovrebbe contenere il riferimento `DOCTYPE`.
@@ -23,7 +25,7 @@ Dovresti includere uno spazio dopo il riferimento `DOCTYPE`.
assert(code.match(//gi));
L'elemento `html` dovrebbe avere un tag di apertura.
```js
-assert(code.match(//gi));
+assert(code.match(/|/gi));
```
L'elemento `html` dovrebbe avere un tag di chiusura.
@@ -47,7 +49,13 @@ L'elemento `html` dovrebbe avere un tag di chiusura.
assert(code.match(/<\/html\s*>/));
```
-La dichiarazione `DOCTYPE` dovrebbe essere all'inizio del tuo HTML.
+Il tag di apertura `` dovrebbe avere l'attributo `lang` con il valore `en`.
+
+```js
+assert(code.match(//));
+```
+
+La dichiarazione `DOCTYPE` dovrebbe essere all'inizio dell'HTML.
```js
assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
@@ -83,13 +91,13 @@ Gli elementi `head` e `body` dovrebbero essere fratelli.
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
```
-L'elemento `head` dovrebbe essere all'interno dell'elemento `html`.
+L'elemento `head` dovrebbe essere dentro l'elemento `html`.
```js
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
```
-L' elemento `body` dovrebbe essere all'interno dell'elemento `html`.
+L'elemento `body` dovrebbe essere dentro l''elemento `html`.
```js
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md
index 8b949603254..df54ff00a52 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md
@@ -7,34 +7,34 @@ dashedName: step-4
# --description--
-All'interno dell'elemento `body`, crea un `div` con l'attributo `class` impostato su `header`.
+Aggiungi un elemento `header` all'interno dell'elemento `body` e assegnagli la classe `header`.
-All'interno dell'elemento `.header` annida un elemento `h1` con il testo `CSS FLEXBOX PHOTO GALLERY`.
+All'interno dell'`header`, crea un `h1` con il testo `css flexbox photo gallery`.
# --hints--
Dovresti avere un elemento `div` all'interno dell'elemento `body`.
```js
-assert.exists(document.querySelector('body')?.querySelector('div'))
+assert.exists(document.querySelector('body')?.querySelector('header'));
```
-L'elemento `div` dovrebbe avere l'attributo `class` con il valore `header`.
+L'elemento `header` dovrebbe avere un attributo `class` con il valore `header`.
```js
-assert(document?.querySelector('body')?.querySelector('div')?.classList?.contains('header'))
+assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
```
-L'elemento `.header` dovrebbe avere un elemento `h1`.
+L'elemento `header` dovrebbe avere un elemento `h1` al suo interno.
```js
assert.exists(document.querySelector('.header')?.querySelector('h1'));
```
-L'elemento `h1` dovrebbe contenere il testo `CSS FLEXBOX PHOTO GALLERY`. Ricorda che le maiuscole contano.
+L'elemento `h1` dovrebbe avere il testo `css flexbox photo gallery` al suo interno.
```js
-assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'CSS FLEXBOX PHOTO GALLERY')
+assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
```
# --seed--
@@ -45,7 +45,7 @@ assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'C
--fcc-editable-region--
-
+
Photo Gallery
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md
index 858c15770e9..066dd266c17 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md
@@ -7,34 +7,34 @@ dashedName: step-5
# --description--
-Al di sotto dell'elemento `.header`, crea un nuovo elemento `div` con un attributo `id` del valore di `gallery`.
+Al di sotto dell'`header`, crea un nuovo elemento `div` e assegnagli la classe `gallery`.
-In quest'elemento `#gallery`, crea dieci elementi `img`.
+In quest'elemento `.gallery`, crea nove elementi `img`.
# --hints--
Dovresti creare un secondo elemento `div` nell'elemento `body`.
```js
-assert(document.querySelector('body')?.querySelectorAll('div')?.length === 2);
+assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
+```
+
+Il nuovo elemento `div` dovrebbe avere un attributo `class` con il valore `gallery`.
+
+```js
+assert(document.querySelector('body')?.querySelector('.gallery'));
```
Il nuovo elemento `div` dovrebbe trovarsi dopo l'elemento `.header`.
```js
-assert(document.querySelector('body')?.querySelectorAll('div')?.[0]?.classList?.contains('header'));
+assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
```
-Il nuovo elemento `div` dovrebbe avere un `id` con il valore `gallery`.
+L'elemento `.gallery` dovrebbe contenere nove elementi `img`.
```js
-assert(document.querySelector('body')?.querySelectorAll('div')?.[1]?.id === 'gallery');
-```
-
-L'elemento `#gallery` dovrebbe contenere dieci elementi `img`.
-
-```js
-assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 10);
+assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);
```
# --seed--
@@ -44,7 +44,7 @@ assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 1
```html
--fcc-editable-region--
-
+
@@ -52,9 +52,9 @@ assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 1
-
-
CSS FLEXBOX PHOTO GALLERY
-
+
+
css flexbox photo gallery
+
--fcc-editable-region--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
index 871f5da3a45..bcd77ead65c 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
@@ -7,9 +7,7 @@ dashedName: step-6
# --description--
-Adesso, dovresti assegnare a ogni elemento `img` un attributo `src`. Stai per utilizzare il formato `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/#.jpg`, sostituendo `#` con l'ordine dell'elemento `img`.
-
-Quindi il primo elemento `img` avrà `1.jpg`, il secondo `2.jpg` e così via.
+Dai a ogni `img` un attributo `src` a seconda dell'ordine nel documento. Il primo elemento `img` dovrebbe avere un `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. Gli altri dovrebbero avere lo stesso valore, tranne per il numero `1`, da sostituire con il numero dell'elemento `img` nel documento.
# --hints--
@@ -20,73 +18,67 @@ const images = [...document.querySelectorAll('img')];
assert(images.every(image => image.getAttribute('src')));
```
-Il primo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`.
+Il primo elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` impostato come valore dell'attributo `src`.
```js
assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
```
-Il secondo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg`.
+Il secondo elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` impostato come valore dell'attributo `src`.
```js
assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
```
-Il terzo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg`.
+Il terzo elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` impostato come valore dell'attributo `src`.
```js
assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
```
-Il quarto elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg`.
+Il quarto elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` impostato come valore dell'attributo `src`.
```js
assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
```
-Il quinto elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg`.
+Il quinto elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` impostato come valore dell'attributo `src`.
```js
assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
```
-Il sesto elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg`.
+Il sesto elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` impostato come valore dell'attributo `src`.
```js
assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
```
-Il settimo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg`.
+Il settimo elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` impostato come valore dell'attributo `src`.
```js
assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
```
-L'ottavo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg`.
+L'ottavo elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` impostato come valore dell'attributo `src`.
```js
assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
```
-Il nono elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`.
+Il nono elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` impostato come valore dell'attributo `src`.
```js
assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
```
-Il decimo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg`.
-
-```js
-assert(document.querySelectorAll('img')?.[9]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg');
-```
-
# --seed--
## --seed-contents--
```html
-
+
@@ -94,21 +86,20 @@ assert(document.querySelectorAll('img')?.[9]?.getAttribute('src') === 'https://c
-
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
index 5f77c73cdb8..1e2fa980cba 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
@@ -7,26 +7,35 @@ dashedName: step-9
# --description--
-Rimuovi il margine dall'elemento `body`, imposta il carattere su `Arial` e il colore di sfondo su `#EBE7E7`.
+Rimuovi il margine dall'elemento `body`, imposta `font-family` su `sans-serif` e dagli un `background-color` con il valore `#f5f6f7`.
# --hints--
Dovresti avere un selettore `body`.
```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('body'))
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
```
-Il selettore `body` dovrebbe avere una proprietà `font-family` con il valore `Arial`.
+Il selettore `p` dovrebbe avere una `margin` con il valore `0`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'Arial');
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
```
-Il selettore `body` dovrebbe avere una proprietà `background-color` con il valore `#EBE7E7`.
+Il selettore `body` dovrebbe avere una proprietà `font-family` con il valore `sans-serif`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(235, 231, 231)');
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
+```
+
+Il selettore `body` dovrebbe avere una proprietà `background-color` con il valore `#f5f6f7`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
```
# --seed--
@@ -35,7 +44,7 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
```html
-
+
@@ -43,20 +52,19 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -71,8 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
--fcc-editable-region--
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
}
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
index e87631c783d..178af52f1ed 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
@@ -7,7 +7,12 @@ dashedName: step-10
# --description--
-Allinea il testo dell'elemento `.header` al centro, assegnagli un padding di `32px` su tutti i lati e imposta lo sfondo su `#E0DDDD`.
+Allinea al centro il testo di `.header`. Rendi il testo maiuscolo con la proprietà `text-transform` impostata su `uppercase`.
+
+Dagli un padding di `32px` su tutti i lati. Imposta lo sfondo sul colore `#0a0a23` e il testo sul colore `#fff`.
+
+Aggiungi un `border-bottom` con il valore `4px solid #fdb347`.
+
# --hints--
@@ -23,16 +28,35 @@ Il selettore `.header` dovrebbe avere una proprietà `text-align` con il valore
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
```
+Il selettore `.header` dovrebbe avere una proprietà `text-transform` con il valore `uppercase`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase');
+```
+
Il selettore `.header` dovrebbe avere una proprietà `padding` con il valore `32px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
```
-Il selettore `.header` dovrebbe avere una proprietà `background-color` con il valore `#E0DDDD`.
+Il selettore `.header` dovrebbe avere una proprietà `background-color` con il valore `#0a0a23`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(224, 221, 221)');
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)');
+```
+
+Il selettore `.header` dovrebbe avere una proprietà `color` con il valore `#fff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)');
+```
+
+Il selettore `.header` dovrebbe avere una proprietà `border-bottom` con il valore `4px solid #fdb347`.
+
+```js
+console.log(new __helpers.CSSHelp(document).getStyle('.header'))
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom === '4px solid rgb(253, 179, 71)');
```
# --seed--
@@ -41,7 +65,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor ===
```html
-
+
@@ -49,20 +73,19 @@ assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor ===
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -75,16 +98,17 @@ assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor ===
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
--fcc-editable-region--
--fcc-editable-region--
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
}
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md
index 6da5b1c7810..8a5dcb7b480 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md
@@ -7,22 +7,24 @@ dashedName: step-11
# --description--
-Flexbox è un approccio monodimensionale per il layout CSS che si concentra sul flusso dei contenuti. Offre la possibilità di controllare il modo in cui gli oggetti sono distanziati e allineati all'interno di un contenitore.
+Flexbox è un layout CSS monodimensionale che può controllare il modo in cui gli oggetti sono distanziati e allineati all'interno di un contenitore.
-Per utilizzare Flexbox su un elemento, gli si assegna una proprietà `display` con il valore `flex`. Crea un selettore `#gallery` e assegnagli questa proprietà.
+Per usarlo, dai a un elemento la proprietà `display` con il valore `flex`. In questo modo, diventerà un contenitore flex. Qualsiasi figlio diretto del contenitore flex viene detto elemento flex.
+
+Crea un selettore `.gallery` e rendilo un contenitore flex.
# --hints--
-Dovresti avere un selettore `#gallery`.
+Dovresti avere un selettore `.gallery`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery'));
+assert(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
-Il selettore `#gallery` dovrebbe avere una proprietà `display` con il valore `flex`.
+Il selettore `.gallery` dovrebbe avere una proprietà `display` con il valore `flex`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex');
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex');
```
# --seed--
@@ -31,7 +33,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex')
```html
-
+
@@ -39,20 +41,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex')
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -65,22 +66,26 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex')
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
.header {
text-align: center;
+ text-transform: uppercase;
padding: 32px;
- background: #E0DDDD;
+ background-color: #0a0a23;
+ color: #fff;
+ border-bottom: 4px solid #fdb347;
}
--fcc-editable-region--
--fcc-editable-region--
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
}
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
index 9c036ffa0f4..2861f6960cd 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
@@ -7,16 +7,25 @@ dashedName: step-12
# --description--
-Puoi pensare a Flexbox come se avessi due assi, l'asse principale e l'asse trasversale. L'asse principale è determinato dalla proprietà `flex-direction`. Se `flex-direction` è impostata su `row` o `row-reverse`, l'asse principale è orizzontale. Se `flex-direction` è impostata su `column` o `column-reverse`, l'asse principale è verticale.
+Flexbox ha un asse principale e un asse trasversale. L'asse principale è definito dalla proprietà `flex-direction`, che può avere quattro possibili valori:
-Assegna al tuo selettore `#gallery` una proprietà `flex-direction` con il valore `row`.
+- `row` (default): asse orizzontale con gli elementi flex da sinistra a destra
+- `row-reverse`: asse orizzontale con gli elementi flex da destra a sinistra
+- `column`: asse verticale con gli elementi flex dall'alto verso il basso
+- `column-reverse`: asse verticale con gli elementi flex dal basso verso l'alto
+
+**Nota**: gli assi e le direzioni saranno diversi in base alla direzione del testo. I valori mostrati sono per un testo direzionato da sinistra a destra.
+
+Prova i diversi valori per vedere il loro effetto sul layout.
+
+Quando hai finito, imposta esplicitamente `flex-direction` su `row` per l'elemento `.gallery`.
# --hints--
-Il selettore `#gallery` dovrebbe avere una proprietà `flex-direction` con il valore `row`.
+Il selettore `.gallery` dovrebbe avere una proprietà `flex-direction` con il valore `row`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === 'row');
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
```
# --seed--
@@ -25,7 +34,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === '
```html
-
+
@@ -33,20 +42,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === '
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -59,24 +67,28 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === '
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
.header {
text-align: center;
+ text-transform: uppercase;
padding: 32px;
- background: #E0DDDD;
+ background-color: #0a0a23;
+ color: #fff;
+ border-bottom: 4px solid #fdb347;
}
--fcc-editable-region--
-#gallery {
+.gallery {
display: flex;
}
--fcc-editable-region--
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
}
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
index 8a2e74b336e..2da160b4288 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
@@ -7,18 +7,18 @@ dashedName: step-13
# --description--
-Potresti aver notato che le immagini si sono tutte spostate nella stessa riga.
-La proprietà `flex-wrap` determina come dovrebbero comportarsi gli oggetti quando il contenitore flex è troppo piccolo. Impostare questa proprietà su `wrap` permetterà agli oggetti di proseguire nella riga/colonna successiva (a seconda dell'asse principale), mentre `nowrap` impedirà agli oggetti essere posizionati in nuove righe o colonne. Con il valore `nowrap`, gli oggetti possono essere rimpiccioliti per adattarsi o debordare.
+La proprietà `flex-wrap` determina come dovrebbero comportarsi gli oggetti quando il contenitore flex è troppo piccolo. Impostare il suo valore su `wrap` permetterà agli elementi di proseguire nella riga o colonna successiva. `nowrap` (default) impedirà agli elementi di proseguire nella riga o colonna successiva e li rimpicciolirà se necessario.
-Assegna al selettore `#gallery` una proprietà `flex-wrap` con il valore `wrap`. Dovresti vedere le tue immagini prendere un layout a quattro colonne. Questo perché hai impostato la loro proprietà `width` al `25%` in uno step precedente.
+
+Fai in modo che gli elementi flex vadano a capo nella riga successiva quando finisce lo spazio.
# --hints--
-Il selettore `#gallery` dovrebbe avere una proprietà `flex-wrap` con il valore `wrap`.
+Il selettore `.gallery` dovrebbe avere una proprietà `flex-wrap` con il valore `wrap`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap');
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap');
```
# --seed--
@@ -27,7 +27,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap'
```html
-
+
@@ -35,20 +35,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap'
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -61,25 +60,29 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap'
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
.header {
text-align: center;
+ text-transform: uppercase;
padding: 32px;
- background: #E0DDDD;
+ background-color: #0a0a23;
+ color: #fff;
+ border-bottom: 4px solid #fdb347;
}
--fcc-editable-region--
-#gallery {
+.gallery {
display: flex;
flex-direction: row;
}
--fcc-editable-region--
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
}
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
index 431886f6610..ab4b58c8957 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
@@ -9,14 +9,14 @@ dashedName: step-14
La proprietà `justify-content` determina come sono posizionati gli oggetti all'interno di un contenitore flex lungo l'asse principale, influenzando la loro posizione e lo spazio intorno a loro.
-Assegna al selettore `#gallery` una proprietà `justify-content` con il valore `center`.
+Assegna al selettore `.gallery` una proprietà `justify-content` con il valore `center`.
# --hints--
-Il selettore `#gallery` dovrebbe avere una proprietà `justify-content` con il valore `center`.
+Il selettore `.gallery` dovrebbe avere una proprietà `justify-content` con il valore `center`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent === 'center');
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
```
# --seed--
@@ -25,7 +25,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent ===
```html
-
+
@@ -33,20 +33,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent ===
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -59,26 +58,30 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent ===
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
.header {
text-align: center;
+ text-transform: uppercase;
padding: 32px;
- background: #E0DDDD;
+ background-color: #0a0a23;
+ color: #fff;
+ border-bottom: 4px solid #fdb347;
}
--fcc-editable-region--
-#gallery {
+.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
--fcc-editable-region--
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
}
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
index 7c1a171dca1..ed92222f175 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
@@ -9,14 +9,14 @@ dashedName: step-15
La proprietà `align-items` posiziona il contenuto flex lungo l'asse trasversale. In questo caso, con la proprietà `flex-direction` impostata su `row`, l'asse trasversale sarebbe quello verticale.
-Per centrare verticalmente le immagini, assegna al selettore `#gallery` una proprietà `align-items` con il valore `center`.
+Per centrare verticalmente le immagini, assegna al selettore `.gallery` una proprietà `align-items` con il valore `center`.
# --hints--
-Il selettore `#gallery` dovrebbe avere una proprietà `align-items` con il valore `center`.
+Il selettore `.gallery` dovrebbe avere una proprietà `align-items` con il valore `center`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'center');
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center');
```
# --seed--
@@ -25,7 +25,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'cen
```html
-
+
@@ -33,20 +33,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'cen
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -59,18 +58,21 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'cen
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
.header {
text-align: center;
+ text-transform: uppercase;
padding: 32px;
- background: #E0DDDD;
+ background-color: #0a0a23;
+ color: #fff;
+ border-bottom: 4px solid #fdb347;
}
--fcc-editable-region--
-#gallery {
+.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -78,8 +80,9 @@ body {
}
--fcc-editable-region--
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
}
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
index 8633300481e..8958f29b88a 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
@@ -7,17 +7,31 @@ dashedName: step-16
# --description--
-Assegna al selettore `#gallery` una proprietà `padding` con il valore `0 4px`.
+Dai al selettore `.gallery` una proprietà `padding` impostata su `20px 10px` per creare spazio intorno al contenitore.
+
+Poi, imposta `max-width` su `1400px` e aggiungi un `margin` con il valore `0 auto` per centrarlo.
# --hints--
-Il selettore `#gallery` dovrebbe avere una proprietà `padding` con il valore `0 4px`.
+Il selettore `.gallery` dovrebbe avere una proprietà `padding` con il valore `20px 10px`.
```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingTop, '0px');
-assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingBottom, '0px');
-assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingLeft, '4px');
-assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight, '4px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingTop, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingBottom, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingLeft, '10px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight, '10px');
+```
+
+Il selettore `.gallery` dovrebbe avere una proprietà `max-width` con il valore `1400px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
+```
+
+L'elemento `.gallery` dovrebbe essere centrato usando un `margin` con il valore `0 auto`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.gallery').cssText, 'margin: 0px auto');
```
# --seed--
@@ -26,7 +40,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight,
```html
-
+
@@ -34,20 +48,19 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight,
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -60,18 +73,21 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight,
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
.header {
text-align: center;
+ text-transform: uppercase;
padding: 32px;
- background: #E0DDDD;
+ background-color: #0a0a23;
+ color: #fff;
+ border-bottom: 4px solid #fdb347;
}
--fcc-editable-region--
-#gallery {
+.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -80,8 +96,9 @@ body {
}
--fcc-editable-region--
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
}
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
index b72526f006c..35a18a69bf2 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
@@ -9,14 +9,14 @@ dashedName: step-17
Nota come alcune delle immagini sono diventate distorte. Questo perché le immagini hanno diverse proporzioni. Piuttosto che impostare individualmente le proporzioni delle immagini, puoi utilizzare la proprietà `object-fit` per determinare come dovrebbero comportarsi.
-Assegna al selettore `#gallery img` la proprietà `object-fit` con il valore `cover`. Questo dirà all'immagine di riempire il contenitore `img` mantenendo le proporzioni.
+Assegna al selettore `.gallery img` la proprietà `object-fit` con il valore `cover`. Questo dirà all'immagine di riempire il contenitore `img` mantenendo le proporzioni.
# --hints--
-Il selettore `#gallery img` dovrebbe avere una proprietà `object-fit` con il valore `cover`.
+Il selettore `.gallery img` dovrebbe avere una proprietà `object-fit` con il valore `cover`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === 'cover');
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
```
# --seed--
@@ -25,7 +25,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === '
```html
-
+
@@ -33,20 +33,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === '
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -59,28 +58,34 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === '
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
.header {
text-align: center;
+ text-transform: uppercase;
padding: 32px;
- background: #E0DDDD;
+ background-color: #0a0a23;
+ color: #fff;
+ border-bottom: 4px solid #fdb347;
}
-#gallery {
+.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
- padding: 0 4px;
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 20px 10px;
}
--fcc-editable-region--
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
}
--fcc-editable-region--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
index 6e0d85f34d3..4a4144783b1 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
@@ -9,20 +9,16 @@ dashedName: step-18
Le immagini hanno bisogno di uno spazio tra di loro.
-Assegna al selettore `#gallery img` una proprietà `margin-top` di `8px` e una proprietà `padding` di `0 4px`.
+La proprietà CSS shorthand `gap` imposta lo spazio tra righe e colonne. La proprietà `gap` e le sue sotto-proprietà `row-gap` e `column-gap` forniscono questa funzionalità per i layout flex, grid e multi-colonna. La proprietà si applica all'elemento contenitore.
+
+Dai al contenitore flex `.gallery` una proprietà `gap` con il valore `16px`.
# --hints--
-Il selettore `#gallery img` dovrebbe avere una proprietà `margin-top` con il valore `8px`.
+Il selettore `.gallery` dovrebbe avere una proprietà `gap` con il valore `16px`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.marginTop === '8px');
-```
-
-Il selettore `#gallery img` dovrebbe avere una proprietà `padding` con il valore `0 4px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0px 4px');
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
```
# --seed--
@@ -31,7 +27,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0p
```html
-
+
@@ -39,20 +35,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0p
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -65,30 +60,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0p
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
.header {
text-align: center;
+ text-transform: uppercase;
padding: 32px;
- background: #E0DDDD;
+ background-color: #0a0a23;
+ color: #fff;
+ border-bottom: 4px solid #fdb347;
}
-#gallery {
+--fcc-editable-region--
+.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
- padding: 0 4px;
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 20px 10px;
}
-
--fcc-editable-region--
-#gallery img {
- width: 25%;
+
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
object-fit: cover;
}
---fcc-editable-region--
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
index 88fad02b554..0cba99a3ef4 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
@@ -7,14 +7,14 @@ dashedName: step-19
# --description--
-Smussa leggermente le immagini dando al selettore `#gallery img` una proprietà `border-radius` di `10px`.
+Smussa leggermente le immagini dando al selettore `.gallery img` una proprietà `border-radius` di `10px`.
# --hints--
-Il selettore `#gallery img` dovrebbe avere una proprietà `border-radius` con il valore `10px`.
+Il selettore `.gallery img` dovrebbe avere una proprietà `border-radius` con il valore `10px`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius === '10px');
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
```
# --seed--
@@ -23,7 +23,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius ==
```html
-
+
@@ -31,20 +31,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius ==
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -57,32 +56,37 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius ==
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
.header {
text-align: center;
+ text-transform: uppercase;
padding: 32px;
- background: #E0DDDD;
+ background-color: #0a0a23;
+ color: #fff;
+ border-bottom: 4px solid #fdb347;
}
-#gallery {
+.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
- padding: 0 4px;
+ gap: 16px;
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 20px 10px;
}
--fcc-editable-region--
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
object-fit: cover;
- margin-top: 8px;
- padding: 0 4px;
}
--fcc-editable-region--
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
index 85fa8821830..08a3090f6fc 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
@@ -7,35 +7,31 @@ dashedName: step-20
# --description--
-Crea una media query per schermi di larghezza inferiore a `800px`. Al suo interno, crea una regola `#gallery img` e imposta la proprietà `width` sul `50%`. In questo modo, convertirai la tua galleria in un layout a due colonne.
+Lo pseudo-elemento `::after` crea un elemento che è l'ultimo figlio dell'elemento selezionato. Possiamo utilizzarlo per aggiungere un elemento vuoto dopo l'ultima immagine. Se gli diamo la stessa `width` delle immagini, farà sì che l'ultima immagine si trovi a sinistra in un layout a due colonne. Ora è centrato perché abbiamo impostato `justify-content: center` sul contenitore flex.
+
+Esempio:
+
+```CSS
+.container::after {
+ content: "";
+ width: 860px;
+}
+```
+
+Crea un nuovo selettore usando lo pseudo-elemento `::after` sull'elemento `.gallery`. Aggiungi una proprietà `content` impostata con la stringa vuota `""` e `350px` come valore della proprietà `width`.
# --hints--
-Dovresti aggiungere una nuova `@media` query.
+Il selettore `.gallery::after` dovrebbe avere una stringa vuota `""` come valore della proprietà `content`.
```js
-assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
```
-La nuova `@media` query dovrebbe avere una `max-width` di `800px` in questo modo: `@media (max-width: 800px)`.
+Il selettore `.gallery::after` dovrebbe avere `350px` come valore della proprietà `width`.
```js
-assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
-```
-
-La `@media` query dovrebbe avere una regola `#gallery img`.
-
-```js
-const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)');
-assert(rules?.find(rule => rule.selectorText === '#gallery img'));
-```
-
-La regola `#gallery img` dovrebbe avere una proprietà `width` con il valore `50%`.
-
-```js
-const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)');
-const imgRule = rules?.find(rule => rule.selectorText === '#gallery img');
-assert(imgRule?.style.width === '50%');
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
```
# --seed--
@@ -44,7 +40,7 @@ assert(imgRule?.style.width === '50%');
```html
-
+
@@ -52,20 +48,19 @@ assert(imgRule?.style.width === '50%');
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
@@ -78,31 +73,36 @@ assert(imgRule?.style.width === '50%');
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
.header {
text-align: center;
+ text-transform: uppercase;
padding: 32px;
- background: #E0DDDD;
+ background-color: #0a0a23;
+ color: #fff;
+ border-bottom: 4px solid #fdb347;
}
-#gallery {
+.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
- padding: 0 4px;
+ gap: 16px;
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 20px 10px;
}
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
object-fit: cover;
- margin-top: 8px;
- padding: 0 4px;
border-radius: 10px;
}
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
index e0afba3e728..178e881d814 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
@@ -7,45 +7,20 @@ dashedName: step-21
# --description--
-Ridimensiona l'anteprima per vedere il cambiamento di layout dalla tua media query.
-Infine, crea un'altra media query per schermi con una larghezza inferiore a `600px`. In questa media query, crea una regola `#gallery img` e imposta la proprietà `width` sul `100%`. Così darai alla tua galleria un layout a colonna singola.
+L'attributo `alt` dovrebbe descrivere il contenuto di un'immagine. I lettori di schermo leggono del testo alternativo al posto delle immagini. Se un'immagine non può essere caricata, il testo viene mostrato al suo posto.
+
+Per completare il progetto, aggiungi un attributo `alt` a tutte le nove immagini di gatti per descriverle. Utilizza almeno cinque caratteri per ognuna.
-La tua CSS Flexbox Photo Gallery è ora completa.
# --hints--
-Dovresti avere una seconda `@media` query.
+Tutti i nove elementi `img` dovrebbero avere un attributo `alt` con un testo che descrive ogni immagine, e ogni descrizione dovrebbe contenere almeno `5` lettere.
```js
-assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
-```
-
-La nuova `@media` query dovrebbe trovarsi dopo quella esistente. Dovresti avere una regola `@media (max-width: 800px)`.
-
-```js
-assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
-```
-
-La nuova `@media` query dovrebbe avere una `max-width` di `600px` in questo modo: `@media (max-width: 600px)`.
-
-```js
-assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === '(max-width: 600px)');
-```
-
-La nuova `@media` query dovrebbe avere un selettore `#gallery img`.
-
-```js
-const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)');
-assert(rules?.find(rule => rule?.selectorText === '#gallery img'));
-```
-
-La regola `#gallery img` dovrebbe avere una proprietà `width` con il valore `100%`.
-
-```js
-const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)');
-const imgRule = rules?.find(rule => rule?.selectorText === '#gallery img');
-assert(imgRule?.style?.width === '100%');
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('alt')));
+assert(images.every(image => image.getAttribute('alt').length >= 5));
```
# --seed--
@@ -54,7 +29,7 @@ assert(imgRule?.style?.width === '100%');
```html
-
+
@@ -62,20 +37,21 @@ assert(imgRule?.style?.width === '100%');
-
@@ -165,43 +141,41 @@ body {
body {
margin: 0;
- font-family: Arial;
- background: #EBE7E7;
+ font-family: sans-serif;
+ background: #f5f6f7;
}
.header {
text-align: center;
+ text-transform: uppercase;
padding: 32px;
- background: #E0DDDD;
+ background-color: #0a0a23;
+ color: #fff;
+ border-bottom: 4px solid #fdb347;
}
-#gallery {
+.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
- padding: 0;
+ gap: 16px;
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 20px 10px;
}
-#gallery img {
- width: 25%;
+.gallery img {
+ width: 100%;
+ max-width: 350px;
height: 300px;
object-fit: cover;
- margin-top: 8px;
- padding: 0 4px;
border-radius: 10px;
}
-@media (max-width: 800px) {
- #gallery img {
- width: 50%;
- }
-}
-
-@media (max-width: 600px) {
- #gallery img {
- width: 100%;
- }
+.gallery::after {
+ content: "";
+ width: 350px;
}
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
index 49e190bf7f1..39685687a57 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
@@ -7,30 +7,34 @@ dashedName: step-8
# --description--
-Al momento, le immagini sono troppo grandi e non sarai in grado di vedere i cambiamenti CSS.
-
-Crea un selettore `#gallery img` per selezionare le immagini. Assegnagli una proprietà `width` con il valore `25%`.
+Le immagini sono troppo grandi. Crea un selettore `.gallery img` per selezionare le immagini. Per tutte le immagini, imposta `width` al `100%` e `max-width` su `350px` in modo che si rimpiccioliscano al bisogno senza poter diventare troppo grandi.
Imposta anche la proprietà `height` su `300px` per mantenere uniforme la dimensione delle immagini.
# --hints--
-Dovresti avere un selettore `#gallery img`.
+Dovresti avere un selettore `.gallery img`.
```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('#gallery img'))
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
```
-La regola `#gallery img` dovrebbe avere una proprietà `width` con il valore `25%`.
+La regola `.gallery img` dovrebbe avere una proprietà `width` con il valore `100%`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.width === '25%')
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
```
-Il selettore `#gallery img` dovrebbe avere una proprietà `height` con il valore `300px`.
+Il selettore `.gallery img` dovrebbe avere una proprietà `max-width` con il valore `350px`.
```js
-assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300px');
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth === '350px');
+```
+
+Il selettore `.gallery img` dovrebbe avere una proprietà `height` con il valore `300px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300px');
```
# --seed--
@@ -39,7 +43,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300
```html
-
+
@@ -47,20 +51,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300
-
-
CSS FLEXBOX PHOTO GALLERY
-
-
-
-
-
-
-
-
-
-
-
-
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
index cbaa732de33..eaedca13ed0 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
@@ -7,7 +7,7 @@ dashedName: step-14
# --description--
-Ora hai qualcosa che sta iniziando ad assomigliare a un edificio. È tempo di scrivere la tua prima variabile. Le dichiarazioni di variabili iniziano con due trattini (`-`) e hanno un nome e un valore come questo: `--nome-variabile: valore;`. Nella classe `.bb1`, crea una variabile chiamata `--building-color1` e dalle il valore `#999`.
+Ora hai qualcosa che assomiglia a un edificio. Sei pronto per creare la tua prima variabile. Le dichiarazioni di variabili iniziano con due trattini (`-`) e hanno un nome e un valore come questo: `--nome-variabile: valore;`. Nella classe `.bb1`, crea una variabile chiamata `--building-color1` e dalle il valore `#999`.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
index 8943f792c8d..f473febacf7 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
@@ -7,7 +7,7 @@ dashedName: step-20
# --description--
-Gli edifici sono impilati uno sopra l'altro e debordano dallo schermo. Risolviamo questo problema. Aggiungi le proprietà `display: flex;`, `align-items: flex-end;` e `justify-content: space-evenly;` alla classe `background-buildings`. Così useremo di nuovo flexbox per spaziare uniformemente gli edifici sul fondo dell'elemento.
+Attualmente, gli edifici sono accatastati l'uno sopra l'altro. Aggiungi le proprietà `display: flex;`, `align-items: flex-end;` e `justify-content: space-evenly;` alla classe `background-buildings`. Così useremo di nuovo flexbox per spaziare uniformemente gli edifici sul fondo dell'elemento.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md
index 497656ff436..a3690c1094d 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md
@@ -7,7 +7,7 @@ dashedName: step-21
# --description--
-Non mi piace il modo in cui sono distanziati gli edifici. Comprimili aggiungendo due elementi `div` vuoti in cima all'elemento `background-buildings`, due alla fine e uno tra `.bb3` e `.bb4`. Verranno aggiunti come elementi uniformemente distanziati, spostando efficacemente gli edifici più vicino al centro.
+Gli edifici sono troppo distanziati. Comprimili aggiungendo due elementi `div` vuoti in cima all'elemento `background-buildings`, due alla fine e uno tra `.bb3` e `.bb4`. Verranno aggiunti come elementi uniformemente distanziati, spostando efficacemente gli edifici più vicino al centro.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md
index 4f08e8bb6d1..332061197d9 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md
@@ -7,7 +7,7 @@ dashedName: step-23
# --description--
-Hmm, non sono sicuro del perché non ha funzionato. È possibile aggiungere un valore di fallback a una variabile inserendolo come secondo valore: `var(--nome-variabile, valore-fallback)`. La proprietà userà il valore di fallback se c'è un problema con la variabile. Aggiungi un valore di fallback `green` alla proprietà `background-color` di `.bb2`.
+Non ha funzionato. È possibile aggiungere un valore di fallback a una variabile inserendolo come secondo valore: `var(--nome-variabile, valore-fallback)`. La proprietà userà il valore di fallback se c'è un problema con la variabile. Aggiungi un valore di fallback `green` alla proprietà `background-color` di `.bb2`.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md
index d33e90cc5ab..81e29233fa6 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md
@@ -7,7 +7,7 @@ dashedName: step-25
# --description--
-Anche in questo caso ha usato il fallback? Adesso so qual è il problema! Le variabili che hai dichiarato in `.bb1` non sono accessibili per gli elementi fratelli `.bb2` e `.bb3`. È così che funziona il CSS. Per questo motivo, le variabili sono spesso dichiarate nel selettore `:root`. Questo è il selettore di livello più alto in CSS; inserire le variabili lì le renderà utilizzabili ovunque. Aggiungi il selettore `:root` in cima al tuo foglio di stile e sposta lì tutte le dichiarazioni delle variabili.
+Non ha funzionato perché le variabili che hai dichiarato in `.bb1` non sono accessibili per gli elementi fratelli `.bb2` e `.bb3`. È così che funziona il CSS. Per questo motivo, le variabili sono spesso dichiarate nel selettore `:root`. Questo è il selettore di livello più alto in CSS; inserire le variabili lì le renderà utilizzabili ovunque. Aggiungi il selettore `:root` in cima al tuo foglio di stile e sposta lì tutte le dichiarazioni delle variabili.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
index 887a6cb872b..04951140d38 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
@@ -7,7 +7,7 @@ dashedName: step-33
# --description--
-Vedo del codice che può essere ottimizzato. Sposta le proprietà e i valori `position` e `top` da `.foreground-buildings` a `.background-buildings`. Quindi seleziona sia `.background-buildings` che `.foreground-buildings`, applicando efficacemente gli stili a entrambi gli elementi. Puoi utilizzare una virgola (`,`) per separare i selettori in questo modo: `selettore1, selettore2`.
+Dovresti ottimizzare il codice. Sposta le proprietà e i valori `position` e `top` da `.foreground-buildings` a `.background-buildings`. Quindi seleziona sia `.background-buildings` che `.foreground-buildings`, applicando efficacemente gli stili a entrambi gli elementi. Puoi utilizzare una virgola (`,`) per separare i selettori in questo modo: `selettore1, selettore2`.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md
index 5c60eb587ee..b60d00a368e 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md
@@ -7,7 +7,7 @@ dashedName: step-95
# --description--
-Non sono più così entusiasta di quel nero per le finestre. Cambia il valore `--window-color1` in `#bb99ff`.
+Usando le variabili CSS puoi cambiare dei valori senza cercare ovunque nel foglio degli stili. Cambia il valore `--window-color1` in `#bb99ff`.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index 0930ac58b59..eb0e46592db 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -7,7 +7,7 @@ dashedName: step-8
# --description--
-Gli attributi HTML sono parole speciali utilizzate all'interno del tag di apertura di un elemento per controllarne il comportamento. L'attributo `src` in un elemento `img` specifica l'URL dell'immagine (dove l'immagine è localizzata). Un esempio di un elemento `img` utilizzando un attributo `src` è: ``.
+Gli attributi HTML sono parole speciali utilizzate all'interno del tag di apertura di un elemento per controllarne il comportamento. L'attributo `src` in un elemento `img` specifica l'URL dell'immagine (dove l'immagine è localizzata). Un esempio di un elemento `img` con un attributo `src` è: ``.
Aggiungi un attributo `src` all'elemento `img` esistente con il seguente URL:
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index d5e825a7fa0..1564c46cb39 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -15,16 +15,6 @@ Dopo l'immagine annidata nell'elemento `figure`, aggiungi un elemento `figcaptio
# --hints--
-L'elemento `img` con la lasagna deve essere annidato nell'elemento `figure`.
-
-```js
-assert(
- document.querySelector('figure > img') &&
- document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
- 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
-);
-```
-
L'elemento `figcaption` dovrebbe avere un tag di apertura. I tag di apertura hanno la seguente sintassi: ``.
```js
@@ -56,7 +46,7 @@ assert(
);
```
-L'elemento `figcaption` annidato nell'elemento `figure` dovrebbe essere al di sotto dell'elemento `img`. Sono nell'ordine sbagliato.
+L'elemento `figcaption` annidato nell'elemento `figure` dovrebbe essere sotto l'elemento `img`. Sono nell'ordine sbagliato.
```js
assert(
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
index 234bf0a928e..31c49ba57b8 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -19,7 +19,7 @@ L'elemento `figure` dovrebbe avere un tag di apertura. I tag di apertura hanno q
assert(document.querySelectorAll('figure').length === 2);
```
-L'elemento `ol` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere`/` subito dopo il carattere `<`.
+L'elemento `figure` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere`/` subito dopo il carattere `<`.
```js
assert(code.match(/<\/figure>/g).length === 2);
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md
index 50b82070f3a..2885f8a61c5 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md
@@ -7,7 +7,7 @@ dashedName: step-2
# --description--
-Aggiungi i tag di apertura e chiusura `html` sotto la dichiarazione `DOCTYPE` in modo da avere un posto dove iniziare a inserire del codice.
+Al di sotto di `DOCTYPE`, aggiungi un elemento `html` con l'attributo `lang` impostato su `en`, così da avere un posto in cui inserire del codice.
# --hints--
@@ -17,10 +17,10 @@ La dichiarazione `DOCTYPE` dovrebbe essere all'inizio del documento HTML.
assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
```
-L'elemento `html` dovrebbe avere un tag di apertura.
+L'elemento `html` dovrebbe avere una tag di apertura con un attributo `lang` di `en`.
```js
-assert(code.match(//gi));
+assert(code.match(//gi));
```
L'elemento `html` dovrebbe avere un tag di chiusura.
@@ -32,7 +32,7 @@ assert(code.match(/<\/html\s*>/));
I tag `html` dovrebbero essere nell'ordine corretto.
```js
-assert(code.match(/\s*<\/html\s*>/));
+assert(code.match(/\s*<\/html\s*>/));
```
Dovresti avere un solo elemento `html`.
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md
index e7e277dc3cb..8ada33ae86a 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md
@@ -7,7 +7,7 @@ dashedName: step-4
# --description--
-Aggiungi un elemento `title` all'elemento `head` e dai al tuo progetto il titolo `Registration Form`. Annida un elemento `link` autoconcludente nell'elemento `head`. Dagli un attributo `rel` con valore di `stylesheet` e un attributo `href` con valore di `styles.css`.
+Aggiungi degli elementi `title` e `meta` all'elemento `head`. Dai al tuo progetto il titolo `Registration Form`, e dai un attributo `charset` con il valore `UTF-8` all'elemento `meta`.
# --hints--
@@ -38,59 +38,19 @@ const title = document.querySelector('title');
assert.equal(title.text, 'Registration Form');
```
-Il codice dovrebbe avere un elemento `link`.
-
-```js
-assert.exists(document.querySelector('link'));
-```
-
-Non dovresti cambiare i tuoi tag `head` esistenti. Assicurati di non aver eliminato il tag di chiusura.
-
-```js
-const heads = document.querySelectorAll('head');
-assert.equal(heads?.length, 1);
-```
-
-Dovresti avere un elemento `link` auto-concludente.
-
-```js
-assert(document.querySelectorAll('link').length === 1);
-```
-
-L'elemento `link` dovrebbe essere all'interno dell'elemento `head`.
-
-```js
-assert.exists(document.querySelector('head > link'));
-```
-
-L'elemento `link` dovrebbe avere un attributo `rel` con il valore `stylesheet`.
-
-```js
-const link_element = document.querySelector('link');
-const rel = link_element.getAttribute("rel");
-assert.equal(rel, "stylesheet");
-```
-
-L'elemento `link` dovrebbe avere un attributo `href` con il valore `styles.css`.
-
-```js
-const link = document.querySelector('link');
-assert.equal(link.dataset.href, "styles.css");
-```
-
# --seed--
## --seed-contents--
```html
-
+
--fcc-editable-region--
+--fcc-editable-region--
---fcc-editable-region--
```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md
index b5eaa726d29..5d6ee7e29f9 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md
@@ -1,8 +1,8 @@
---
id: 60f02e7361b68405e27b62a5
-title: Step 5
+title: Step 6
challengeType: 0
-dashedName: step-5
+dashedName: step-6
---
# --description--
@@ -29,10 +29,11 @@ assert.equal(document.querySelector('body > h1')?.textContent, 'Registration For
```html
-
+
+
Registration Form
-
+
--fcc-editable-region--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md
index be694e68456..ec64aa9cbe7 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md
@@ -1,8 +1,8 @@
---
id: 60f030d388cb74067cf291c3
-title: Step 6
+title: Step 7
challengeType: 0
-dashedName: step-6
+dashedName: step-7
---
# --description--
@@ -39,10 +39,11 @@ assert.equal(document.querySelector('p')?.innerText, 'Please fill out this form
```html
-
+
+
Registration Form
-
+
--fcc-editable-region--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
index a51498db701..387bafdc6f6 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
@@ -1,8 +1,8 @@
---
id: 60f1922fcbd2410527b3bd89
-title: Step 7
+title: Step 8
challengeType: 0
-dashedName: step-7
+dashedName: step-8
---
# --description--
@@ -35,10 +35,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
```html
-
+
+
Registration Form
-
+
Please fill out this form with the required information
+
+
+```
+
+```css
+--fcc-editable-region--
+body {
+ width: 100%;
+ height: 100vh;
+ margin: 0;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md b/curriculum/challenges/portuguese/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md
index a3715e54b8d..96a6a7053b4 100644
--- a/curriculum/challenges/portuguese/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md
+++ b/curriculum/challenges/portuguese/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md
@@ -49,7 +49,7 @@ O endpoint (URL) /now deve ter o middleware montado
);
```
-O endpoint (URL) /now deve retornar um horário que possui margem de erro de +/- 20 segundos a partir de agora
+O endpoint `/now` deve retornar a hora atual.
```js
(getUserInput) =>
diff --git a/curriculum/challenges/portuguese/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md b/curriculum/challenges/portuguese/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md
index f602dbccf9c..b1da8371538 100644
--- a/curriculum/challenges/portuguese/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md
+++ b/curriculum/challenges/portuguese/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md
@@ -12,7 +12,7 @@ Você agora já testou algumas maneiras de gerenciar as dependências do seu pro
Mas e se você quisesse remover um pacote externo do qual você não precisa mais? Você já deve ter adivinhado: apenas remova o par chave-valor correspondente a esse pacote das dependências.
-Este mesmo método também se aplica à remoção de outros campos no seu package.json
+Este mesmo método também se aplica à remoção de outros campos no seu package.json.
# --instructions--
diff --git a/curriculum/challenges/portuguese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md b/curriculum/challenges/portuguese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md
index f27b80535d8..be9e4343af4 100644
--- a/curriculum/challenges/portuguese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md
+++ b/curriculum/challenges/portuguese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md
@@ -22,11 +22,11 @@ Um mecanismo de templates (template engine) permite o uso de arquivos de modelo
O Express precisa saber qual mecanismo de modelos você está usando. Usaremos o método `set` para atribuir `pug` como o valor da propriedade `view engine`: `app.set('view engine', 'pug')`
-A página não será carregada até que você renderize corretamente o arquivo de índice no diretório `views/pug`.
+A página estará vazia até que você renderize corretamente o arquivo de índice no diretório `views/pug`.
-Altere o argumento da declaração `res.render()` na rota `/` para que seja o caminho de arquivo para o diretório `views/pug`. O caminho pode ser um caminho relativo (relativo às visualizações) ou um caminho absoluto e não necessita de uma extensão de arquivo.
+Para renderizar o template do `pug`, você precisa usar `res.render()` na rota `/`. Passe o caminho do arquivo para o diretório `views/pug` como argumento para o método. O caminho pode ser um caminho relativo (relativo às visualizações) ou um caminho absoluto e não necessita de uma extensão de arquivo.
-Se tudo correu como planejado, sua página inicial vai parar de mostrar a mensagem "`Pug template is not defined.`" e agora exibirá uma mensagem indicando que você renderizou com sucesso o modelo do Pug!
+Se tudo correu como planejado, a página inicial da aplicação não vai mais estar vazia e exibirá uma mensagem indicando que você renderizou o template do Pug com sucesso!
Envie sua página quando você achar que ela está certa. Se você estiver encontrando erros, pode conferir o projeto concluído até este ponto.
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
index 72660f140a5..a0e3945a301 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -47,7 +47,7 @@ const foundElems = childrenOf1stFieldset.filter((child) => {
assert(foundElems.length === 0);
```
-Os dois elementos `fieldset` devem estar acima do campo de texto e de seu elemento `label` associado. Eles estão fora de ordem.
+Os dois elementos `fieldset` devem estar acima do campo de texto. Eles estão fora de ordem.
```js
const formChildren = $('form')[0].children;
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md
index 7fcbabbecd5..a789a2a487d 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md
@@ -7,7 +7,7 @@ dashedName: step-31
# --description--
-Aninhe o elemento select (com seus elementos option) dentro de um elemento `label` com o texto `How did you hear about us?`. O texto deve vir antes do elemento `select`.
+Aninhe o elemento `select` (com seus elementos `option`) dentro de um elemento `label` com o texto `How did you hear about us?`. O texto deve vir antes do elemento `select`.
# --hints--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md
index 2125794c86e..11fd40689c7 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md
@@ -21,7 +21,7 @@ dashedName: step-2
assert.exists(document.querySelector('head > meta'));
```
-Для теґу `meta` надайте `charset` зі значенням `UTF-8`.
+Теґу `meta` надайте `charset` зі значенням `UTF-8`.
```js
assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md
index 2ecd7083ddb..88ca0a9116b 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md
@@ -7,7 +7,7 @@ dashedName: step-3
# --description--
-Продовжуючи з елементами `meta`: здатність `viewport` розповідає браузеру, як зобразити сторінку. Це одна з речей, що покращує візуальну доступність на мобільних пристроях та удосконалює _SEO_ (пошукову оптимізацію сайту).
+Продовжуючи з елементами `meta`: дефініція `viewport` розповідає браузеру, як зобразити сторінку. Це одна з речей, що покращує візуальну доступність на мобільних пристроях та удосконалює _SEO_ (пошукову оптимізацію сайту).
Додайте здатність `viewport` з атрибутом `content`, деталізуючи `width` та `initial-scale` сторінки.
@@ -19,13 +19,13 @@ dashedName: step-3
assert.equal(document.querySelectorAll('head > meta')?.length, 2);
```
-Для `meta` надайте атрибут `name` зі значенням `viewport`.
+Ви повинні надати `meta` атрибут `name` зі значенням `viewport`.
```js
assert.equal(document.querySelectorAll('head > meta[name="viewport"]')?.length, 1);
```
-Для `meta` надайте атрибут `content` зі значенням `width=device-width, initial-scale=1`.
+Ви повинні надати `meta` атрибут `content` зі значенням `width=device-width, initial-scale=1`.
```js
assert.equal(document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md
index ca9b01b36b8..d585e10bca4 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md
@@ -7,25 +7,25 @@ dashedName: step-4
# --description--
-Інший важливий елемент `meta` для доступності та SEO – це визначення `description`. Значення атрибуту `content` використовується пошуковими системами для надання опису вашої сторінки.
+Інший важливий елемент `meta` для доступності та SEO – це дефініція `description`. Значення атрибуту `content` використовується пошуковими системами для надання опису вашої сторінки.
Додайте елемент `meta` з атрибутом `name`, встановленим на `description`, та надайте йому придатний атрибут `content`.
# --hints--
-Додайте новий елемент `meta` до `head`.
+Ви повинні додати новий елемент `meta` до `head`.
```js
assert.equal(document.querySelectorAll('meta').length, 3);
```
-Для `meta` надайте атрибут `name` зі значенням `description`.
+Ви повинні надати `meta` атрибут `name` зі значенням `description`.
```js
assert.exists(document.querySelector('meta[name="description"]'));
```
-Для `meta` надайте атрибут `content`.
+Ви повинні надати `meta` атрибут `content`.
```js
assert.notEmpty(document.querySelector('meta[name="description"]')?.content);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md
index 140531b5579..02b69fd2a4d 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md
@@ -9,7 +9,7 @@ dashedName: step-5
Останній елемент `title` в `head` корисний для читачів екрану, щоб зрозуміти вміст сторінки. Крім того, це важлива частина _SEO_.
-Надайте вашій сторінці описовий та чіткий `title`.
+Надайте своїй сторінці описовий та чіткий `title`.
# --hints--
@@ -25,7 +25,7 @@ assert.exists(document.querySelector('head > title'));
assert.isAtMost(document.querySelector('head > title')?.textContent?.length, 60);
```
-Намагайтесь зробити ваш елемент `title` більш описовим. _Підказка: принаймні 15 символів_
+Намагайтесь зробити свій елемент `title` більш описовим. _Підказка: принаймні 15 символів_
```js
assert.isAtLeast(document.querySelector('head > title')?.textContent?.length, 15);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md
index bb2d6ae274f..bf5f46435ad 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md
@@ -7,13 +7,13 @@ dashedName: step-6
# --description--
-Навігація – основна частина доступності і читачі екрану покладаються на вас для забезпечення структури сторінки. Цього можна досягти за допомогою семантичних елементів HTML.
+Навігація – основна частина доступності і читачі екрану покладаються на вас для забезпечення структури сторінки. Цього можна досягти з допомогою семантичних елементів HTML.
Додайте елементи `header` та `main` до своєї сторінки.
Елемент `header` буде використаний для представлення сторінки, а також для надання навігаційного меню.
-Елемент `main` буде містити основний вміст сторінки.
+Елемент `main` міститиме основний вміст сторінки.
# --hints--
@@ -29,7 +29,7 @@ assert.exists(document.querySelector('body > header'));
assert.exists(document.querySelector('body > main'));
```
-Елемент `header` повинен бути перед елементом `main`.
+Елемент `header` повинен йти перед елементом `main`.
```js
assert.exists(document.querySelector('header + main'));
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
index adb134e7614..893ca364783 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
@@ -9,9 +9,9 @@ dashedName: step-7
В межах `header` надайте контекст сторінки шляхом вкладення по одному елементу `img`, `h1` та `nav`.
-`img` має вказувати на `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg` та мати `id` зі значенням `logo`.
+`img` повинен вказувати на `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg` та мати `id` зі значенням `logo`.
-`h1` має містити текст `HTML/CSS Quiz`.
+`h1` повинен містити текст `HTML/CSS Quiz`.
# --hints--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
index 5d2e14b1240..dc0b0f18fb3 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
@@ -7,7 +7,7 @@ dashedName: step-8
# --description--
-Корисна властивість _SVG_ (scalable vector graphics) – вміст атрибуту `path`, що дозволяє масштабувати зображення без впливу на роздільність вихідного зображення.
+Корисна властивість _SVG_ (масштабована векторна графіка): завдяки атрибуту `path` можна масштабувати зображення без впливу на роздільність вихідного зображення.
В цей час `img` припускає свій розмір за замовчуванням, що є занадто великим. Належним способом виміряйте зображення, використовуючи `id` як селектор та встановлюючи `width` на `max(100px, 18vw)`.
@@ -19,7 +19,7 @@ dashedName: step-8
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
```
-Для `img` надайте `width` зі значенням `max(100px, 18vw)`.
+Ви повинні надати `img` властивість `width` зі значенням `max(100px, 18vw)`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md
index bb83cc9eee8..0be9af6153c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md
@@ -7,19 +7,19 @@ dashedName: step-9
# --description--
-Як описано в freeCodeCamp Style Guide, логотип має зберігати співвідношення сторін `35 / 4` та мати padding навколо тексту.
+Як описано в freeCodeCamp Style Guide, логотип має зберігати співвідношення сторін `35 / 4` та мати відступ навколо тексту.
Спочатку замініть `background-color` на `#0a0a23`, щоб можна було бачити логотип. Потім використайте властивість `aspect-ratio`, щоб встановити бажане співвідношення сторін на `35 / 4`. Зрештою, всюди додайте `padding` зі значенням `0.4rem`.
# --hints--
-Для `#logo` надайте `background-color` зі значенням `#0a0a23`.
+Ви повинні надати `#logo` властивість `background-color` зі значенням `#0a0a23`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)');
```
-Використайте властивість `aspect-ratio`.
+Ви повинні використати властивість `aspect-ratio`.
```js
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio);
@@ -37,13 +37,13 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height);
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```
-Для `img` надайте `aspect-ratio` зі значенням `35 / 4`.
+Ви повинні надати `img` властивість `aspect-ratio` зі значенням `35 / 4`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4');
```
-Для `img` надайте `padding` зі значенням `0.4rem`.
+Ви повинні надати `img` властивість `padding` зі значенням `0.4rem`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md
index efa68253dc4..06fbbcecd5b 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md
@@ -11,31 +11,31 @@ dashedName: step-10
# --hints--
-Використайте селектор елемента `header`.
+Ви повинні використати селектор елемента `header`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('header'));
```
-Для `header` надайте `width` зі значенням `100%`.
+Ви повинні надати `header` властивість `width` зі значенням `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%');
```
-Для `header` надайте `height` зі значенням `50px`.
+Ви повинні надати `header` властивість `height` зі значенням `50px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px');
```
-Для `header` надайте `background-color` зі значенням `#1b1b32`.
+Ви повинні надати `header` властивість `background-color` зі значенням `#1b1b32`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)');
```
-Для `header` надайте `display` зі значенням `flex`.
+Ви повинні надати `header` властивість `display` зі значенням `flex`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md
index 78c1cd76c12..a7247754707 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md
@@ -11,19 +11,19 @@ dashedName: step-11
# --hints--
-Використайте селектор елемента `h1`.
+Ви повинні використати селектор елемента `h1`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('h1'));
```
-Для `h1` надайте `color` зі значенням `#f1be32`.
+Ви повинні надати `h1` властивість `color` зі значенням `#f1be32`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)');
```
-Для `h1` надайте `font-size` зі значенням `min(5vw, 1.2em)`.
+Ви повинні надати `h1` властивість `font-size` зі значенням `min(5vw, 1.2em)`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
index 0525bfe8f94..a79a72c27cd 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
@@ -13,41 +13,41 @@ dashedName: step-12
- `HTML`
- `CSS`
-Текст елементів списку повинен бути загорнений в теґах anchor.
+Текст елементів списку повинен бути обгорнутий в теґах прив'язки.
# --hints--
-Вкладіть один елемент `ul` в межах `nav`.
+Ви повинні вкласти один елемент `ul` в межах `nav`.
```js
assert.equal(document.querySelectorAll('nav > ul')?.length, 1);
```
-Вкладіть три елементи `li` всередині елементу `ul`.
+Ви повинні вкласти три елементи `li` всередині елемента `ul`.
```js
assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3);
```
-Вкладіть один елемент `a` всередині кожного елемента `li`.
+Ви повинні вкласти один елемент `a` всередині кожного елемента `li`.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3);
```
-Першому елементу `a` надайте текст `INFO`.
+Ви повинні надати першому елементу `a` текст `INFO`.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO');
```
-Другому елементу `a` надайте текст `HTML`.
+Ви повинні надати другому елементу `a` текст `HTML`.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML');
```
-Третьому елементу `a` надайте текст `CSS`.
+Ви повинні надати третьому елементу `a` текст `CSS`.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md
index 1d81ea54e48..b9960b870c2 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md
@@ -13,19 +13,19 @@ dashedName: step-13
# --hints--
-Використовуйте селектор `nav > ul`.
+Ви повинні використати селектор `nav > ul`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul'));
```
-Елементам `nav > ul` надайте `display` зі значенням `flex`.
+Ви повинні надати елементам `nav > ul` властивість `display` зі значенням `flex`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex');
```
-Елементам `nav > ul` надайте `justify-content` зі значенням `space-evenly`.
+Ви повинні надати елементам `nav > ul` властивість `justify-content` зі значенням `space-evenly`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md
index 9e9b6349392..67cb92672ef 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md
@@ -13,37 +13,37 @@ dashedName: step-14
# --hints--
-Ви повинні вкласти елемент `form` в межах елементу `main`.
+Ви повинні вкласти елемент `form` в межах елемента `main`.
```js
assert.exists(document.querySelector('main > form'));
```
-Ви повинні вкласти три елементи `section` в межах елементу `form`.
+Ви повинні вкласти три елементи `section` в межах елемента `form`.
```js
assert.equal(document.querySelectorAll('main > form > section')?.length, 3);
```
-Елементу `form` надайте атрибут `action`.
+Ви повинні надати елементу `form` атрибут `action`.
```js
assert.notEmpty(document.querySelector('main > form')?.action);
```
-Надайте атрибуту `action` значення `https://freecodecamp.org/practice-project/accessibility-quiz`.
+Ви повинні дати атрибуту `action` значення `https://freecodecamp.org/practice-project/accessibility-quiz`.
```js
assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz');
```
-Ви повинні дати елементу `form` атрибут `method`.
+Ви повинні надати елементу `form` атрибут `method`.
```js
assert.notEmpty(document.querySelector('main > form')?.method);
```
-Ви повинні дати елементу `form` атрибут `method` зі значенням `post`.
+Ви повинні надати елементу `form` атрибут `method` зі значенням `post`.
```js
assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md
index afcaf7af27e..a2233c27e23 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md
@@ -7,25 +7,25 @@ dashedName: step-15
# --description--
-Для збільшення доступності сторінки, може бути використаний атрибут `role`, щоб вказати призначення елемента на сторінці для допоміжних технологій. Атрибут `role` є частиною _Web Accessibility Initiative_ (WAI) та приймає задане значення.
+Для збільшення доступності сторінки, може бути використаний атрибут `role`, щоб вказати призначення елемента на сторінці для допоміжних технологій. Атрибут `role` є частиною _ініціативи поліпшення вебдоступу_ та приймає задане значення.
-Кожному елементу `section` надайте role `region`.
+Кожному елементу `section` надайте роль `region`.
# --hints--
-Першому елементу `section` надайте role `region`.
+Ви повинні надати першому елементу `section` роль `region`.
```js
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region');
```
-Другому елементу `section` надайте role `region`.
+Ви повинні надати другому елементу `section` роль `region`.
```js
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region');
```
-Третьому елементу `section` надайте role `region`.
+Ви повинні надати третьому елементу `section` роль `region`.
```js
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
index 8b72787820f..ab51bbef096 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
@@ -7,7 +7,7 @@ dashedName: step-16
# --description--
-Кожен role `region` вимагає видимого label, який посилається на атрибут `aria-labelledby`.
+Кожна роль `region` вимагає видимої мітки, що посилається на атрибут `aria-labelledby`.
Елементам `section` надайте наступні атрибути `aria-labelledby`:
@@ -19,73 +19,73 @@ dashedName: step-16
# --hints--
-Першому елементу `section` надайте атрибут `aria-labelledby` зі значенням `student-info`.
+Ви повинні надати першому елементу `section` атрибут `aria-labelledby` зі значенням `student-info`.
```js
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info');
```
-Другому елементу `section` надайте атрибут `aria-labelledby` зі значенням `html-questions`.
+Ви повинні надати другому елементу `section` атрибут `aria-labelledby` зі значенням `html-questions`.
```js
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions');
```
-Третьому елементу `section` надайте атрибут `aria-labelledby` зі значенням `css-questions`.
+Ви повинні надати третьому елементу `section` атрибут `aria-labelledby` зі значенням `css-questions`.
```js
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions');
```
-Вкладіть один елемент `h2` в межах першого елемента `section`.
+Ви повинні вкласти один елемент `h2` в межах першого елемента `section`.
```js
assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1);
```
-Вкладіть один елемент `h2` в межах другого елемента `section`.
+Ви повинні вкласти один елемент `h2` в межах другого елемента `section`.
```js
assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1);
```
-Вкладіть один елемент `h2` в межах третього елемента `section`.
+Ви повинні вкласти один елемент `h2` в межах третього елемента `section`.
```js
assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1);
```
-Першому елементу `h2` надайте атрибут `id` зі значенням `student-info`.
+Ви повинні надати першому елементу `h2` атрибут `id` зі значенням `student-info`.
```js
assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info');
```
-Другому елементу `h2` надайте атрибут `id` зі значенням `html-questions`.
+Ви повинні надати другому елементу `h2` атрибут `id` зі значенням `html-questions`.
```js
assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions');
```
-Третьому елементу `h2` надайте атрибут `id` зі значенням `css-questions`.
+Ви повинні надати третьому елементу `h2` атрибут `id` зі значенням `css-questions`.
```js
assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
```
-Надайте першому елементу `h2` пригожий текстовий вміст. _Підказка: я б обрав `Student Info`_
+Ви повинні надати першому елементу `h2` пригожий текстовий вміст. _Підказка: я б обрав `Student Info`_
```js
assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
```
-Надайте другому елементу `h2` пригожий текстовий вміст. _Підказка: я б обрав `HTML`_
+Ви повинні надати другому елементу `h2` пригожий текстовий вміст. _Підказка: я б обрав `HTML`_
```js
assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
```
-Надайте третьому елементу `h2` пригожий текстовий вміст. _Підказка: я б обрав `CSS`_
+Ви повинні надати третьому елементу `h2` пригожий текстовий вміст. _Підказка: я б обрав `CSS`_
```js
assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md
index ae5a42f7df7..b4f7e2598e7 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md
@@ -9,20 +9,20 @@ dashedName: step-17
Гарнітура відіграє важливу роль у доступності сторінки. Деякі шрифти простіші для читання, ніж інші, і це особливо актуально на екранах з низькою роздільною здатністю.
-Змініть шрифт елементів `h1` та `h2` на `Verdana` та використайте інший веббезпечний шрифт з сім'ї sans-serif як запасний варіант.
+Змініть шрифт обох елементів `h1` та `h2` на `Verdana` та використайте інший веббезпечний шрифт з сім'ї sans-serif як запасний варіант.
Також додайте `border-bottom` зі значенням `4px solid #dfdfe2` для елементів `h2`, щоб зробити секції виразнішими.
# --hints--
-Використайте селектор декількох елементів, щоб націлити елементи `h1` та `h2`.
+Ви повинні використати селектор декількох елементів, щоб націлити елементи `h1` та `h2`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('h1, h2') || gs('h2, h1'));
```
-Встановіть перше значення властивості `font-family` на `Verdana`.
+Ви повинні встановити перше значення властивості `font-family` на `Verdana`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
@@ -39,13 +39,13 @@ const style = gs('h1, h2') || gs('h2, h1');
assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/);
```
-Використайте селектор елемента `h2`, щоб націлити елементи `h2`.
+Ви повинні використати селектор елемента `h2`, щоб націлити елементи `h2`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('h2'));
```
-Надайте `h2` властивість `border-bottom` зі значенням `4px solid #dfdfe2`.
+Ви повинні надати `h2` властивість `border-bottom` зі значенням `4px solid #dfdfe2`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md
index ed88a0ec38c..e65f5dd23b4 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md
@@ -7,7 +7,7 @@ dashedName: step-18
# --description--
-Для можливості навігації в межах сторінки, кожному елементу anchor надайте `href`, що відповідає `id` елементів `h2`.
+Для можливості навігації в межах сторінки, кожному елементу прив'язки надайте `href`, що відповідає `id` елементів `h2`.
# --hints--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md
index a6e46e06444..e113ff007bc 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md
@@ -13,7 +13,7 @@ dashedName: step-19
# --hints--
-Вкладіть три елементи `div` під елементом `h2#student-info`.
+Ви повинні вкласти три елементи `div` під елементом `h2#student-info`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3);
@@ -37,39 +37,39 @@ assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className,
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info');
```
-Вкладіть один елемент `label` в межах першого `div`.
+Ви повинні вкласти один елемент `label` в межах першого `div`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1);
```
-Вкладіть один елемент `input` в межах першого `div`, після `label`.
+Ви повинні вкласти один елемент `input` в межах першого `div`, після `label`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1);
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input'));
```
-Вкладіть один елемент `label` в межах другого `div`.
+Ви повинні вкласти один елемент `label` в межах другого `div`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1);
```
-Вкладіть один елемент `input` в межах другого `div`, після `label`.
+Ви повинні вкласти один елемент `input` в межах другого `div`, після `label`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1);
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input'));
```
-Вкладіть один елемент `label` в межах третього `div`.
+Ви повинні вкласти один елемент `label` в межах третього `div`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1);
```
-Вкладіть один елемент `input` в межах третього `div`, після `label`.
+Ви повинні вкласти один елемент `input` в межах третього `div`, після `label`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md
index 2ea399f8ec0..d3c83be2578 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md
@@ -7,63 +7,63 @@ dashedName: step-20
# --description--
-Важливо пов'язати кожен `input` з відповідним елементом `label`. Це надає користувачам з допоміжними технологіями візуальний референс на input.
+Важливо пов'язати кожен `input` з відповідним елементом `label`. Це надає користувачам з допоміжними технологіями візуальне посилання на введення.
-Це роблять завдяки наданню `label` атрибута `for`, який містить `id` теґу `input`.
+Це роблять завдяки наданню `label` атрибута `for`, який містить `id` теґа `input`.
Ця секція візьме ім'я, адресу електронної пошти та дату народження учня. Надайте елементам `label` відповідні атрибути `for`, а також текстовий вміст. Потім прив'яжіть елементи `input` до відповідних елементів `label`.
# --hints--
-Надайте першому елементу `label` відповідний атрибут `for`.
+Ви повинні надати першому елементу `label` відповідний атрибут `for`.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1);
```
-Надайте другому елементу `label` відповідний атрибут `for`.
+Ви повинні надати другому елементу `label` відповідний атрибут `for`.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1);
```
-Надайте третьому елементу `label` відповідний атрибут `for`.
+Ви повинні надати третьому елементу `label` відповідний атрибут `for`.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);
```
-Надайте першому елементу `label` відповідний текстовий вміст.
+Ви повинні надати першому елементу `label` відповідний текстовий вміст.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1);
```
-Надайте другому елементу `label` відповідний текстовий вміст.
+Ви повинні надати другому елементу `label` відповідний текстовий вміст.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1);
```
-Надайте третьому елементу `label` відповідний текстовий вміст.
+Ви повинні надати третьому елементу `label` відповідний текстовий вміст.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1);
```
-Надайте першому елементу `input` атрибут `id`, що відповідає атрибуту `for` першого `label`.
+Ви повинні надати першому елементу `input` атрибут `id`, що відповідає атрибуту `for` першого `label`.
```js
assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor);
```
-Надайте другому елементу `input` атрибут `id`, що відповідає атрибуту `for` другого `label`.
+Ви повинні надати другому елементу `input` атрибут `id`, що відповідає атрибуту `for` другого `label`.
```js
assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor);
```
-Надайте третьому елементу `input` атрибут `id`, що відповідає атрибуту `for` третього `label`.
+Ви повинні надати третьому елементу `input` атрибут `id`, що відповідає атрибуту `for` третього `label`.
```js
assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md
index 9de8520d64d..c958de86ab2 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md
@@ -7,7 +7,7 @@ dashedName: step-21
# --description--
-Пам'ятаючи застосування inputs форми, надайте кожному `input` відповідні `type` та атрибут `name`. Потім надайте першому `input` атрибут `placeholder`.
+Пам'ятаючи застосування введення форми, надайте кожному `input` відповідні `type` та атрибут `name`. Потім надайте першому `input` атрибут `placeholder`.
# --hints--
@@ -29,25 +29,25 @@ assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email');
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date');
```
-Першому `input` надайте відповідний атрибут `name`.
+Ви повинні надати першому `input` відповідний атрибут `name`.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1);
```
-Другому `input` надайте відповідний атрибут `name`.
+Ви повинні надати другому `input` відповідний атрибут `name`.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1);
```
-Третьому `input` надайте відповідний атрибут `name`.
+Ви повинні надати третьому `input` відповідний атрибут `name`.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1);
```
-Першому `input` надайте атрибут `placeholder`.
+Ви повинні надати першому `input` атрибут `placeholder`.
```js
assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md
index 653a044f378..450cc50c54c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md
@@ -7,13 +7,13 @@ dashedName: step-22
# --description--
-Хоча в попередньому уроці ви додали `placeholder` до першого елемента `input`, це не найкраще застосування для доступності; користувачі занадто часто плутають текст заповнювача з дійсним вхідним значенням – вони думають, що в input вже є значення.
+Хоча в попередньому уроці ви додали `placeholder` до першого елемента `input`, це не найкраще застосування для доступності; користувачі занадто часто плутають текст заповнювача з дійсним вхідним значенням – вони думають, що в введення вже є значення.
Видаліть текст заповнювача з першого елемента `input`, посилаючись на `label` як найкраще застосування.
# --hints--
-Видаліть атрибут `placeholder` з першого елемента `input`.
+Ви повинні видалити атрибут `placeholder` з першого елемента `input`.
```js
assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md
index 7bc0a26dbf6..eccd2c1e3d3 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md
@@ -7,25 +7,25 @@ dashedName: step-23
# --description--
-Можливо, `D.O.B.` недостатньо описує. Особливо це стосується користувачів з порушенням зору. Один зі способів розв'язати цю проблему, без додавання видимого тексту до label – це додавання тексту, який може прочитати лише читач екрана.
+Можливо, `D.O.B.` недостатньо описує. Особливо це стосується користувачів з порушенням зору. Один зі способів розв'язати цю проблему, без додавання видимого тексту до мітки – це додавання тексту, який може прочитати лише читач екрана.
-Приєднайте елемент `span` класу `sr-only` до відповідного текстового вмісту третього елемента `label`.
+Приєднайте елемент `span` з класом `sr-only` до відповідного текстового вмісту третього елемента `label`.
# --hints--
-Додайте елемент `span` в межах третього елемента `label`.
+Ви повинні додати елемент `span` в межі третього елемента `label`.
```js
assert.exists(document.querySelector('.info:nth-of-type(3) > label > span'));
```
-Надайте елементу `span` клас `sr-only`.
+Ви повинні надати елементу `span` клас зі значенням `sr-only`.
```js
assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only');
```
-Розмістіть `span` після текстового вмісту `D.O.B.`.
+Ви повинні розмістити `span` після текстового вмісту `D.O.B.`.
```js
assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\. label > span')?.textContent, '(Date of Birth)');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md
index 673e8a1c3e4..aa3c9f56cc8 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md
@@ -27,61 +27,61 @@ border: 0;
# --hints--
-Використайте селектор `.sr-only`.
+Ви повинні використати селектор `.sr-only`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only'));
```
-Для `.sr-only` надайте `position` зі значенням `absolute`.
+Ви повинні надати `.sr-only` властивість `position` зі значенням `absolute`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute');
```
-Для `.sr-only` надайте `width` зі значенням `1px`.
+Ви повинні надати `.sr-only` властивість `width` зі значенням `1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px');
```
-Для `.sr-only` надайте `height` зі значенням `1px`.
+Ви повинні надати `.sr-only` властивість `height` зі значенням `1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px');
```
-Для `.sr-only` надайте `padding` зі значенням `0`.
+Ви повинні надати `.sr-only` властивість `padding` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px');
```
-Для `.sr-only` надайте `margin` зі значенням `-1px`.
+Ви повинні надати `.sr-only` властивість `margin` зі значенням `-1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px');
```
-Для `.sr-only` надайте `overflow` зі значенням `hidden`.
+Ви повинні надати `.sr-only` властивість `overflow` зі значенням `hidden`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden');
```
-Для `.sr-only` надайте `clip` зі значенням `rect(0, 0, 0, 0)`.
+Ви повинні надати `.sr-only` властивість `clip` зі значенням `rect(0, 0, 0, 0)`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)');
```
-Для `.sr-only` надайте `white-space` зі значенням `nowrap`.
+Ви повинні надати `.sr-only` властивість `white-space` зі значенням `nowrap`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap');
```
-Для `.sr-only` надайте `border` зі значенням `0`.
+Ви повинні надати `.sr-only` властивість `border` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth, '0px');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
index 52b5fe99279..ccf917a47a5 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
@@ -9,71 +9,71 @@ dashedName: step-26
В межах другого елемента `section` додайте два елементи `div` класу `question-block`.
-Потім в межах кожного елемента `div.question-block` додайте один елемент `p` з текстом зростання чисел, починаючи з `1`, та один елемент `fieldset` класу `question`.
+Потім в межах кожного елемента `div.question-block` додайте один елемент `p` з текстом зростання чисел, починаючи з `1`, та один елемент `fieldset` з класом `question`.
# --hints--
-Вкладіть два елементи `div` в межах другого елемента `section`.
+Ви повинні вкласти два елементи `div` в межах другого елемента `section`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2);
```
-Надайте першому новому елементу `div` клас `question-block`.
+Ви повинні надати першому новому елементу `div` клас зі значенням `question-block`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block');
```
-Надайте другому новому елементу `div` клас `question-block`.
+Ви повинні надати другому новому елементу `div` клас зі значенням `question-block`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
```
-Вкладіть один елемент `p` в межах кожного елемента `div.question-block`.
+Ви повинні вкласти один елемент `p` в межах кожного елемента `div.question-block`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
```
-Надайте першому елементу `p` текст `1`.
+Ви повинні надати першому елементу `p` текст `1`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
```
-Надайте другому елементу `p` текст `2`.
+Ви повинні надати другому елементу `p` текст `2`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
```
-Вкладіть один елемент `fieldset` в межах кожного елемента `div.question-block`.
+Ви повинні вкласти один елемент `fieldset` в межах кожного елемента `div.question-block`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
```
-Розмістіть перший елемент `fieldset` після першого елемента `p`.
+Ви повинні розмістити перший елемент `fieldset` після першого елемента `p`.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
```
-Розмістіть другий елемент `fieldset` після другого елемента `p`.
+Ви повинні розмістити другий елемент `fieldset` після другого елемента `p`.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
```
-Надайте першому елементу `fieldset` клас `question`.
+Ви повинні надати першому елементу `fieldset` клас зі значенням `question`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question');
```
-Надайте другому елементу `fieldset` клас `question`.
+Ви повинні надати другому елементу `fieldset` клас зі значенням `question`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
index b6a72e43588..700552477bd 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
@@ -13,37 +13,37 @@ dashedName: step-27
# --hints--
-Ви повинні вкласти один елемент `legend` в межах першого елементу `fieldset`.
+Ви повинні вкласти один елемент `legend` в межах першого елемента `fieldset`.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1);
```
-Ви повинні вкласти один елемент `ul` в межах першого елементу `fieldset`.
+Ви повинні вкласти один елемент `ul` в межах першого елемента `fieldset`.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1);
```
-Ви повинні вкласти два елементи `li` в межах першого елементу `ul`.
+Ви повинні вкласти два елементи `li` в межах першого елемента `ul`.
```js
assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2);
```
-Ви повинні вкласти один елемент `legend` в межах другого елементу `fieldset`.
+Ви повинні вкласти один елемент `legend` в межах другого елемента `fieldset`.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1);
```
-Ви повинні вкласти один елемент `ul` в межах другого елементу `fieldset`.
+Ви повинні вкласти один елемент `ul` в межах другого елемента `fieldset`.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1);
```
-Ви повинні вкласти два елементи `li` в межах другого елементу `ul`.
+Ви повинні вкласти два елементи `li` в межах другого елемента `ul`.
```js
assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
index 25c0149c1c9..7e56e9f5e92 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
@@ -13,13 +13,13 @@ dashedName: step-28
# --hints--
-Першому `fieldset` потрібно надати належний атрибут `name`. _Підказка: я б використав `html-question-one`_
+Ви повинні надати першому `fieldset` належний атрибут `name`. _Підказка: я б використав `html-question-one`_
```js
assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name);
```
-Другому `fieldset` потрібно надати належний атрибут `name`. _Підказка: я б використав `html-question-two`_
+Ви повинні надати другому `fieldset` належний атрибут `name`. _Підказка: я б використав `html-question-two`_
```js
assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
index 61489ef28d8..5eb5e18390f 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
@@ -7,79 +7,79 @@ dashedName: step-29
# --description--
-Щоб істинні та хибні висловлювання працювали, потрібен набір inputs, які не дозволяють обирати дві відповіді одночасно.
+Щоб істинні та хибні висловлювання працювали, потрібна пара введення, що не дозволяє обирати дві відповіді одночасно.
В межах кожного елементу списку вкладіть один елемент `label` та в межах кожного елементу `label` вкладіть один елемент `input` з відповідним `type`.
# --hints--
-Ви повинні вкласти один елемент `label` в межах першого елементу `li`.
+Ви повинні вкласти один елемент `label` в межах першого елемента `li`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label'));
```
-Ви повинні вкласти один елемент `label` в межах другого елементу `li`.
+Ви повинні вкласти один елемент `label` в межах другого елемента `li`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label'));
```
-Ви повинні вкласти один елемент `label` в межах третього елементу `li`.
+Ви повинні вкласти один елемент `label` в межах третього елемента `li`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label'));
```
-Ви повинні вкласти один елемент `label` в межах четвертого елементу `li`.
+Ви повинні вкласти один елемент `label` в межах четвертого елемента `li`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label'));
```
-Ви повинні вкласти один елемент `input` в межах першого елементу `label`.
+Ви повинні вкласти один елемент `input` в межах першого елемента `label`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input'));
```
-Ви повинні вкласти один елемент `input` в межах другого елементу `label`.
+Ви повинні вкласти один елемент `input` в межах другого елемента `label`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input'));
```
-Ви повинні вкласти один елемент `input` в межах третього елементу `label`.
+Ви повинні вкласти один елемент `input` в межах третього елемента `label`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input'));
```
-Ви повинні вкласти один елемент `input` в межах четвертого елементу `label`.
+Ви повинні вкласти один елемент `input` в межах четвертого елемента `label`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input'));
```
-Для першого `input` надайте `type` зі значенням `radio`.
+Першому `input` надайте `type` зі значенням `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio');
```
-Для другого `input` надайте `type` зі значенням `radio`.
+Другому `input` надайте `type` зі значенням `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio');
```
-Для третього `input` надайте `type` зі значенням `radio`.
+Третьому `input` надайте `type` зі значенням `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio');
```
-Для четвертого `input` надайте `type` зі значенням `radio`.
+Четвертому `input` надайте `type` зі значенням `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
index 8340a341d7f..76bd94c0158 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
@@ -13,7 +13,7 @@ dashedName: step-30
# --hints--
-Першому `label` надайте атрибут `for`, що відповідає `id` його елемента `input`.
+Ви повинні надати першому `label` атрибут `for`, що відповідає `id` його елемента `input`.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor;
@@ -21,7 +21,7 @@ assert.notEmpty(htmlFor);
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id);
```
-Другому `label` надайте атрибут `for`, що відповідає `id` його елемента `input`.
+Ви повинні надати другому `label` атрибут `for`, що відповідає `id` його елемента `input`.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor;
@@ -29,7 +29,7 @@ assert.notEmpty(htmlFor);
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id);
```
-Третьому `label` надайте атрибут `for`, що відповідає `id` його елемента `input`.
+Ви повинні надати третьому `label` атрибут `for`, що відповідає `id` його елемента `input`.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor;
@@ -37,7 +37,7 @@ assert.notEmpty(htmlFor);
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id);
```
-Четвертому `label` надайте атрибут `for`, що відповідає `id` його елемента `input`.
+Ви повинні надати четвертому `label` атрибут `for`, що відповідає `id` його елемента `input`.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor;
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index 367f4782512..3e35c2ef3c0 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -9,7 +9,7 @@ dashedName: step-31
Надайте елементам `label` текст таким чином, що `input` буде перед текстом. Потім для елементів `input` надайте `value`, що відповідає тексту.
-Текст має бути `True` або `False`.
+Текст повинен бути `True` або `False`.
# --hints--
@@ -37,25 +37,25 @@ assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim());
```
-Ви повинні розмістити текстовий вміст першого `label` після елементу `input`.
+Ви повинні розмістити текстовий вміст першого `label` після елемента `input`.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/);
```
-Ви повинні розмістити текстовий вміст другого `label` після елементу `input`.
+Ви повинні розмістити текстовий вміст другого `label` після елемента `input`.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/);
```
-Ви повинні розмістити текстовий вміст третього `label` після елементу `input`.
+Ви повинні розмістити текстовий вміст третього `label` після елемента `input`.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/);
```
-Ви повинні розмістити тестовий вміст четвертого `label` після елементу `input`.
+Ви повинні розмістити текстовий вміст четвертого `label` після елемента `input`.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/);
@@ -101,25 +101,25 @@ const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?
assert(l(2) === 'True' ? l(3) === 'False' : true);
```
-Для першого `input` надайте `value`, що відповідає текстовому вмісту `label`.
+Першому `input` надайте `value`, що відповідає текстовому вмісту `label`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase());
```
-Для другого `input` надайте `value`, що відповідає текстовому вмісту `label`.
+Другому `input` надайте `value`, що відповідає текстовому вмісту `label`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase());
```
-Для третього `input` надайте `value`, що відповідає текстовому вмісту `label`.
+Третьому `input` надайте `value`, що відповідає текстовому вмісту `label`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase());
```
-Для четвертого `input` надайте `value`, що відповідає текстовому вмісту `label`.
+Четвертому `input` надайте `value`, що відповідає текстовому вмісту `label`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase());
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
index 41a2de35a6b..8a0cd3ff8af 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
@@ -7,44 +7,44 @@ dashedName: step-32
# --description--
-Якщо натиснути на radio inputs, можна помітити, що в межах одного поля істина/хиба можна обрати два варіанти одночасно.
+Якщо натиснути на радіовведення, то можна помітити, що в межах одного поля істина/хиба можна обрати два варіанти одночасно.
Згрупуйте дані так, щоб за раз можна було обирати лише один варіант з двох.
# --hints--
-Першому `input` надайте атрибут `name`.
+Ви повинні надати першому `input` атрибут `name`.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name);
```
-Другому `input` надайте атрибут `name`.
+Ви повинні надати другому `input` атрибут `name`.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name);
```
-Третьому `input` надайте атрибут `name`.
+Ви повинні надати третьому `input` атрибут `name`.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name);
```
-Четвертому `input` надайте атрибут `name`.
+Ви повинні надати четвертому `input` атрибут `name`.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name);
```
-Другому `input` надайте атрибут `name`, що відповідає атрибуту `name` першого `input`.
+Ви повинні надати другому `input` атрибут `name`, що відповідає атрибуту `name` першого `input`.
```js
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
assert.equal(i(1), i(0));
```
-Четвертому `input` надайте атрибут `name`, що відповідає атрибуту `name` третього `input`.
+Ви повинні надати четвертому `input` атрибут `name`, що відповідає атрибуту `name` третього `input`.
```js
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
index 08dbb26b4fd..99354b69942 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
@@ -7,7 +7,7 @@ dashedName: step-33
# --description--
-Щоб уникнути небажаного повторення, націльте псевдоелемент `before` елементу `p` та надайте йому властивість `content` зі значенням `"Question #"`.
+Щоб уникнути небажаного повторення, націльте псевдоелемент `before` елемента `p` та надайте йому властивість `content` зі значенням `"Question #"`.
# --hints--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
index b8f24cfe4e3..9aec23e181a 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
@@ -13,7 +13,7 @@ dashedName: step-34
# --hints--
-Додайте один елемент `div` в межах останнього `section`.
+Ви повинні додати один елемент `div` в межах останнього `section`.
```js
assert.exists(document.querySelector('section:nth-of-type(3) > div'));
@@ -25,13 +25,13 @@ assert.exists(document.querySelector('section:nth-of-type(3) > div'));
assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow');
```
-Розмістіть `div.formrow` після елементу `h2`.
+Ви повинні розмістити `div.formrow` після елемента `h2`.
```js
assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow'));
```
-Вкладіть чотири елементи `div` всередині `div.formrow`.
+Ви повинні вкласти чотири елементи `div` всередині `div.formrow`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
index f6b5b179ef4..32f868c2f47 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
@@ -11,25 +11,25 @@ dashedName: step-35
# --hints--
-Вкладіть один елемент `label` в межах першого елементу `div.question-block`.
+Ви повинні вкласти один елемент `label` в межах першого елемента `div.question-block`.
```js
assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label'));
```
-Вкладіть один елемент `label` в межах другого елементу `div.question-block`.
+Ви повинні вкласти один елемент `label` в межах другого елемента `div.question-block`.
```js
assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label'));
```
-Надайте першому елементу `label` текстового вмісту.
+Ви повинні надати першому елементу `label` текстовий вміст.
```js
assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1);
```
-Надайте другому елементу `label` текстового вмісту.
+Ви повинні надати другому елементу `label` текстовий вміст.
```js
assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.textContent?.length, 1);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
index 073379bfaab..6456ff81c8a 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
@@ -7,19 +7,19 @@ dashedName: step-36
# --description--
-В межах першого елементу `div.answer` вкладіть один обов'язковий елемент `select` з трьома відповідними елементами `option`.
+В межах першого елемента `div.answer` вкладіть один обов'язковий елемент `select` з трьома елементами `option`.
Першому елементу `option` надайте `value` зі значенням `""` та текст `Select an option`. Другому елементу `option` надайте `value` зі значенням `yes` та текст `Yes`. Третьому елементу `option` надайте `value` зі значенням `no` та текст `No`.
# --hints--
-Вкладіть один елемент `select` в межах першого елементу `div.answer`.
+Ви повинні вкласти один елемент `select` в межах першого елемента `div.answer`.
```js
assert.exists(document.querySelector('div.answer > select'));
```
-Вкладіть три елементи `option` в межах елементу `select`.
+Ви повинні вкласти три елементи `option` в межах елемента `select`.
```js
assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3);
@@ -31,7 +31,7 @@ assert.equal(document.querySelectorAll('div.answer > select > option')?.length,
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, '');
```
-Першому елементу `option` надайте текстовий вміст зі значенням `Select an option`.
+Ви повинні надати першому елементу `option` текстовий вміст `Select an option`.
```js
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option');
@@ -43,7 +43,7 @@ assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes');
```
-Другому елементу `option` надайте текстовий вміст зі значенням `Yes`.
+Ви повинні надати другому елементу `option` текстовий вміст `Yes`.
```js
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes');
@@ -55,13 +55,13 @@ assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no');
```
-Третьому елементу `option` надайте текстовий вміст зі значенням `No`.
+Ви повинні надати третьому елементу `option` текстовий вміст `No`.
```js
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No');
```
-Для `select` надайте атрибут `required`.
+Ви повинні надати `select` атрибут `required`.
```js
assert.isTrue(document.querySelector('div.answer > select')?.required);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
index c28af46c9a4..7117f549792 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
@@ -11,13 +11,13 @@ dashedName: step-37
# --hints--
-Надайте елементу `label` атрибут `for`.
+Ви повинні надати елементу `label` атрибут `for`.
```js
assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor);
```
-Надайте елементу `select` атрибут `id`.
+Ви повинні надати елементу `select` атрибут `id`.
```js
assert.notEmpty(document.querySelector('.answer > select')?.id);
@@ -29,7 +29,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.id);
assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor);
```
-Надайте елементу `select` атрибут `name`.
+Ви повинні надати елементу `select` атрибут `name`.
```js
assert.notEmpty(document.querySelector('.answer > select')?.name);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
index dbe9e0f4a91..eff4fe85cf0 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
@@ -13,13 +13,13 @@ dashedName: step-38
# --hints--
-Вкладіть один елемент `textarea` в межах другого елементу `div.answer`.
+Ви повинні вкласти один елемент `textarea` в межах другого елемента `div.answer`.
```js
assert.exists(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea'));
```
-Надайте `textarea` атрибут `rows` з числом.
+Ви повинні надати `textarea` атрибут `rows` з числом.
```js
const rows = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('rows');
@@ -27,7 +27,7 @@ assert.notEmpty(rows);
assert.isNotNaN(Number(rows));
```
-Надайте `textarea` атрибут `cols` з числом.
+Ви повинні надати `textarea` атрибут `cols` з числом.
```js
const cols = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('cols');
@@ -35,7 +35,7 @@ assert.notEmpty(cols);
assert.isNotNaN(Number(cols));
```
-Надайте `textarea` атрибут `placeholder` з текстом, що описує приклад відповіді.
+Ви повинні надати `textarea` атрибут `placeholder` з текстом, що описує приклад відповіді.
```js
assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('placeholder'));
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
index b406c32a48f..e2fabc1e2ba 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
@@ -11,19 +11,19 @@ dashedName: step-39
# --hints--
-Надайте елементу `label` атрибут `for`.
+Ви повинні надати елементу `label` атрибут `for`.
```js
assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor);
```
-Надайте елементу `textarea` атрибут `id`, що відповідає атрибуту `for` елемента `label`.
+Ви повинні надати елементу `textarea` атрибут `id`, що відповідає атрибуту `for` елемента `label`.
```js
assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id);
```
-Надайте елементу `textarea` атрибут `name`.
+Ви повинні надати елементу `textarea` атрибут `name`.
```js
assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
index e60311a3f23..56f8d6f9ca4 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
@@ -17,13 +17,13 @@ dashedName: step-40
assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input'));
```
-Розмістіть кнопку для відправки форми в межах елементу `form`.
+Ви повинні розмістити кнопку для відправки форми в межах елемента `form`.
```js
assert.exists(document.querySelector('form > button') || document.querySelector('form > input'));
```
-Розмістіть кнопку для відправки форми після останнього елементу `section`.
+Ви повинні розмістити кнопку для відправки форми після останнього елемента `section`.
```js
assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input'));
@@ -35,7 +35,7 @@ assert.exists(document.querySelector('section:last-of-type + button') || documen
assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]'));
```
-Кнопка для відправки форми повинна мати текст `Submit`.
+Кнопка для відправки форми повинна відображати текст `Submit`.
```js
assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Submit');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
index 9855c86575c..11fce70e468 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -13,13 +13,13 @@ dashedName: step-41
# --hints--
-Додайте один елемент `footer` після елементу `main`.
+Ви повинні додати один елемент `footer` після елемента `main`.
```js
assert.exists(document.querySelector('main + footer'));
```
-Вкладіть один елемент `address` в межах елементу `footer`.
+Ви повинні вкласти один елемент `address` в межах елемента `footer`.
```js
assert.exists(document.querySelector('footer > address'));
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
index c2420888b79..dc8ee085753 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
@@ -7,7 +7,7 @@ dashedName: step-42
# --description--
-В межах елементу `address` додайте наступне:
+В межах елемента `address` додайте наступне:
```html
freeCodeCamp
@@ -20,7 +20,7 @@ USA
# --hints--
-Додайте текст вище, включно з тегами ` `, до елемента `address`.
+Ви повинні додати текст вище, включно з тегами ` `, до елемента `address`.
```js
assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
index e7cf13300af..884a548fe03 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
@@ -9,23 +9,23 @@ dashedName: step-43
Елемент `address` необов’язково повинен містити фізико-географічне розташування. Його можна використати, щоб надати посилання на предмет.
-Загорніть посилання навколо тексту `freeCodeCamp` та встановіть локацію на `https://freecodecamp.org`.
+Обгорніть посилання навколо тексту `freeCodeCamp` та встановіть локацію на `https://freecodecamp.org`.
# --hints--
-Додайте елемент `a`.
+Ви повинні додати елемент `a`.
```js
assert.exists(document.querySelector('address > a'));
```
-Надайте елементу `a` атрибут `href` зі значенням `https://freecodecamp.org`.
+Ви повинні надати елементу `a` атрибут `href` зі значенням `https://freecodecamp.org`.
```js
assert.equal(document.querySelector('address > a')?.getAttribute('href'), 'https://freecodecamp.org');
```
-Загорніть елемент `a` навколо існуючого тексту `freeCodeCamp`.
+Ви повинні обгорнути елемент `a` навколо наявного тексту `freeCodeCamp`.
```js
assert.equal(document.querySelector('address > a')?.innerHTML, 'freeCodeCamp');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index 6d311c7f52e..d26a90a6a68 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -18,14 +18,14 @@ display: block;
# --hints--
-Використайте селектор `nav li` або `nav > ul > li`.
+Ви повинні використати селектор `nav li` або `nav > ul > li`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('nav li') || gs('nav > ul > li'));
```
-Елементам `li` надайте `color` зі значенням `#dfdfe2`.
+Ви повинні надати елементам `li` властивість `color` зі значенням `#dfdfe2`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
@@ -33,7 +33,7 @@ const color = gs('nav li')?.color ?? gs('nav > ul > li')?.color;
assert.equal(color, 'rgb(223, 223, 226)');
```
-Елементам `li` надайте `margin` зі значенням `0 0.2rem`.
+Ви повинні надати елементам `li` властивість `margin` зі значенням `0 0.2rem`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
@@ -41,7 +41,7 @@ const margin = gs('nav li')?.margin ?? gs('nav > ul > li')?.margin;
assert.equal(margin, '0px 0.2rem');
```
-Елементам `li` надайте `padding` зі значенням `0.2rem`.
+Ви повинні надати елементам `li` властивість `padding` зі значенням `0.2rem`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
@@ -49,7 +49,7 @@ const padding = gs('nav li')?.padding ?? gs('nav > ul > li')?.padding;
assert.equal(padding, '0.2rem');
```
-Елементам `li` надайте `display` зі значенням `block`.
+Ви повинні надати елементам `li` властивість `display` зі значенням `block`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index e320b513af1..f0347a52d89 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -9,23 +9,23 @@ dashedName: step-45
На тему візуальної контрастності: контраст між елементами є ключовим фактором. Наприклад, контраст між текстом та фоном заголовка має бути принаймні 4.5:1.
-Змініть колір шрифту всіх елементів anchor в межах елементів списку на контрастний зі співвідношенням не менше 7:1.
+Змініть колір шрифту всіх елементів прив'язки в межах елементів списку на контрастний зі співвідношенням не менше 7:1.
# --hints--
-Використайте селектор `li > a`.
+Ви повинні використати селектор `li > a`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('li > a'));
```
-Надайте елементу `a` властивість `color`.
+Ви повинні надати елементу `a` властивість `color`.
```js
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color);
```
-Надайте властивості `color` контрасту з фоном не менше 7:1. _Підказка: я б використав `#dfdfe2`_
+Ви повинні надати властивості `color` контрасту з фоном не менше 7:1. _Підказка: я б використав `#dfdfe2`_
```js
function luminance(r, g, b) {
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
index f966aa5cd03..c165795bbc8 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
@@ -7,26 +7,26 @@ dashedName: step-46
# --description--
-Щоб навігаційні кнопки виглядали як типові кнопки, видаліть підкреслення з тегів anchor.
+Щоб навігаційні кнопки виглядали як типові кнопки, видаліть підкреслення з теґів прив'язки.
Потім створіть новий селектор, націлений на елементи навігаційного списку, щоб при наведенні курсору на них змінювались колір фону та колір тексту, а курсор ставав указкою.
# --hints--
-Ви повинні використати існуючий селектор `li > a`, щоб встановити `text-decoration` на `none`.
+Ви повинні використати наявний селектор `li > a`, щоб встановити `text-decoration` на `none`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('li > a')?.textDecoration, 'none');
```
-Використайте селектор `nav > ul > li:hover` або `nav li:hover`, щоб стилізувати елементи при наведенні.
+Ви повинні використати селектор `nav > ul > li:hover` або `nav li:hover`, щоб стилізувати елементи при наведенні.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('nav > ul > li:hover') || gs('nav li:hover'));
```
-Наведеним елементам `li` надайте `background-color` зі значенням `#dfdfe2`.
+Ви повинні надати наведеним елементам `li` властивість `background-color` зі значенням `#dfdfe2`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
@@ -34,7 +34,7 @@ const bgColor = gs('nav > ul > li:hover')?.backgroundColor ?? gs('nav li:hover')
assert.equal(bgColor, 'rgb(223, 223, 226)');
```
-Наведеним елементам `li` надайте `color` зі значенням `#1b1b32`.
+Ви повинні надати наведеним елементам `li` властивість `color` зі значенням `#1b1b32`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
@@ -42,7 +42,7 @@ const color = gs('nav > ul > li:hover')?.color ?? gs('nav li:hover')?.color;
assert.equal(color, 'rgb(27, 27, 50)');
```
-Наведеним елементам `li` надайте `cursor` зі значенням `pointer`.
+Ви повинні надати наведеним елементам `li` властивість `cursor` зі значенням `pointer`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index f09a7a45f6e..a51b9c49a17 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -13,25 +13,25 @@ dashedName: step-47
# --hints--
-Для `header` надайте `justify-content` зі значенням `space-between`.
+Ви повинні надати `header` властивість `justify-content` зі значенням `space-between`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between');
```
-Для `header` надайте `align-items` зі значенням `center`.
+Ви повинні надати `header` властивість `align-items` зі значенням `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center');
```
-Для `header` надайте `position` зі значенням `fixed`.
+Ви повинні надати `header` властивість `position` зі значенням `fixed`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed');
```
-Для `header` надайте `top` зі значенням `0`.
+Ви повинні надати `header` властивість `top` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
index 5709edb12d1..b42a073708b 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
@@ -7,25 +7,25 @@ dashedName: step-48
# --description--
-Якщо ширина екрана невелика, то `h1` не переносить текстовий вміст як слід. Вирівняйте текст елемента `h1` у центрі.
+Якщо ширина екрана невелика, то `h1` не переносить текстовий вміст як слід. Вирівняйте текст елемента `h1` за центром.
-Потім для `main` надайте padding таким чином, що header секції `Student Info` можна побачити повністю.
+Потім для `main` надайте відступ таким чином, що заголовок секції `Student Info` можна побачити повністю.
# --hints--
-Для `h1` надайте `text-align` зі значенням `center`.
+Ви повинні надати `h1` властивість `text-align` зі значенням `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center');
```
-Додайте селектор `main`, щоб націлити елемент `main`.
+Ви повинні додати селектор `main`, щоб націлити елемент `main`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('main'));
```
-Для `main` надайте `padding-top` зі значенням принаймні `25px`.
+Ви повинні надати `main` властивість `padding-top` зі значенням принаймні `25px`.
```js
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
index 80a408c8aa6..86b26d56f03 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
@@ -20,31 +20,31 @@ height: 100%;
# --hints--
-Для `ul` надайте `flex-wrap` зі значенням `wrap`.
+Ви повинні надати `ul` властивість `flex-wrap` зі значенням `wrap`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap');
```
-Для `ul` надайте `align-items` зі значенням `center`.
+Ви повинні надати `ul` властивість `align-items` зі значенням `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center');
```
-Для `ul` надайте `padding-inline-start` зі значенням `0`.
+Ви повинні надати `ul` властивість `padding-inline-start` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px');
```
-Для `ul` надайте `margin-block` зі значенням `0`.
+Ви повинні надати `ul` властивість `margin-block` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px');
```
-Для `ul` надайте `height` зі значенням `100%`.
+Ви повинні надати `ul` властивість `height` зі значенням `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
index ea9134c7352..d0818120b10 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
@@ -7,49 +7,49 @@ dashedName: step-50
# --description--
-Встановіть ширину елементів `section` на `80%` від їхнього батьківського контейнера. Потім використайте margins, щоб зцентрувати елементи `section`, додаючи `10px` до нижнього margin.
+Встановіть ширину елементів `section` на `80%` від їхнього батьківського контейнера. Потім використайте поля, щоб зцентрувати елементи `section`, додаючи `10px` до нижнього поля.
Будьте певні, що елементи `section` не можуть бути більшими за `600px` завширшки.
# --hints--
-Використайте селектор `section`.
+Ви повинні використати селектор `section`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('section'));
```
-Для `section` надайте `width` зі значенням `80%`.
+Ви повинні надати `section` властивість `width` зі значенням `80%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.width, '80%');
```
-Для `section` надайте `margin-top` зі значенням `0`.
+Ви повинні надати `section` властивість `margin-top` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginTop, '0px');
```
-Для `section` надайте `margin-right` зі значенням `auto`.
+Ви повинні надати `section` властивість `margin-right` зі значенням `auto`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginRight, 'auto');
```
-Для `section` надайте `margin-bottom` зі значенням `10px`.
+Ви повинні надати `section` властивість `margin-bottom` зі значенням `10px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginBottom, '10px');
```
-Для `section` надайте `margin-left` зі значенням `auto`.
+Ви повинні надати `section` властивість `margin-left` зі значенням `auto`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginLeft, 'auto');
```
-Для `section` надайте `max-width` зі значенням `600px`.
+Ви повинні надати `section` властивість `max-width` зі значенням `600px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600px');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
index 3e2f59077c9..73e7506f12c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
@@ -7,17 +7,17 @@ dashedName: step-51
# --description--
-Замініть верхній margin елементів `h2` на верхній padding зі значенням `60px`.
+Замініть верхнє поле елементів `h2` на верхній відступ зі значенням `60px`.
# --hints--
-Для `h2` надайте `margin-top` зі значенням `0`.
+Ви повинні надати `h2` властивість `margin-top` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.marginTop, '0px');
```
-Для `h2` надайте `padding-top` зі значенням `60px`.
+Ви повинні надати `h2` властивість `padding-top` зі значенням `60px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index d94c579069e..28f554428bc 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -7,35 +7,35 @@ dashedName: step-52
# --description--
-Додайте padding зверху та зліва від елементів `.info` та встановіть інші значення на `0`.
+Додайте відступ зверху та зліва від елементів `.info` та встановіть інші значення на `0`.
# --hints--
-Використайте селектор `.info`.
+Ви повинні використати селектор `.info`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.info'));
```
-Для `.info` надайте `padding-top` зі значенням принаймні `1px`.
+Ви повинні надати `.info` властивість `padding-top` зі значенням принаймні `1px`.
```js
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1);
```
-Для `.info` надайте `padding-right` зі значенням `0`.
+Ви повинні надати `.info` властивість `padding-right` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px');
```
-Для `.info` надайте `padding-bottom` зі значенням `0`.
+Ви повинні надати `.info` властивість `padding-bottom` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px');
```
-Для `.info` надайте `padding-left` зі значенням принаймні `1px`.
+Ви повинні надати `.info` властивість `padding-left` зі значенням принаймні `1px`.
```js
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingLeft?.replace(/\D+/, '')), 1);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
index f39913df1e9..e142dcc5dc5 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
@@ -7,19 +7,19 @@ dashedName: step-53
# --description--
-Елементам `.formrow` надайте верхній margin та лівий і правий padding. Інші значення padding повинні бути `0`.
+Елементам `.formrow` надайте верхнє поле та лівий і правий відступи. Інші значення відступів повинні бути `0`.
Потім збільште розмір шрифту для всіх елементів `input`.
# --hints--
-Використайте селектор `.formrow`, щоб націлити елементи `.formrow`.
+Ви повинні використати селектор `.formrow`, щоб націлити елементи `.formrow`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow'));
```
-Для `.formrow` надайте `margin-top` зі значенням принаймні `1px`.
+Ви повинні надати `.formrow` властивість `margin-top` зі значенням принаймні `1px`.
```js
const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.marginTop;
@@ -40,13 +40,13 @@ function remToPx(rem) {
assert.isAtLeast(valInPx, 1);
```
-Для `.formrow` надайте `padding-top` зі значенням `0`.
+Ви повинні надати `.formrow` властивість `padding-top` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px');
```
-Для `.formrow` надайте `padding-right` зі значенням принаймні `1px`.
+Ви повинні надати `.formrow` властивість `padding-right` зі значенням принаймні `1px`.
```js
const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingRight;
@@ -67,13 +67,13 @@ function remToPx(rem) {
assert.isAtLeast(valInPx, 1);
```
-Для `.formrow` надайте `padding-bottom` зі значенням `0`.
+Ви повинні надати `.formrow` властивість `padding-bottom` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px');
```
-Для `.formrow` надайте `padding-left` зі значенням принаймні `1px`.
+Ви повинні надати `.formrow` властивість `padding-left` зі значенням принаймні `1px`.
```js
const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingLeft;
@@ -94,13 +94,13 @@ function remToPx(rem) {
assert.isAtLeast(valInPx, 1);
```
-Використайте селектор `input`, щоб націлити елементи `input`.
+Ви повинні використати селектор `input`, щоб націлити елементи `input`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('input'));
```
-Для `input` надайте `font-size` більший за `13px`.
+Ви повинні надати `input` властивість `font-size` більший за `13px`.
```js
const val = new __helpers.CSSHelp(document).getStyle('input')?.fontSize;
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
index 34b82e3403c..64d15e5ab3c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
@@ -11,14 +11,14 @@ dashedName: step-54
# --hints--
-Використайте селектор `.info input` або `.info > input`.
+Ви повинні використати селектор `.info input` або `.info > input`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('.info input') || gs('.info > input'));
```
-Елементам `input` надайте `width` зі значенням `50%`.
+Ви повинні надати елементам `input` властивість `width` зі значенням `50%`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width;
@@ -26,7 +26,7 @@ const width = gs('.info input') ?? gs('.info > input');
assert.equal(width, '50%');
```
-Елементам `input` надайте `text-align` зі значенням `left`.
+Ви повинні надати елементам `input` властивість `text-align` зі значенням `left`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign;
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
index f559114e6a5..680a897b8bf 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
@@ -11,14 +11,14 @@ dashedName: step-55
# --hints--
-Використайте селектор `.info label` або `.info > label`.
+Ви повинні використати селектор `.info label` або `.info > label`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('.info label') || gs('.info > label'));
```
-Елементам `label` надайте `width` зі значенням `10%`.
+Ви повинні надати елементам `label` властивість `width` зі значенням `10%`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width;
@@ -26,7 +26,7 @@ const width = gs('.info label') || gs('.info > label');
assert.equal(width, '10%');
```
-Елементам `label` надайте `min-width` зі значенням `55px`.
+Ви повинні надати елементам `label` властивість `min-width` зі значенням `55px`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.minWidth;
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
index 25d51617686..393efc957f6 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
@@ -13,14 +13,14 @@ dashedName: step-56
# --hints--
-Використайте селектор `.info > label, .info > input` або `.info label, .info input`.
+Ви повинні використати селектор `.info > label, .info > input` або `.info label, .info input`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('.info > label, .info > input') || gs('.info label, .info input') || gs('.info > input, .info > label') || gs('.info input, .info label'));
```
-Елементам `input` та `label` надайте `display` зі значенням `inline-block`.
+Ви повинні надати елементам `input` та `label` властивість `display` зі значенням `inline-block`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.display;
@@ -28,7 +28,7 @@ const display = gs('.info > label, .info > input') ?? gs('.info label, .info inp
assert.equal(display, 'inline-block');
```
-Елементам `input` та `label` надайте `text-align` зі значенням `right`.
+Ви повинні надати елементам `input` та `label` властивість `text-align` зі значенням `right`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign;
@@ -36,7 +36,7 @@ const textAlign = gs('.info > label, .info > input') ?? gs('.info label, .info i
assert.equal(textAlign, 'right');
```
-Встановіть властивість `text-align: right` перед правилом `.info input`.
+Ви повинні встановити властивість `text-align: right` перед правилом `.info input`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyleRule(s);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
index 82d4745b23b..b3d9d7c8fb3 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
@@ -25,31 +25,31 @@ padding-top: 5px;
assert.exists(new __helpers.CSSHelp(document).getStyle('.question-block'));
```
-Елементу `.question-block` надайте `display` зі значенням `block`.
+Ви повинні надати елементу `.question-block` властивість `display` зі значенням `block`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.display, 'block');
```
-Елементу `.question-block` надайте `width` зі значенням `100%`.
+Ви повинні надати елементу `.question-block` властивість `width` зі значенням `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.width, '100%');
```
-Елементу `.question-block` надайте `margin-top` зі значенням `20px`.
+Ви повинні надати елементу `.question-block` властивість `margin-top` зі значенням `20px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.marginTop, '20px');
```
-Елементу `.question-block` надайте `padding-top` зі значенням `5px`.
+Ви повинні надати елементу `.question-block` властивість `padding-top` зі значенням `5px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.paddingTop, '5px');
```
-Елементу `.question-block` надайте `text-align` зі значенням `left`.
+Ви повинні надати елементу `.question-block` властивість `text-align` зі значенням `left`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAlign, 'left');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
index 609e25216f9..8cec1dbbc9d 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
@@ -23,19 +23,19 @@ font-size: 20px;
assert.exists(new __helpers.CSSHelp(document).getStyle('p'));
```
-Елементу `p` надайте `margin-top` зі значенням `5px`.
+Ви повинні надати елементу `p` властивість `margin-top` зі значенням `5px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.marginTop, '5px');
```
-Елементу `p` надайте `padding-left` зі значенням `15px`.
+Ви повинні надати елементу `p` властивість `padding-left` зі значенням `15px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.paddingLeft, '15px');
```
-Елементу `p` надайте `font-size` зі значенням `20px`.
+Ви повинні надати елементу `p` властивість `font-size` зі значенням `20px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
index d5249b9032c..bfc9208cd53 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
@@ -7,25 +7,25 @@ dashedName: step-59
# --description--
-Під час розробки корисно бачити край за замовчуванням навколо елементів `fieldset`. Однак, це може бути небажаний стиль.
+Під час розробки корисно бачити кордон за замовчуванням навколо елементів `fieldset`. Однак, це може бути небажаний стиль.
-Видаліть крайній та нижній padding елементів `.question`.
+Видаліть кордон та нижній відступ елементів `.question`.
# --hints--
-Використайте селектор `.question`.
+Ви повинні використати селектор `.question`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.question'));
```
-Для `.question` надайте `border` зі значенням `none`.
+Ви повинні надати `.question` властивість `border` зі значенням `none`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.borderStyle, 'none');
```
-Для `.question` надайте `padding-bottom` зі значенням `0`.
+Ви повинні надати `.question` властивість `padding-bottom` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBottom, '0px');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index 3710f5e5ddb..b7e410df3cb 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -7,23 +7,23 @@ dashedName: step-60
# --description--
-Видаліть стиль за замовчуванням для елементів списку `.answers-list` та видаліть padding неупорядкованого списку.
+Видаліть стиль за замовчуванням для елементів списку `.answers-list` та видаліть відступ невпорядкованого списку.
# --hints--
-Використайте селектор `.answers-list`.
+Ви повинні використати селектор `.answers-list`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.answers-list'));
```
-Для `.answers-list` надайте `list-style` зі значенням `none`.
+Ви повинні надати `.answers-list` властивість `list-style` зі значенням `none`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.listStyle, 'none');
```
-Для `.answers-list` надайте `padding` зі значенням `0`.
+Ви повинні надати `.answers-list` властивість `padding` зі значенням `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding, '0px');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index 7c234372680..0280b8134ec 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -7,7 +7,7 @@ dashedName: step-61
# --description--
-Надайте кнопці submit дизайн в стилі freeCodeCamp завдяки наступним властивостям CSS:
+Надайте кнопці відправки дизайн в стилі freeCodeCamp завдяки наступним властивостям CSS:
```css
display: block;
@@ -21,49 +21,49 @@ border: 3px solid #3b3b4f;
# --hints--
-Використайте селектор елемента `button`.
+Ви повинні використати селектор елемента `button`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('button'));
```
-Для `button` надайте `display` зі значенням `block`.
+Ви повинні надати `button` властивість `display` зі значенням `block`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block');
```
-Для `button` надайте `margin` зі значенням `40px auto`.
+Ви повинні надати `button` властивість `margin` зі значенням `40px auto`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto');
```
-Для `button` надайте `width` зі значенням `40%`.
+Ви повинні надати `button` властивість `width` зі значенням `40%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%');
```
-Для `button` надайте `padding` зі значенням `15px`.
+Ви повинні надати `button` властивість `padding` зі значенням `15px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px');
```
-Для `button` надайте `font-size` зі значенням `23px`.
+Ви повинні надати `button` властивість `font-size` зі значенням `23px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '23px');
```
-Для `button` надайте `background` зі значенням `#d0d0d5`.
+Ви повинні надати `button` властивість `background` зі значенням `#d0d0d5`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.backgroundColor, 'rgb(208, 208, 213)');
```
-Для `button` надайте `border` зі значенням `3px solid #3b3b4f`.
+Ви повинні надати `button` властивість `border` зі значенням `3px solid #3b3b4f`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px solid rgb(59, 59, 79)');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
index ff6f8fb5252..2cb039daa5a 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
@@ -11,25 +11,25 @@ dashedName: step-62
# --hints--
-Використайте селектор елемента `footer`.
+Ви повинні використати селектор елемента `footer`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('footer'));
```
-Для `footer` надайте `background-color` зі значенням `#2a2a40`.
+Ви повинні надати `footer` властивість `background-color` зі значенням `#2a2a40`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)');
```
-Для `footer` надайте `display` зі значенням `flex`.
+Ви повинні надати `footer` властивість `display` зі значенням `flex`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex');
```
-Для `footer` надайте `justify-content` зі значенням `center`.
+Ви повинні надати `footer` властивість `justify-content` зі значенням `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent, 'center');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
index 6bef408f6fb..5947d440069 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
@@ -7,18 +7,18 @@ dashedName: step-63
# --description--
-Ми не можемо прочитати текст. Націльте `footer` та елемент anchor в межах, щоб встановити колір шрифту на колір з належним співвідношенням контрасту.
+Ми не можемо прочитати текст. Націльте `footer` та елемент прив'язки в межах, щоб встановити колір шрифту на колір з належним співвідношенням контрасту.
# --hints--
-Використайте селектор `footer, footer a`.
+Ви повинні використати селектор `footer, footer a`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('footer, footer a') || gs('footer a, footer'));
```
-Встановіть `color` на значення зі співвідношенням контрасту не менше `7:1`. _Підказка: я рекомендую `#dfdfe2`_
+Ви повинні встановити `color` на значення зі співвідношенням контрасту не менше `7:1`. _Підказка: я рекомендую `#dfdfe2`_
```js
function luminance(r, g, b) {
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
index 9be845131ea..9fd6f84d9f2 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
@@ -7,41 +7,41 @@ dashedName: step-64
# --description--
-Горизонтально зцентруйте весь текст в межах елемента `address` та додайте деякий padding.
+Горизонтально зцентруйте весь текст в межах елемента `address` та додайте деякий відступ.
# --hints--
-Використайте селектор елемента `address`.
+Ви повинні використати селектор елемента `address`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('address'));
```
-Для `address` надайте `text-align` зі значенням `center`.
+Ви повинні надати `address` властивість `text-align` зі значенням `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'center');
```
-Для `address` надайте `padding-top` зі значенням принаймні `1px`.
+Ви повинні надати `address` властивість `padding-top` зі значенням принаймні `1px`.
```js
assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-top')?.replace(/\D\D+/, '')), 1);
```
-Для `address` надайте `padding-right` зі значенням принаймні `1px`.
+Ви повинні надати `address` властивість `padding-right` зі значенням принаймні `1px`.
```js
assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-right')?.replace(/\D\D+/, '')), 1);
```
-Для `address` надайте `padding-bottom` зі значенням принаймні `1px`.
+Ви повинні надати `address` властивість `padding-bottom` зі значенням принаймні `1px`.
```js
assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-bottom')?.replace(/\D\D+/, '')), 1);
```
-Для `address` надайте `padding-left` зі значенням принаймні `1px`.
+Ви повинні надати `address` властивість `padding-left` зі значенням принаймні `1px`.
```js
assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-left')?.replace(/\D\D+/, '')), 1);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
index f08f402263e..07fdbb37df4 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
@@ -13,13 +13,13 @@ dashedName: step-65
# --hints--
-Використайте селектор `*`.
+Ви повинні використати селектор `*`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
```
-Для `*` надайте `scroll-behavior` зі значенням `smooth`.
+Ви повинні надати `*` властивість `scroll-behavior` зі значенням `smooth`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smooth');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
index 17ee5da72fe..dd48d1fcfa4 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
@@ -24,7 +24,7 @@ dashedName: step-66
---
-Загорніть правило стилю, яке встановлює `scroll-behavior: smooth` в межах в-правила `@media` на `prefers-reduced-motion` з встановленим `no-preference` як значення.
+Обгорніть правило стилю, яке встановлює `scroll-behavior: smooth` в межах в-правила `@media` на `prefers-reduced-motion` з встановленим `no-preference` як значення.
# --hints--
@@ -34,7 +34,7 @@ dashedName: step-66
assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)').length, 1);
```
-Ви повинні загорнути наявне правило `*` в межі правила `@media`.
+Ви повинні обгорнути наявне правило `*` в межі правила `@media`.
```js
assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')?.find(x => x.selectorText === '*')?.style?.scrollBehavior, 'smooth');
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
index 2f671755a2d..5c6ed788456 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
@@ -23,19 +23,19 @@ _Примітка: не завжди рекомендовано використ
# --hints--
-Першому елементу `a` надайте однолітерний `accesskey`.
+Ви повинні надати першому елементу `a` однолітерний `accesskey`.
```js
assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1);
```
-Другому елементу `a` надайте однолітерний `accesskey`.
+Ви повинні надати другому елементу `a` однолітерний `accesskey`.
```js
assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1);
```
-Третьому елементу `a` надайте однолітерний `accesskey`.
+Ви повинні надати третьому елементу `a` однолітерний `accesskey`.
```js
assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.length, 1);
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md
index 64e8ce12675..83e2ab71aad 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md
@@ -7,7 +7,7 @@ dashedName: step-1
# --description--
-Як ви дізналися в останніх кількох кроках Cat Photo App, існує базова структура, яка необхідна для початку створення вебсторінки.
+Як ви дізналися в останніх кількох кроках застосунку «Cat Photo», існує базова структура, яка необхідна для початку створення вебсторінки.
Додайте теґ `` та елемент `html` з атрибутом `lang` зі значенням `en`.
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
index e2c36428142..ebffac83af6 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -9,7 +9,7 @@ dashedName: step-3
`title` є одним з елементів, які надають додаткову інформацію, яку не видно на вебсторінці, але є важливою для пошукових систем або для того, як відображається сторінка.
-Всередині елемента the `head` вкладіть елемент `meta` з атрибутом `charset` зі значенням `utf-8`, щоб повідомити браузеру як кодувати символи сторінки. Зауважте, що елементи `meta` є самозакривними.
+Всередині елемента `head` вкладіть елемент `meta` з атрибутом `charset` зі значенням `utf-8`, щоб повідомити браузеру як кодувати символи сторінки. Зауважте, що елементи `meta` є самозакривними.
# --hints--
@@ -19,7 +19,7 @@ dashedName: step-3
assert(code.match(//is));
```
-Ваш теґ `meta` повинен містити атрибут `charset`.
+Ваш теґ `meta` повинен мати атрибут `charset`.
```js
assert(code.match(//i));
```
-У вас має бути кінцевий теґ ``.
+Ви повинні мати кінцевий теґ ``.
```js
assert(code.match(/<\/body>/i));
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
index da6f6ccbd58..423dd35f305 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
@@ -11,7 +11,7 @@ dashedName: step-5
# --hints--
-Ви повинні мати кінцевий теґ `
`.
+Ви повинні мати початковий теґ `
`.
```js
assert(code.match(/
/i));
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
index 24ecf396589..6ad72e413a4 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
@@ -7,7 +7,7 @@ dashedName: step-6
# --description--
-Щоб відвідувачі знали, що кафе було засновано в 2020, додайте елемент `p` під елемент `h1` з текстом `Est. 2020`.
+Щоб відвідувачі знали, що кафе було засновано в 2020, додайте елемент `p` під елементом `h1` з текстом `Est. 2020`.
# --hints--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md
index e3ccd3476a3..90c2b495042 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md
@@ -7,7 +7,7 @@ dashedName: step-8
# --description--
-Час додати трішки вмісту меню. Додайте елемент `main` під існуючим елементом `header`. В кінцевому підсумку там буде ціна напоїв та десертів, які пропонує кафе.
+Час додати трішки вмісту меню. Додайте елемент `main` під наявним елементом `header`. В кінцевому підсумку там буде ціна напоїв та десертів, які пропонує кафе.
# --hints--
@@ -29,7 +29,7 @@ assert(code.match(/<\/main>/i));
assert($('header').length === 1);
```
-Ваш теґ `main` повинен йти після теґу `header`.
+Ваш теґ `main` повинен йти після теґа `header`.
```js
const main = document.querySelectorAll('main')[0];
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
index 1b49dc9a474..2a279a00b03 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
@@ -7,7 +7,7 @@ dashedName: step-9
# --description--
-В меню буде дві секції: для кави та десертів. Додайте елемент `section` в межах елемента `main`, щоб мати місце для розміщення всіх доступних напоїв.
+В меню буде дві секції: кава та десерти. Додайте елемент `section` в межах елемента `main`, щоб мати місце для розміщення всіх доступних напоїв.
# --hints--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
index 42a723752ac..eac544efa8c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
@@ -31,12 +31,10 @@ dashedName: step-15
}
```
-Ви повинні мати лише один селектор.
+Ваш код не повинен містити теґи `