` para que estén en la misma línea.
diff --git a/curriculum/challenges/italian/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md b/curriculum/challenges/italian/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
index 056ae85be9a..326ef042816 100644
--- a/curriculum/challenges/italian/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
+++ b/curriculum/challenges/italian/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
@@ -11,7 +11,7 @@ dashedName: align-elements-using-the-justify-content-property
Certe volte gli oggetti flex all'interno di un contenitore flex non riempiono tutto lo spazio del contenitore. È comune voler dire a CSS di allineare e spaziare gli elementi flex in una certa maniera. Fortunatamente, la proprietà `justify-content` ha diverse opzioni per farlo. Ma prima, c'è un po' di terminologia importante da capire prima di rivedere queste opzioni.
-
Per maggiori informazioni sulle proprietà flex-box, leggi qui
+
Per maggiori informazioni sulle proprietà flex-box, leggi qui
Ricorda che l'impostazione di un contenitore flex come riga posiziona gli elementi flex fianco a fianco da sinistra a destra. Un contenitore flex impostato come colonna piazza gli oggetti flex in una pila verticale dall'alto verso il basso. Per ognuno, la direzione in cui sono disposti gli elementi flex è chiamata **asse principale**. Per una riga, si tratta di una linea orizzontale che taglia ogni elemento. E per una colonna, l'asse principale è una linea verticale che attraversa gli elementi.
diff --git a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
index b0897273ff2..4c2b9212495 100644
--- a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
+++ b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
@@ -182,21 +182,21 @@ const el = document.getElementById('number-label')
assert(!!el && el.tagName === 'LABEL')
```
-L'elemento `#name-label` non dovrebbe essere vuoto
+Il tuo elemento `#name-label` dovrebbe contenere del testo che descrive l'input.
```js
const el = document.getElementById('name-label')
assert(!!el && el.innerText.length > 0)
```
-L'elemento `#email-label` non dovrebbe essere vuoto
+Il tuo elemento `#email-label` dovrebbe contenere del testo che descrive l'input.
```js
const el = document.getElementById('email-label')
assert(!!el && el.innerText.length > 0)
```
-L'elemento `#number-label` non dovrebbe essere vuoto
+Il tuo elemento `#number-label` dovrebbe contenere del testo che descrive l'input.
```js
const el = document.getElementById('number-label')
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
index 1faa90ee377..439a908c4b3 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
@@ -14,40 +14,40 @@ Ti viene data una variabile `celsius` che rappresenta una temperatura in Celsius
# --hints--
-`convertToF(0)` dovrebbe restituire un numero
+`convertCtoF(0)` dovrebbe restituire un numero
```js
-assert(typeof convertToF(0) === 'number');
+assert(typeof convertCtoF(0) === 'number');
```
-`convertToF(-30)` dovrebbe restituire un valore di `-22`
+`convertCtoF(-30)` dovrebbe restituire un valore di `-22`
```js
-assert(convertToF(-30) === -22);
+assert(convertCtoF(-30) === -22);
```
-`convertToF(-10)` dovrebbe restituire un valore di `14`
+`convertCtoF(-10)` dovrebbe restituire un valore di `14`
```js
-assert(convertToF(-10) === 14);
+assert(convertCtoF(-10) === 14);
```
-`convertToF(0)` dovrebbe restituire un valore di `32`
+`convertCtoF(0)` dovrebbe restituire un valore di `32`
```js
-assert(convertToF(0) === 32);
+assert(convertCtoF(0) === 32);
```
-`convertToF(20)` dovrebbe restituire un valore di `68`
+`convertCtoF(20)` dovrebbe restituire un valore di `68`
```js
-assert(convertToF(20) === 68);
+assert(convertCtoF(20) === 68);
```
-`convertToF(30)` dovrebbe restituire un valore di `86`
+`convertCtoF(30)` dovrebbe restituire un valore di `86`
```js
-assert(convertToF(30) === 86);
+assert(convertCtoF(30) === 86);
```
# --seed--
@@ -55,22 +55,21 @@ assert(convertToF(30) === 86);
## --seed-contents--
```js
-function convertToF(celsius) {
+function convertCtoF(celsius) {
let fahrenheit;
return fahrenheit;
}
-convertToF(30);
+convertCtoF(30);
```
# --solutions--
```js
-function convertToF(celsius) {
+function convertCtoF(celsius) {
let fahrenheit = celsius * 9/5 + 32;
-
return fahrenheit;
}
-convertToF(30);
+convertCtoF(30);
```
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md
index a7d361c89a2..ebcc0a832ed 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md
@@ -16,7 +16,7 @@ for (let user in users) {
}
```
-Questo scriverebbe `Alan`, `Jeff`, `Sarah` e `Ryan` sulla console - ogni valore sulla propria linea.
+Che scriverebbe `Alan`, `Jeff` e `Sarah` sulla console - ogni valore sulla propria riga.
In questa dichiarazione abbiamo definito una variabile `user`, e come puoi vedere, mentre l'iterazione prosegue attraverso l'oggetto, ad ogni ripetizione la variabile viene reimpostata a ciascuna delle chiavi, risultando nella stampa del nome di ogni utente sulla console.
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md
index 2890d7b5308..083c2b2f5cf 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md
@@ -32,7 +32,13 @@ Costruisci `myStr` dalle stringhe `This is the start.` e `This is the end.` usan
# --hints--
-`myStr` dovrebbe avere un valore stringa `This is the start. This is the end.`
+`myStr` dovrebbe avere un singolo spazio tra le due stringhe.
+
+```js
+assert(/start\. This/.test(myStr));
+```
+
+Il valore di `myStr` dovrebbe essere la stringa `This is the start. This is the end.`
```js
assert(myStr === 'This is the start. This is the end.');
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md
index 9dbaaec1679..9a9485c55d8 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md
@@ -28,7 +28,13 @@ Costruisci `myStr` su diverse righe concatenando queste due stringhe: `This is t
# --hints--
-`myStr` dovrebbe avere un valore stringa `This is the first sentence. This is the second sentence.`
+`myStr` dovrebbe avere un singolo spazio tra le due stringhe.
+
+```js
+assert(/sentence\. This/.test(myStr));
+```
+
+Il valore di `myStr` dovrebbe essere la stringa `This is the first sentence. This is the second sentence.`
```js
assert(myStr === 'This is the first sentence. This is the second sentence.');
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md
index bc280c8f390..e102b839f68 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md
@@ -25,14 +25,14 @@ const alpha = {
26:"A"
};
-alpha[2];
-alpha[24];
+const thirdLetter = alpha[2];
+const lastLetter = alpha[24];
const value = 2;
-alpha[value];
+const valueLookup = alpha[value];
```
-`alpha[2]` è la stringa `Y`, `alpha[24]` è la stringa `C`, e `alpha[value]` è la stringa `Y`.
+`thirdLetter` è la stringa `Y`, `lastLetter` è la stringa `C` e `valueLookup` è la stringa `Y`.
# --instructions--
diff --git a/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md b/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
index 685e1598601..d146d24246d 100644
--- a/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
+++ b/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
@@ -14,7 +14,7 @@ Lavorare su queste sfide ti porterà a scrivere il tuo codice utilizzando uno de
- Usare
la nostra bozza di progetto su Replit per completare queste sfide.
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
-Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
+Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`.
Il file `package.json` è il centro di qualsiasi progetto Node.js o pacchetto npm. Memorizza informazioni sul tuo progetto, in modo simile a come la sezione <head> di un documento HTML descrive il contenuto di una pagina web. Consiste di un singolo oggetto JSON dove le informazioni sono memorizzate in coppie chiave-valore. Ci sono solo due campi obbligatori; "name" e "version", ma è buona pratica fornire ulteriori informazioni sul tuo progetto che potrebbero essere utili per futuri utenti o manutentori.
diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md b/curriculum/challenges/italian/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
index e2334370d09..5021d30fdfa 100644
--- a/curriculum/challenges/italian/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
+++ b/curriculum/challenges/italian/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
@@ -64,7 +64,7 @@ La funzione restituirà la conversione corretta se i problemi dati sono corretta
- Ogni numero (operando) deve contenere solo cifre. Altrimenti, la funzione deve restituire: `Error: Numbers must only contain digits.`
- Ogni operando (numero da ogni lato dell'operatore) ha una lunghezza di massimo 4 cirre. Altrimenti, la funzione deve restituire: `Error: Numbers cannot be more than four digits.`
- Se l'utente ha dato i problemi nel formato corretto, la conversione che restituisci deve seguire le seguenti regole:
- - Ci deve essere un singolo spazio tra l'operatore e il più lungo dei due operandi, l'operatore deve essere sulla stessa riga del secondo operando, entrambi gli operandi devono essere nell'ordine dato (il primo in alto, il secondo in basso.
+ - Ci deve essere un singolo spazio tra l'operatore e il più lungo dei due operandi, l'operatore deve essere sulla stessa riga del secondo operando, entrambi gli operandi devono essere nell'ordine dato (il primo in alto, il secondo in basso).
- I numeri devono essere allineati a destra.
- Devono esserci quattro spazi tra ogni problema.
- Ci devono essere dei trattini sotto ogni problema. I trattini devono avere la stessa larghezza del singolo problema. (L'esempio sopra mostra come deve apparire.)
diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md b/curriculum/challenges/italian/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
index 4bc3a85dedc..3b6484ca721 100644
--- a/curriculum/challenges/italian/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
+++ b/curriculum/challenges/italian/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
@@ -37,7 +37,7 @@ Successivamente, crea una funzione `experiment` in `prob_calculator.py` (non all
La funzione `experiment` dovrebbe restituire una probabilità.
-Ad esempio, diciamo che si vuole determinare la probabilità di ottenere almeno 2 palline rosse e 1 pallina verde quando si pescano 5 palline da un cappello contenente 6 nere, 4 rosse e 3 verdi. Per farlo, eseguiamo `N` esperimenti, contiamo quante volte `M` riceviamo almeno 2 palline rosse e 1 pallina verde, e stimiamo la probabilità come `M/N`. Ogni esperimento consiste nell'iniziare con un cappello contenente le palline specificate, pascare un certo numero di palline, e controllare se abbiamo ottenuto le palline che stavamo tentando di pescare.
+Per esempio, se vuoi determinare la probabilità di ottenere almeno due palline rosse e una verde quando estrai cinque palline da un cappello contenente sei palline nere, quattro rosse, e tre verdi. Per fare ciò, esegui `N` esperimenti, conti il numero `M` di estrazioni in cui ottieni almeno due palline rosse e una verde, e stimi la probabilità come `M/N`. Ogni esperimento consiste nell'iniziare con un cappello che contiene le palle specificate, estraendo svariate palline, e controllando se hai ottenuto le palle che stati cercando di ottenere.
Ecco come verrebbe chiamata la funzione `experiment` basata sull'esempio sopra con 2000 esperimenti:
diff --git a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/cramers-rule.md b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/cramers-rule.md
index cf80482d8ca..779e65cffdc 100644
--- a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/cramers-rule.md
+++ b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/cramers-rule.md
@@ -1,16 +1,20 @@
---
id: 59713da0a428c1a62d7db430
title: Regola di Cramer
-challengeType: 5
+challengeType: 1
forumTopicId: 302239
dashedName: cramers-rule
---
# --description--
-In
algebra lineare, la [regola di Cramer](https://it.wikipedia.org/wiki/Regola_di_Cramer "wp: Regola di Cramer") è una formula esplicita per la risoluzione di un [sistema di equazioni lineari](https://it.wikipedia.org/wiki/Sistema_di_equazioni_lineari) con tante soluzioni quante sono le variabili, valida ogni volta che il sistema ha una soluzione unica. Esprime la soluzione in termine di determinanti della matrice quadrata dei coefficienti e delle matrici ottenute da essa sostituendo una delle colonne con il vettore dei termini a destra dell'uguale nelle equazioni.
+
La regola di Cramer è una formula per risolvere un sistema di equazioni lineari usando i determinanti di matrici formate da sottoinsiemi dei coefficienti e dei valori del lato destro delle equazioni.
-Dati
+Il determinante di una matrice con 2 righe e due colonne è dato da:
+
+$\begin{aligned}|A|={\begin{vmatrix}a&b\\\c&d\end{vmatrix}}=ad-bc.\end{aligned}$
+
+Dato un sistema di equazioni lineari:
$\\left\\{\\begin{matrix}a_1x + b_1y + c_1z&= {\\color{red}d_1}\\\\a_2x + b_2y + c_2z&= {\\color{red}d_2}\\\\a_3x + b_3y + c_3z&= {\\color{red}d_3}\\end{matrix}\\right.$
@@ -18,7 +22,7 @@ che in forma matriciale è
$\\begin{bmatrix} a_1 & b_1 & c_1 \\\\ a_2 & b_2 & c_2 \\\\ a_3 & b_3 & c_3 \\end{bmatrix}\\begin{bmatrix} x \\\\ y \\\\ z \\end{bmatrix}=\\begin{bmatrix} {\\color{red}d_1} \\\\ {\\color{red}d_2} \\\\ {\\color{red}d_3} \\end{bmatrix}.$
-Allora i valodi di $x, y$ e $z$ possono essere trovati come segue:
+Allora i valori di $x, y$ e $z$ possono essere trovati come segue:
$x = \\frac{\\begin{vmatrix} {\\color{red}d_1} & b_1 & c_1 \\\\ {\\color{red}d_2} & b_2 & c_2 \\\\ {\\color{red}d_3} & b_3 & c_3 \\end{vmatrix} } { \\begin{vmatrix} a_1 & b_1 & c_1 \\\\ a_2 & b_2 & c_2 \\\\ a_3 & b_3 & c_3 \\end{vmatrix}}, \\quad y = \\frac {\\begin{vmatrix} a_1 & {\\color{red}d_1} & c_1 \\\\ a_2 & {\\color{red}d_2} & c_2 \\\\ a_3 & {\\color{red}d_3} & c_3 \\end{vmatrix}} {\\begin{vmatrix} a_1 & b_1 & c_1 \\\\ a_2 & b_2 & c_2 \\\\ a_3 & b_3 & c_3 \\end{vmatrix}}, \\text{ and }z = \\frac { \\begin{vmatrix} a_1 & b_1 & {\\color{red}d_1} \\\\ a_2 & b_2 & {\\color{red}d_2} \\\\ a_3 & b_3 & {\\color{red}d_3} \\end{vmatrix}} {\\begin{vmatrix} a_1 & b_1 & c_1 \\\\ a_2 & b_2 & c_2 \\\\ a_3 & b_3 & c_3 \\end{vmatrix} }.$
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/italian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
index 34a6a8f959a..0fbb41cdad6 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
@@ -182,21 +182,21 @@ const el = document.getElementById('number-label')
assert(!!el && el.tagName === 'LABEL')
```
-L'elemento `#name-label` non dovrebbe essere vuoto.
+Il tuo elemento `#name-label` dovrebbe contenere del testo che descrive l'input.
```js
const el = document.getElementById('name-label')
assert(!!el && el.innerText.length > 0)
```
-L'elemento `#email-label` non dovrebbe essere vuoto.
+Il tuo elemento `#email-label` dovrebbe contenere del testo che descrive l'input.
```js
const el = document.getElementById('email-label')
assert(!!el && el.innerText.length > 0)
```
-L'elemento `#number-label` non dovrebbe essere vuoto.
+Il tuo elemento `#number-label` dovrebbe contenere del testo che descrive l'input.
```js
const el = document.getElementById('number-label')
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md
index 87db29884e8..3acaca9d4ca 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md
@@ -7,7 +7,7 @@ dashedName: step-12
# --description--
-Come puoi vedere, il pennarello non sembra avere alcun colore. Il colore di sfondo è stato effettivamente applicato, ma poiché l'elemento `div` marker è vuoto, non possiede larghezza o altezza come impostazione predefinita.
+Come puoi vedere, il pennarello non sembra avere alcun colore. Il colore di sfondo è stato effettivamente applicato, ma poiché l'elemento `div` marker è vuoto, non possiede alcuna altezza come impostazione predefinita.
Nella regola CSS `.marker`, assegna alla proprietà `width` il valore `200px` e alla proprietà `height` il valore `25px`.
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md
index 965e5d654c7..1f7ec79b331 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md
@@ -7,7 +7,7 @@ dashedName: step-17
# --description--
-Non mi piace molto quel colore. Modifica il valore della variabile da `#999` a `#aa80ff` e potrai vedere come viene applicato ovunque tu abbia utilizzato la variabile. Il principale vantaggio dell'uso delle variabili è proprio l'essere in grado di modificare rapidamente molti valori nel foglio di stile semplicemente modificando il valore di una variabile.
+Modifica il valore della variabile da `#999` a `#aa80ff` e potrai vedere come viene applicato ovunque tu abbia utilizzato la variabile. Il principale vantaggio dell'uso delle variabili è proprio l'essere in grado di modificare rapidamente molti valori nel foglio di stile semplicemente modificando il valore di una variabile.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md
index 9806fee6292..e99cfa13bdc 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md
@@ -7,7 +7,7 @@ dashedName: step-18
# --description--
-Il primo edificio ora ha un bell'aspetto. Facciamone altri! Annida tre nuovi elementi `div` nell'elemento `background-buildings` e assegna loro le classi `bb2`, `bb3` e `bb4` in quest'ordine. Saranno altri tre edifici dello sfondo.
+Il primo edificio ora ha un bell'aspetto. Annida tre nuovi elementi `div` nell'elemento `background-buildings` e assegna loro le classi `bb2`, `bb3` e `bb4` in quest'ordine. Saranno altri tre edifici dello sfondo.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index b0a0721cdb0..c696a1b123c 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
Gli elementi `p` vengono usati per creare dei paragrafi di testo sui siti web. Crea un elemento `p` sotto l'elemento `h2` e dagli il seguente testo:
-`Click here to view more cat photos`
+`Click here to view more cat photos.`
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 29d860d4d04..22f7e80b1b8 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -16,7 +16,7 @@ Nello step precedente, hai annidato l'elemento `h2`, il commento e l'elemento `p
```
-Aggiungi due spazi in più davanti all'elemento `h1`, al commento, e all'elemento `p` così da rendere il tuo HTML più leggibile.
+Aggiungi due spazi in più davanti all'elemento `h2`, al commento e all'elemento `p`, così da rendere il tuo HTML più leggibile.
# --hints--
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 063baed4bb9..d5e825a7fa0 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
@@ -64,7 +64,7 @@ assert(
);
```
-Il testo dell'elemento `figcaption` dovrebbe essere `Cats love lasagna.` Hai omesso il testo o hai un refuso.
+Il testo dell'elemento `figcaption`dovrebbe essere `Cats love lasagna.` Hai omesso il valore o hai un refuso.
```js
assert(
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
index bd8d10a9ea8..e38492f2976 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -25,7 +25,7 @@ L'elemento `strong` dovrebbe avere un tag di chiusura. I tag di chiusura hanno u
assert(code.match(/<\/strong\>/));
```
-L'elemento `strong` dovrebbe racchiudere la parola `hate` nel testo `Cats hate other cats.` Hai omesso il testo o hai un refuso.
+L'elemento `strong` dovrebbe circondare la parola `hate` nel testo `Cats hate other cats.` Hai omesso il testo o hai un refuso.
```js
assert(
@@ -36,7 +36,7 @@ assert(
);
```
-Il testo dell'elemento `figcaption` dovrebbe essere `Cats hate other cats.` Controlla eventuali errori e che siano presenti gli spazi necessari intorno ai tag di apertura e di chiusura dell'elemento`strong`.
+Il testo dell'elemento `figcaption` dovrebbe essere `Cats hate other cats.` Controlla eventuali errori e che ci siano gli spazi necessari attorno ai tag di apertura e chiusura dell'elemento `strong`.
```js
const secondFigCaption = document.querySelectorAll('figcaption')[1];
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index 609a5b97f65..57b89faa651 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -30,7 +30,7 @@ Il tag di apertura dell'elemento `form` dovrebbe avere solo un attributo `action
assert([...document.querySelector('form').attributes].length < 2);
```
-Dovresti creare un elemento input. Controlla la sintassi.
+Dovresti creare un elemento `input`. Controlla la sintassi.
```js
assert(document.querySelector('input'));
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index 85789aca761..e5e7ffc61fc 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -17,7 +17,7 @@ Sotto l'input di testo, aggiungi un pulsante radio con l'opzione impostata su:
# --hints--
-Dovresti creare un elemento di input per il tuo pulsante di opzione. Controlla la sintassi.
+Dovresti creare un elemento `input` per il tuo pulsante di opzione. Controlla la sintassi.
```js
assert($('form > input').length >= 2);
@@ -29,7 +29,7 @@ L'elemento `input` dovrebbe avere un tag di apertura, ma non un tag di chiusura.
assert($('form > input') && !code.match(/<\/input\>/g));
```
-Dovresti aver aggiunto un solo elemento di input per il tuo pulsante di opzione. Rimuovi gli altri.
+Dovresti aver aggiunto un solo elemento `input` per il tuo pulsante di opzione. Rimuovi gli altri.
```js
assert($('form > input').length === 2);
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
index 10ad2633469..c40fc6e1cc0 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -66,7 +66,7 @@ assert(
);
```
-L'elemento `figcaption` dovrebbe avere il testo `Cats hate other cats.` Hai omesso una parola o hai refuso.
+Il testo dell'elemento `figcaption` dovrebbe essere `Cats hate other cats.` Hai omesso una parola o hai un refuso.
```js
assert(
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
index 1c2de411124..94b88fcb447 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
@@ -7,7 +7,7 @@ dashedName: step-26
# --description--
-Per completare questo `fieldset`, collega il testo `terms and conditions` a questo link:
+Per completare questo `fieldset`, rendi il testo `terms and conditions` nel terzo elemento `label` un link alla seguente posizione:
```md
https://www.freecodecamp.org/news/terms-of-service/
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md
index 0326e43c185..e5dc813c061 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md
@@ -9,11 +9,11 @@ dashedName: step-33
L'elemento `textarea` si comporta come un elemento `input` con il type `text`, ma ha il vantaggio di poter contenere un testo multi-riga e un numero iniziale di righe di testo e colonne.
-Per consentire agli utenti di registrarsi inserendo una biografia, aggiungi un `label` con il testo `Provide a bio:` seguito da un elemento `textarea` (che necessita di un tag di chiusura).
+Gli utenti saranno in grado di registrarsi con una descrizione. Aggiungi un elemento `label` con il testo `Provide a bio:` alla fine del `fieldset`. Aggiungi un elemento `textarea` all'interno dell'elemento `label`. Nota che l'elemento `textarea` richiede un tag di chiusura.
# --hints--
-Dovresti aggiungere un elemento `label` nel terzo `fieldset`, dopo gli elementi `label` esistenti.
+Dovresti aggiungere un elemento `label` alla fine del terzo elemento `fieldset`, dopo gli elementi `label` esistenti.
```js
assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)'));
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md
index 71a8c8a19b6..5de3e072391 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md
@@ -9,7 +9,7 @@ dashedName: step-36
Per quanto riguarda l'invio dei moduli, è utile oltre che una buona pratica, fornire ogni elemento inviabile di un attributo `name`. Questo attributo è utilizzato per identificare l'elemento una volta che il modulo è stato inviato.
-Vai avanti, e assegna a ogni elemento inviabile un attributo `name` univoco di tua scelta. _Eccetto i due input `radio`._
+Dai a ogni elemento inviabile un attributo `name` univoco di tua scelta, a eccezione dei due elementi `radio`.
# --hints--
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md
new file mode 100644
index 00000000000..3618cb2a600
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md
@@ -0,0 +1,88 @@
+---
+id: 56533eb9ac21ba0edf2244e2
+title: Crea un cifrario di cesare
+challengeType: 5
+forumTopicId: 16003
+dashedName: build-a-caesars-cipher
+---
+
+# --description--
+
+Uno dei più semplici e più conosciuti
cifrari è il
cifrario di Cesare, noto anche come
cifrario a scorrimento. In un cifrario a scorrimento i significati delle lettere sono spostati di un certo numero di posizioni.
+
+Un comune uso moderno è il cifrario
ROT13, dove i valori delle letter sono shiftati di 13 posizioni. Così `A ↔ N`, `B ↔ O` e così via.
+
+Scrivi una funzione che prende una stringa cifrata con
ROT13 come input e restituisce una stringa decodificata.
+
+Tutte le lettere saranno maiuscole. Non trasformare alcun carattere non alfabetico (cioè spazi, punteggiatura), ma passali come sono.
+
+# --hints--
+
+`rot13("SERR PBQR PNZC")` dovrebbe decodificare la stringa `FREE CODE CAMP`
+
+```js
+assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP');
+```
+
+`rot13("SERR CVMMN!")` dovrebbe decodificare la stringa `FREE PIZZA!`
+
+```js
+assert(rot13('SERR CVMMN!') === 'FREE PIZZA!');
+```
+
+`rot13("SERR YBIR?")` dovrebbe restituire la stringa `FREE LOVE?`
+
+```js
+assert(rot13('SERR YBIR?') === 'FREE LOVE?');
+```
+
+`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` dovrebbe restituire la stringa `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.`
+
+```js
+assert(
+ rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') ===
+ 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rot13(str) {
+ return str;
+}
+
+rot13("SERR PBQR PNZC");
+```
+
+# --solutions--
+
+```js
+var lookup = {
+ 'A': 'N','B': 'O','C': 'P','D': 'Q',
+ 'E': 'R','F': 'S','G': 'T','H': 'U',
+ 'I': 'V','J': 'W','K': 'X','L': 'Y',
+ 'M': 'Z','N': 'A','O': 'B','P': 'C',
+ 'Q': 'D','R': 'E','S': 'F','T': 'G',
+ 'U': 'H','V': 'I','W': 'J','X': 'K',
+ 'Y': 'L','Z': 'M'
+};
+
+function rot13(encodedStr) {
+ var codeArr = encodedStr.split(""); // String to Array
+ var decodedArr = []; // Your Result goes here
+ // Only change code below this line
+
+ decodedArr = codeArr.map(function(letter) {
+ if(lookup.hasOwnProperty(letter)) {
+ letter = lookup[letter];
+ }
+ return letter;
+ });
+
+ // Only change code above this line
+ return decodedArr.join(""); // Array to String
+}
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md
new file mode 100644
index 00000000000..7e0e335721e
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md
@@ -0,0 +1,252 @@
+---
+id: aa2e6f85cab2ab736c9a9b24
+title: Crea un contatore di cassa
+challengeType: 5
+forumTopicId: 16012
+dashedName: build-a-cash-register
+---
+
+# --description--
+
+Progetta una funzione per il cassetto di un registratore di cassa `checkCashRegister()` che accetta il prezzo di acquisto come primo argomento (`price`), il pagamento come secondo argomento (`cash`) e il cassetto dei contanti (cash-in-drawer, `cid`) come terzo argomento.
+
+`cid` è un array 2D che elenca la valuta disponibile.
+
+La funzione `checkCashRegister()` dovrebbe restituire sempre un oggetto con una chiave `status` e una chiave `change`.
+
+Restituisce `{status: "INSUFFICIENT_FUNDS", change: []}` se il cash-in-drawer è inferiore al cambio dovuto, o se non è possibile restituire il cambio esatto.
+
+Restituisce `{status: "CLOSED", change: [...]}` con il cid come valore per la chiave `change` se è uguale al cambio dovuto.
+
+Altrimenti, restituisce `{status: "OPEN", change: [...]}`, con il cambio dovuto in monete e banconote, ordinati in ordine dal valore più alto al più basso, come valore della chiave `change`.
+
+
| Unità monetaria | Importo |
|---|
| Penny | $0.01 (PENNY) |
| Nichel | $0.05 (NICKEL) |
| Dime | $0.1 (DIME) |
| Quarter | $0.25 (QUARTER) |
| Dollar | $1 (ONE) |
| Five Dollars | $5 (FIVE) |
| Ten Dollars | $10 (TEN) |
| Twenty Dollars | $20 (TWENTY) |
| One-hundred Dollars | $100 (ONE HUNDRED) |
+
+Ecco qui sotto un esempio di array cash-in-drawer:
+
+```js
+[
+ ["PENNY", 1.01],
+ ["NICKEL", 2.05],
+ ["DIME", 3.1],
+ ["QUARTER", 4.25],
+ ["ONE", 90],
+ ["FIVE", 55],
+ ["TEN", 20],
+ ["TWENTY", 60],
+ ["ONE HUNDRED", 100]
+]
+```
+
+# --hints--
+
+`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` dovrebbe restituire un oggetto.
+
+```js
+assert.deepEqual(
+ Object.prototype.toString.call(
+ checkCashRegister(19.5, 20, [
+ ['PENNY', 1.01],
+ ['NICKEL', 2.05],
+ ['DIME', 3.1],
+ ['QUARTER', 4.25],
+ ['ONE', 90],
+ ['FIVE', 55],
+ ['TEN', 20],
+ ['TWENTY', 60],
+ ['ONE HUNDRED', 100]
+ ])
+ ),
+ '[object Object]'
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` dovrebbe restituire `{status: "OPEN", change: [["QUARTER", 0.5]]}`.
+
+```js
+assert.deepEqual(
+ checkCashRegister(19.5, 20, [
+ ['PENNY', 1.01],
+ ['NICKEL', 2.05],
+ ['DIME', 3.1],
+ ['QUARTER', 4.25],
+ ['ONE', 90],
+ ['FIVE', 55],
+ ['TEN', 20],
+ ['TWENTY', 60],
+ ['ONE HUNDRED', 100]
+ ]),
+ { status: 'OPEN', change: [['QUARTER', 0.5]] }
+);
+```
+
+`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` dovrebbe restituire `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`.
+
+```js
+assert.deepEqual(
+ checkCashRegister(3.26, 100, [
+ ['PENNY', 1.01],
+ ['NICKEL', 2.05],
+ ['DIME', 3.1],
+ ['QUARTER', 4.25],
+ ['ONE', 90],
+ ['FIVE', 55],
+ ['TEN', 20],
+ ['TWENTY', 60],
+ ['ONE HUNDRED', 100]
+ ]),
+ {
+ status: 'OPEN',
+ change: [
+ ['TWENTY', 60],
+ ['TEN', 20],
+ ['FIVE', 15],
+ ['ONE', 1],
+ ['QUARTER', 0.5],
+ ['DIME', 0.2],
+ ['PENNY', 0.04]
+ ]
+ }
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` dovrebbe restituire `{status: "INSUFFICIENT_FUNDS", change: []}`.
+
+```js
+assert.deepEqual(
+ checkCashRegister(19.5, 20, [
+ ['PENNY', 0.01],
+ ['NICKEL', 0],
+ ['DIME', 0],
+ ['QUARTER', 0],
+ ['ONE', 0],
+ ['FIVE', 0],
+ ['TEN', 0],
+ ['TWENTY', 0],
+ ['ONE HUNDRED', 0]
+ ]),
+ { status: 'INSUFFICIENT_FUNDS', change: [] }
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` dovrebbe restituire `{status: "INSUFFICIENT_FUNDS", change: []}`.
+
+```js
+assert.deepEqual(
+ checkCashRegister(19.5, 20, [
+ ['PENNY', 0.01],
+ ['NICKEL', 0],
+ ['DIME', 0],
+ ['QUARTER', 0],
+ ['ONE', 1],
+ ['FIVE', 0],
+ ['TEN', 0],
+ ['TWENTY', 0],
+ ['ONE HUNDRED', 0]
+ ]),
+ { status: 'INSUFFICIENT_FUNDS', change: [] }
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` dovrebbe restituire `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`.
+
+```js
+assert.deepEqual(
+ checkCashRegister(19.5, 20, [
+ ['PENNY', 0.5],
+ ['NICKEL', 0],
+ ['DIME', 0],
+ ['QUARTER', 0],
+ ['ONE', 0],
+ ['FIVE', 0],
+ ['TEN', 0],
+ ['TWENTY', 0],
+ ['ONE HUNDRED', 0]
+ ]),
+ {
+ status: 'CLOSED',
+ change: [
+ ['PENNY', 0.5],
+ ['NICKEL', 0],
+ ['DIME', 0],
+ ['QUARTER', 0],
+ ['ONE', 0],
+ ['FIVE', 0],
+ ['TEN', 0],
+ ['TWENTY', 0],
+ ['ONE HUNDRED', 0]
+ ]
+ }
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkCashRegister(price, cash, cid) {
+ let change;
+ return change;
+}
+
+checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]);
+```
+
+# --solutions--
+
+```js
+const denom = [
+ { name: "ONE HUNDRED", val: 100 },
+ { name: "TWENTY", val: 20 },
+ { name: "TEN", val: 10 },
+ { name: "FIVE", val: 5 },
+ { name: "ONE", val: 1 },
+ { name: "QUARTER", val: 0.25 },
+ { name: "DIME", val: 0.1 },
+ { name: "NICKEL", val: 0.05 },
+ { name: "PENNY", val: 0.01 },
+];
+
+function checkCashRegister(price, cash, cid) {
+ const output = { status: null, change: [] };
+ let change = cash - price;
+ const register = cid.reduce(
+ function (acc, curr) {
+ acc.total += curr[1];
+ acc[curr[0]] = curr[1];
+ return acc;
+ },
+ { total: 0 }
+ );
+ if (register.total === change) {
+ output.status = "CLOSED";
+ output.change = cid;
+ return output;
+ }
+ if (register.total < change) {
+ output.status = "INSUFFICIENT_FUNDS";
+ return output;
+ }
+ const change_arr = denom.reduce(function (acc, curr) {
+ let value = 0;
+ while (register[curr.name] > 0 && change >= curr.val) {
+ change -= curr.val;
+ register[curr.name] -= curr.val;
+ value += curr.val;
+ change = Math.round(change * 100) / 100;
+ }
+ if (value > 0) {
+ acc.push([curr.name, value]);
+ }
+ return acc;
+ }, []);
+ if (change_arr.length < 1 || change > 0) {
+ output.status = "INSUFFICIENT_FUNDS";
+ return output;
+ }
+ output.status = "OPEN";
+ output.change = change_arr;
+ return output;
+}
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md
new file mode 100644
index 00000000000..c69be5f3035
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md
@@ -0,0 +1,125 @@
+---
+id: aaa48de84e1ecc7c742e1124
+title: Crea un verificatore di palindromi
+challengeType: 5
+forumTopicId: 16004
+dashedName: build-a-palindrome-checker
+---
+
+# --description--
+
+Restituisci `true` se la stringa data è un palindromo. Altrimenti, restituisci `false`.
+
+Un
palindromo è una parola o una frase che è scritta allo stesso modo sia in avanti che all'indietro, ignorando punteggiatura, maiuscole e minuscole e spaziatura.
+
+**Nota:** Dovrai rimuovere **tutti i caratteri non alfanumerici** (punteggiatura, spazi e simboli) e trasformare tutto in maiuscolo o in minuscolo per verificare la presenza di palindromi.
+
+Passeremo stringhe con diversi formati, come `racecar`, `RaceCar` e `race CAR` tra le altre.
+
+Passeremo anche stringhe con simboli speciali, come `2A3*3a2`, `2A3 3a2` e `2_A3*3#A2`.
+
+# --hints--
+
+`palindrome("eye")` dovrebbe restituire un valore booleano.
+
+```js
+assert(typeof palindrome('eye') === 'boolean');
+```
+
+`palindrome("eye")` dovrebbe restituire `true`.
+
+```js
+assert(palindrome('eye') === true);
+```
+
+`palindrome("_eye")` dovrebbe restituire `true`.
+
+```js
+assert(palindrome('_eye') === true);
+```
+
+`palindrome("race car")` dovrebbe restituire `true`.
+
+```js
+assert(palindrome('race car') === true);
+```
+
+`palindrome("not a palindrome")` dovrebbe restituire `false`.
+
+```js
+assert(palindrome('not a palindrome') === false);
+```
+
+`palindrome("A man, a plan, a canal. Panama")` dovrebbe restituire `true`.
+
+```js
+assert(palindrome('A man, a plan, a canal. Panama') === true);
+```
+
+`palindrome("never odd or even")` dovrebbe restituire `true`.
+
+```js
+assert(palindrome('never odd or even') === true);
+```
+
+`palindrome("nope")` dovrebbe restituire `false`.
+
+```js
+assert(palindrome('nope') === false);
+```
+
+`palindrome("almostomla")` dovrebbe restituire `false`.
+
+```js
+assert(palindrome('almostomla') === false);
+```
+
+`palindrome("My age is 0, 0 si ega ym.")` dovrebbe restituire `true`.
+
+```js
+assert(palindrome('My age is 0, 0 si ega ym.') === true);
+```
+
+`palindrome("1 eye for of 1 eye.")` dovrebbe restituire `false`.
+
+```js
+assert(palindrome('1 eye for of 1 eye.') === false);
+```
+
+`palindrome("0_0 (: /-\ :) 0-0")` dovrebbe restituire `true`.
+
+```js
+assert(palindrome('0_0 (: /- :) 0-0') === true);
+```
+
+`palindrome("five|\_/|four")` dovrebbe restituire `false`.
+
+```js
+assert(palindrome('five|_/|four') === false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function palindrome(str) {
+ return true;
+}
+
+palindrome("eye");
+```
+
+# --solutions--
+
+```js
+function palindrome(str) {
+ var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');
+ var aux = string.split('');
+ if (aux.join('') === aux.reverse().join('')){
+ return true;
+ }
+
+ return false;
+}
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md
new file mode 100644
index 00000000000..45deb537a19
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md
@@ -0,0 +1,215 @@
+---
+id: a7f4d8f2483413a6ce226cac
+title: Crea un convertitore di numeri romani
+challengeType: 5
+forumTopicId: 16044
+dashedName: build-a-roman-numeral-converter
+---
+
+# --description--
+
+Converti il numero dato in un numero romano.
+
+| Numeri romani | Numeri arabi |
+| ------------- | ------------ |
+| M | 1000 |
+| CM | 900 |
+| D | 500 |
+| CD | 400 |
+| C | 100 |
+| XC | 90 |
+| L | 50 |
+| XL | 40 |
+| X | 10 |
+| IX | 9 |
+| V | 5 |
+| IV | 4 |
+| I | 1 |
+
+Tutti i numeri romani nei risultati dovrebbero essere in maiuscolo.
+
+# --hints--
+
+`convertToRoman(2)` dovrebbe restituire la stringa `II`.
+
+```js
+assert.deepEqual(convertToRoman(2), 'II');
+```
+
+`convertToRoman(3)` dovrebbe restituire la stringa `III`.
+
+```js
+assert.deepEqual(convertToRoman(3), 'III');
+```
+
+`convertToRoman(4)` dovrebbe restituire la stringa `IV`.
+
+```js
+assert.deepEqual(convertToRoman(4), 'IV');
+```
+
+`convertToRoman(5)` dovrebbe restituire la stringa `V`.
+
+```js
+assert.deepEqual(convertToRoman(5), 'V');
+```
+
+`convertToRoman(9)` dovrebbe restituire la stringa `IX`.
+
+```js
+assert.deepEqual(convertToRoman(9), 'IX');
+```
+
+`convertToRoman(12)` dovrebbe restituire la stringa `XII`.
+
+```js
+assert.deepEqual(convertToRoman(12), 'XII');
+```
+
+`convertToRoman(16)` dovrebbe restituire la stringa `XVI`.
+
+```js
+assert.deepEqual(convertToRoman(16), 'XVI');
+```
+
+`convertToRoman(29)` dovrebbe restituire la stringa `XXIX`.
+
+```js
+assert.deepEqual(convertToRoman(29), 'XXIX');
+```
+
+`convertToRoman(44)` dovrebbe restituire la stringa `XLIV`.
+
+```js
+assert.deepEqual(convertToRoman(44), 'XLIV');
+```
+
+`convertToRoman(45)` dovrebbe restituire la stringa `XLV`.
+
+```js
+assert.deepEqual(convertToRoman(45), 'XLV');
+```
+
+`convertToRoman(68)` dovrebbe restituire la stringa `LXVIII`
+
+```js
+assert.deepEqual(convertToRoman(68), 'LXVIII');
+```
+
+`convertToRoman(83)` dovrebbe restituire la stringa `LXXXIII`
+
+```js
+assert.deepEqual(convertToRoman(83), 'LXXXIII');
+```
+
+`convertToRoman(97)` dovrebbe restituire la stringa `XCVII`
+
+```js
+assert.deepEqual(convertToRoman(97), 'XCVII');
+```
+
+`convertToRoman(99)` dovrebbe restituire la stringa `XCIX`
+
+```js
+assert.deepEqual(convertToRoman(99), 'XCIX');
+```
+
+`convertToRoman(400)` dovrebbe restituire la stringa `CD`
+
+```js
+assert.deepEqual(convertToRoman(400), 'CD');
+```
+
+`convertToRoman(500)` dovrebbe restituire la stringa `D`
+
+```js
+assert.deepEqual(convertToRoman(500), 'D');
+```
+
+`convertToRoman(501)` dovrebbe restituire la stringa `DI`
+
+```js
+assert.deepEqual(convertToRoman(501), 'DI');
+```
+
+`convertToRoman(649)` dovrebbe restituire la stringa `DCXLIX`
+
+```js
+assert.deepEqual(convertToRoman(649), 'DCXLIX');
+```
+
+`convertToRoman(798)` dovrebbe restituire la stringa `DCCXCVIII`
+
+```js
+assert.deepEqual(convertToRoman(798), 'DCCXCVIII');
+```
+
+`convertToRoman(891)` dovrebbe restituire la stringa `DCCCXCI`
+
+```js
+assert.deepEqual(convertToRoman(891), 'DCCCXCI');
+```
+
+`convertToRoman(1000)` dovrebbe restituire la stringa `M`
+
+```js
+assert.deepEqual(convertToRoman(1000), 'M');
+```
+
+`convertToRoman(1004)` dovrebbe restituire la stringa `MIV`
+
+```js
+assert.deepEqual(convertToRoman(1004), 'MIV');
+```
+
+`convertToRoman(1006)` dovrebbe restituire la stringa `MVI`
+
+```js
+assert.deepEqual(convertToRoman(1006), 'MVI');
+```
+
+`convertToRoman(1023)` dovrebbe restituire la stringa `MXXIII`
+
+```js
+assert.deepEqual(convertToRoman(1023), 'MXXIII');
+```
+
+`convertToRoman(2014)` dovrebbe restituire la stringa `MMXIV`
+
+```js
+assert.deepEqual(convertToRoman(2014), 'MMXIV');
+```
+
+`convertToRoman(3999)` dovrebbe restituire la stringa `MMMCMXCIX`
+
+```js
+assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function convertToRoman(num) {
+ return num;
+}
+
+convertToRoman(36);
+```
+
+# --solutions--
+
+```js
+function convertToRoman(num) {
+ var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]];
+ var res = [];
+ ref.forEach(function(p) {
+ while (num >= p[1]) {
+ res.push(p[0]);
+ num -= p[1];
+ }
+ });
+ return res.join('');
+}
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md
new file mode 100644
index 00000000000..87971f86da5
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md
@@ -0,0 +1,217 @@
+---
+id: aff0395860f5d3034dc0bfc9
+title: Crea un validatore di numero telefonico
+challengeType: 5
+forumTopicId: 16090
+dashedName: build-a-telephone-number-validator
+---
+
+# --description--
+
+Restituisce `true` se la stringa passata ha il formato di un numero di telefono US valido.
+
+L'utente può compilare la casella di testo del modulo in qualsiasi modo scelga a condizione che abbia il formato di un numero US valido. Di seguito sono riportati esempi di formati validi per i numeri degli Stati Uniti (fare riferimento ai test di seguito per altre varianti):
+
+
555-555-5555
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
+
+Per questa sfida ti verrà presentata una stringa come `800-692-7753` o `8oo-six427676;laskdjf`. Il tuo compito è quello di convalidare o rifiutare il numero di telefono degli Stati Uniti in base a qualsiasi combinazione dei formati forniti sopra. Il codice di area è obbligatorio. Se viene fornito il codice paese, è necessario confermare che il codice sia `1`. Restituisci `true` se la stringa è un numero di telefono US valido; altrimenti restituisci `false`.
+
+# --hints--
+
+`telephoneCheck("555-555-5555")` dovrebbe restituire un booleano.
+
+```js
+assert(typeof telephoneCheck('555-555-5555') === 'boolean');
+```
+
+`telephoneCheck("1 555-555-5555")` dovrebbe restituire `true`.
+
+```js
+assert(telephoneCheck('1 555-555-5555') === true);
+```
+
+`telephoneCheck("1 (555) 555-5555")` dovrebbe restituire `true`.
+
+```js
+assert(telephoneCheck('1 (555) 555-5555') === true);
+```
+
+`telephoneCheck("5555555555")` dovrebbe restituire `true`.
+
+```js
+assert(telephoneCheck('5555555555') === true);
+```
+
+`telephoneCheck("555-555-5555")` dovrebbe restituire `true`.
+
+```js
+assert(telephoneCheck('555-555-5555') === true);
+```
+
+`telephoneCheck("(555)555-5555")` dovrebbe restituire `true`.
+
+```js
+assert(telephoneCheck('(555)555-5555') === true);
+```
+
+`telephoneCheck("1(555)555-5555")` dovrebbe restituire `true`.
+
+```js
+assert(telephoneCheck('1(555)555-5555') === true);
+```
+
+`telephoneCheck("555-5555")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('555-5555') === false);
+```
+
+`telephoneCheck("5555555")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('5555555') === false);
+```
+
+`telephoneCheck("1 555)555-5555")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('1 555)555-5555') === false);
+```
+
+`telephoneCheck("1 555 555 5555")` dovrebbe restituire `true`.
+
+```js
+assert(telephoneCheck('1 555 555 5555') === true);
+```
+
+`telephoneCheck("1 456 789 4444")` dovrebbe restituire `true`.
+
+```js
+assert(telephoneCheck('1 456 789 4444') === true);
+```
+
+`telephoneCheck("123**&!!asdf#")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('123**&!!asdf#') === false);
+```
+
+`telephoneCheck("55555555")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('55555555') === false);
+```
+
+`telephoneCheck("(6054756961)")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('(6054756961)') === false);
+```
+
+`telephoneCheck("2 (757) 622-7382")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('2 (757) 622-7382') === false);
+```
+
+`telephoneCheck("0 (757) 622-7382")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('0 (757) 622-7382') === false);
+```
+
+`telephoneCheck("-1 (757) 622-7382")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('-1 (757) 622-7382') === false);
+```
+
+`telephoneCheck("2 757 622-7382")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('2 757 622-7382') === false);
+```
+
+`telephoneCheck("10 (757) 622-7382")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('10 (757) 622-7382') === false);
+```
+
+`telephoneCheck("27576227382")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('27576227382') === false);
+```
+
+`telephoneCheck("(275)76227382")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('(275)76227382') === false);
+```
+
+`telephoneCheck("2(757)6227382")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('2(757)6227382') === false);
+```
+
+`telephoneCheck("2(757)622-7382")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('2(757)622-7382') === false);
+```
+
+`telephoneCheck("555)-555-5555")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('555)-555-5555') === false);
+```
+
+`telephoneCheck("(555-555-5555")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('(555-555-5555') === false);
+```
+
+`telephoneCheck("(555)5(55?)-5555")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('(555)5(55?)-5555') === false);
+```
+
+`telephoneCheck("55 55-55-555-5")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('55 55-55-555-5') === false);
+```
+
+`telephoneCheck("11 555-555-5555")` dovrebbe restituire `false`.
+
+```js
+assert(telephoneCheck('11 555-555-5555') === false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function telephoneCheck(str) {
+ return true;
+}
+
+telephoneCheck("555-555-5555");
+```
+
+# --solutions--
+
+```js
+var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/;
+
+function telephoneCheck(str) {
+ return re.test(str);
+}
+
+telephoneCheck("555-555-5555");
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md
new file mode 100644
index 00000000000..b90ddea7504
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md
@@ -0,0 +1,66 @@
+---
+id: 61695197ac34f0407e339882
+title: ステップ 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+これまでのプロジェクトで見てきたように、ウェブページは `DOCTYPE html` 宣言で始め、その後に続けて `html` 要素を置くようにしましょう。
+
+文書の先頭に `DOCTYPE html` 宣言を追加し、その後に `html` 要素を追加してください。 `html` 要素に `lang` 属性を設定し、値は `en` にしてください。
+
+# --hints--
+
+コードに `DOCTYPE` 参照を入れる必要があります。
+
+```js
+assert(code.match(/` を入力して、`DOCTYPE` 宣言を閉じる必要があります。
+
+```js
+assert(code.match(//gi));
+```
+
+`html` 要素は `lang` 属性が `en` の開始タグをもつ必要があります。
+
+```js
+assert(code.match(/
/gi));
+```
+
+`html` 要素には終了タグが必要です。
+
+```js
+assert(code.match(/<\/html\s*>/gi));
+```
+
+`DOCTYPE` 宣言は HTML の先頭にある必要があります。
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md
new file mode 100644
index 00000000000..725ed28b541
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md
@@ -0,0 +1,67 @@
+---
+id: 61695ab9f6ffe951c16d03dd
+title: ステップ 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+`html` 要素内に `head` 要素を 1 つネストしてください。 `head` 要素のすぐ後に、`body` 要素を 1 つ追加してください。
+
+# --hints--
+
+`head` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(//i));
+```
+
+`head` の終了タグが 1 つ必要です。
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+`body` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(//i));
+```
+
+`body` の終了タグが 1 つ必要です。
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+`head` 要素と `body` 要素は兄弟要素である必要があります。
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+`head` 要素は `html` 要素の中にある必要があります。
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+`body` 要素は `html` 要素の中にある必要があります。
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md
new file mode 100644
index 00000000000..a529deaa6d8
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md
@@ -0,0 +1,56 @@
+---
+id: 61695c4aad56f95497c19583
+title: ステップ 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+`title` 要素はページに関する追加情報を検索エンジンに提供するということを覚えておきましょう。 また、ページを開いている時のタイトルバーや、ページのタブに表示するテキストをブラウザーに伝えます。
+
+`head` 要素内に `title` 要素をネストし、テキストを `Colored Markers` としてください。
+
+# --hints--
+
+`title` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(//i));
+```
+
+`title` の終了タグが 1 つ必要です。
+
+```js
+assert(code.match(/<\/title\s*>/i));
+```
+
+プロジェクトには `Colored Markers` というタイトルが必要です。
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim()?.toLowerCase(), 'colored markers')
+```
+
+タイトルテキストについて、大文字小文字の区別とスペルに気をつけましょう。
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim(), 'Colored Markers');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+
+
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md
new file mode 100644
index 00000000000..8260f197e12
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md
@@ -0,0 +1,52 @@
+---
+id: 61695d1fbc003856628bf561
+title: ステップ 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+ブラウザーにページの文字エンコーディングについて指示するため、`charset` を `utf-8` に設定します。 `utf-8` とは、あらゆる言語のほぼすべての文字を含む世界共通の文字セットです。
+
+`head` 要素内に `meta` 要素をネストし、`charset` 属性を `utf-8` に設定してください。 `meta` 要素は自己閉じ要素なので、終了タグは必要ないことを覚えておきましょう。
+
+# --hints--
+
+`meta` 要素が 1 つ必要です。
+
+```js
+const meta = document.querySelectorAll('meta');
+assert(meta?.length === 1);
+```
+
+`meta` 要素は自己閉じ要素である必要があります。
+
+```js
+assert(code.match(/<\/meta>/i) === null);
+```
+
+`meta` 要素は `charset` 属性を `utf-8` に設定する必要があります。
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
+assert.exists(target);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+ Colored Markers
+
+--fcc-editable-region--
+
+
+
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md
new file mode 100644
index 00000000000..0a2e369bb7f
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md
@@ -0,0 +1,53 @@
+---
+id: 616965351e74d4689eb6de30
+title: ステップ 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+最後に、`viewport` の `` タグを使用して、ページの見た目があらゆるデバイス上で同じになるようにします。
+
+自己閉じ要素の `meta` 要素を、`head` 要素内に追加してください。 `name` 属性を `viewport` に、`content` 属性を `width=device-width, initial-scale=1.0` に設定してください。
+
+# --hints--
+
+2 つの `meta` 要素が必要です。
+
+```js
+const meta = document.querySelectorAll('meta');
+assert(meta?.length === 2);
+```
+
+新しい `meta` 要素は自己閉じ要素である必要があります。
+
+```js
+assert(code.match(/<\/meta>/i) === null);
+```
+
+新しい `meta` 要素の `name` 属性には `viewport` を、`content` 属性には `width=device-width, initial-scale=1.0` を設定する必要があります。
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0');
+assert.exists(target);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+ Colored Markers
+
+--fcc-editable-region--
+
+
+
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md
new file mode 100644
index 00000000000..9169d4a5fed
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md
@@ -0,0 +1,72 @@
+---
+id: 616968c2c94c8071b349c146
+title: ステップ 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+これでコンテンツをページに追加する準備ができました。
+
+`body` 要素内に `h1` 要素をネストし、テキストを `CSS Color Markers` としてください。
+
+# --hints--
+
+コードには `h1` 要素が 1 つ必要です。
+
+```js
+const title = document.querySelector('h1');
+assert.exists(title);
+```
+
+`h1` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(//i));
+```
+
+`h1` の終了タグが 1 つ必要です。
+
+```js
+assert(code.match(/<\/h1\s*>/i));
+```
+
+`h1` 要素は `body` 要素の中にある必要があります。
+
+```js
+assert(document.querySelector('h1')?.parentElement?.localName === 'body');
+```
+
+`h1` 要素は `CSS Color Markers` というテキストをもつ必要があります。
+
+```js
+const h1 = document.querySelector('h1');
+assert.equal(h1?.textContent?.trim()?.toLowerCase(), 'css color markers')
+```
+
+`h1` のテキストについて、大文字小文字の区別とスペルに気をつけましょう。
+
+```js
+const h1 = document.querySelector('h1');
+assert.equal(h1?.textContent?.trim(), 'CSS Color Markers');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Colored Markers
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md
new file mode 100644
index 00000000000..2d743bc8dea
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md
@@ -0,0 +1,65 @@
+---
+id: 61696ef7ac756c829f9e4048
+title: ステップ 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+このプロジェクトでは外部 CSS ファイルを使用してページのスタイルを設定します。 `styles.css` ファイルは既に作成してあります。 ですがそれを使えるようにするには、ページにリンクする必要があります。
+
+`head` 内に `link` 要素を 1 つネストしてください。 その `rel` 属性を `stylesheet` に、`href` 属性を `styles.css` に設定してください。
+
+# --hints--
+
+自己閉じ要素 `link` が 1 つ必要です。
+
+```js
+assert(document.querySelectorAll('link').length === 1);
+```
+
+`link` 要素は `head` 要素内にある必要があります。
+
+```js
+assert.exists(document.querySelector('head > link'));
+```
+
+`link` 要素には `rel` 属性があり、値が `stylesheet` に設定されている必要があります。
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+`link` 要素には `href` 属性があり、値が `styles.css` に設定されている必要があります。
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+ --fcc-editable-region--
+
+
+
+ Colored Markers
+
+ --fcc-editable-region--
+
+ CSS Color Markers
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md
new file mode 100644
index 00000000000..5f257035087
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md
@@ -0,0 +1,59 @@
+---
+id: 616971b3cd990186b66c99a1
+title: ステップ 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+外部 CSS ファイルが設定されたので、ページのスタイリングを始めることができます。
+
+ヒントとして、段落要素を対象にして右揃えにする方法は次の通りです:
+
+```css
+p {
+ text-align: right;
+}
+```
+
+`h1` 要素を対象とする新しい CSS ルールを作成し、その `text-align` プロパティを `center` に設定してください。
+
+# --hints--
+
+`h1` セレクターが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+`h1` 用の CSS ルールの `text-align` プロパティを `center` に設定する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Colored Markers
+
+
+
+ CSS Color Markers
+
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md
new file mode 100644
index 00000000000..e66d3d22f7c
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md
@@ -0,0 +1,71 @@
+---
+id: 616d3a67ccf800ad94ec89ae
+title: ステップ 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+ここで、最終的にカラーマーカーの形になるようスタイルを適用する要素をいくつか追加します。
+
+まずは、`body` 要素内に `div` 要素を 1 つ追加して、その `class` 属性を `container` に設定してください。 `div` 要素は `h1` 要素の下に置いてください。
+
+# --hints--
+
+`div` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(//i));
+```
+
+`div` の終了タグが 1 つ必要です。
+
+```js
+assert(code.match(/<\/div\s*>/i));
+```
+
+`div` 要素は `body` 要素の中にある必要があります。
+
+```js
+assert(document.querySelector('div')?.parentElement?.localName === 'body');
+```
+
+`div` 要素は `h1` 要素の後に置く必要があります。
+
+```js
+assert.exists(document.querySelector('h1 + div'));
+```
+
+`div` 要素の `class` 属性を `container` に設定する必要があります。
+
+```js
+assert(document.querySelector('div')?.classList?.contains('container'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Colored Markers
+
+
+--fcc-editable-region--
+
+ CSS Color Markers
+
+--fcc-editable-region--
+
+```
+
+```css
+h1 {
+ text-align: center;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md
new file mode 100644
index 00000000000..b2ef8d94c49
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md
@@ -0,0 +1,66 @@
+---
+id: 616d47bc9eedc4bc7f621bec
+title: ステップ 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+次に、`div` 内に別の `div` 要素を追加し、それに `marker` のクラスを設定してください。
+
+# --hints--
+
+新しい `div` 要素に開始タグが必要です。
+
+```js
+assert([...code.matchAll(//gi)][1]);
+```
+
+新しい `div` 要素に終了タグが必要です。
+
+```js
+assert([...code.matchAll(/<\/div\s*>/gi)][1]);
+```
+
+クラスが `container` の `div` の中に、新しい `div` 要素をネストする必要があります。
+
+```js
+assert(document.querySelector('.container')?.children[0]?.localName === 'div');
+```
+
+新しい `div` 要素のクラスを `marker` に設定する必要があります。
+
+```js
+const containerChildren = [...document.querySelector('.container')?.children];
+assert(containerChildren.every(child => child.classList?.contains('marker')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Colored Markers
+
+
+--fcc-editable-region--
+
+ CSS Color Markers
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+h1 {
+ text-align: center;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md
new file mode 100644
index 00000000000..ae85bfc2fd6
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md
@@ -0,0 +1,68 @@
+---
+id: 616d4a84b756d9c4b8255093
+title: ステップ 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+ではページに色を追加しましょう。 要素に色をつける方法の 1 つに、`black` や `cyan`、`yellow` のような色キーワードを使う方法があることを思い出してください。
+
+ヒントとして、クラス `freecodecamp` を対象とする方法は次の通りです:
+
+```css
+.freecodecamp {
+
+}
+```
+
+クラス `marker` を対象とする新しい CSS ルールを作成し、`background-color` プロパティを `red` に設定してください。
+
+# --hints--
+
+クラス `marker` を対象とするクラスセレクターを作成する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker'));
+```
+
+`.marker` 用の CSS ルールの `background-color` プロパティを `red` に設定する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor === 'red');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Colored Markers
+
+
+
+ CSS Color Markers
+
+
+
+```
+
+```css
+h1 {
+ text-align: center;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md
new file mode 100644
index 00000000000..d0dd1716bec
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md
@@ -0,0 +1,62 @@
+---
+id: 616d50b93ba424d6282c99cf
+title: ステップ 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+マーカーに色がついていないことに注目してください。 背景色は実は適用されていますが、マーカーの `div` 要素が空なので、デフォルトの状態では高さがありません。
+
+`.marker` CSS ルール内で、`width` プロパティを `200px` に、`height` プロパティを `25px` に設定してください。
+
+# --hints--
+
+`.marker` CSS ルールの `width` プロパティを `200px` に設定する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px');
+```
+
+`.marker` CSS ルールの `height` プロパティを `25px` に設定する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Colored Markers
+
+
+
+ CSS Color Markers
+
+
+
+```
+
+```css
+h1 {
+ text-align: center;
+}
+
+--fcc-editable-region--
+.marker {
+ background-color: red;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
index 3d0e6596472..1109e71cf76 100644
--- a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
+++ b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
@@ -182,21 +182,21 @@ const el = document.getElementById('number-label')
assert(!!el && el.tagName === 'LABEL')
```
-O elemento `#name-label` não deve estar vazio
+`#name-label` deve conter um texto que descreva a entrada.
```js
const el = document.getElementById('name-label')
assert(!!el && el.innerText.length > 0)
```
-O elemento `#email-label` não deve estar vazio
+`#email-label` deve conter um texto que descreva a entrada.
```js
const el = document.getElementById('email-label')
assert(!!el && el.innerText.length > 0)
```
-O elemento `#number-label` não deve estar vazio
+`#number-label` deve conter um texto que descreva a entrada.
```js
const el = document.getElementById('number-label')
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
index 947a3f8ec1a..3acca2d12a0 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
@@ -14,40 +14,40 @@ Você tem uma variável `celsius` representando uma temperatura em Celsius. Use
# --hints--
-`convertToF(0)` deve retornar um número
+`convertCtoF(0)` deve retornar um número
```js
-assert(typeof convertToF(0) === 'number');
+assert(typeof convertCtoF(0) === 'number');
```
-`convertToF(-30)` deve retornar um valor de `-22`
+`convertCtoF(-30)` deve retornar um valor de `-22`
```js
-assert(convertToF(-30) === -22);
+assert(convertCtoF(-30) === -22);
```
-`convertToF(-10)` deve retornar um valor de `14`
+`convertCtoF(-10)` deve retornar um valor de `14`
```js
-assert(convertToF(-10) === 14);
+assert(convertCtoF(-10) === 14);
```
-`convertToF(0)` deve retornar um valor de `32`
+`convertCtoF(0)` deve retornar um valor de `32`
```js
-assert(convertToF(0) === 32);
+assert(convertCtoF(0) === 32);
```
-`convertToF(20)` deve retornar um valor de `68`
+`convertCtoF(20)` deve retornar um valor de `68`
```js
-assert(convertToF(20) === 68);
+assert(convertCtoF(20) === 68);
```
-`convertToF(30)` deve retornar um valor de `86`
+`convertCtoF(30)` deve retornar um valor de `86`
```js
-assert(convertToF(30) === 86);
+assert(convertCtoF(30) === 86);
```
# --seed--
@@ -55,22 +55,21 @@ assert(convertToF(30) === 86);
## --seed-contents--
```js
-function convertToF(celsius) {
+function convertCtoF(celsius) {
let fahrenheit;
return fahrenheit;
}
-convertToF(30);
+convertCtoF(30);
```
# --solutions--
```js
-function convertToF(celsius) {
+function convertCtoF(celsius) {
let fahrenheit = celsius * 9/5 + 32;
-
return fahrenheit;
}
-convertToF(30);
+convertCtoF(30);
```
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md
index abddf8977d5..276efb3e7af 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md
@@ -38,7 +38,7 @@ Crie `myStr` a partir das strings `This is the start.` e `This is the end.` usan
assert(/start\. This/.test(myStr));
```
-`myStr` deve ter o valor da string `This is the start. This is the end.`
+`myStr` deve ter como valor a string `This is the start. This is the end.`
```js
assert(myStr === 'This is the start. This is the end.');
diff --git a/curriculum/challenges/portuguese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md b/curriculum/challenges/portuguese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
index dfb463c04f0..81e236d1447 100644
--- a/curriculum/challenges/portuguese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
+++ b/curriculum/challenges/portuguese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
@@ -14,7 +14,7 @@ Trabalhar nesses desafios vai fazer com que você escreva seu código usando um
- Use nosso projeto inicial do Replit para completar esses desafios.
- Use um construtor de site de sua escolha para completar o projeto. Certifique-se de incorporar todos os arquivos do nosso repositório no GitHub.
-Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`. Como opção, envie também um link para o código-fonte do projeto no campo `GitHub Link`.
+Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`.
O arquivo `package.json` é o centro de qualquer projeto do Node.js ou pacote do npm. Ele armazena informações sobre seu projeto, de modo semelhante ao que a seção <head> de um documento HTML usa para descrever o conteúdo de uma página da web. Ele consiste em um único objeto JSON, onde as informações são armazenadas em pares de chave-valor. Existem apenas dois campos obrigatórios: "name" e "version". Porém, é uma boa prática fornecer informações adicionais sobre o seu projeto que possam ser úteis para futuros usuários ou mantenedores.
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
index 4c6b79c22a8..54b4f6f0661 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
@@ -182,21 +182,21 @@ const el = document.getElementById('number-label')
assert(!!el && el.tagName === 'LABEL')
```
-O elemento `#name-label` não deve estar vazio.
+`#name-label` deve conter um texto que descreva a entrada.
```js
const el = document.getElementById('name-label')
assert(!!el && el.innerText.length > 0)
```
-O elemento `#email-label` não deve estar vazio.
+`#email-label` deve conter um texto que descreva a entrada.
```js
const el = document.getElementById('email-label')
assert(!!el && el.innerText.length > 0)
```
-O elemento `#number-label` não deve estar vazio.
+`#number-label` deve conter um texto que descreva a entrada.
```js
const el = document.getElementById('number-label')
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index 8128bca979e..7f869447276 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
O elemento `p` é usado para criar um parágrafo de texto nos sites. Crie um elemento `p` abaixo do elemento `h2` e dê a ele o seguinte texto:
-`Click here to view more cat photos`
+`Click here to view more cat photos.`
# --hints--
@@ -25,7 +25,7 @@ Seu elemento `p` deve ter uma tag de fechamento. As tags de fechamento têm um c
assert(code.match(/<\/p\>/));
```
-O texto do seu elemento `p` deve ser `Click here to view more cat photos.` Você omitiu o texto ou tem um erro de digitação.
+O texto do elemento `p` deve ser `Click here to view more cat photos.` Você omitiu o texto ou tem um erro de digitação.
```js
const extraSpacesRemoved = document
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index eae6cc48bb0..ef822a715c6 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -48,7 +48,7 @@ O novo botão de opção deve ter um atributo `id`. Verifique se há um espaço
assert($('input')[1].hasAttribute('id'));
```
-O novo elemento de botão de opção deve ter o atributo `id` com o valor `outdoor`. Você omitiu o valor ou tem um erro de digitação. Lembre-se de que os valores dos atributos devem estar cercados com aspas.
+O novo botão de opção deve ter o atributo `id` com o valor `outdoor`. Você omitiu o valor ou tem um erro de digitação. Lembre-se de que os valores dos atributos devem estar cercados com aspas.
```js
assert($('input')[1].id.match(/^outdoor$/));
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
index c73691d88a7..12738cd8c1c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
@@ -7,7 +7,7 @@ dashedName: step-26
# --description--
-Para terminar este `fieldset`, vincule o texto `terms and conditions` para a seguinte localização:
+Para terminar este `fieldset`, vincule o texto `terms and conditions` no terceiro `label` à seguinte localização:
```md
https://www.freecodecamp.org/news/terms-of-service/
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
new file mode 100644
index 00000000000..64e8ce12675
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md
@@ -0,0 +1,43 @@
+---
+id: 5f33071498eb2472b87ddee4
+title: Крок 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+Як ви дізналися в останніх кількох кроках Cat Photo App, існує базова структура, яка необхідна для початку створення вебсторінки.
+
+Додайте теґ `` та елемент `html` з атрибутом `lang` зі значенням `en`.
+
+# --hints--
+
+Ви повинні мати декларацію `DOCTYPE`.
+
+```js
+assert(code.match(//i));
+```
+
+Ви повинні мати початковий теґ `` з атрибутом `lang` зі значенням `en`.
+
+```js
+assert(code.match(//gi));
+```
+
+Ви повинні мати кінцевий теґ ``. Пам'ятайте, що кінцеві теґи мають `/`, що супроводжує початкову дужку `<`.
+
+```js
+assert(code.match(/<\/html>/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3313e74582ad9d063e3a38.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3313e74582ad9d063e3a38.md
new file mode 100644
index 00000000000..1cd0ee29285
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3313e74582ad9d063e3a38.md
@@ -0,0 +1,61 @@
+---
+id: 5f3313e74582ad9d063e3a38
+title: Крок 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Додайте елемент `head` в межах елемента `html`, щоб можна було додати елемент `title`. Текст елемента `title` повинен бути `Cafe Menu`.
+
+# --hints--
+
+Ви повинні мати початковий теґ ``.
+
+```js
+assert(code.match(//i));
+```
+
+Ви повинні мати кінцевий теґ ``.
+
+```js
+assert(code.match(//i));
+```
+
+Ви повинні мати початковий теґ ``.
+
+```js
+assert(code.match(/<title>/i));
+```
+
+Ви повинні мати кінцевий теґ ``.
+
+```js
+assert(code.match(/<\/title>/i));
+```
+
+Ваш елемент `title` повинен бути вкладеним в елементі `head`.
+
+```js
+assert(code.match(/\s*.*<\/title>\s*<\/head>/si));
+```
+
+Ваш елемент `title` повинен мати текст `Cafe Menu`. Можливо, доведеться перевірити написання.
+
+```js
+assert.match(document.querySelector('title')?.innerText, /Cafe Menu/i);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+
+--fcc-editable-region--
+</html>
+```
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
new file mode 100644
index 00000000000..e2c36428142
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -0,0 +1,47 @@
+---
+id: 5f331e55dfab7a896e53c3a1
+title: Крок 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+`title` є одним з елементів, які надають додаткову інформацію, яку не видно на вебсторінці, але є важливою для пошукових систем або для того, як відображається сторінка.
+
+Всередині елемента the `head` вкладіть елемент `meta` з атрибутом `charset` зі значенням `utf-8`, щоб повідомити браузеру як кодувати символи сторінки. Зауважте, що елементи `meta` є самозакривними.
+
+# --hints--
+
+Ви повинні мати теґ `meta`.
+
+```js
+assert(code.match(/<meta.*?\/?>/is));
+```
+
+Ваш теґ `meta` повинен містити атрибут `charset`.
+
+```js
+assert(code.match(/<meta charset=/i));
+```
+
+Ваш атрибут `charset` повинен мати значення `utf-8`.
+
+```js
+assert(code.match(/charset=('|")utf-8\1/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+ <head>
+ <title>Cafe Menu
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md
new file mode 100644
index 00000000000..30e34099a9f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md
@@ -0,0 +1,54 @@
+---
+id: 5f3326b143638ee1a09ff1e3
+title: Крок 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Щоб підготуватись до створення вмісту, додайте елемент `body` під елементом `head`.
+
+# --hints--
+
+Ви повинні мати початковий теґ ``.
+
+```js
+assert(code.match(//i));
+```
+
+У вас має бути кінцевий теґ ``.
+
+```js
+assert(code.match(/<\/body>/i));
+```
+
+Ви не повинні змінювати наявний елемент `head`. Переконайтеся, що не видалили кінцевий теґ.
+
+```js
+assert(code.match(//i));
+assert(code.match(/<\/head>/i));
+```
+
+Ваш елемент `body` повинен йти після елемента `head`.
+
+```js
+assert(code.match(/<\/head>[.\n\s]*/im));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+ Cafe Menu
+
+--fcc-editable-region--
+
+```
+
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
new file mode 100644
index 00000000000..da6f6ccbd58
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
@@ -0,0 +1,60 @@
+---
+id: 5f33294a6af5e9188dbdb8f3
+title: Крок 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Назва кафе – `CAMPER CAFE`. Додайте елемент `h1` в межах елемента `body`. Напишіть назву кафе великими літерами, щоб вона виділялась.
+
+# --hints--
+
+Ви повинні мати кінцевий теґ ``.
+
+```js
+assert(code.match(//i));
+```
+
+Ви повинні мати кінцевий теґ `
`.
+
+```js
+assert(code.match(/<\/h1>/i));
+```
+
+Ви не повинні змінювати наявний елемент `body`.
+
+```js
+assert($('body').length === 1);
+```
+
+Ваш елемент `h1` повинен бути вкладеним в елементі `body`.
+
+```js
+assert($('h1')[0].parentElement.tagName === "BODY");
+```
+
+Ваш елемент `h1` повинен мати текст `CAMPER CAFE`.
+
+```js
+assert(code.match(/CAMPER CAFE<\/h1>/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
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
new file mode 100644
index 00000000000..47ef6108d0f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
@@ -0,0 +1,62 @@
+---
+id: 5f332a88dc25a0fd25c7687a
+title: Крок 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Щоб відвідувачі знали, що кафе було засновано в 2020, додайте елемент `p` під елемент `h1` з текстом `Est. 2020`.
+
+# --hints--
+
+Ви повинні мати початковий теґ `
`.
+
+```js
+assert(code.match(/
/i));
+```
+
+Ви повинні мати кінцевий теґ `
`.
+
+```js
+assert(code.match(/<\/p>/i));
+```
+
+Ви не повинні змінювати наявний елемент `h1`. Переконайтеся, що не видалили кінцевий теґ.
+
+```js
+assert($('h1').length === 1);
+```
+
+Ваш елемент `p` повинен бути під елементом `h1`.
+
+```js
+assert($('p')[0].previousElementSibling.tagName === 'H1');
+```
+
+Ваш елемент `p` повинен мати текст `Est. 2020`.
+
+```js
+assert(code.match(/Est. 2020<\/p>/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+
+
+--fcc-editable-region--
+ CAMPER CAFE
+--fcc-editable-region--
+
+
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
new file mode 100644
index 00000000000..df4c93c8329
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
@@ -0,0 +1,59 @@
+---
+id: 5f332b23c2045fb843337579
+title: Крок 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Оскільки доданий в минулому кроці елемент `p` надає додаткову інформацію про кафе, вкладіть елементи `h1` та `p` в елемент `header`.
+
+# --hints--
+
+Ви повинні мати початковий теґ ``.
+
+```js
+assert(code.match(//i));
+```
+
+Ви повинні мати кінцевий теґ ``.
+
+```js
+assert(code.match(/<\/header>/i));
+```
+
+Ваш елемент `h1` повинен бути вкладеним в елементі `header`.
+
+```js
+const header = document.querySelectorAll('header')[0];
+assert(header.children[0].tagName === 'H1');
+```
+
+Ваш елемент `p` повинен бути вкладеним в елементі `header`.
+
+```js
+const header = document.querySelectorAll('header')[0];
+assert(header.children[1].tagName === "P");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+
+
+--fcc-editable-region--
+ CAMPER CAFE
+ Est. 2020
+--fcc-editable-region--
+
+
+```
+
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
new file mode 100644
index 00000000000..e3ccd3476a3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md
@@ -0,0 +1,59 @@
+---
+id: 5f33310c1851c6c4da013250
+title: Крок 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Час додати трішки вмісту меню. Додайте елемент `main` під існуючим елементом `header`. В кінцевому підсумку там буде ціна напоїв та десертів, які пропонує кафе.
+
+# --hints--
+
+Ваш код повинен мати початковий теґ ``.
+
+```js
+assert(code.match(//i));
+```
+
+Ваш код повинен мати кінцевий теґ ``.
+
+```js
+assert(code.match(/<\/main>/i));
+```
+
+Ви не повинні змінювати наявний елемент `header`. Переконайтеся, що випадково не видалили кінцевий теґ.
+
+```js
+assert($('header').length === 1);
+```
+
+Ваш теґ `main` повинен йти після теґу `header`.
+
+```js
+const main = document.querySelectorAll('main')[0];
+assert(main.previousElementSibling.tagName === 'HEADER');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+
+
+--fcc-editable-region--
+
+ CAMPER CAFE
+ Est. 2020
+
+--fcc-editable-region--
+
+
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
new file mode 100644
index 00000000000..89d3489efe1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
@@ -0,0 +1,71 @@
+---
+id: 5f344f9c805cd193c33d829c
+title: Крок 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Ви можете додати стиль до елемента, вказавши його в елементі `style` та встановивши властивості наступним чином:
+
+```css
+element {
+ property: value;
+}
+```
+
+Зцентруйте свій елемент `h1`, встановивши значення властивості `text-align` на `center`.
+
+# --hints--
+
+Ви повинні мати селектор `h1` в елементі `style`.
+
+```js
+const hasSelector = new __helpers.CSSHelp(document).getStyle('h1');
+assert(hasSelector);
+```
+
+Ваша властивість `text-align` повинна мати значення `center`.
+
+```js
+const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'center');
+assert(hasTextAlign);
+```
+
+Ваш селектор `h1` повинен встановлювати властивість `text-align` на `center`.
+
+```js
+const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
+assert(h1TextAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
new file mode 100644
index 00000000000..9448e341360
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
@@ -0,0 +1,57 @@
+---
+id: 5f344fad8bf01691e71a30eb
+title: Крок 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+До цього моменту ви мали обмеження на презентацію та вигляд створеного вмісту. Щоб взяти все під контроль, додайте елемент `style` в межах елемента `head`.
+
+# --hints--
+
+Ваш код повинен мати початковий теґ ``.
+
+```js
+assert(code.match(/<\/style\s*>/));
+```
+
+Ваш елемент `style` повинен бути вкладеним в елементі `head`.
+
+```js
+assert(code.match(/[\w\W\s]*[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+ Cafe Menu
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
new file mode 100644
index 00000000000..05df8d0604d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
@@ -0,0 +1,70 @@
+---
+id: 5f344fbc22624a2976425065
+title: Крок 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Створіть елемент `h2` в елементі `section` та надайте йому текст `Coffee`.
+
+# --hints--
+
+Ви повинні мати початковий теґ ``.
+
+```js
+assert(code.match(//i));
+```
+
+Ви повинні мати кінцевий теґ `
`.
+
+```js
+assert(code.match(/<\/h2\s*>/i));
+```
+
+Ви не повинні змінювати наявний елемент `section`. Переконайтеся, що не видалили кінцевий теґ.
+
+```js
+assert($('section').length === 1);
+```
+
+Ваш елемент `h2` повинен бути в межах елемента `section`.
+
+```js
+const h2 = document.querySelector('h2');
+assert(h2.parentElement.tagName === 'SECTION');
+```
+
+Ваш елемент `h2` повинен мати текст `Coffee`.
+
+```js
+const h2 = document.querySelector('h2');
+assert(h2.innerText === 'Coffee');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+```
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
new file mode 100644
index 00000000000..1b49dc9a474
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
@@ -0,0 +1,61 @@
+---
+id: 5f344fc1520b6719f2e35605
+title: Крок 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+В меню буде дві секції: для кави та десертів. Додайте елемент `section` в межах елемента `main`, щоб мати місце для розміщення всіх доступних напоїв.
+
+# --hints--
+
+Ви повинні мати початковий теґ ``.
+
+```js
+assert(code.match(//i));
+```
+
+Ви повинні мати кінцевий теґ ``.
+
+```js
+assert(code.match(/<\/section\s*>/i));
+```
+
+Ви не повинні змінювати наявний елемент `main`. Переконайтеся, що не видалили кінцевий теґ.
+
+```js
+assert($('main').length === 1);
+```
+
+Ваш елемент `section` повинен бути в межах елемента `main`.
+
+```js
+const main = document.querySelectorAll('main')?.[0];
+assert(main.children[0].tagName === 'SECTION');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
new file mode 100644
index 00000000000..f63c4664210
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
@@ -0,0 +1,73 @@
+---
+id: 5f3477ae34c1239cafe128be
+title: Крок 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Тепер у вас є три селектори типу з такою ж стилізацією. Ви можете додати таку ж групу стилів до багатьох елементів, створюючи список селекторів. Кожен селектор розділений комами, ось так:
+
+```css
+selector1, selector2 {
+ property: value;
+}
+```
+
+Видаліть три наявні селектори типу та замініть їх одним списком селектора, що центрує текст елементів `h1`, `h2` та `p`.
+
+# --hints--
+
+Ви повинні використати один селектор типу для всіх трьох елементів `h1, h2, p`. Переконайтеся, що саме такий порядок.
+
+```js
+const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p');
+assert(hasSelector);
+```
+
+Ви повинні мати лише один селектор в елементі `style`.
+
+```js
+const selectors = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.selectorText)
+assert(selectors.length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
new file mode 100644
index 00000000000..2b866db3aaa
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
@@ -0,0 +1,67 @@
+---
+id: 5f3477ae8466a9a3d2cc953c
+title: Крок 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Оскільки тепер ви маєте CSS в файлі `styles.css`, вилучіть елемент `style` та весь його вміст. Текст, що був зцентрований, зміститься ліворуч одразу після вилучення.
+
+# --hints--
+
+Ви не повинні мати жодних теґів `style` в своєму коді.
+
+```js
+assert(!code.match(/style/i));
+```
+
+Ви не повинні мати селекторів CSS в файлі HTML.
+
+```js
+(getUserInput) => {
+ const html = getUserInput('editableContents');
+ assert(!html.includes('style'));
+ assert(!html.includes('text-align'));
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+ Cafe Menu
+
+
+--fcc-editable-region--
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+```
+
+```css
+h1, h2, p {
+ text-align: center;
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
new file mode 100644
index 00000000000..cb5808653ea
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
@@ -0,0 +1,87 @@
+---
+id: 5f3477ae9675db8bb7655b30
+title: Крок 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+В попередніх кроках ви використовували селектор типу для стилізації елемента `h1`. Зцентруйте елементи `h2` та `p` з новим селектором типу для кожного.
+
+# --hints--
+
+Ви не повинні змінювати наявний селектор `h1`.
+
+```js
+const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
+assert(hasH1);
+```
+
+Ви повинні додати новий селектор `h2`.
+
+```js
+const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
+assert(hasH2);
+```
+
+Ви повинні додати новий селектор `p`.
+
+```js
+const hasP = new __helpers.CSSHelp(document).getStyle('p');
+assert(hasP);
+```
+
+Ваш елемент `h1` повинен мати `text-align` зі значенням `center`.
+
+```js
+const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
+assert(h1TextAlign === 'center');
+```
+
+Ваш елемент `h2` повинен мати `text-align` зі значенням `center`.
+
+```js
+const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
+assert(h2TextAlign === 'center');
+```
+
+Ваш елемент `p` повинен мати `text-align` зі значенням `center`.
+
+```js
+const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
+assert(pTextAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+```
+
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
new file mode 100644
index 00000000000..42a723752ac
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
@@ -0,0 +1,77 @@
+---
+id: 5f3477aefa51bfc29327200b
+title: Крок 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Ви стилізували три елементи, прописавши CSS всередині теґів `style`. Це працює, але оскільки буде ще багато стилів, краще розмістити всі стилі в окремому файлі та посилатися на нього.
+
+Ми створили окремий файл `styles.css` для вас та перемкнули вигляд редактора. Ви можете мінятись між файлами завдяки вкладкам зверху редактора.
+
+Розпочніть з перезапису створених стилів в файл `styles.css`. Переконайтесь, що вилучили початковий та кінцевий теґи `style`.
+
+# --hints--
+
+Ваш файл `styles.css` повинен мати селектор типу `h1, h2, p`.
+
+```js
+(getUserInput) => {
+ assert(getUserInput('editableContents').replace(/[\s\n]*/g, "").match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/));
+}
+```
+
+Ваш селектор повинен встановлювати властивість `text-align` на `center`.
+
+```js
+(getUserInput) => {
+ assert(getUserInput('editableContents').match(/text-align:\s*center;?/));
+}
+```
+
+Ви повинні мати лише один селектор.
+
+```js
+(getUserInput) => {
+ assert(getUserInput('editableContents').match(/text-align:\s*center;?/)?.length === 1);
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
new file mode 100644
index 00000000000..9d9e771aab1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -0,0 +1,88 @@
+---
+id: 5f3477cb2e27333b1ab2b955
+title: Крок 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Тепер потрібно пов'язати файл `styles.css`, щоб стилі знову були застосовані. Вкладіть самозакривний елемент `link` в елемент `head`. Надайте йому атрибут `rel` значення `stylesheet` та атрибут `href` значення `styles.css`.
+
+# --hints--
+
+Ваш код повинен мати елемент `link`.
+
+```js
+const link = document.querySelector('link');
+assert(link);
+```
+
+Ви не повинні змінювати наявний елемент `head`. Переконайтеся, що не видалили кінцевий теґ.
+
+```js
+assert($('head').length === 1);
+```
+
+Ви повинні мати один самозакривний елемент `link`.
+
+```js
+const link = document.querySelectorAll('link');
+assert(link.length === 1);
+```
+
+Ваш елемент `link` повинен бути в межах елемента `head`.
+
+```js
+const link = document.querySelector('head > link');
+assert(link);
+```
+
+Ваш елемент `link` повинен містити атрибут `rel` зі значенням `stylesheet`.
+
+```js
+const link = document.querySelector('link')
+const rel = link.getAttribute('rel')
+assert(rel == `stylesheet`)
+```
+
+Ваш елемент `link` повинен містити атрибут `href` зі значенням `styles.css`.
+
+```js
+const link = document.querySelector('link')
+assert(link.dataset.href == 'styles.css')
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+ Cafe Menu
+
+--fcc-editable-region--
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+```
+
+```css
+h1, h2, p {
+ text-align: center;
+}
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
new file mode 100644
index 00000000000..c551811ca31
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
@@ -0,0 +1,70 @@
+---
+id: 5f3477cb303c5cb61b43aa9b
+title: Крок 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Текст знову зцентрований, отож посилання на файл CSS працює. Додайте інший стиль до файлу, що змінює властивість `background-color` на `brown` для елемента `body`.
+
+# --hints--
+
+Ви повинні використати селектор `body`.
+
+```js
+const hasBody = new __helpers.CSSHelp(document).getStyle('body');
+assert(hasBody);
+```
+
+Ви повинні встановити властивість `background-color` на `brown`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
+assert(hasBackground);
+```
+
+Ваш елемент `body` повинен мати фон зі значенням `brown`.
+
+```js
+const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
+assert(bodyBackground === 'brown');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+h1, h2, p {
+ text-align: center;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
new file mode 100644
index 00000000000..16c2085be52
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
@@ -0,0 +1,72 @@
+---
+id: 5f3477cbcb6ba47918c1da92
+title: Крок 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Щоб стилізація сторінки була схожою на мобільному пристрої та комп'ютері, потрібно додати елемент `meta` зі спеціальним атрибутом `content`.
+
+Додайте наступне в межах елемента `head`:
+
+```html
+
+```
+
+# --hints--
+
+Ваш код повинен мати два елементи `meta`.
+
+```js
+assert(code.match(//g).length === 2);
+```
+
+Ваш елемент `meta` повинен мати атрибут `name` зі значенням `viewport`.
+
+```js
+const meta = $('meta');
+assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/));
+```
+
+Ваш елемент `meta` повинен мати атрибут `content` зі значенням `width=device-width, initial-scale=1.0`.
+
+```js
+const meta = $('meta');
+assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+ Cafe Menu
+
+
+--fcc-editable-region--
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+```
+
+```css
+h1, h2, p {
+ text-align: center;
+}
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
new file mode 100644
index 00000000000..2cc177458ff
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
@@ -0,0 +1,64 @@
+---
+id: 5f34a1fd611d003edeafd681
+title: Крок 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+На цьому коричневому фоні важко читати текст. Змініть колір фону елемента `body` на `burlywood` таким чином, щоб був колір та легко читався текст.
+
+# --hints--
+
+Ви повинні встановити властивість `background-color` на `burlywood`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
+assert(hasBackground);
+```
+
+Ваш елемент `body` повинен мати фон `burlywood`.
+
+```js
+const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
+assert(bodyBackground === 'burlywood');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+body {
+ background-color: brown;
+}
+--fcc-editable-region--
+h1, h2, p {
+ text-align: center;
+}
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
new file mode 100644
index 00000000000..09075710d41
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -0,0 +1,74 @@
+---
+id: 5f356ed60785e1f3e9850b6e
+title: Крок 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Тепер легко побачити, що текст зцентрований всередині елемента `div`. Наразі ширина елемента `div` вказана в пікселях (`px`). Змініть значення властивості `width` на `80%`, щоб ширина батьківського елемента була 80% (`body`).
+
+# --hints--
+
+Ви повинні встановити властивість `width` на `80%`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
+assert(hasWidth);
+```
+
+Ви не повинні мати властивість `width` зі значенням `300px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
+assert(!hasWidth);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
`.
+
+```js
+assert($('div').length === 1);
+```
+
+Ваш елемент `div` повинен мати клас `menu`.
+
+```js
+assert($('div').attr('class').includes('menu'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
Cafe Menu
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
new file mode 100644
index 00000000000..2d43926bb03
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -0,0 +1,77 @@
+---
+id: 5f356ed6cf6eab5f15f5cfe6
+title: Крок 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Переважно елемент `div` використовують для дизайну розкладки на відміну від вже використаних вами елементів. Додайте елемент `div` всередині елемента `body`, а потім перемістіть всі інші елементи всередину нового `div`.
+
+# --hints--
+
+Ви повинні мати початковий теґ `
`.
+
+```js
+assert(code.match(/
/i));
+```
+
+Ви повинні мати кінцевий теґ `
`.
+
+```js
+assert(code.match(/<\/div>/i));
+```
+
+Ви не повинні змінювати наявний елемент `body`. Переконайтеся, що не видалили кінцевий теґ.
+
+```js
+assert($('body').length === 1);
+```
+
+Ваш теґ `div` повинен бути вкладеним в `body`.
+
+```js
+const div = $('div')[0];
+assert(div.parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
Cafe Menu
+
+
+--fcc-editable-region--
+
+
+ CAMPER CAFE
+ Est. 2020
+
+
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+body {
+ background-color: burlywood;
+}
+
+h1, h2, p {
+ text-align: center;
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
new file mode 100644
index 00000000000..849bac7b109
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
@@ -0,0 +1,86 @@
+---
+id: 5f35e5c4321f818cdc4bed30
+title: Крок 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Має хороший вигляд. Час додати деякі елементи меню. Додайте порожній елемент `article` під заголовком `Coffee`. Він міститиме смак та ціну кожного напою, який ви пропонуєте.
+
+# --hints--
+
+Ви повинні мати початковий теґ `
`.
+
+```js
+assert(code.match(//i));
+```
+
+Ви повинні мати кінцевий теґ ``.
+
+```js
+assert(code.match(/<\/article>/i));
+```
+
+Ви не повинні змінювати наявний елемент `h2`.
+
+```js
+assert($('h2').length === 1);
+```
+
+Ваш елемент `article` повинен йти після елемента `h2`.
+
+```js
+const article = $('article')[0];
+assert(article.previousElementSibling.tagName === 'H2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
new file mode 100644
index 00000000000..7d179b26e8f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
@@ -0,0 +1,92 @@
+---
+id: 5f35e5c44359872a137bd98f
+title: Крок 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Оскільки головним товаром для продажу є кавові напої, для фону сторінки можна використати зображення кавових бобів.
+
+Видаліть коментар та його вміст всередині селектору типу `body`. Тепер додайте властивість `background-image` та встановіть значення `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
+
+# --hints--
+
+Ви повинні вилучити прокоментовану властивість `background-color`.
+
+```js
+assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i))
+```
+
+Ваш селектор `body` не повинен містити жодних коментарів.
+
+```js
+assert(!code.match(/body\s*{\s*\/\*/i));
+```
+
+Ви повинні встановити властивість `background-image` на `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`)
+assert(hasBackground)
+```
+
+Ваш елемент `body` повинен містити фон з кавовими бобами.
+
+```js
+const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image');
+console.log(bodyBackground);
+assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+--fcc-editable-region--
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
new file mode 100644
index 00000000000..90a61f939b5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
@@ -0,0 +1,107 @@
+---
+id: 5f3c866d0fc037f7311b4ac8
+title: Крок 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Це ближче, але ціна не залишилась в правій частині. Це тому що елементи `inline-block` займають лише ширину свого вмісту. Щоб їх розтягнути, додайте властивість `width` до селекторів класу `flavor` та `price` зі значенням `50%` кожен.
+
+# --hints--
+
+Ви повинні встановити властивість `width` на `50%` у вашому селекторі `.flavor`.
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '50%');
+```
+
+Ви повинні встановити властивість `width` на `50%` у вашому селекторі `.price`.
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+ text-align: left;
+}
+
+.price {
+ text-align: right;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
new file mode 100644
index 00000000000..6e1efc343d1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
@@ -0,0 +1,100 @@
+---
+id: 5f3c866d28d7ad0de6470505
+title: Крок 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Цієї миті смаки та ціни знаходяться один над одним та розміщені відповідно до елементів `p`. Було б чудово, якби смак був зліва, а ціна справа.
+
+Додайте назву класу `flavor` до елемента `p` `French Vanilla`.
+
+# --hints--
+
+Ви повинні додати клас `flavor` до вашого елемента `p`.
+
+```js
+assert(code.match(//i));
+```
+
+Ви повинні мати лише один елемент класу `flavor`.
+
+```js
+assert($('.flavor').length === 1);
+```
+
+Ваш клас `flavor` повинен бути на елементі `p` з текстом `French Vanilla`.
+
+```js
+assert($('.flavor')[0].innerText.match(/French Vanilla/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
new file mode 100644
index 00000000000..fec8cdbfeb1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
@@ -0,0 +1,128 @@
+---
+id: 5f3c866d5414453fc2d7b480
+title: Крок 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Починаючи з наявної пари смак/ціна, додайте наступні смаки та ціни, використовуючи елементи `article` з двома вкладеними елементами `p` всередині кожного. Як і раніше, текст першого елемента `p` повинен містити смак кави, а текст другого елемента `p` повинен містити ціну.
+
+```bash
+Caramel Macchiato 3.75
+Pumpkin Spice 3.50
+Hazelnut 4.00
+Mocha 4.50
+```
+
+# --hints--
+
+Ви повинні мати п'ять елементів `article`.
+
+```js
+assert($('article').length === 5);
+```
+
+Кожен елемент `article` повинен мати два елементи `p`.
+
+```js
+const articles = $('article');
+assert(articles[0].children.length === 2);
+assert(articles[1].children.length === 2);
+assert(articles[2].children.length === 2);
+assert(articles[3].children.length === 2);
+assert(articles[4].children.length === 2);
+```
+
+Ваш перший елемент `article` повинен мати елементи `p` з текстом `French Vanilla` та `3.00`.
+
+```js
+const children = $('article')[0].children;
+assert(children[0].innerText.match(/French Vanilla/i));
+assert(children[1].innerText.match(/3\.00/i));
+```
+
+Ваш другий елемент `article` повинен мати елементи `p` з текстом `Caramel Macchiato` та `3.75`.
+
+```js
+const children = $('article')[1].children;
+assert(children[0].innerText.match(/Caramel Macchiato/i));
+assert(children[1].innerText.match(/3\.75/i));
+```
+
+Ваш третій елемент `article` повинен мати елементи `p` з текстом `Pumpkin Spice` та `3.50`.
+
+```js
+const children = $('article')[2].children;
+assert(children[0].innerText.match(/Pumpkin Spice/i));
+assert(children[1].innerText.match(/3\.50/i));
+```
+
+Ваш четвертий елемент `article` повинен мати елементи `p` з текстом `Hazelnut` та `4.00`.
+
+```js
+const children = $('article')[3].children;
+assert(children[0].innerText.match(/Hazelnut/i));
+assert(children[1].innerText.match(/4\.00/i));
+```
+
+Ваш п'ятий елемент `article` повинен мати елементи `p` з текстом `Mocha` та `4.50`.
+
+```js
+const children = $('article')[4].children;
+assert(children[0].innerText.match(/Mocha/i));
+assert(children[1].innerText.match(/4\.50/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
new file mode 100644
index 00000000000..ee84f494f62
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
@@ -0,0 +1,88 @@
+---
+id: 5f3c866daec9a49519871816
+title: Крок 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Елементи `article` зазвичай містять декілька елементів з пов'язаною інформацією. У цьому разі він міститиме смак кави та його ціну. Вкладіть два елементи `p` всередині елемента `article`. Текст першого повинен бути `French Vanilla`, текст другого – `3.00`.
+
+# --hints--
+
+Ви не повинні змінювати наявний елемент `article`.
+
+```js
+assert($('article').length === 1);
+```
+
+Ваш елемент `article` повинен мати два елементи `p`.
+
+```js
+assert($('article').children('p').length === 2);
+```
+
+Ваш перший елемент `p` повинен мати текст `French Vanilla`.
+
+```js
+const firstP = $('article').children('p')[0];
+assert(firstP.innerText.match(/French Vanilla/i));
+```
+
+Ваш другий елемент `p` повинен мати текст `3.00`.
+
+```js
+const secondP = $('article').children('p')[1];
+assert(secondP.innerText.match(/3\.00/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
new file mode 100644
index 00000000000..4c89c14df4e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
@@ -0,0 +1,117 @@
+---
+id: 5f3c866dbf362f99b9a0c6d0
+title: Крок 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Елементи `p` вкладені в елементі `article` з атрибутом класу `item`. Ви можете стилізувати всі елементи `p`, вкладені в будь-якому елементі класу з назвою `item` як тут:
+
+```css
+.item p { }
+```
+
+Використовуючи вищевказаний селектор, додайте властивість `display` зі значенням `inline-block`, щоб елементи `p` поводились як вбудовані елементи.
+
+# --hints--
+
+Ви повинні використати селектор `.item p`.
+
+```js
+const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p');
+assert(hasItemP);
+```
+
+Ви повинні встановити властивість `display` на `inline-block`.
+
+```js
+const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block');
+assert(hasDisplay);
+```
+
+Ваш селектор `.item p` повинен встановлювати властивість `display` на `inline-block`.
+
+```js
+const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display');
+assert(itemPDisplay === 'inline-block');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.flavor {
+ text-align: left;
+}
+
+.price {
+ text-align: right;
+}
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
new file mode 100644
index 00000000000..b3fe0749a12
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
@@ -0,0 +1,111 @@
+---
+id: 5f3c866dd0d0275f01d4d847
+title: Крок 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Не спрацювало. Стилізування елементів `p` як `inline-block` та їх розташування в різних лініях коду створює додатковий простір справа для першого елемента `p`, через що другий елемент переміщується в наступну лінію. Один спосіб це виправити – зробити ширину кожного елемента `p` меншу за `50%`.
+
+Змініть значення `width` на `49%` для кожного класу та подивіться, що станеться.
+
+# --hints--
+
+Ви повинні встановити властивість `width` на `49%` в селекторі `.flavor`.
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '49%');
+```
+
+Ви повинні встановити властивість `width` на `49%` в селекторі `.price`.
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '49%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+ text-align: left;
+ width: 50%;
+}
+
+.price {
+ text-align: right;
+ width: 50%;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
new file mode 100644
index 00000000000..43586259f4f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
@@ -0,0 +1,108 @@
+---
+id: 5f3c866de7a5b784048f94b1
+title: Крок 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Схоже до того, що ви хочете, але було б добре, якби смак та ціна були на одній лінії. Елементи `p` є елементами на рівні блоків, отож вони займають всю ширину батьківського елемента.
+
+Щоб вони були на одній лінії, вам потрібно застосувати певну стилізацію для елементів `p`, щоб вони поводились як вбудовані елементи. Додайте атрибут `class` зі значенням `item` до першого елемента `article` під заголовком `Coffee`.
+
+# --hints--
+
+Ви повинні застосувати клас `item` до елемента `article`.
+
+```js
+assert(code.match(//i))
+```
+
+Ви повинні мати лише один елемент класу `item`.
+
+```js
+assert($('.item').length === 1);
+```
+
+Ваш перший елемент `article` повинен мати текст `item`.
+
+```js
+assert($('article')[0].className === 'item');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.flavor {
+ text-align: left;
+}
+
+.price {
+ text-align: right;
+}
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
new file mode 100644
index 00000000000..c4125de5b12
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
@@ -0,0 +1,108 @@
+---
+id: 5f3cade94c6576e7f7b7953f
+title: Крок 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Тепер знову змініть ширину обох класів `flavor` та `price` на `50%`.
+
+# --hints--
+
+Ви повинні встановити властивість `width` на `50%` в селекторі `.flavor`.
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '50%');
+```
+
+Ви повинні встановити властивість `width` на `50%` в селекторі `.price`.
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+ text-align: left;
+ width: 49%;
+}
+
+.price {
+ text-align: right;
+ width: 49%;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
new file mode 100644
index 00000000000..68393974463
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
@@ -0,0 +1,119 @@
+---
+id: 5f3cade9993019e26313fa8e
+title: Крок 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Тепер ви знаєте як це працює і можете змінити решту елементів `article` та `p`, щоб вони підходили до першої пари. Почніть з додавання класу `item` до інших елементів `article`.
+
+# --hints--
+
+Ви повинні мати лише п'ять елементів `article`.
+
+```js
+assert($('article').length === 5);
+```
+
+Ви повинні мати лише п'ять елементів `.item`.
+
+```js
+assert($('.item').length === 5);
+```
+
+Ваші елементи `.item` повинні бути елементами `article`.
+
+
+```js
+const articles = $('article');
+const items = $('.item');
+assert(articles[0] === items[0]);
+assert(articles[1] === items[1]);
+assert(articles[2] === items[2]);
+assert(articles[3] === items[3]);
+assert(articles[4] === items[4]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 50%;
+}
+
+.price {
+ text-align: right;
+ width: 50%;
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
new file mode 100644
index 00000000000..83f96883e22
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
@@ -0,0 +1,114 @@
+---
+id: 5f3cade99dda4e6071a85dfd
+title: Крок 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Через декілька кроків ви повернетесь до стилізації сторінки, а зараз додайте другий елемент `section` під першим, щоб зобразити десерти в кафе.
+
+# --hints--
+
+Ви повинні мати початковий теґ `section`.
+
+```js
+assert(code.match(//ig).length === 2);
+```
+
+Ви повинні мати кінцевий теґ `section`.
+
+```js
+assert(code.match(/<\/section>/ig).length === 2);
+```
+
+Ви не повинні змінювати наявний елемент `main`.
+
+```js
+assert($('main').length === 1);
+```
+
+Ваш новий елемент `section` повинен бути вкладеним в елементі `main`.
+
+```js
+assert($('main').children('section').length === 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
new file mode 100644
index 00000000000..e92ab76be5c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
@@ -0,0 +1,103 @@
+---
+id: 5f3cade9fa77275d9f4efe62
+title: Крок 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Спрацювало, але зліва від ціни досі є вільний простір.
+
+Ви і далі могли б пробувати різні відсотки для ширини. Натомість просто перемістіть елемент `p` з ціною на ту ж лінію та переконайтесь, що між ними немає вільного місця.
+
+# --hints--
+
+Ваші елементи `p` не повинні мати вільного простору між собою.
+
+```js
+assert(code.match(/Vanilla<\/p>
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 49%;
+}
+
+.price {
+ text-align: right;
+ width: 49%;
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
new file mode 100644
index 00000000000..f0d52ce880f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -0,0 +1,158 @@
+---
+id: 5f3ef6e01f288a026d709587
+title: Крок 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Елемент `hr` можна використовувати для відображення дільника між секціями різного вмісту.
+
+Спочатку додайте елемент `hr` між першим елементом `header` та елементом `main`. Зауважте, що елементи `hr` є самозакривними.
+
+# --hints--
+
+Ви повинні додати елемент `hr`. Елементи `hr` є самозакривними.
+
+```js
+assert(code.match(//i));
+assert(!code.match(/<\/hr>/i));
+```
+
+Ви не повинні змінювати наявний елемент `header`.
+
+```js
+assert($('header').length === 1);
+```
+
+Ви не повинні змінювати наявний елемент `main`.
+
+```js
+assert($('main').length === 1);
+```
+
+Ваш елемент `hr` повинен бути між елементами `header` та `main`.
+
+```js
+assert($('hr')[0].previousElementSibling.tagName === 'HEADER');
+assert($('hr')[0].nextElementSibling.tagName === 'MAIN');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+ font-family: sans-serif;
+}
+
+h1 {
+ font-size: 40px;
+}
+
+h2 {
+ font-size: 30px;
+}
+
+.established {
+ font-style: italic;
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 20px;
+ max-width: 500px;
+}
+
+h1, h2 {
+ font-family: Impact, serif;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor, .dessert {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
new file mode 100644
index 00000000000..fe1de3bfc78
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
@@ -0,0 +1,122 @@
+---
+id: 5f3ef6e03d719d5ac4738993
+title: Крок 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Поточна ширина меню завжди займатиме 80% від ширини елемента `body`. На дуже широкому екрані кава та десерти розміщені задалеко від своїх цін.
+
+Додайте властивість `max-width` для класу `menu` зі значенням `500px`, щоб запобігти зайвої ширини.
+
+# --hints--
+
+Ви повинні встановити властивість `max-width` на `500px`.
+
+```js
+const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px');
+assert(hasMaxWidth);
+```
+
+Ваш елемент `.menu` повинен мати `max-width` зі значенням `500px`.
+
+```js
+const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width');
+assert(menuMaxWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+--fcc-editable-region--
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 20px;
+}
+--fcc-editable-region--
+
+.item p {
+ display: inline-block;
+}
+
+.flavor, .dessert {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
new file mode 100644
index 00000000000..74104f37cf5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
@@ -0,0 +1,147 @@
+---
+id: 5f3ef6e04559b939080db057
+title: Крок 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Оскільки всі 4 сторони меню мають те саме розташування з інтервалами, видаліть всі чотири властивості та використайте єдину властивість `padding` зі значенням `20px`.
+
+# --hints--
+
+Ви повинні вилучити властивість `padding-left`.
+
+```js
+assert(!code.match(/padding-left/i));
+```
+
+Ви повинні вилучити властивість `padding-right`.
+
+```js
+assert(!code.match(/padding-right/i));
+```
+
+Ви повинні вилучити властивість `padding-top`.
+
+```js
+assert(!code.match(/padding-top/i));
+```
+
+Ви повинні вилучити властивість `padding-bottom`.
+
+```js
+assert(!code.match(/padding-bottom/i));
+```
+
+Ви повинні встановити властивість `padding` на `20px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px');
+assert(hasPadding);
+```
+
+Ваш елемент `.menu` повинен мати `padding` зі значенням `20px`.
+
+```js
+const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding');
+assert(menuPadding === '20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+--fcc-editable-region--
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 20px;
+ padding-right: 20px;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+--fcc-editable-region--
+
+.item p {
+ display: inline-block;
+}
+
+.flavor, .dessert {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
new file mode 100644
index 00000000000..8759fea745d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
@@ -0,0 +1,144 @@
+---
+id: 5f3ef6e050279c7a4a7101d3
+title: Крок 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Має кращий вигляд. Тепер спробуйте додати той самий padding зі значенням `20px` зверху та знизу меню.
+
+# --hints--
+
+Ви не повинні видаляти значення `padding-left` або `padding-right`.
+
+```js
+const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
+assert(paddingLeft === '20px');
+const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
+assert(paddingRight === '20px');
+```
+
+Ви повинні встановити властивість `padding-top` на `20px`.
+
+```js
+const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
+assert(hasPaddingTop);
+```
+
+Ви повинні встановити властивість `padding-bottom` на `20px`.
+
+```js
+const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
+assert(hasPaddingBottom);
+```
+
+Ваш елемент `.menu` повинен мати `padding-top` зі значенням `20px`.
+
+```js
+const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top');
+assert(menuPaddingTop === '20px');
+```
+
+Ваш елемент `.menu` повинен мати `padding-bottom` зі значенням `20px`.
+
+```js
+const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom');
+assert(menuPaddingBottom === '20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+--fcc-editable-region--
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 20px;
+ padding-right: 20px;
+}
+--fcc-editable-region--
+
+.item p {
+ display: inline-block;
+}
+
+.flavor, .dessert {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
new file mode 100644
index 00000000000..34e26665031
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
@@ -0,0 +1,121 @@
+---
+id: 5f3ef6e05473f91f948724ab
+title: Крок 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Ви можете змінити `font-family` тексту, щоб він відрізнявся від шрифту за замовчуванням. Кожен браузер має декілька доступних шрифтів.
+
+Змініть всі тексти в `body`, додаючи властивість `font-family` зі значенням `sans-serif`. Це досить поширений шрифт, який зручно читати.
+
+# --hints--
+
+Ви повинні встановити властивість `font-family` на `sans-serif`.
+
+```js
+const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'sans-serif');
+```
+
+Ваш `body` повинен мати `font-family` зі значенням `sans-serif`.
+
+```js
+const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family');
+assert(bodyFontFamily === 'sans-serif');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+--fcc-editable-region--
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 20px;
+ max-width: 500px;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor, .dessert {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
new file mode 100644
index 00000000000..7115e053878
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
@@ -0,0 +1,138 @@
+---
+id: 5f3ef6e056bdde6ae6892ba2
+title: Крок 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Трішки нудно, якщо всі тексти мають однаковий `font-family`. Ви все ще можете мати більшу частину тексту `sans-serif` і зробити різними лише елементи `h1` та `h2`, використовуючи інший селектор.
+
+Стилізуйте обидва елементи `h1` та `h2` так, щоб текст лише цих елементів використовував шрифт `Impact`.
+
+# --hints--
+
+Ви повинні використати селектор `h1, h2`.
+
+```js
+const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2');
+assert(h1h2Selector);
+```
+
+Ви повинні встановити `font-family` на `Impact`.
+
+```js
+const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'Impact');
+assert(hasFontFamily);
+```
+
+Ваш елемент `h1` повинен мати `font-family` зі значенням `Impact`.
+
+```js
+assert($('h1').css('font-family').match(/impact/i));
+```
+
+Ваш елемент `h2` повинен мати `font-family` зі значенням `Impact`.
+
+```js
+assert($('h2').css('font-family').match(/impact/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+ font-family: sans-serif;
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 20px;
+ max-width: 500px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.item p {
+ display: inline-block;
+}
+
+.flavor, .dessert {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
new file mode 100644
index 00000000000..cbdd4864ccd
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
@@ -0,0 +1,135 @@
+---
+id: 5f3ef6e06d34faac0447fc44
+title: Крок 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Зробіть текст `Est. 2020` курсивом, створюючи селектор класу `established` та надаючи йому властивість `font-style` зі значенням `italic`.
+
+# --hints--
+
+Ви повинні мати селектор `.established`.
+
+```js
+const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established');
+assert(hasEstablished);
+```
+
+Ви повинні встановити властивість `font-style` на `italic`.
+
+```js
+const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic');
+assert(hasFontStyle);
+```
+
+Ваш селектор `.established` повинен встановлювати властивість `font-style` на `italic`.
+
+```js
+const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style');
+assert(establishedFontStyle === 'italic');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+ font-family: sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 20px;
+ max-width: 500px;
+}
+
+h1, h2 {
+ font-family: Impact, serif;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor, .dessert {
+ text-align: left;
+ width: 75%;
+}
+
+.price {
+ text-align: right;
+ width: 25%
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md
new file mode 100644
index 00000000000..673da2d26d6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md
@@ -0,0 +1,149 @@
+---
+id: 5f3ef6e07276f782bb46b93d
+title: Крок 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Додайте елемент `footer` під елементом `main`, де можна додати додаткову інформацію.
+
+# --hints--
+
+Ви повинні мати початковий теґ `