+
It's me!
+
+ Naomi Carrigan
+Welcome to my portfolio page!
++
Projects
+Here's what I've worked on!
++ + + + +
+
Contact me!
+Use the links below to get in touch.
+FreeCodeCamp.org | GitHub | Facebook | LinkedIn +
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md
new file mode 100644
index 00000000000..03aa43eebc3
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md
@@ -0,0 +1,137 @@
+---
+id: 5d822fd413a79914d39e98d4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Dai alle parti dell'edificio delle proprietà `width` e `height` con i seguenti valori: `70%` e `10%` a `.bb1a`, `80%` e `10%` a `.bb1b`, `90%` e `10%` a `.bb1c` e `100%` e `70%` a `.bb1d`. Ricorda che queste percentuali sono relative all'elemento genitore e nota che le altezze si sommeranno fino al 100% - riempendo verticalmente il genitore.
+
+# --hints--
+
+Dovresti usare un selettore di classe per lo stile di `.bb1a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a'));
+```
+
+Dovresti dare a `.bb1a` una proprietà `width` del `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%');
+```
+
+Dovresti dare `.bb1a` una proprietà `height` del `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%');
+```
+
+Dovresti usare un selettore di classe per lo stile di `.bb1b`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b'));
+```
+
+Dovresti dare a `.bb1b` una proprietà `width` dell'`80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%');
+```
+
+Dovresti dare `.bb1b` una proprietà `height` del `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%');
+```
+
+Dovresti usare un selettore di classe per lo stile di `.bb1c`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c'));
+```
+
+Dovresti dare a `.bb1c` una proprietà `width` del `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%');
+```
+
+Dovresti dare `.bb1c` una proprietà `height` del `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%');
+```
+
+Dovresti usare un selettore di classe per lo stile di `.bb1d`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d'));
+```
+
+Dovresti dare a `.bb1d` una proprietà `width` del `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%');
+```
+
+Dovresti dare `.bb1d` una proprietà `height` del `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
new file mode 100644
index 00000000000..57e997861dc
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
@@ -0,0 +1,111 @@
+---
+id: 5d822fd413a79914d39e98d5
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Dai all'elemento `.bb1` le proprietà `display: flex;`, `flex-direction: column;` e `align-items: center;`. Così centrerai le parti dell'edificio utilizzando "flex" o "flexbox". Ne imparerai di più in un altro progetto.
+
+# --hints--
+
+Non dovresti modificare le proprietà `width` o `height`di `.bb1`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.width, '10%');
+assert.equal(bb1Style?.height, '70%');
+```
+
+Dovresti dare all'elemento `.bb1` una proprietà `display` del valore `flex`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.display, 'flex');
+```
+
+Dovresti dare all'elemento `.bb1` una proprietà `flex-direction` del valore `column`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.flexDirection, 'column');
+```
+
+Dovresti dare all'elemento `.bb1` una proprietà `align-items` del valore `center`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.alignItems, 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+ width: 10%;
+ height: 70%;
+}
+--fcc-editable-region--
+.bb1a {
+ width: 70%;
+ height: 10%;
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
new file mode 100644
index 00000000000..f2f0949112b
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
@@ -0,0 +1,102 @@
+---
+id: 5d822fd413a79914d39e98d6
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Ora hai qualcosa che sta iniziando ad assomigliare a un edificio. È tempo di scrivere la tua prima variabile. Le dichiarazioni di variabili iniziano con due trattini (`-`) e hanno un nome e un valore come questo: `--nome-variabile: valore;`. Nella classe `.bb1`, crea una variabile chiamata `--building-color1` e dalle il valore `#999`.
+
+# --hints--
+
+Dovresti creare una nuova variabile chiamata `--building-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
+```
+
+Dovresti definire la variabile `--building-color1` all'interno di `.bb1`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+```
+
+Dovresti dare a `--building-color1` il valore `#999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+ width: 70%;
+ height: 10%;
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
new file mode 100644
index 00000000000..fcf5ec924a7
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
@@ -0,0 +1,97 @@
+---
+id: 5d822fd413a79914d39e98d7
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Per usare una variabile, inserisci il suo nome tra le parentesi con `var` di fronte: `var(--nome-variabile)`. Aggiungi la tua variabile come valore della proprietà `background-color` della classe `.bb1a`. Qualunque sia il valore che hai dato alla variabile verrà applicato a qualsiasi proprietà su cui la utilizzi. In questo caso, la tua variabile ha il valore `#999`. Quindi `#999` sarà utilizzato come valore per la proprietà `background-color`.
+
+# --hints--
+
+Dovresti impostare la proprietà `background-color` per l'elemento `bb1a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
+```
+
+Dovresti usare `var(--building-color1)` per impostare la proprietà `background-color` dell'elemento `.bb1a`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor.trim(), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ --building-color1: #999;
+}
+--fcc-editable-region--
+.bb1a {
+ width: 70%;
+ height: 10%;
+}
+--fcc-editable-region--
+.bb1b {
+ width: 80%;
+ height: 10%;
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md
new file mode 100644
index 00000000000..bd7a3d047e2
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md
@@ -0,0 +1,123 @@
+---
+id: 5d822fd413a79914d39e98d8
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Imposta `background-color` per le classi `.bb1b`, `.bb1c` e `.bb1d` con la stessa variabile per riempire il resto dell'edificio.
+
+# --hints--
+
+Dovresti impostare la proprietà `background-color` per l'elemento `bb1b`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
+```
+
+Dovresti usare `var(--building-color1)` per impostare la proprietà `background-color` dell'elemento `.bb1b`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor.trim(), 'var(--building-color1)');
+```
+
+Dovresti impostare la proprietà `background-color` per l'elemento `bb1c`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
+```
+
+Dovresti usare `var(--building-color1)` per impostare la proprietà `background-color` dell'elemento `.bb1c`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor.trim(), 'var(--building-color1)');
+```
+
+Dovresti impostare la proprietà `background-color` per l'elemento `bb1d`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
+```
+
+Dovresti usare `var(--building-color1)` per impostare la proprietà `background-color` dell'elemento `.bb1d`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor.trim(), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ --building-color1: #999;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+ width: 80%;
+ height: 10%;
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+}
+--fcc-editable-region--
+
+```
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
new file mode 100644
index 00000000000..96f3d4faa59
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md
@@ -0,0 +1,98 @@
+---
+id: 5d822fd413a79914d39e98d9
+title: Step 17
+challengeType: 0
+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.
+
+# --hints--
+
+Dovresti modificare il valore della variabile della proprietà `--building-color1` da `#999` a `#aa80ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+--fcc-editable-region--
+ --building-color1: #999;
+--fcc-editable-region--
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+```
+
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
new file mode 100644
index 00000000000..6c2ca8cbfdc
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md
@@ -0,0 +1,132 @@
+---
+id: 5d822fd413a79914d39e98da
+title: Step 18
+challengeType: 0
+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.
+
+# --hints--
+
+Dovresti creare un `div` con la classe `bb2`.
+
+```js
+assert.exists(document.querySelector('div.bb2'));
+```
+
+Dovresti creare un `div` con la classe `bb3`.
+
+```js
+assert.exists(document.querySelector('div.bb3'));
+```
+
+Dovresti creare un `div` con la classe `bb4`.
+
+```js
+assert.exists(document.querySelector('div.bb4'));
+```
+
+Dovresti creare 3 nuovi elementi `div`.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 9);
+```
+
+Dovresti posizionare questi elementi `div` all'interno dell'elemento `.background-buildings`.
+
+```js
+assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4);
+```
+
+Dovresti posizionare gli elementi nell'ordine corretto.
+
+```js
+function __t(a, b) {
+ return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ --building-color1: #aa80ff;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md
new file mode 100644
index 00000000000..7c40d93be14
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md
@@ -0,0 +1,132 @@
+---
+id: 5d822fd413a79914d39e98db
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Assegna ai nuovi edifici delle proprietà `width` e `height`: `10%` e `50%` per `.bb2`, `10%` e `55%` per `.bb3` e `11%` e `58%` per `.bb4`. Esprimerai quasi tutti i valori in percentuale e alcuni flexbox per questo progetto, quindi sarà tutto completamente responsivo.
+
+# --hints--
+
+Dovresti dare a `.bb2` una proprietà `width` del `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%');
+```
+
+Dovresti dare a `.bb2` una proprietà `height` del `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%');
+```
+
+Dovresti dare a `.bb3` una proprietà `width` del `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%');
+```
+
+Dovresti dare a `.bb3` una proprietà `height` del `55%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%');
+```
+
+Dovresti dare a `.bb4` una proprietà `width` dell'`11%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%');
+```
+
+Dovresti dare a `.bb4` una proprietà `height` del `58%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ --building-color1: #aa80ff;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
new file mode 100644
index 00000000000..6ad2d932b18
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
@@ -0,0 +1,126 @@
+---
+id: 5d822fd413a79914d39e98dc
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Gli edifici sono impilati uno sopra l'altro e debordano dallo schermo. Risolviamo questo problema. Aggiungi le proprietà `display: flex;`, `align-items: flex-end;` e `justify-content: space-evenly;` alla classe `background-buildings`. Così useremo di nuovo flexbox per spaziare uniformemente gli edifici sul fondo dell'elemento.
+
+# --hints--
+
+Dovresti aggiungere una proprietà `display` con il valore `flex` alla classe `background-buildings`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
+```
+
+Dovresti aggiungere una proprietà `align-items` con il valore `flex-end` alla classe `background-buildings`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
+```
+
+Dovresti aggiungere una proprietà `justify-content` con il valore `space-evenly` alla classe `background-buildings`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+ width: 100%;
+ height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ --building-color1: #aa80ff;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md
new file mode 100644
index 00000000000..3abdc558d9f
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md
@@ -0,0 +1,141 @@
+---
+id: 5d822fd413a79914d39e98dd
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Non mi piace il modo in cui sono distanziati gli edifici. Comprimili aggiungendo due elementi `div` vuoti in cima all'elemento `background-buildings`, due alla fine e uno tra `.bb3` e `.bb4`. Verranno aggiunti come elementi uniformemente distanziati, spostando efficacemente gli edifici più vicino al centro.
+
+# --hints--
+
+Dovresti aggiungere due nuovi elementi `div` prima dell'elemento `.bb1`.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
+```
+
+Dovresti aggiungere un nuovo elemento `div` tra l'elemento `.bb3` e `.bb4`.
+
+```js
+assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
+```
+
+Dovresti aggiungere due nuovi elementi `div` dopo l'elemento `.bb4`.
+
+```js
+const bb4 = document.querySelector('.bb4');
+assert.exists(bb4?.nextElementSibling);
+assert.exists(bb4?.nextElementSibling?.nextElementSibling);
+```
+
+Dovresti aggiungere 5 nuovi elementi `div`.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 14);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ --building-color1: #aa80ff;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md
new file mode 100644
index 00000000000..fe3380500f9
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md
@@ -0,0 +1,139 @@
+---
+id: 5d822fd413a79914d39e98de
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Crea una nuova variabile sotto l'altra, chiamala `--building-color2` e dalle il valore `#66cc99`. Quindi impostala come valore `background-color` di `.bb2`.
+
+# --hints--
+
+Dovresti definire una nuova variabile di proprietà chiamata `--building-color2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2'));
+```
+
+Dovresti dare a `--building-color2` il valore `#66cc99`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99');
+```
+
+Dovresti impostare la proprietà `background-color` di `.bb2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor);
+```
+
+Dovresti impostare la proprietà `background-color` usando la variabile `--building-color2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ --building-color1: #aa80ff;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+}
+--fcc-editable-region--
+.bb3 {
+ width: 10%;
+ height: 55%;
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md
new file mode 100644
index 00000000000..efd9b0ea2d1
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md
@@ -0,0 +1,123 @@
+---
+id: 5d822fd413a79914d39e98df
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Hmm, non sono sicuro del perché non ha funzionato. È possibile aggiungere un valore di fallback a una variabile inserendolo come secondo valore: `var(--nome-variabile, valore-fallback)`. La proprietà userà il valore di fallback se c'è un problema con la variabile. Aggiungi un valore di fallback `green` alla proprietà `background-color` di `.bb2`.
+
+# --hints--
+
+Dovresti aggiungere un valore di fallback `green` alla proprietà `background-color`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2, green)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb3 {
+ width: 10%;
+ height: 55%;
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md
new file mode 100644
index 00000000000..5816c5cb53a
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md
@@ -0,0 +1,141 @@
+---
+id: 5d822fd413a79914d39e98e0
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Crea una nuova variabile sotto le altre, chiamala `--building-color3` e dalle il valore `#cc6699`. Quindi usala come valore di `background-color` della classe `.bb3` e aggiungi un valore di fallback `pink`.
+
+# --hints--
+
+Dovresti definire una nuova variabile di proprietà chiamata `--building-color3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3'));
+```
+
+Dovresti dare a `--building-color3` il valore `#cc6699`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+Dovresti impostare la proprietà `background-color` di `.bb3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor);
+```
+
+Dovresti impostare la proprietà `background-color` usando la variabile `--building-color3` e il fallback `pink`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3, pink)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2, green);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+}
+--fcc-editable-region--
+.bb4 {
+ width: 11%;
+ height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md
new file mode 100644
index 00000000000..8ad70b77762
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md
@@ -0,0 +1,154 @@
+---
+id: 5d822fd413a79914d39e98e1
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Anche in questo caso ha usato il fallback? Adesso so qual è il problema! Le variabili che hai dichiarato in `.bb1` non sono accessibili per gli elementi fratelli `.bb2` e `.bb3`. È così che funziona il CSS. Per questo motivo, le variabili sono spesso dichiarate nel selettore `:root`. Questo è il selettore di livello più alto in CSS; inserire le variabili lì le renderà utilizzabili ovunque. Aggiungi il selettore `:root` in cima al tuo foglio di stile e sposta lì tutte le dichiarazioni delle variabili.
+
+# --hints--
+
+Dovresti dichiarare un selettore `:root` in cima al foglio di stile.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root'));
+```
+
+Dovresti definire `--building-color1` con il valore `#aa80ff` nel selettore `:root`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff');
+```
+
+Dovresti definire `--building-color2` con il valore `#66cc99` nel selettore `:root`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99');
+```
+
+Dovresti definire `--building-color3` con il valore `#cc6699` nel selettore `:root`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+Dovresti rimuovere le variabili di proprietà personalizzate da `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+}
+--fcc-editable-region--
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2, green);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3, pink);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md
new file mode 100644
index 00000000000..90319b83789
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md
@@ -0,0 +1,134 @@
+---
+id: 5d822fd413a79914d39e98e2
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Ora che hai eliminato i bug e gli edifici sono dei colori giusti, puoi rimuovere i valori di fallback dai selettori. Vai avanti e fallo adesso.
+
+# --hints--
+
+Dovresti rimuovere il fallback dal `background-color` di `.bb2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor, 'var(--building-color2)');
+```
+
+Dovresti rimuovere il fallback dal `background-color` di `.bb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2, green);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3, pink);
+}
+--fcc-editable-region--
+.bb4 {
+ width: 11%;
+ height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md
new file mode 100644
index 00000000000..928a2b12a00
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md
@@ -0,0 +1,137 @@
+---
+id: 5d822fd413a79914d39e98e3
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Crea un'altra variabile chiamata `--building-color4` e dalle il valore `#538cc6`. Assicurati che questa volta sia nel selettore `:root`. Quindi usala per l'ultimo edificio.
+
+# --hints--
+
+Dovresti definire una nuova variabile di proprietà chiamata `--building-color4`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4'));
+```
+
+Dovresti dare a `--building-color4` il valore `#538cc6` nel selettore `:root`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md
new file mode 100644
index 00000000000..b169a28d7f6
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md
@@ -0,0 +1,146 @@
+---
+id: 5d822fd413a79914d39e98e4
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Gli edifici di sfondo stanno iniziando ad avere un bell'aspetto. Crea un nuovo `div` sotto l'elemento `background-buildings` e dagli la classe `foreground-buildings`. Questo sarà un altro contenitore per degli edifici.
+
+# --hints--
+
+Dovresti creare un nuovo elemento `div`.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 15);
+```
+
+Il nuovo `div` dovrebbe trovarsi dopo l'elemento `div.background-buildings`.
+
+```js
+assert.exists(document.querySelector('div.background-buildings + div'));
+```
+
+Il nuovo `div` dovrebbe avere la classe `foreground-buildings`.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md
new file mode 100644
index 00000000000..a785753144b
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md
@@ -0,0 +1,160 @@
+---
+id: 5d822fd413a79914d39e98e5
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Vuoi che il contenitore di foreground buildings sia posizionato direttamente sopra all'elemento background buildings. Imposta `width` e `height` al `100%`, `position` su `absolute` e `top` a `0`. In questo modo sarà della stessa dimensione del body e inizierà nell'angolo in alto a sinistra.
+
+# --hints--
+
+Dovresti usare un selettore `.foreground-buildings`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+Dovresti dare all'elemento `.foreground-buildings` una proprietà `width` del `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%');
+```
+
+Dovresti dare all'elemento `.foreground-buildings` una proprietà `height` del `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%');
+```
+
+Dovresti dare all'elemento `.foreground-buildings` una proprietà `position` con il valore `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute');
+```
+
+Dovresti dare all'elemento `.foreground-buildings` una proprietà `top` di `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md
new file mode 100644
index 00000000000..ffcf5b40bab
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md
@@ -0,0 +1,191 @@
+---
+id: 5d822fd413a79914d39e98e6
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Annida 6 elementi `div` all'interno di `.foreground-buildings` e assegna loro le classi da `fb1` a `fb6` in ordine. "fb" sta per "foreground building". Saranno altri sei edifici in primo piano.
+
+# --hints--
+
+Dovresti creare un nuovo `div` con la classe `fb1`.
+
+```js
+assert.exists(document.querySelector('div.fb1'));
+```
+
+Dovresti creare un nuovo `div` con la classe `fb2`.
+
+```js
+assert.exists(document.querySelector('div.fb2'));
+```
+
+Dovresti creare un nuovo `div` con la classe `fb3`.
+
+```js
+assert.exists(document.querySelector('div.fb3'));
+```
+
+Dovresti creare un nuovo `div` con la classe `fb4`.
+
+```js
+assert.exists(document.querySelector('div.fb4'));
+```
+
+Dovresti creare un nuovo `div` con la classe `fb5`.
+
+```js
+assert.exists(document.querySelector('div.fb5'));
+```
+
+Dovresti creare un nuovo `div` con la classe `fb6`.
+
+```js
+assert.exists(document.querySelector('div.fb6'));
+```
+
+Dovresti inserire i nuovi elementi `div` all'interno dell'elemento `.foreground-buildings`.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings > div.fb1'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb2'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb3'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb4'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb5'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb6'));
+```
+
+Dovresti inserire i nuovi elementi `div` nell'ordine corretto.
+
+```js
+function __t(a, b) {
+ return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md
new file mode 100644
index 00000000000..7c12d4d68ca
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md
@@ -0,0 +1,252 @@
+---
+id: 5d822fd413a79914d39e98e7
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Assegna ai sei nuovi elementi i seguenti valori di `width` e `height`: `10%` e `60%` a `.fb1`, `10%` e `40%` a `.fb2`, `10%` e `35%` a `.fb3`, `8%` e `45%` a `.fb4`, `10%` e `33%` a `.fb5`, `9%` e `38%` a `.fb6`.
+
+# --hints--
+
+Dovresti creare un selettore `.fb1`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1'));
+```
+
+Dovresti assegnare al selettore `.fb1` una proprietà `width` del `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%');
+```
+
+Dovresti dare al selettore `.fb1` una proprietà `height` del `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%');
+```
+
+Dovresti creare un selettore `.fb2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2'));
+```
+
+Dovresti assegnare al selettore `.fb2` una proprietà `width` del `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%');
+```
+
+Dovresti dare al selettore `.fb2` una proprietà `height` del `40%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%');
+```
+
+Dovresti creare un selettore `.fb3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3'));
+```
+
+Dovresti assegnare al selettore `.fb3` una proprietà `width` del `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%');
+```
+
+Dovresti dare al selettore `.fb3` una proprietà `height` del `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%');
+```
+
+Dovresti creare un selettore `.fb4`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4'));
+```
+
+Dovresti assegnare al selettore `.fb4` una proprietà `width` dell'`8%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%');
+```
+
+Dovresti dare al selettore `.fb4` una proprietà `height` del `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%');
+```
+
+Dovresti creare un selettore `.fb5`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5'));
+```
+
+Dovresti assegnare al selettore `.fb5` una proprietà `width` del `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%');
+```
+
+Dovresti dare al selettore `.fb5` una proprietà `height` del `33%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%');
+```
+
+Dovresti creare un selettore `.fb6`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6'));
+```
+
+Dovresti assegnare al selettore `.fb6` una proprietà `width` del `9%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%');
+```
+
+Dovresti dare al selettore `.fb6` una proprietà `height` del `38%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md
new file mode 100644
index 00000000000..c7c2a2656b6
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md
@@ -0,0 +1,189 @@
+---
+id: 5d822fd413a79914d39e98e8
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Aggiungi a `foreground-buildings` le stesse proprietà e valori `display`, `align-items` e `justify-content` che hai utilizzato su `background-buildings`. Ancora una volta, userai Flexbox per distanziare uniformemente gli edifici sullo sfondo del loro contenitore.
+
+# --hints--
+
+Dovresti assegnare a `.foreground-buildings` una proprietà `display` con il valore `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex');
+```
+
+Dovresti assegnare a `.foreground-buildings` una proprietà `align-items` con il valore `flex-end`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end');
+```
+
+Dovresti assegnare a `.foreground-buildings` una proprietà `justify-content` con il valore `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+}
+--fcc-editable-region--
+.fb1 {
+ width: 10%;
+ height: 60%;
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
new file mode 100644
index 00000000000..c23fe6371da
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
@@ -0,0 +1,222 @@
+---
+id: 5d822fd413a79914d39e98e9
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Vedo del codice che può essere ottimizzato. Sposta le proprietà e i valori `position` e `top` da `.foreground-buildings` a `.background-buildings`. Quindi seleziona sia `.background-buildings` che `.foreground-buildings`, applicando efficacemente gli stili a entrambi gli elementi. Puoi utilizzare una virgola (`,`) per separare i selettori in questo modo: `selettore1, selettore2`.
+
+# --hints--
+
+Non dovresti rimuovere la dichiarazione `.foreground-buildings`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+Dovresti rimuovere la proprietà `position` da `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
+```
+
+Dovresti rimuovere la proprietà `top` da `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
+```
+
+Dovresti aggiungere la proprietà `position` con il valore `absolute` a `.background-buildings, foreground-buildings`.
+
+```js
+function eitherOr() {
+ const a = new __helpers.CSSHelp(document)
+ return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.position, 'absolute');
+```
+
+Dovresti aggiungere la proprietà `top` con il valore `0` a `.background-buildings, foreground-buildings`.
+
+```js
+function eitherOr() {
+ const a = new __helpers.CSSHelp(document)
+ return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.top, '0px');
+```
+
+Dovresti usare una virgola per utilizzare entrambi i selettori `.foreground-buildings` e `.background-buildings` nella stessa dichiarazione.
+
+```js
+function eitherOr() {
+ const a = new __helpers.CSSHelp(document)
+ return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.exists(eitherOr());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+ width: 10%;
+ height: 60%;
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md
new file mode 100644
index 00000000000..bccba54ec80
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md
@@ -0,0 +1,180 @@
+---
+id: 5d822fd413a79914d39e98ea
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Ora che hai fatto questo, puoi eliminare la vecchia dichiarazione `.foreground-buildings` e tutte le sue proprietà dato che non sono più necessarie.
+
+# --hints--
+
+Dovresti eliminare l'intera dichiarazione di stile `.foreground-buildings`.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+ width: 10%;
+ height: 60%;
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md
new file mode 100644
index 00000000000..fedf1314309
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md
@@ -0,0 +1,202 @@
+---
+id: 5d822fd413a79914d39e98eb
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Il profilo degli edifici si sta unendo. Imposta la proprietà `background-color` per gli edifici in primo piano. Usa la variabile `--building-color1` per `.fb3` e `.fb4`, `--building-color2` per `.fb5`,`--building-color3` per `.fb2` e `.fb6`, e `--building-color4` per `.fb1`.
+
+# --hints--
+
+Dovresti dare a `.fb1` una proprietà `background-color` usando `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.backgroundColor.trim(), 'var(--building-color4)');
+```
+
+Dovresti dare a `.fb2` una proprietà `background-color` usando `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.backgroundColor, 'var(--building-color3)');
+```
+
+Dovresti dare a `.fb3` una proprietà `background-color` usando `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.backgroundColor, 'var(--building-color1)');
+```
+
+Dovresti dare a `.fb4` una proprietà `background-color` usando `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.backgroundColor, 'var(--building-color1)');
+```
+
+Dovresti dare a `.fb5` una proprietà `background-color` usando `--building-color2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.backgroundColor, 'var(--building-color2)');
+```
+
+Dovresti dare a `.fb6` una proprietà `background-color` usando `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.backgroundColor, 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1 {
+ width: 10%;
+ height: 60%;
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md
new file mode 100644
index 00000000000..723149ce0c8
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md
@@ -0,0 +1,202 @@
+---
+id: 5d822fd413a79914d39e98ec
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Comprimi di nuovo gli edifici aggiungendo due elementi `div` vuoti sia in cima che alla fine dell'elemento `.foreground-buildings` e uno tra `.fb2` e `.fb3`.
+
+# --hints--
+
+Dovresti aggiungere due elementi `div` come primi figli di `.foreground-buildings`.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('fb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('fb1'));
+```
+
+Dovresti aggiungere un nuovo elemento `div` tra l'elemento `.fb2` e `.fb3`.
+
+```js
+assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling);
+```
+
+
+Dovresti aggiungere due elementi `div` come ultimi figli di `.foreground-buildings`.
+
+```js
+const fb6 = document.querySelector('.fb6');
+assert.exists(fb6?.nextElementSibling);
+assert.exists(fb6?.nextElementSibling?.nextElementSibling);
+```
+
+Dovresti aggiungere 5 nuovi elementi `div`.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 26);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md
new file mode 100644
index 00000000000..e9aaee757a8
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md
@@ -0,0 +1,201 @@
+---
+id: 5d822fd413a79914d39e98ed
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Sposta la posizione di `.fb4` relativamente a dove è ora impostando `position` su `relative` e `left` al `10%`. Fai lo stesso per `.fb5` ma usa `right` invece di `left`. Così coprirai lo spazio bianco rimanente tra gli edifici.
+
+# --hints--
+
+Dovresti dare a `.fb4` una proprietà `position` con il valore `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative');
+```
+
+Dovresti dare `.fb4` una proprietà `left` del `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%');
+```
+
+Dovresti dare a `.fb5` una proprietà `position` con il valore `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative');
+```
+
+Dovresti dare a `.fb5` una proprietà `right` del `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md
new file mode 100644
index 00000000000..021c63c3dcf
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md
@@ -0,0 +1,195 @@
+---
+id: 5d822fd413a79914d39e98ee
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Il tuo codice sta iniziando a diventare piuttosto lungo. Aggiungi un commento sopra la classe `.fb1` che dice `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` per aiutare chi legge il codice a capirlo più facilmente. Sopra la classe `.bb1` aggiungi un altro commento che dice `BUILDINGS BACKGROUND - "bb" stands for "background building"`. Se non ricordi, i commenti in CSS si scrivono così: `/* Commenta qui */`.
+
+# --hints--
+
+Dovresti aggiungere il commento `BACKGROUND BUILDINGS - "bb" stands for "background building"` sopra il selettore `.bb1`.
+
+```js
+assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
+```
+
+Dovresti aggiungere il commento `FOREGROUND BUILDINGS - "fb" stands dor "foreground building"` sopra il selettore `.fb1`.
+
+```js
+assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+--fcc-editable-region--
+
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md
new file mode 100644
index 00000000000..31e18d3aee3
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md
@@ -0,0 +1,196 @@
+---
+id: 5d822fd413a79914d39e98ef
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+In `:root`, crea una nuova variabile chiamata `--window-color1` con il valore `black`. Questo sarà il colore secondario per gli edifici viola.
+
+# --hints--
+
+Dovresti creare una nuova variabile in `:root` chiamata `--window-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
+```
+
+Dovresti dare alla variabile `--window-color1` il valore `black`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+--fcc-editable-region--
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
new file mode 100644
index 00000000000..a8b0e56a661
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
@@ -0,0 +1,217 @@
+---
+id: 5d822fd413a79914d39e98f0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+I gradienti in CSS sono un modo per creare delle transizioni nei colori all'interno di un elemento. Vengono applicati alla proprietà `background` e hanno la seguente sintassi:
+
+```css
+gradient-type(
+ color1,
+ color2
+);
+```
+
+Nell'esempio, la transizione avviene in modo uniforme tra `color1` (in alto) e `color2` (in basso). In `.bb1a`, aggiungi un gradiente di tipo `linear-gradient` alla proprietà `background` con `--building-color1` come primo colore e `--window-color1` come secondo.
+
+# --hints--
+
+Dovresti applicare una proprietà `background` a `.bb1a`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+```
+
+Dovresti assegnare un `linear-gradient` al `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
+```
+
+Dovresti dare un `linear-gradient` al `background` partendo da `--building-color1`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
+```
+
+Dovresti dare un `linear-gradient` al `background` finendo con `--window-color1`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md
new file mode 100644
index 00000000000..505b1552ca5
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md
@@ -0,0 +1,222 @@
+---
+id: 5d822fd413a79914d39e98f1
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Dovrai aggiungere lo stesso gradiente alle due sezioni successive. Invece di fare ciò, crea una nuova classe chiamata `bb1-window` e sposta le proprietà e i valori `height` e `background` da `.bb1a` alla nuova classe.
+
+# --hints--
+
+Dovresti creare una nuova dichiarazione di classe chiamata `bb1-window`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window'));
+```
+
+Dovresti spostare la proprietà `height` e il valore da `.bb1a` a `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%');
+```
+
+Dovresti spostare la proprietà `background` e il valore da `.bb1a` a `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+Non dovresti spostare la proprietà `background-color` da `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+Non dovresti spostare la proprietà `width` da `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+
+--fcc-editable-region--
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md
new file mode 100644
index 00000000000..05df3592cb6
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md
@@ -0,0 +1,236 @@
+---
+id: 5d822fd413a79914d39e98f2
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Aggiungi la nuova classe `bb1-window` agli elementi `.bb1a` e `.bb1c`. Così applicherai il gradiente.
+
+# --hints--
+
+Non dovresti rimuovere la classe `bb1a`.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+Dovresti aggiungere la classe `bb1-window` all'elemento `.bb1a`.
+
+```js
+assert.exists(document.querySelector('div.bb1a.bb1-window'));
+```
+
+Non dovresti rimuovere la classe `bb1b`.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+Dovresti aggiungere la classe `bb1-window` all'elemento `.bb1b`.
+
+```js
+assert.exists(document.querySelector('div.bb1b.bb1-window'));
+```
+
+Non dovresti rimuovere la classe `bb1c`.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+Dovresti aggiungere la classe `bb1-window` all'elemento `.bb1c`.
+
+```js
+assert.exists(document.querySelector('div.bb1c.bb1-window'));
+```
+
+Non dovresti cambiare l'elemento `.bb1d`.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+assert.notExists(document.querySelector('div.bb1d.bb1-window'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md
new file mode 100644
index 00000000000..8a2d0bb90dd
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md
@@ -0,0 +1,221 @@
+---
+id: 5d822fd413a79914d39e98f3
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Non hai più bisogno delle proprietà `height` o `background-color` in `.bb1a`, `.bb1b` o `.bb1c`, quindi rimuovile.
+
+# --hints--
+
+Dovresti rimuovere la proprietà `background-color` da `.bb1a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+Dovresti rimuovere la proprietà `height` da `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height);
+```
+
+Dovresti rimuovere la proprietà `background-color` da `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor);
+```
+
+Dovresti rimuovere la proprietà `height` da `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height);
+```
+
+Dovresti rimuovere la proprietà `background-color` da `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+ width: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md
new file mode 100644
index 00000000000..bd23977e7d5
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md
@@ -0,0 +1,226 @@
+---
+id: 5d822fd413a79914d39e98f4
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Puoi usare tutti i colori che vuoi in un gradiente, in questo modo:
+
+```css
+gradient-type(
+ color1,
+ color2,
+ color3
+);
+```
+
+Aggiungi un `linear-gradient` a `.bb1d` con `orange` come primo colore, `--building-color1` come secondo e `--window-color1` come terzo. Ricorda di usare il gradiente sulla proprietà `background`.
+
+# --hints--
+
+Dovresti applicare una proprietà `background` a `.bb1d`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background);
+```
+
+Dovresti assegnare un `linear-gradient` alla proprietà `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient');
+```
+
+Dovresti usare `orange` come primo colore nel `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange');
+```
+
+Dovresti usare `--building-color1` come secondo colore nel `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)');
+```
+
+Dovresti usare `--window-color1` come terzo colore nel `linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md
new file mode 100644
index 00000000000..d54d45d9ec6
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md
@@ -0,0 +1,197 @@
+---
+id: 5d822fd413a79914d39e98f5
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+È un po' nascosto dietro gli edifici in primo piano, ma puoi vedere il gradiente con tre colori. Dato che lo stai usando ora, rimuovi la proprietà `background-color` da `.bb1d`.
+
+# --hints--
+
+Dovresti rimuovere la proprietà `background-color` e il suo valore da `.bb1d`
+
+```js
+assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+ background: linear-gradient(
+ orange,
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+--fcc-editable-region--
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md
new file mode 100644
index 00000000000..b884a1d76ca
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md
@@ -0,0 +1,206 @@
+---
+id: 5d822fd413a79914d39e98f6
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Puoi specificare dove vuoi completare una transizione del gradiente indicandolo dopo il colore:
+
+```css
+gradient-type(
+ color1,
+ color2 20%,
+ color3
+);
+```
+
+In quest'esempio, la transizione avverrà da `color1` a `color2` tra lo `0%` e il `20%` dell'elemento e poi a `color3` per il resto. Aggiungi `80%` al colore `--building-color1` del gradiente in `.bb1d` in modo da poter vedere come funziona.
+
+# --hints--
+
+Dovresti aggiungere il valore `80%` al colore `--building-color1` nel `linear-gradient` di `.bb1d`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background: linear-gradient(
+ orange,
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+--fcc-editable-region--
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md
new file mode 100644
index 00000000000..11d4d4852f9
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md
@@ -0,0 +1,202 @@
+---
+id: 5d822fd413a79914d39e98f7
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Rimuovi `orange` dal gradiente di `.bb1d` e cambia `80%` in `50%`. Questo farà sì che la transizione tra `--building-color1` e `--window-color1` avvenga a metà dell'elemento.
+
+# --hints--
+
+Dovresti rimuovere `orange` da `linear-gradient`.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange');
+```
+
+Dovresti cambiare l'attuale primo colore del `linear-gradient` per far avvenire la transizione al `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background: linear-gradient(
+ orange,
+ var(--building-color1) 80%,
+ var(--window-color1)
+ );
+}
+--fcc-editable-region--
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md
new file mode 100644
index 00000000000..8257849e598
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md
@@ -0,0 +1,209 @@
+---
+id: 5d822fd413a79914d39e98f8
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Annida due nuovi elementi `div` all'interno di `.bb2` e assegna loro le classi `bb2a` e `bb2b`, in quest'ordine. Queste saranno due sezioni di questo edificio.
+
+# --hints--
+
+Dovresti aggiungere due elementi `div` a `.bb2`.
+
+```js
+assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
+```
+
+Dovresti dare al primo `div` la classe `bb2a`.
+
+```js
+assert.exists(document.querySelector('div.bb2a'));
+```
+
+Dovresti dare al secondo `div` la classe `bb2b`.
+
+```js
+assert.exists(document.querySelector('div.bb2b'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background: linear-gradient(
+ var(--building-color1) 50%,
+ var(--window-color1)
+ );
+}
+
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md
new file mode 100644
index 00000000000..bb551f258d2
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md
@@ -0,0 +1,206 @@
+---
+id: 5d822fd413a79914d39e98f9
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Dai a `.bb2b` delle proprietà `width` e `height` del `100%` per riempire il contenitore dell'edificio. Più tardi, aggiungerai qualcosa in cima.
+
+# --hints--
+
+Dovresti dare a `.bb2b` una proprietà `width` del `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%');
+```
+
+Dovresti dare `.bb2b` una proprietà `height` del `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background: linear-gradient(
+ var(--building-color1) 50%,
+ var(--window-color1)
+ );
+}
+
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md
new file mode 100644
index 00000000000..a07d3cd8443
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md
@@ -0,0 +1,210 @@
+---
+id: 5d822fd413a79914d39e98fa
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Crea una nuova variabile in `:root` denominata `window-color2` con il valore `#8cd9b3`. Questo sarà il colore secondario per questo edificio.
+
+# --hints--
+
+Dovresti creare una nuova variabile di proprietà chiamata `window-color2` all'interno di `:root`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
+```
+
+Dovresti dare a `window-color2` il valore `#8cd9b3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+}
+--fcc-editable-region--
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background: linear-gradient(
+ var(--building-color1) 50%,
+ var(--window-color1)
+ );
+}
+
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb2b {
+ width: 100%;
+ height: 100%;
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
new file mode 100644
index 00000000000..a032be6dc8f
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
@@ -0,0 +1,239 @@
+---
+id: 5d822fd413a79914d39e98fb
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Le transizioni del gradiente spesso si verificano gradualmente da un colore all'altro. Puoi fare in modo che il cambio avvenga con un linea solida, in questo modo:
+
+```css
+linear-gradient(
+ var(--first-color) 0%,
+ var(--first-color) 40%,
+ var(--second-color) 40%,
+ var(--second-color) 80%
+);
+```
+
+Aggiungi un `linear-gradient` a `.bb2b` con `--building-color2` dallo `0%` al `6%` e `--window-color2` dal `6%` al `9%`.
+
+# --hints--
+
+Dovresti dare a `.bb2b` una proprietà `background`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background);
+```
+
+Dovresti utilizzare un `linear-gradient` per la proprietà `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient");
+```
+
+Dovresti usare `--building-color2` dallo `0%` al `6%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/);
+```
+
+Dovresti utilizzare `--window-color2` dal `6%` al `9%`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%");
+```
+
+`.bb2b` dovrebbe avere un `linear-gradient` con `--building-color2` allo `0%` al `6%` e `--window-color2` dal `6%` al `9%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+ --window-color2: #8cd9b3;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background: linear-gradient(
+ var(--building-color1) 50%,
+ var(--window-color1)
+ );
+}
+
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+ width: 100%;
+ height: 100%;
+}
+--fcc-editable-region--
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md
new file mode 100644
index 00000000000..85111c4e259
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md
@@ -0,0 +1,210 @@
+---
+id: 5d822fd413a79914d39e98fc
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Puoi vedere il cambiamento di colore netto nella parte superiore della sezione. Cambia il tipo di gradiente da `linear-gradient` a `repeating-linear-gradient` per questa sezione. I quattro colori del gradiente si ripeteranno per tutto l'elemento; otterrai delle strisce e non avrai bisogno di aggiungere altri elementi per crearle.
+
+# --hints--
+
+Dovresti cambiare la proprietà `background` di `.bb2b` usando `repeating-linear-gradient` al posto di `linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+ --window-color2: #8cd9b3;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background: linear-gradient(
+ var(--building-color1) 50%,
+ var(--window-color1)
+ );
+}
+
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ var(--building-color2),
+ var(--building-color2) 6%,
+ var(--window-color2) 6%,
+ var(--window-color2) 9%
+ );
+}
+--fcc-editable-region--
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md
index 5d9cecea293..068dc17b64d 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md
@@ -7,11 +7,11 @@ dashedName: step-53
# --description--
-Nei prossimi passi, si stanno per utilizzare alcuni trucchi con bordi CSS per girare la sezione `.bb2a` in un triangolo nella parte superiore dell'edificio. Per prima cosa, rimuovi il `background-color` da `.bb2` poiché non ne hai più bisogno.
+Nei prossimi step, userai alcuni trucchi con i bordi per far diventare `.bb2a` un triangolo, cambiando la forma della parte superiore dell'edificio. Per prima cosa, rimuovi `background-color` da `.bb2` dato che non ne hai più bisogno.
# --hints--
-Dovresti rimuovere il `background-color` da `.bb2`.
+Dovresti rimuovere `background-color` da `.bb2`.
```js
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md
new file mode 100644
index 00000000000..8a4e0249cac
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md
@@ -0,0 +1,259 @@
+---
+id: 5d822fd413a79914d39e98fe
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Aggiungi queste proprietà a `.bb2a`:
+
+```css
+margin: auto;
+width: 5vw;
+height: 5vw;
+border-top: 1vw solid #000;
+border-bottom: 1vw solid #000;
+border-left: 1vw solid #999;
+border-right: 1vw solid #999;
+```
+
+Dopo averle aggiunte, potrai vedere come un bordo spesso su un elemento crea degli angoli dove i due lati si incontrano. Stai per utilizzare il bordo inferiore come la parte superiore dell'edificio.
+
+# --hints--
+
+Dovresti dare a `.bb2a` una proprietà `margin` impostata su`auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto");
+```
+
+Dovresti dare a `.bb2a` una proprietà `width` impostata su `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw");
+```
+
+Dovresti dare a `.bb2a` una proprietà `height` di `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw");
+```
+
+Dovresti dare a `.bb2a` una proprietà `border-top` con il valore `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)");
+```
+
+Dovresti dare a `.bb2a` una proprietà `border-bottom` con il valore `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)");
+```
+
+Dovresti dare a `.bb2a` una proprietà `border-left` con il valore `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)");
+```
+
+Dovresti dare a `.bb2a` una proprietà `border-right` con il valore `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+ --window-color2: #8cd9b3;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background: linear-gradient(
+ var(--building-color1) 50%,
+ var(--window-color1)
+ );
+}
+
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb2b {
+ width: 100%;
+ height: 100%;
+ background: repeating-linear-gradient(
+ var(--building-color2),
+ var(--building-color2) 6%,
+ var(--window-color2) 6%,
+ var(--window-color2) 9%
+ );
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-data-structures/generate-an-array-of-all-object-keys-with-object.keys.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-data-structures/generate-an-array-of-all-object-keys-with-object.keys.md
index dab881e7679..83a218408f3 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-data-structures/generate-an-array-of-all-object-keys-with-object.keys.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-data-structures/generate-an-array-of-all-object-keys-with-object.keys.md
@@ -8,7 +8,7 @@ dashedName: generate-an-array-of-all-object-keys-with-object-keys
# --description--
-Também podemos gerar um array o qual contém todas as chaves armazenadas em um objeto usando o método `Object.keys()` e passando um objeto como argumento. Isso retornará um array com strings representando cada propriedade do objeto. Novamente, não haverá uma ordem específica para as entradas no array.
+Também podemos gerar um array o qual contém todas as chaves armazenadas em um objeto com o método `Object.keys()`. Esse método recebe um objeto como argumento e retorna um array de strings que representam cada propriedade no objeto. Novamente, não haverá uma ordem específica para as entradas no array.
# --instructions--
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword.md
index 98f3849b7be..2bb942b2655 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword.md
@@ -25,7 +25,7 @@ Você sempre deve nomear variáveis que você não quer reatribuir, usando a pal
# --instructions--
-Altere o código para que todas as variáveis sejam declaradas usando `let` ou `const`. Use `let` quando você quiser que a variável mude e `const` quando você quiser que a variável permaneça constante. Além disso, renomeie as variáveis declaradas com `const` para que estejam de acordo com as práticas comuns.
+Altere o código para que todas as variáveis sejam declaradas usando `let` ou `const`. Use `let` quando você quiser que a variável mude e `const` quando você quiser que a variável permaneça constante. Além disso, renomeie as variáveis declaradas com `const` para que estejam de acordo com as práticas comuns. Não altere as strings atribuídas às variáveis.
# --hints--
@@ -45,10 +45,15 @@ assert.notMatch(code, /(fCC)/);
`FCC` deve ser uma variável constante declarada com `const`.
```js
-assert.equal(FCC, 'freeCodeCamp');
assert.match(code, /const\s+FCC/);
```
+A string atribuída a `FCC` não deve ser alterada.
+
+```js
+assert.equal(FCC, 'freeCodeCamp');
+```
+
A variável `fact` deve ser declarada com `let`.
```js
diff --git a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
index 920e5201549..436d9961f67 100644
--- a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
+++ b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
@@ -8,11 +8,11 @@ dashedName: deal-cards-for-freecell
# --description--
-O *FreeCell* é o jogo de cartas de paciência que Paul Alfille introduziu no sistema PLATO, em 1978. Jim Horne, na Microsoft, mudou o nome para FreeCell e reimplementou o jogo para o [DOS](https://rosettacode.org/wiki/DOS "DOS") e, posteriormente, para o [Windows](https://rosettacode.org/wiki/Windows "Windows"). A versão do Windows apresentava 32 mil distribuições numeradas.
+O *FreeCell* é o jogo de cartas de paciência que Paul Alfille introduziu no sistema PLATO, em 1978. Jim Horne, da Microsoft, mudou o nome para FreeCell e implementou novamente o jogo no DOS e depois no Windows. A versão do Windows apresentava 32 mil distribuições numeradas.
À medida que o jogo se tornou popular, Jim Horne revelou o algoritmo, e outras implementações do FreeCell começaram a reproduzir as distribuições de cartas da versão da Microsoft. Estas distribuições eram numeradas de 1 a 32000. As versões mais recentes da Microsoft têm 1 milhão de distribuições, numeradas de 1 a 1000000. Algumas implementações permitem números fora desse intervalo.
-O algoritmo usa este [gerador de congruência linear](https://rosettacode.org/wiki/linear congruential generator "linear congruential generator") de Microsoft C:
+O algoritmo usa o gerador de congruência linear do C da Microsoft:
- $state_{n + 1} \equiv 214013 \times state_n + 2531011 \pmod{2^{31}}$ @@ -24,7 +24,7 @@ Segue o algoritmo:
- Faça o seed do RNG (intervalo) com o número da distribuição. -
- Crie um array de 52 cartas: Ás de Paus, Ás de Ouro, Ás de Copas, Ás de Espadas, 2 de Paus, 2 de Ouro, e assim por diante: Ás, 2, 3, 4, 5, 6, 7, 8, 9, 10, Valete, Rainha, Rei. Os índices do array vão de 0 a 51, estando o Ás de Paus no índice 0 e o Rei de Espadas no índice 51. +
- Crie um array de 52 cartas: Ás de Paus, Ás de Ouro, Ás de Copas, Ás de Espadas, 2 de Paus, 2 de Ouro, e assim por diante: Ás, 2, 3, 4, 5, 6, 7, 8, 9, 10, Valete, Rainha, Rei. Os índices do array vão de 0 a 51, estando o Ás de Paus no índice 0 e o Rei de Espadas no índice 51.
- Até que o array esteja vazio:
- Escolha uma carta aleatória no índice ≡ próximo número aleatório (tamanho do array mod).
- É o número 1, ou @@ -21,7 +21,7 @@ Exemplo de números de Kaprekar:
2223é um número de Kaprekar, pois2223 * 2223 = 4941729,4941729pode ser dividido em494e1729, e494 + 1729 = 2223
- - A série de números de Kaprekar é conhecida como A006886 e começa assim:
1, 9, 45, 55, ...
+ - A série de números de Kaprekar é conhecida como A006886 e começa com
1, 9, 45, 55, ... - A001235 números taxicab na The On-Line Encyclopedia of Integer Sequences. -
- Número taxicab na Wikipédia. -
-
@@ -79,8 +79,6 @@ Segue o algoritmo:
Escreva uma função para receber um número de distribuição e distribuir as cartas na mesma ordem que se encontram neste algoritmo. A função deve retornar um array bidimensional representando a mesa de Freecell.
-As distribuições também podem ser verificadas comparando-as às [soluções do FreeCell para 1.000.000 de jogos](https://freecellgamesolutions.com/). (Chame uma das solução por vídeo e ela mostra a distribuição inicial.)
-
# --hints--
`dealFreeCell` deve ser uma função.
diff --git a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/dot-product.md b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/dot-product.md
index f9540d55789..0d83171ebab 100644
--- a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/dot-product.md
+++ b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/dot-product.md
@@ -8,7 +8,7 @@ dashedName: dot-product
# --description--
-Crie uma função, para calcular o **[Produto escalar](https://en.wikipedia.org/wiki/Dot product)**, também conhecido como **produto interno** entre dois vetores.
+Crie uma função, para calcular o **produto escalar**, também conhecido como **produto interno** entre dois vetores.
# --hints--
diff --git a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/heronian-triangles.md b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/heronian-triangles.md
index dadba052562..5133fb34f92 100644
--- a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/heronian-triangles.md
+++ b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/heronian-triangles.md
@@ -8,7 +8,7 @@ dashedName: heronian-triangles
# --description--
-A [fórmula de Heron](https://en.wikipedia.org/wiki/Heron's formula "wp: Heron's formula") para a área de um triângulo dado o comprimento de seus três lados `a`, `b`, e `c`, é dada por:
+A fórmula de Hero para a área de um triângulo dado o comprimento de seus três lados `a`, `b` e `c` é dada por:
$A = \\sqrt{s(s-a)(s-b)(s-c)},$
diff --git a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/jortsort.md b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/jortsort.md
index c3c4c04ef99..7824882e12c 100644
--- a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/jortsort.md
+++ b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/jortsort.md
@@ -8,7 +8,7 @@ dashedName: jortsort
# --description--
-jortSort é um conjunto de ferramentas de ordenação que faz com que o usuário faça o trabalho e garante a eficiência porque você não tem que organizar novamente. Ele foi apresentado originalmente por Jenn "Moneydollars" Schiffer na prestigiada conferência [JSConf](https://www.youtube.com/watch?v=pj4U_W0OFoE).
+jortSort é um conjunto de ferramentas de ordenação que faz com que o usuário faça o trabalho e garante a eficiência porque você não tem que organizar novamente. Ela foi originalmente apresentada por Jenn "Moneydollars" Schiffer no prestigiado JSConf2014.
jortSort deve ser uma função que recebe um único array de objetos comparáveis como argumento. Ela ordena o array em ordem ascendente e compara o array ordenado ao array fornecido inicialmente. Se os arrays corresponderem (ou seja, se o array original já foi ordenado), a função retorna true. Se os arrays não corresponderem (ou seja, se o array original não estiver ordenado), a função retorna false.
diff --git a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/kaprekar-numbers.md b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/kaprekar-numbers.md
index 36ae6d0e6c7..28e3761add2 100644
--- a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/kaprekar-numbers.md
+++ b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/kaprekar-numbers.md
@@ -8,7 +8,7 @@ dashedName: kaprekar-numbers
# --description--
-Um número inteiro positivo é um [número de Kaprekar](https://en.wikipedia.org/wiki/Kaprekar number) se:
+Um número inteiro positivo é um número de Kaprekar se:
-
-