chore(i18n,curriculum): update translations (#42649)

curriculum/challenges/espanol/03-front-end-libraries/react/add-event-listeners.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d403617e
-title: Add Event Listeners
+title: Agrega detector de eventos (Event Listeners)
 challengeType: 6
 forumTopicId: 301377
 dashedName: add-event-listeners
@@ -8,19 +8,19 @@ dashedName: add-event-listeners
 
 # --description--
 
-The `componentDidMount()` method is also the best place to attach any event listeners you need to add for specific functionality. React provides a synthetic event system which wraps the native event system present in browsers. This means that the synthetic event system behaves exactly the same regardless of the user's browser - even if the native events may behave differently between different browsers.
+El método `componentDidMount()` es también el mejor lugar para adjuntar cualquier detector de eventos que necesites agregar para una funcionalidad específica. React proporciona un sistema de eventos sintético que envuelve el sistema de eventos nativo presente en los navegadores. Esto significa que el sistema de eventos sintético se comporta exactamente igual independientemente del navegador del usuario, incluso si los eventos nativos se comportan diferentes entre diferentes navegadores.
 
-You've already been using some of these synthetic event handlers such as `onClick()`. React's synthetic event system is great to use for most interactions you'll manage on DOM elements. However, if you want to attach an event handler to the document or window objects, you have to do this directly.
+Ya has estado usando algunos de estos controladores de eventos sintéticos como `onClick()`. El sistema de eventos sintéticos de React es excelente para usar en la mayoría de las interacciones que administrarás en elementos DOM. Sin embargo, si quieres adjuntar un controlador de eventos al documento o objetos de la ventana, debes hacerlo directamente.
 
 # --instructions--
 
-Attach an event listener in the `componentDidMount()` method for `keydown` events and have these events trigger the callback `handleKeyPress()`. You can use `document.addEventListener()` which takes the event (in quotes) as the first argument and the callback as the second argument.
+Agrega un detector de eventos en el método `componentDidMount()` para los eventos `keydown` y haz que estos eventos ejecuten el callback `handleKeyPress()`. Puedes usar `document.addEventListener()` el cual toma el evento (en comillas) como primer argumento y el callback como segundo argumento.
 
-Then, in `componentWillUnmount()`, remove this same event listener. You can pass the same arguments to `document.removeEventListener()`. It's good practice to use this lifecycle method to do any clean up on React components before they are unmounted and destroyed. Removing event listeners is an example of one such clean up action.
+Posteriormente, en `componentWillUnmount()`, remueve este mismo detector de eventos. Puedes pasar los mismos argumentos al `document.removeEventListener()`. Es buena práctica usar este método del ciclo de vida para hacer cualquier limpieza en un componente de React antes de que estos sean desmontados y destruidos. Removiendo los detectores de eventos es un ejemplo de una limpieza de este tipo.
 
 # --hints--
 
-`MyComponent` should render a `div` element which wraps an `h1` tag.
+`MyComponent` debe mostrar un elemento `div` el cual envuelva una etiqueta `h1`.
 
 ```js
 assert(
@@ -31,7 +31,7 @@ assert(
 );
 ```
 
-A keydown listener should be attached to the document in `componentDidMount`.
+Un detector `keydown` debe ser agregado al documento en `componentDidMount`.
 
 ```js
 assert(
@@ -47,7 +47,7 @@ assert(
 );
 ```
 
-The keydown listener should be removed from the document in `componentWillUnmount`.
+Un detector `keydown` debe ser removido del documento en `componentWillUnmount`.
 
 ```js
 assert(
@@ -63,7 +63,7 @@ assert(
 );
 ```
 
-Once the component has mounted, pressing `enter` should update its state and the rendered `h1` tag.
+Una vez que el componente se ha montado, pulsando `enter` debe actualizar el estado y renderizar la etiqueta `h1`.
 
 ```js
 async () => {

curriculum/challenges/espanol/03-front-end-libraries/react/create-a-controlled-form.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036179
-title: Create a Controlled Form
+title: Crea un formulario controlado
 challengeType: 6
 forumTopicId: 301384
 dashedName: create-a-controlled-form
@@ -8,21 +8,21 @@ dashedName: create-a-controlled-form
 
 # --description--
 
-The last challenge showed that React can control the internal state for certain elements like `input` and `textarea`, which makes them controlled components. This applies to other form elements as well, including the regular HTML `form` element.
+El último desafío mostró que React puede controlar el estado interno de ciertos elementos como `input` y `textarea`, lo que los hace componentes controlados. Esto también se aplica a otros elementos del formulario, incluyendo el elemento regular HTML `form`.
 
 # --instructions--
 
-The `MyForm` component is set up with an empty `form` with a submit handler. The submit handler will be called when the form is submitted.
+El componente `MyForm` está configurado con un `form` vacío, con un manejador de envío. El manejador de envío será llamado cuando se envíe el formulario.
 
-We've added a button which submits the form. You can see it has the `type` set to `submit` indicating it is the button controlling the form. Add the `input` element in the `form` and set its `value` and `onChange()` attributes like the last challenge. You should then complete the `handleSubmit` method so that it sets the component state property `submit` to the current input value in the local `state`.
+Hemos añadido un botón que envía el formulario. Puedes ver que tiene el `type` establecido en `submit` indicando que es el botón que controla el formulario. Añade el elemento `input` en el formulario `form` y establece sus atributos `value` y `onChange()` como el último desafío. A continuación, debes completar el método `handleSubmit` para que establezca la propiedad de estado del componente `submit` al valor de entrada actual en el `state` local.
 
-**Note:** You also must call `event.preventDefault()` in the submit handler, to prevent the default form submit behavior which will refresh the web page.
+**Nota:** También debes llamar a `event.preventDefault()` en el controlador de envío, para evitar el comportamiento predeterminado de envío de formulario que actualizará la página web. Para la comodidad de los campistas, el comportamiento predeterminado se ha desactivado aquí para evitar que las actualizaciones restablezcan el código de desafío.
 
-Finally, create an `h1` tag after the `form` which renders the `submit` value from the component's `state`. You can then type in the form and click the button (or press enter), and you should see your input rendered to the page.
+Por último, crea una etiqueta `h1` después del `form` que renderiza el valor de `submit` del `state` del componente. A continuación, puedes escribir en el formulario y hacer clic en el botón (o pulsar intro), y deberías ver tu entrada renderizada en la página.
 
 # --hints--
 
-`MyForm` should return a `div` element which contains a `form` and an `h1` tag. The form should include an `input` and a `button`.
+`MyForm` debe retornar un elemento `div` que contiene un `form` y una etiqueta `h1`. El formulario debe incluir un `input` y un `button`.
 
 ```js
 assert(
@@ -38,7 +38,7 @@ assert(
 );
 ```
 
-The state of `MyForm` should initialize with `input` and `submit` properties, both set to empty strings.
+El estado de `MyForm` debe inicializar con propiedades `input` y `submit`, ambos establecidos a cadenas vacías.
 
 ```js
 assert(
@@ -47,7 +47,7 @@ assert(
 );
 ```
 
-Typing in the `input` element should update the `input` property of the component's state.
+Escribir en el elemento `input` debe actualizar la propiedad `input` del estado del componente.
 
 ```js
 (() => {
@@ -75,7 +75,7 @@ Typing in the `input` element should update the `input` property of the componen
 })();
 ```
 
-Submitting the form should run `handleSubmit` which should set the `submit` property in state equal to the current input.
+El envío del formulario debe ejecutar `handleSubmit`, el cual debe establecer la propiedad `submit` en estado igual a la entrada actual.
 
 ```js
 (() => {
@@ -98,7 +98,26 @@ Submitting the form should run `handleSubmit` which should set the `submit` prop
 })();
 ```
 
-The `h1` header should render the value of the `submit` field from the component's state.
+`handleSubmit` debe llamar a `event.preventDefault`
+
+```js
+const handleSubmit = MyForm.prototype.handleSubmit.toString();
+const allMatches = handleSubmit.match(/\bevent\.preventDefault\(\s*?\)/g) ?? [];
+const blockCommented = handleSubmit.match(
+  /\/\*.*?\bevent\.preventDefault\(\s*?\).*?\*\//gs
+);
+const lineCommented = handleSubmit.match(
+  /\/\/.*?\bevent\.preventDefault\(\s*?\)/g
+);
+const commentedMatches = [...(blockCommented ?? []), ...(lineCommented ?? [])];
+
+assert(
+  // At least one event.preventDefault() call exists and is not commented out
+  allMatches.length > commentedMatches.length
+);
+```
+
+El encabezado `h1` debe renderizar el valor del campo `submit` del estado del componente.
 
 ```js
 (() => {

curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md

@@ -10,7 +10,7 @@ dashedName: build-a-personal-portfolio-webpage
 
 **Obiettivo:** Costruire un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/zNBOYG>.
 
-Compila le [user stories](https://en.wikipedia.org/wiki/User_story) e ottieni tutti i test da passare. Dalle il tuo stile personale.
+Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
 
 Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. CSS è raccomandato perché è l'argomento delle lezioni viste finora e dovresti fare pratica con il CSS di base. Se lo desideri puoi anche utilizzare Bootstrap o SASS. Ulteriori tecnologie (solo per esempio jQuery, React, Angular, o Vue) non sono raccomandate per questo progetto, e usarle è a tuo rischio. Altri progetti ti daranno la possibilità di lavorare con diversi stack tecnologici come React. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
 
@@ -38,7 +38,7 @@ Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. CSS è r
 
 Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo clic su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
 
-Una volta fatto, invia l'URL al tuo progetto di lavoro con tutti i suoi test superati.
+Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati.
 
 # --solutions--
 

curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md

@@ -10,7 +10,7 @@ dashedName: build-a-product-landing-page
 
 **Obiettivo:** Costruire un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
 
-Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e ottieni tutti i test da passare. Dalle il tuo stile personale.
+Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
 
 Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. Il CSS è raccomandato perché è stato l'argomento delle lezioni viste finora e dovresti fare pratica con il CSS di base. Se lo desideri puoi anche utilizzare Bootstrap o SASS. Ulteriori tecnologie (solo per fare un esempio jQuery, React, Angular, o Vue) non sono raccomandate per questo progetto, e usarle è a tuo rischio. Altri progetti ti daranno la possibilità di lavorare con differenti stack tecnologici come React. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
 
@@ -46,7 +46,7 @@ Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. Il CSS
 
 Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e cliccando `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
 
-Una volta fatto, invia l'URL al tuo progetto di lavoro con tutti i suoi test passati.
+Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati.
 
 # --solutions--
 

curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md

@@ -10,7 +10,7 @@ dashedName: build-a-survey-form
 
 **Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/VPaoNP>.
 
-Compila le [user stories qui sotto](https://en.wikipedia.org/wiki/User_story) e ottieni tutti i test da passare. Dalle il tuo stile personale.
+Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
 
 Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. CSS è raccomandato perché è l'argomento delle lezioni viste finora e dovresti fare pratica con il CSS di base. Se lo desideri puoi anche utilizzare Bootstrap o SASS. Ulteriori tecnologie (solo per esempio jQuery, React, Angular, o Vue) non sono raccomandate per questo progetto, e usarle è a tuo rischio. Altri progetti ti daranno la possibilità di lavorare con diversi stack tecnologici come React. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
 
@@ -48,7 +48,7 @@ Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. CSS è r
 
 Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo clic su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
 
-Una volta fatto, invia l'URL al tuo progetto di lavoro con tutti i suoi test passati.
+Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati.
 
 # --solutions--
 

curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md

@@ -10,7 +10,7 @@ dashedName: build-a-technical-documentation-page
 
 **Obiettivo:** Costuire un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/NdrKKL>.
 
-Compila le [user stories qui sotto](https://en.wikipedia.org/wiki/User_story) e ottieni tutti i test da passare. Dalle il tuo stile personale.
+Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
 
 Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. CSS è raccomandato perché è l'argomento delle lezioni viste finora, e dovresti fare pratica con il CSS di base. Se lo desideri puoi anche utilizzare Bootstrap o SASS. Ulteriori tecnologie (solo per esempio jQuery, React, Angular, o Vue) non sono raccomandate per questo progetto, e usarle è a tuo rischio. Altri progetti ti daranno la possibilità di lavorare con differenti stack tecnologici come React. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
 
@@ -46,7 +46,7 @@ Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. CSS è r
 
 Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e cliccando `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
 
-Una volta fatto, invia l'URL al tuo progetto di lavoro con tutti i suoi test passati.
+Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati.
 
 # --solutions--
 

curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md

@@ -10,7 +10,7 @@ dashedName: build-a-tribute-page
 
 **Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/zNqgVx>.
 
-Compila le [user stories qui sotto](https://en.wikipedia.org/wiki/User_story) e ottieni tutti i test da passare. Dalle il tuo stile personale.
+Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
 
 Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. CSS è raccomandato perché è l'argomento delle lezioni viste finora e dovresti fare pratica con il CSS di base. Se lo desideri puoi anche utilizzare Bootstrap o SASS. Ulteriori tecnologie (solo per esempio jQuery, React, Angular, o Vue) non sono raccomandate per questo progetto, e usarle è a tuo rischio. Altri progetti ti daranno la possibilità di lavorare con differenti stack tecnologici come React. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
 
@@ -34,7 +34,7 @@ Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. CSS è r
 
 Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo clic su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
 
-Una volta fatto, invia l'URL al tuo progetto di lavoro con tutti i suoi test passati.
+Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati.
 
 # --solutions--
 

curriculum/challenges/italian/03-front-end-libraries/front-end-libraries-projects/build-a-25-5-clock.md

@@ -1,6 +1,6 @@
 ---
 id: bd7158d8c442eddfaeb5bd0f
-title: Build a 25 + 5 Clock
+title: Costruisci un Orologio 25 + 5
 challengeType: 3
 forumTopicId: 301373
 dashedName: build-a-25--5-clock
@@ -8,71 +8,71 @@ dashedName: build-a-25--5-clock
 
 # --description--
 
-**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/XpKrrW>.
+**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/XpKrrW>.
 
-Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
+Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
 
-You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
+Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
 
-**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length").
+**User Story #1:** Posso vedere un elemento con `id="break-label"` che contiene una stringa (ad esempio "Break Length").
 
-**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length").
+**User Story #2:** Posso vedere un elemento con `id="session-label"` che contiene una stringa (ad esempio "Session Length").
 
-**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`.
+**User Story #3:** Posso vedere due elementi cliccabili con gli id rispettivamente: `id="break-decrement"` e `id="session-decrement"`.
 
-**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`.
+**User Story #4:** Posso vedere due elementi cliccabili con gli id rispettivamente: `id="break-increment"` e `id="session-increment"`.
 
-**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5.
+**User Story #5:** Posso vedere un elemento con un corrispondente `id="break-length"`, che per impostazione predefinita (al caricamento) visualizza un valore di 5.
 
-**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25.
+**User Story #6:** Posso vedere un elemento con un corrispondente `id="session-length"`, che per impostazione predefinita visualizza un valore di 25.
 
-**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session").
+**User Story #7:** Posso vedere un elemento con un corrispondente `id="timer-label"`, che contiene una stringa che indica che una sessione è inizializzata (es. "Session").
 
-**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00).
+**User Story #8:** Posso vedere un elemento con corrispondente `id="time-left"`. NOTA: In pausa o in esecuzione, il valore in questo campo deve essere sempre visualizzato in formato `mm:ss` (cioè 25:00).
 
-**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`.
+**User Story #9:** Posso vedere un elemento cliccabile con un corrispondente `id="start_stop"`.
 
-**User Story #10:** I can see a clickable element with a corresponding `id="reset"`.
+**User Story #10:** Posso vedere un elemento cliccabile con un corrispondente `id="reset"`.
 
-**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to its default state.
+**User Story #11:** Quando clicco sull'elemento con l'id di `reset`, qualsiasi timer in esecuzione deve essere fermato, il valore in `id="break-length"` dovrebbe tornare a `5`, il valore in `id="session-length"` dovrebbe ritornare a 25, e l'elemento con `id="time-left"` dovrebbe tornare al suo stato predefinito.
 
-**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value.
+**User Story #12:** Quando clicco sull'elemento con l'id `break-decrement`, il valore all'interno di `id="break-length"` diminuisce di 1, e posso vedere il valore aggiornato.
 
-**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value.
+**User Story #13:** Quando clicco sull'elemento con l'id di `break-increment`, il valore all'interno di `id="break-length"` aumenta di 1, e posso vedere il valore aggiornato.
 
-**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value.
+**User Story #14:** Quando clicco sull'elemento con l'id di `session-decrement`, il valore in `id="session-length"` diminuisce di 1, e riesco a vedere il valore aggiornato.
 
-**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value.
+**User Story #15:** Quando clicco sull'elemento con l'id di `session-increment`, il valore all'interno di `id="session-length"` aumenta di 1, e posso vedere il valore aggiornato.
 
-**User Story #16:** I should not be able to set a session or break length to &lt;= 0.
+**User Story #16:** Non dovrei essere in grado di impostare la lunghezza di una sessione o di una pausa &lt;= 0.
 
-**User Story #17:** I should not be able to set a session or break length to > 60.
+**User Story #17:** Non dovrei essere in grado di impostare la lunghezza di una sessione o di una pausa > 60.
 
-**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25.
+**User Story #18:** Quando faccio click per la prima volta sull'elemento con `id="start_stop"`, il timer dovrebbe iniziare dal valore attualmente visualizzato in `id="session-length"`, anche se il valore è stato incrementato o diminuito rispetto al valore originario di 25.
 
-**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms).
+**User Story #19:** Se il timer è in esecuzione, l'elemento con l'id di `time-left` dovrebbe visualizzare il tempo rimanente nel formato `mm:ss` (decrementando di un valore di 1 e aggiornando il display ogni 1000ms).
 
-**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause.
+**User Story #20:** Se il timer è in esecuzione e clicco sull'elemento con `id="start_stop"`, il conto alla rovescia dovrebbe andare in pausa.
 
-**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused.
+**User Story #21:** Se il timer è in pausa e clicco sull'elemento con `id="start_stop"`, il conto alla rovescia dovrebbe riprendere dal punto in cui è stato messo in pausa.
 
-**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun.
+**User Story #22:** Quando un conto alla rovescia di una sessione raggiunge lo zero (NOTA: il timer DEVE raggiungere le 00:00), e inizia un nuovo conto alla rovescia, l'elemento con l'id di `timer-label` dovrebbe mostrare una stringa che indica che è iniziata una pausa.
 
-**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element.
+**User Story #23:** Quando il conto alla rovescia di una sessione raggiunge lo zero (NOTA: il timer DEVE raggiungere le 00:00), dovrebbe iniziare un nuovo conto alla rovescia, contando alla rovescia dal valore attualmente visualizzato nell'elemento `id="break-length"`.
 
-**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun.
+**User Story #24:** Quando un conto alla rovescia raggiunge lo zero (NOTA: il timer DEVE raggiungere le 00:00), e inizia un nuovo conto alla rovescia, l'elemento con l'id di `timer-label` dovrebbe mostrare una stringa che indica che è iniziata una sessione.
 
-**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element.
+**User Story #25:** Quando il conto alla rovescia della pausa raggiunge lo zero (NOTA: il timer DEVE raggiungere le 00:00), dovrebbe iniziare un nuovo conto alla rovescia, contando alla rovescia dal valore attualmente visualizzato nell'elemento `id="session-length"`.
 
-**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`.
+**User Story #26:** Quando un conto alla rovescia raggiunge lo zero (NOTA: il timer DEVE raggiungere le 00:00), dovrebbe essere riprodotto un suono che indica che il tempo è scaduto. Questo dovrebbe utilizzare un tag HTML5 `audio` e avere un corrispondente `id="beep"`.
 
-**User Story #27:** The audio element with `id="beep"` must be 1 second or longer.
+**User Story #27:** L'elemento audio con `id="beep"` deve essere lungo un secondo o più.
 
-**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked.
+**User Story #28:** L'elemento audio con id di `beep` deve terminare la riproduzione e tornare all'inizio quando viene cliccato l'elemento con l'id `reset`.
 
-You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo clic su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
 
-Once you're done, submit the URL to your working project with all its tests passing.
+Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati.
 
 # --solutions--
 

curriculum/challenges/italian/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md

@@ -1,6 +1,6 @@
 ---
 id: 587d7dbc367417b2b2512bae
-title: Build a Drum Machine
+title: Costruisci una batteria
 challengeType: 3
 forumTopicId: 301370
 dashedName: build-a-drum-machine
@@ -8,29 +8,29 @@ dashedName: build-a-drum-machine
 
 # --description--
 
-**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/MJyNMd>.
+**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/MJyNMd>.
 
-Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
+Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
 
-You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
+Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
 
-**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements.
+**User Story #1:** Dovrei essere in grado di vedere un contenitore esterno con un corrispondente `id="drum-machine"` che contiene tutti gli altri elementi.
 
-**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`.
+**User Story #2:** All'interno di `#drum-machine` posso vedere un elemento con un corrispondente `id="display"`.
 
-**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order.
+**User Story #3:** Dentro a `#drum-machine` posso vedere 9 elementi tamburo cliccabili, ognuno di classe `drum-pad`, con un id univoco che descrive la clip audio che l'elemento dovrà avviare, e un testo interno che corrisponde a uno dei seguenti tasti sulla tastiera: `Q` `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. I tamburi DEVONO essere in questo ordine.
 
-**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.).
+**User Story #4:** All'interno di ogni `.drum-pad`, ci dovrebbe essere un elemento HTML5 `audio` che ha un attributo `src` che indica una clip audio, un nome di classe `clip` e un id corrispondente al testo interno del `.drum-pad` genitore (ad es. `id="Q"`, `id="W"`, `id="E"` ecc.).
 
-**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered.
+**User Story #5:** Quando clicco su un elemento `.drum-pad`, la clip audio contenuta nell'elemento figlio `audio` dovrebbe essere attivata.
 
-**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.).
+**User Story #6:** Quando premo il tasto di attivazione associato a ogni `.drum-pad`, la clip audio contenuta nell'elemento figlio `audio` dovrebbe essere attivata (ad es. premendo il tasto `Q` si dovrebbe attivare il tamburo che contiene la stringa `Q`, premendo il tasto `W` si dovrebbe attivare il tamburo che contiene la stringa `W`, ecc.).
 
-**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique).
+**User Story #7:** Quando un `.drum-pad` viene attivato, viene visualizzata una stringa che descrive la clip audio associata come testo interno dell'elemento `#display` (ogni stringa deve essere unica).
 
-You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo clic su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
 
-Once you're done, submit the URL to your working project with all its tests passing.
+Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati.
 
 # --solutions--
 

curriculum/challenges/italian/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.md

@@ -1,6 +1,6 @@
 ---
 id: bd7158d8c442eddfaeb5bd17
-title: Build a JavaScript Calculator
+title: Costruisci una Calcolatrice JavaScript
 challengeType: 3
 forumTopicId: 301371
 dashedName: build-a-javascript-calculator
@@ -8,52 +8,52 @@ dashedName: build-a-javascript-calculator
 
 # --description--
 
-**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/wgGVVX>.
+**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/wgGVVX>.
 
-Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
+Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
 
-You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
+Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
 
-**User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `id="equals"`.
+**User Story #1:** La mia calcolatrice dovrebbe contenere un elemento cliccabile contenente un `=` (segno uguale) con un corrispondente `id="equals"`.
 
-**User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`.
+**User Story #2:** La mia calcolatrice dovrebbe contenere 10 elementi cliccabili contenenti ciascuno un numero da 0-9, con i seguenti ID corrispondenti: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"` `id="seven"`, `id="eight"` e `id="nine"`.
 
-**User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`.
+**User Story #3:** La mia calcolatrice dovrebbe contenere 4 elementi cliccabili contenenti ognuno uno degli operatori matematici primari con i seguenti ID corrispondenti: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`.
 
-**User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id="decimal"`.
+**User Story #4:** La mia calcolatrice dovrebbe contenere un elemento cliccabile contenente un simbolo `.` (punto decimale) con un corrispondente `id="decimal"`.
 
-**User Story #5:** My calculator should contain a clickable element with an `id="clear"`.
+**User Story #5:** La mia calcolatrice dovrebbe contenere un elemento cliccabile con un `id="clear"`.
 
-**User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`.
+**User Story #6:** La mia calcolatrice dovrebbe contenere un elemento per visualizzare i valori con un corrispondente `id="display"`.
 
-**User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`.
+**User Story #7:** In qualsiasi momento, premendo il pulsante `clear` dovrebbero essere cancellati i valori di input e output, e la calcolatrice dovrebbe tornare suo stato iniziale; nell'elemento con l'id `display` dovrebbe essere mostrato 0.
 
-**User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`.
+**User Story #8:** Quando inserisco dei numeri, dovrei essere in grado di vedere il mio input nell'elemento con l'id `display`.
 
-**User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`.
+**User Story #9:** Dovrei essere in grado di aggiungere, sottrarre, moltiplicare e dividere una catena di numeri di qualsiasi lunghezza e in qualsiasi ordine, e quando premo `=`, il risultato corretto dovrebbe essere mostrato nell'elemento con l'id `display`.
 
-**User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros.
+**User Story #10:** La mia calcolatrice non dovrebbe consentire a un numero di iniziare con zeri multipli.
 
-**User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted.
+**User Story #11:** Quando l'elemento decimale viene cliccato, un `.` dovrebbe essere accodato al valore attualmente visualizzato; non dovrebbero essere accettati due `.` in un numero.
 
-**User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points.
+**User Story #12:** Dovrei essere in grado di eseguire qualsiasi operazione (`+`, `-`, `*`, `/`) sui numeri contenenti punti decimali.
 
-**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`).
+**User Story #13:** Se 2 o più operatori sono inseriti consecutivamente, l'operazione effettuata dovrebbe essere l'ultimo operatore inserito (escluso il segno meno (`-`). Ad esempio, se viene inserito `5 + * 7 =`, il risultato dovrebbe essere `35` (cioè `5 * 7`); se viene inserito `5 * - 5 =`, il risultato dovrebbe essere `-25` (cioè `5 * (-5)`).
 
-**User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation.
+**User Story #14:** Premere un operatore immediatamente dopo `=` dovrebbe avviare un nuovo calcolo che funzioni sul risultato dell'elaborazione precedente.
 
-**User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places).
+**User Story #15:** La mia calcolatrice dovrebbe avere diversi decimali di precisione quando si tratta di arrotondamento (nota che non c'è uno standard esatto, ma si dovrebbe essere in grado di gestire calcoli come `2 / 7` con ragionevole precisione ad almeno 4 decimali).
 
-**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: <dfn>immediate execution logic</dfn> and <dfn>formula logic</dfn>. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug.
+**Nota sulla logica della calcolatrice:** Va notato che ci sono due principali scuole di pensiero sulla logica dell'input della calcolatrice: <dfn>logica a esecuzione immediata</dfn> e <dfn>logica della formula</dfn>. Il nostro esempio utilizza la logica della formula e osserva l'ordine di precedenza degli operatori, mentre l'esecuzione immediata non lo fa. Entrambe sono accettabili, ma nota che a seconda di quale sceglierai, la calcolatrice potrà produrre risultati diversi rispetto ai nostri per alcune equazioni (vedi l'esempio in basso). Finché la matematica può essere verificata da un altro calcolatore di produzione, non considerarlo un bug.
 
-**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =`  
+**ESEMPIO:** `3 + 5 x 6 - 2 / 4 =`
 
--   **Immediate Execution Logic:** `11.5`
+-   **Logica a esecuzione immediata:** `11.5`
--   **Formula/Expression Logic:** `32.5`
+-   **Logica della formula:** `32.5`
 
-You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo clic su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
 
-Once you're done, submit the URL to your working project with all its tests passing.
+Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati.
 
 # --solutions--
 

curriculum/challenges/italian/03-front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer.md

@@ -1,6 +1,6 @@
 ---
 id: bd7157d8c242eddfaeb5bd13
-title: Build a Markdown Previewer
+title: Costruisci un visualizzatore di anteprima per il Markdown
 challengeType: 3
 forumTopicId: 301372
 dashedName: build-a-markdown-previewer
@@ -8,29 +8,29 @@ dashedName: build-a-markdown-previewer
 
 # --description--
 
-**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/GrZVVO>.
+**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/GrZVVO>.
 
-Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
+Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
 
-You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
+Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
 
-**User Story #1:** I can see a `textarea` element with a corresponding `id="editor"`.
+**User Story #1:** Posso vedere un elemento `textarea` con un corrispondente `id="editor"`.
 
-**User Story #2:** I can see an element with a corresponding `id="preview"`.
+**User Story #2:** Posso vedere un elemento con un corrispondente `id="preview"`.
 
-**User Story #3:** When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea.
+**User Story #3:** Quando inserisco del testo nell'elemento `#editor`, l'elemento `#preview` viene aggiornato mentre scrivo per visualizzare il contenuto della textarea.
 
-**User Story #4:** When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: <https://cdnjs.com/libraries/marked>).
+**User Story #4:** Quando inserisco markdown in stile GitHub nell'elemento `#editor`, il testo viene presentato come HTML nell'elemento `#preview` mentre digito (SUGGERIMENTO: Non è necessario che analizzi tu stesso il Markdown - puoi importare la libreria Marked per questo: [https://cdnjs. om/libraries/marked](https://cdnjs.com/libraries/marked)).
 
-**User Story #5:** When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.
+**User Story #5:** Quando il mio visualizzatore di markdown viene caricato inizialmente, il testo predefinito nel campo `#editor` dovrebbe contenere markdown valido che rappresenti almeno uno dei seguenti elementi: un'intestazione (dimensione H1), una sotto-intestazione (formato H2), un collegamento, del codice in linea, un blocco di codice, un elemento lista, un blockquote, un'immagine e un testo in grassetto.
 
-**User Story #6:** When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element.
+**User Story #6:** Quando il mio visualizzatore di markdown viene caricato inizialmente, il markdown predefinito nel campo `#editor` dovrebbe essere presentato come HTML nell'elemento `#preview`.
 
-**Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements.
+**Bonus opzionale (non è necessario superare questo test):** Il mio visualizzatore di markdown interpreta i ritorni a capo e li presenta come elementi `br` (interruzione di riga).
 
-You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo clic su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
 
-Once you're done, submit the URL to your working project with all its tests passing.
+Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati.
 
 # --solutions--
 

curriculum/challenges/italian/03-front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine.md

@@ -1,6 +1,6 @@
 ---
 id: bd7158d8c442eddfaeb5bd13
-title: Build a Random Quote Machine
+title: Costruisci una Macchina per le citazioni casuali
 challengeType: 3
 forumTopicId: 301374
 dashedName: build-a-random-quote-machine
@@ -8,39 +8,39 @@ dashedName: build-a-random-quote-machine
 
 # --description--
 
-**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
+**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
 
-Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
+Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
 
-You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
+Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
 
-**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`.
+**User Story #1:** Posso vedere un elemento wrapper con un corrispondente `id="quote-box"`.
 
-**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`.
+**User Story #2:** Dentro a `#quote-box` posso vedere un elemento con un corrispondente `id="text"`.
 
-**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`.
+**User Story #3:** Dentro a `#quote-box` posso vedere un elemento con un corrispondente `id="author"`.
 
-**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`.
+**User Story #4:** Dentro a `#quote-box`, posso vedere un elemento cliccabile con un corrispondente `id="new-quote"`.
 
-**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`.
+**User Story #5:** Dentro a `#quote-box`, posso vedere un elemento cliccabile `a` con un corrispondente `id="tweet-quote"`.
 
-**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`.
+**User Story #6:** Al caricamento iniziale, la mia macchina per le citazioni visualizza una citazione casuale nell'elemento con `id="text"`.
 
-**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`.
+**User Story #7:** Al caricamento iniziale, la mia macchina per le citazioni visualizza l'autore della citazione casuale nell'elemento con `id="author"`.
 
-**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element.
+**User Story #8:** Quando si clicca sul pulsante `#new-quote`, la mia macchina per le citazioni dovrebbe andare a prendere una nuova citazione e visualizzarla nell'elemento `#text`.
 
-**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element.
+**User Story #9:** La mia macchina per le citazioni dovrebbe andare a prendere l'autore della nuova citazione quando viene cliccato il pulsante `#new-quote` e visualizzarlo nell'elemento `#author`.
 
-**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote` `a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote.
+**User Story #10:** Posso twittare la citazione corrente cliccando sull'elemento `a` `#tweet-quote`. Questo elemento `a` dovrebbe includere il percorso `"twitter.com/intent/tweet"` nel suo attributo `href` per twittare la citazione corrente.
 
-**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized.
+**User Story #11:** L'elemento contenitore `#quote-box` dovrebbe essere centrato orizzontalmente. Ti preghiamo di eseguire i test con un livello di zoom del browser al 100% e la pagina massimizzata.
 
-You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo clic su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
 
-Once you're done, submit the URL to your working project with all its tests passing.
+Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati.
 
-**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved.
+**Nota:** Twitter non consente di caricare i link in un iframe. Prova a usare l'attributo `target="_blank"` o `target="_top"` nell'elemento `#tweet-quote` se il tuo tweet non viene caricato. `target="_top"` sostituirà la scheda corrente quindi assicurati che il tuo lavoro sia stato salvato.
 
 # --solutions--
 

curriculum/challenges/italian/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d403618b
-title: Give Sibling Elements a Unique Key Attribute
+title: Dare agli elementi fratelli un attributo chiave univoco
 challengeType: 6
 forumTopicId: 301394
 dashedName: give-sibling-elements-a-unique-key-attribute
@@ -8,19 +8,19 @@ dashedName: give-sibling-elements-a-unique-key-attribute
 
 # --description--
 
-The last challenge showed how the `map` method is used to dynamically render a number of elements based on user input. However, there was an important piece missing from that example. When you create an array of elements, each one needs a `key` attribute set to a unique value. React uses these keys to keep track of which items are added, changed, or removed. This helps make the re-rendering process more efficient when the list is modified in any way.  
+L'ultima sfida ha mostrato come viene utilizzato il metodo `map` per rendere dinamicamente un certo numero di elementi basati sull'input dell'utente. Tuttavia in quell'esempio mancava una parte importante. Quando crei un array di elementi, ognuno ha bisogno di un attributo `key` impostato su un valore univoco. React utilizza queste chiavi per tenere traccia degli elementi aggiunti, modificati o rimossi. Questo aiuta a rendere il processo di ri-rendering più efficiente quando l'elenco viene modificato in qualsiasi modo.
 
-**Note:** Keys only need to be unique between sibling elements, they don't need to be globally unique in your application.
+**Nota:** Le chiavi devono essere uniche solo tra gli elementi fratelli: non c'è bisogno che siano uniche a livello globale nella tua applicazione.
 
 # --instructions--
 
-The code editor has an array with some front end frameworks and a stateless functional component named `Frameworks()`. `Frameworks()` needs to map the array to an unordered list, much like in the last challenge. Finish writing the `map` callback to return an `li` element for each framework in the `frontEndFrameworks` array. This time, make sure to give each `li` a `key` attribute, set to a unique value. The `li` elements should also contain text from `frontEndFrameworks`.
+L'editor di codice ha un array con alcuni framework di front-end e un componente funzionale senza stato chiamato `Frameworks()`. `Frameworks()` ha bisogno di mappare l'array in una lista non ordinata, molto simile a quella dell'ultima sfida. Termina la scrittura della callback di `map` per restituire un elemento `li` per ogni framework nell'array `frontEndFrameworks`. Questa volta, assicurati di dare ad ogni attributo `li` un attributo `key` impostato su un valore univoco. Gli elementi `li` dovrebbero contenere anche del testo preso da `frontEndFrameworks`.
 
-Normally, you want to make the key something that uniquely identifies the element being rendered. As a last resort the array index may be used, but typically you should try to use a unique identification.
+Normalmente, si desidera costruire la chiave con qualcosa che identifica univocamente l'elemento che viene presentato. Come ultima risorsa può essere utilizzato l'indice dell'array, ma in generale dovresti provare a usare un'identificazione univoca.
 
 # --hints--
 
-The `Frameworks` component should exist and render to the page.
+Il componente `Frameworks` dovrebbe esistere ed essere presentato nella pagina.
 
 ```js
 assert(
@@ -28,19 +28,19 @@ assert(
 );
 ```
 
-`Frameworks` should render an `h1` element.
+`Frameworks` dovrebbe effetturare il rendering di un elemento `h1`.
 
 ```js
 assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1);
 ```
 
-`Frameworks` should render a `ul` element.
+`Frameworks` dovrebbe effetturare il rendering di un elemento `ul`.
 
 ```js
 assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1);
 ```
 
-The `ul` tag should render 6 child `li` elements.
+Il tag `ul` dovrebbe fare il rendering di 6 elementi figli `li`.
 
 ```js
 assert(
@@ -54,7 +54,7 @@ assert(
 );
 ```
 
-Each list item element should have a unique `key` attribute.
+Ogni elemento della lista dovrebbe avere un attributo `key` univoco.
 
 ```js
 assert(
@@ -73,7 +73,7 @@ assert(
 );
 ```
 
-Each list item element should contain text from `frontEndFrameworks`.
+Ogni elemento della lista dovrebbe contenere del testo preso da `frontEndFrameworks`.
 
 ```js
 assert(

curriculum/challenges/italian/03-front-end-libraries/react/introducing-inline-styles.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036181
-title: Introducing Inline Styles
+title: Gli stili inline
 challengeType: 6
 forumTopicId: 301395
 dashedName: introducing-inline-styles
@@ -8,33 +8,33 @@ dashedName: introducing-inline-styles
 
 # --description--
 
-There are other complex concepts that add powerful capabilities to your React code. But you may be wondering about the more simple problem of how to style those JSX elements you create in React. You likely know that it won't be exactly the same as working with HTML because of [the way you apply classes to JSX elements](/learn/front-end-libraries/react/define-an-html-class-in-jsx).
+Ci sono altri concetti complessi che aggiungono potenti funzionalità al tuo codice React. Ma forse ti stai chiedendo come stilizzare quegli elementi JSX che crei in React. Probabilmente sai che non sarà esattamente come lavorare con HTML a causa del [modo in cui applichi le classi agli elementi JSX](/learn/front-end-libraries/react/define-an-html-class-in-jsx).
 
-If you import styles from a stylesheet, it isn't much different at all. You apply a class to your JSX element using the `className` attribute, and apply styles to the class in your stylesheet. Another option is to apply inline styles, which are very common in ReactJS development.
+Se importi degli stili da un foglio di stile, non poi è così diverso. Applichi una classe al tuo elemento JSX usando l'attributo `className` e applichi gli stili alla classe nel tuo foglio di stile. Un'altra opzione è quella di applicare degli stili in linea, che sono molto comuni nello sviluppo di ReactJS.
 
-You apply inline styles to JSX elements similar to how you do it in HTML, but with a few JSX differences. Here's an example of an inline style in HTML:
+Puoi applicare degli stili in linea a elementi JSX in modo simile a come faresti in HTML, ma con alcune differenze JSX. Ecco un esempio di uno stile in linea in HTML:
 
 ```jsx
 <div style="color: yellow; font-size: 16px">Mellow Yellow</div>
 ```
 
-JSX elements use the `style` attribute, but because of the way JSX is transpiled, you can't set the value to a `string`. Instead, you set it equal to a JavaScript `object`. Here's an example:
+Gli elementi JSX usano l'attributo `style`, ma a causa del modo in cui JSX è transcodificato, non puoi impostare il valore su una `string`. Invece, gli assegnerai un `object` JavaScript. Ecco un esempio:
 
 ```jsx
 <div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
 ```
 
-Notice how we camelCase the `fontSize` property? This is because React will not accept kebab-case keys in the style object. React will apply the correct property name for us in the HTML.
+Vedi come abbiamo usato camelCase nella proprietà `fontSize`? Questo perché React non accetterà le chiavi kebab-case nell'oggetto style. React applicherà per noi il nome di proprietà corretto in HTML.
 
 # --instructions--
 
-Add a `style` attribute to the `div` in the code editor to give the text a color of red and font size of `72px`.
+Aggiungi un attributo `style` al `div`nell'editor di codice per dare al testo un colore rosso e una dimensione del carattere di `72px`.
 
-Note that you can optionally set the font size to be a number, omitting the units `px`, or write it as `72px`.
+Nota che è possibile impostare facoltativamente la dimensione del carattere come un numero, omettendo le unità `px` o scrivendole come `72px`.
 
 # --hints--
 
-The component should render a `div` element.
+Il componente dovrebbe mostrare un elemento `div`.
 
 ```js
 assert(
@@ -45,7 +45,7 @@ assert(
 );
 ```
 
-The `div` element should have a color of `red`.
+L'elemento `div` dovrebbe avere un colore `red`.
 
 ```js
 assert(
@@ -56,7 +56,7 @@ assert(
 );
 ```
 
-The `div` element should have a font size of `72px`.
+L'elemento `div` dovrebbe avere una dimensione del carattere di `72px`.
 
 ```js
 assert(

curriculum/challenges/italian/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036161
-title: Learn About Self-Closing JSX Tags
+title: Tag JSX a chiusura automatica
 challengeType: 6
 forumTopicId: 301396
 dashedName: learn-about-self-closing-jsx-tags
@@ -8,35 +8,35 @@ dashedName: learn-about-self-closing-jsx-tags
 
 # --description--
 
-So far, you’ve seen how JSX differs from HTML in a key way with the use of `className` vs. `class` for defining HTML classes.
+Finora, hai visto come JSX si differenzia dall'HTML in modo essenziale con l'uso di `className` al posto di `class` per la definizione delle classi HTML.
 
-Another important way in which JSX differs from HTML is in the idea of the self-closing tag.
+Un altro aspetto importante in cui JSX differisce da HTML è quello che riguarda i tag a chiusura automatica (self-closing).
 
-In HTML, almost all tags have both an opening and closing tag: `<div></div>`; the closing tag always has a forward slash before the tag name that you are closing. However, there are special instances in HTML called “self-closing tags”, or tags that don’t require both an opening and closing tag before another tag can start.
+In HTML, quasi tutti i tag hanno sia un tag di apertura che di chiusura: `<div></div>`; il tag di chiusura ha sempre una barra in avanti prima del nome del tag che si sta chiudendo. Tuttavia, ci sono dei casi speciali in HTML chiamati “tag a chiusura automatica”, cioè dei tag che non richiedono sia un tag di apertura che di chiusura prima che un altro tag possa iniziare.
 
-For example the line-break tag can be written as `<br>` or as `<br />`, but should never be written as `<br></br>`, since it doesn't contain any content.
+Ad esempio, il tag line-break può essere scritto come `<br>` o come `<br />`, ma non dovrebbe mai essere scritto come `<br></br>`, poiché non contiene alcun contenuto.
 
-In JSX, the rules are a little different. Any JSX element can be written with a self-closing tag, and every element must be closed. The line-break tag, for example, must always be written as `<br />` in order to be valid JSX that can be transpiled. A `<div>`, on the other hand, can be written as `<div />` or `<div></div>`. The difference is that in the first syntax version there is no way to include anything in the `<div />`. You will see in later challenges that this syntax is useful when rendering React components.
+In JSX, le regole sono un po 'diverse. Qualsiasi elemento JSX può essere scritto con un tag a chiusura automatica, e ogni elemento deve essere chiuso. Il tag line-break, ad esempio, deve essere sempre scritto come `<br />` per essere codice JSX valido che possa essere transcodificato. Un `<div>`, invece, può essere scritto come `<div />` o `<div></div>`. La differenza è che nella prima versione della sintassi non c'è modo di includere nulla nel `<div />`. Vedrai nelle sfide successive che questa sintassi è utile durante il rendering dei componenti React.
 
 # --instructions--
 
-Fix the errors in the code editor so that it is valid JSX and successfully transpiles. Make sure you don't change any of the content - you only need to close tags where they are needed.
+Correggi gli errori nell'editor di codice in modo che sia JSX valido e venga transcodificato con successo. Assicurati di non modificare nessuno dei contenuti - devi solo chiudere i tag dove necessario.
 
 # --hints--
 
-The constant `JSX` should return a `div` element.
+La costante `JSX` dovrebbe restituire un elemento `div`.
 
 ```js
 assert.strictEqual(JSX.type, 'div');
 ```
 
-The `div` should contain a `br` tag.
+Il `div` dovrebbe contenere un tag `br`.
 
 ```js
 assert(Enzyme.shallow(JSX).find('br').length === 1);
 ```
 
-The `div` should contain an `hr` tag.
+Il `div` dovrebbe contenere un tag `hr`.
 
 ```js
 assert(Enzyme.shallow(JSX).find('hr').length === 1);

curriculum/challenges/italian/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036180
-title: Optimize Re-Renders with shouldComponentUpdate
+title: Ottimizzare il re-rendering con shouldComponentUpdate
 challengeType: 6
 forumTopicId: 301398
 dashedName: optimize-re-renders-with-shouldcomponentupdate
@@ -8,17 +8,17 @@ dashedName: optimize-re-renders-with-shouldcomponentupdate
 
 # --description--
 
-So far, if any component receives new `state` or new `props`, it re-renders itself and all its children. This is usually okay. But React provides a lifecycle method you can call when child components receive new `state` or `props`, and declare specifically if the components should update or not. The method is `shouldComponentUpdate()`, and it takes `nextProps` and `nextState` as parameters.
+Finora, se un componente riceve un nuovo `state` o nuove `props`, avvia un re-rendering di sé stesso e di tutti i suoi figli. Questo normalmente va bene. Ma React fornisce un metodo per il ciclo di vita che puoi chiamare quando i componenti figli ricevono un nuovo `state` o `props`, e dichiarare specificamente se i componenti devono essere aggiornati o meno. Il metodo è `shouldComponentUpdate()`, e richiede `nextProps` e `nextState` come parametri.
 
-This method is a useful way to optimize performance. For example, the default behavior is that your component re-renders when it receives new `props`, even if the `props` haven't changed. You can use `shouldComponentUpdate()` to prevent this by comparing the `props`. The method must return a `boolean` value that tells React whether or not to update the component. You can compare the current props (`this.props`) to the next props (`nextProps`) to determine if you need to update or not, and return `true` or `false` accordingly.
+Questo metodo è un modo utile per ottimizzare le prestazioni. Ad esempio, il comportamento predefinito è che il tuo componente rifà il render quando riceve nuove `props`, anche se le `props` non sono cambiate. È possibile utilizzare `shouldComponentUpdate()` per evitarlo confrontando le `props`. Il metodo deve restituire un valore `boolean` che dice a React se aggiornare o meno il componente. Puoi confrontare gli elementi attuali (`this.props`) con le nuove props (`nextProps`) per determinare se è necessario aggiornare o meno, e restituire `true` o `false` di conseguenza.
 
 # --instructions--
 
-The `shouldComponentUpdate()` method is added in a component called `OnlyEvens`. Currently, this method returns `true` so `OnlyEvens` re-renders every time it receives new `props`. Modify the method so `OnlyEvens` updates only if the `value` of its new props is even. Click the `Add` button and watch the order of events in your browser's console as the lifecycle hooks are triggered.
+Il metodo `shouldComponentUpdate()` viene aggiunto in un componente chiamato `OnlyEvens`. Attualmente, questo metodo restituisce `true` così `OnlyEvens` rifà il render ogni volta che riceve nuove `props`. Modifica il metodo in modo che `OnlyEvens` aggiorni solo se il `value` delle sue nuove props è pari. Fai clic sul pulsante `Add` e guarda l'ordine degli eventi nella console del browser mano a mano che vengono attivati durante il ciclo di vita.
 
 # --hints--
 
-The `Controller` component should render the `OnlyEvens` component as a child.
+Il componente `Controller` dovrebbe fare il rendering del componente figlio `OnlyEvens`.
 
 ```js
 assert(
@@ -32,7 +32,7 @@ assert(
 );
 ```
 
-The `shouldComponentUpdate` method should be defined on the `OnlyEvens` component.
+Il metodo `shouldComponentUpdate` dovrebbe essere definito sul componente `OnlyEvens`.
 
 ```js
 assert(
@@ -45,7 +45,7 @@ assert(
 );
 ```
 
-The `OnlyEvens` component should return an `h1` tag which renders the value of `this.props.value`.
+Il componente `OnlyEvens` dovrebbe restituire un tag `h1` che presenta il valore di `this.props.value`.
 
 ```js
 (() => {
@@ -64,7 +64,7 @@ The `OnlyEvens` component should return an `h1` tag which renders the value of `
 })();
 ```
 
-`OnlyEvens` should re-render only when `nextProps.value` is even.
+`OnlyEvens` dovrebbe rifare il render solo quando `nextProps.value` è pari.
 
 ```js
 (() => {

curriculum/challenges/italian/03-front-end-libraries/react/override-default-props.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d403616c
-title: Override Default Props
+title: Sovrascrivere le proprietà predefinite
 challengeType: 6
 forumTopicId: 301399
 dashedName: override-default-props
@@ -8,17 +8,17 @@ dashedName: override-default-props
 
 # --description--
 
-The ability to set default props is a useful feature in React. The way to override the default props is to explicitly set the prop values for a component.
+La possibilità di impostare delle proprietà predefinite è una caratteristica utile in React. Per sovrascrivere gli elementi predefiniti si devono impostare esplicitamente i valori delle proprietà per un componente.
 
 # --instructions--
 
-The `ShoppingCart` component now renders a child component `Items`. This `Items` component has a default prop `quantity` set to the integer `0`. Override the default prop by passing in a value of `10` for `quantity`.
+Il componente `ShoppingCart` ora presenta un componente figlio `Items`. Questo componente `Items` ha una proprietà di default `quantity` impostata all'intero `0`. Sovrascrivi la proprietà predefinita passando un valore di `10` per `quantity`.
 
-**Note:** Remember that the syntax to add a prop to a component looks similar to how you add HTML attributes. However, since the value for `quantity` is an integer, it won't go in quotes but it should be wrapped in curly braces. For example, `{100}`. This syntax tells JSX to interpret the value within the braces directly as JavaScript.
+**Nota:** Ricorda che la sintassi per aggiungere una proprietà a un componente è simile a quella degli attributi HTML. Tuttavia, poiché il valore per la `quantity` è un numero intero, non andrà tra virgolette ma dovrebbe essere racchiusa tra parentesi graffe. Ad esempio, `{100}`. Questa sintassi dice a JSX di interpretare il valore all'interno delle parentesi graffe direttamente come JavaScript.
 
 # --hints--
 
-The component `ShoppingCart` should render.
+Il componente `ShoppingCart` dovrebbe effettuare il render.
 
 ```js
 assert(
@@ -29,7 +29,7 @@ assert(
 );
 ```
 
-The component `Items` should render.
+Il componente `Items` dovrebbe effettuare il render.
 
 ```js
 assert(
@@ -40,7 +40,7 @@ assert(
 );
 ```
 
-The `Items` component should have a prop of `{ quantity: 10 }` passed from the `ShoppingCart` component.
+Il componente `Items` dovrebbe avere una proprietà di `{ quantity: 10 }` passata dal componente `ShoppingCart`.
 
 ```js
 (getUserInput) =>

curriculum/challenges/italian/03-front-end-libraries/react/pass-a-callback-as-props.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d403617b
-title: Pass a Callback as Props
+title: Passare una Callback come proprietà
 challengeType: 6
 forumTopicId: 301400
 dashedName: pass-a-callback-as-props
@@ -8,17 +8,17 @@ dashedName: pass-a-callback-as-props
 
 # --description--
 
-You can pass `state` as props to child components, but you're not limited to passing data. You can also pass handler functions or any method that's defined on a React component to a child component. This is how you allow child components to interact with their parent components. You pass methods to a child just like a regular prop. It's assigned a name and you have access to that method name under `this.props` in the child component.
+Puoi passare lo `state` come proprietà ai componenti figli, ma non sei limitato al passaggio dei dati. Puoi anche passare a un componente figlio delle funzioni di gestione o qualsiasi metodo definito su un componente React. In questo modo permetti ai componenti figli di interagire con i loro componenti genitori. Passi dei metodi a un figlio proprio come delle normali proprietà. Verrà assegnato un nome e potrai accedere a quel nome di metodo da `this.props` nel componente figlio.
 
 # --instructions--
 
-There are three components outlined in the code editor. The `MyApp` component is the parent that will render the `GetInput` and `RenderInput` child components. Add the `GetInput` component to the render method in `MyApp`, then pass it a prop called `input` assigned to `inputValue` from `MyApp`'s `state`. Also create a prop called `handleChange` and pass the input handler `handleChange` to it.
+Ci sono tre componenti delineati nell'editor di codice. Il componente `MyApp` è il genitore che presenterà i componenti figli `GetInput` e `RenderInput`. Aggiungi il componente `GetInput` al metodo render in `MyApp`, poi passagli una proprietà chiamata `input` assegnata a `inputValue` dallo `state` di `MyApp`. Crea anche una proprietà chiamata `handleChange` e passale il gestore di input `handleChange`.
 
-Next, add `RenderInput` to the render method in `MyApp`, then create a prop called `input` and pass the `inputValue` from `state` to it. Once you are finished you will be able to type in the `input` field in the `GetInput` component, which then calls the handler method in its parent via props. This updates the input in the `state` of the parent, which is passed as props to both children. Observe how the data flows between the components and how the single source of truth remains the `state` of the parent component. Admittedly, this example is a bit contrived, but should serve to illustrate how data and callbacks can be passed between React components.
+Successivamente, aggiungi `RenderInput` al metodo render in `MyApp`, quindi crea una proprietà chiamata `input` e passale l'`inputValue` dallo `state`. Una volta terminato, potrai digitare nel campo `input` nel componente `GetInput`, che poi chiamerà il metodo di gestione nel suo genitore tramite le props. Questo aggiorna l'input nello `state` del genitore, che viene passato come proprietà ad entrambi i figli. Osserva come i dati scorrono tra i componenti e come l'unica fonte di verità rimane lo `state` del componente genitore. Certamente questo esempio è un po' limitato, ma dovrebbe bastare a illustrare come i dati e le callback possono essere passati tra i componenti di React.
 
 # --hints--
 
-The `MyApp` component should render.
+Il componente `MyApp` dovrebbe effettuare il render.
 
 ```js
 assert(
@@ -29,7 +29,7 @@ assert(
 );
 ```
 
-The `GetInput` component should render.
+Il componente `GetInput` dovrebbe effettuare il render.
 
 ```js
 assert(
@@ -40,7 +40,7 @@ assert(
 );
 ```
 
-The `RenderInput` component should render.
+Il componente `RenderInput` dovrebbe effettuare il render.
 
 ```js
 assert(
@@ -51,7 +51,7 @@ assert(
 );
 ```
 
-The `GetInput` component should receive the `MyApp` state property `inputValue` as props and contain an `input` element which modifies `MyApp` state.
+Il componente `GetInput` dovrebbe ricevere la proprietà `inputValue` dello stato di `MyApp` e contenere un elemento `input` che modifica lo stato di `MyApp`.
 
 ```js
 async () => {
@@ -74,7 +74,7 @@ async () => {
 };
 ```
 
-The `RenderInput` component should receive the `MyApp` state property `inputValue` as props.
+Il componente `RenderInput` dovrebbe ricevere la proprietà `inputValue` dello stato di `MyApp`.
 
 ```js
 async () => {

curriculum/challenges/italian/03-front-end-libraries/react/pass-an-array-as-props.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d403616a
-title: Pass an Array as Props
+title: Passare un Array come proprietà
 challengeType: 6
 forumTopicId: 301401
 dashedName: pass-an-array-as-props
@@ -8,7 +8,7 @@ dashedName: pass-an-array-as-props
 
 # --description--
 
-The last challenge demonstrated how to pass information from a parent component to a child component as `props` or properties. This challenge looks at how arrays can be passed as `props`. To pass an array to a JSX element, it must be treated as JavaScript and wrapped in curly braces.
+L'ultima sfida ha mostrato come trasferire le informazioni da un componente genitore a un componente figlio come `props` o proprietà. Questa sfida mostra come gli array possono essere passati come `props`. Per passare un array a un elemento JSX, esso deve essere trattato come JavaScript e avvolto in parentesi graffe.
 
 ```jsx
 <ParentComponent>
@@ -16,15 +16,15 @@ The last challenge demonstrated how to pass information from a parent component
 </ParentComponent>
 ```
 
-The child component then has access to the array property `colors`. Array methods such as `join()` can be used when accessing the property. `const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>` This will join all `colors` array items into a comma separated string and produce: `<p>green, blue, red</p>` Later, we will learn about other common methods to render arrays of data in React.
+Il componente figlio ha quindi accesso alla proprietà array `colors`. I metodi sugli array come `join()` possono essere utilizzati quando si accede alla proprietà. `const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>` Questo unirà tutti gli elementi `colors` dell'array in una stringa separata da virgole e produrrà: `<p>green, blue, red</p>` Più avanti vedremo altri metodi comuni per fare il rendering di array di dati in React.
 
 # --instructions--
 
-There are `List` and `ToDo` components in the code editor. When rendering each `List` from the `ToDo` component, pass in a `tasks` property assigned to an array of to-do tasks, for example `["walk dog", "workout"]`. Then access this `tasks` array in the `List` component, showing its value within the `p` element. Use `join(", ")` to display the `props.tasks`array in the `p` element as a comma separated list. Today's list should have at least 2 tasks and tomorrow's should have at least 3 tasks.
+Nell'editor di codice ci sono i componenti `List` e `ToDo`. Quando si esegue il rendering di ogni `List` dal componente `ToDo`, deve essere passata una proprietà `tasks` assegnata a un array di attività da fare, ad esempio `["walk dog", "workout"]`. Quindi accedi a questo array `tasks` nel componente `List`, mostrandone il valore all'interno dell'elemento `p`. Usa `join(", ")` per visualizzare l'array `props.tasks` nell'elemento `p` come lista separata da virgole. L'elenco di oggi (Today) dovrebbe avere almeno 2 task e quella di domani (Tomorrow) dovrebbe avere almeno 3 task.
 
 # --hints--
 
-The `ToDo` component should return a single outer `div`.
+Il componente `ToDo` dovrebbe restituire un singolo `div` esterno.
 
 ```js
 assert(
@@ -35,7 +35,7 @@ assert(
 );
 ```
 
-The third child of the `ToDo` component should be an instance of the `List` component.
+Il terzo figlio del componente `ToDo` dovrebbe essere un'istanza del componente `List`.
 
 ```js
 assert(
@@ -46,7 +46,7 @@ assert(
 );
 ```
 
-The fifth child of the `ToDo` component should be an instance of the `List` component.
+Il quinto figlio del componente `ToDo` dovrebbe essere un'istanza del componente `List`.
 
 ```js
 assert(
@@ -57,7 +57,7 @@ assert(
 );
 ```
 
-Both instances of the `List` component should have a property called `tasks` and `tasks` should be of type array.
+Entrambe le istanze del componente `List` dovrebbero avere una proprietà chiamata `tasks` e `tasks` dovrebbe essere di tipo array.
 
 ```js
 assert(
@@ -71,7 +71,7 @@ assert(
 );
 ```
 
-The first `List` component representing the tasks for today should have 2 or more items.
+Il primo componente `List`, che rappresenta le attività per oggi, dovrebbe avere 2 o più elementi.
 
 ```js
 assert(
@@ -82,7 +82,7 @@ assert(
 );
 ```
 
-The second `List` component representing the tasks for tomorrow should have 3 or more items.
+Il secondo componente `List`, che rappresenta le attività per domani, dovrebbe avere 3 o più elementi.
 
 ```js
 assert(
@@ -93,7 +93,7 @@ assert(
 );
 ```
 
-The `List` component should render the value from the `tasks` prop in the `p` tag.
+Il componente `List` dovrebbe presentare nel tag `p` il valore dalla proprietà `tasks`.
 
 ```js
 assert(

curriculum/challenges/italian/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036169
-title: Pass Props to a Stateless Functional Component
+title: Passare proprietà a un componente funzionale senza stato
 challengeType: 6
 forumTopicId: 301402
 dashedName: pass-props-to-a-stateless-functional-component
@@ -8,7 +8,7 @@ dashedName: pass-props-to-a-stateless-functional-component
 
 # --description--
 
-The previous challenges covered a lot about creating and composing JSX elements, functional components, and ES6 style class components in React. With this foundation, it's time to look at another feature very common in React: **props**. In React, you can pass props, or properties, to child components. Say you have an `App` component which renders a child component called `Welcome` which is a stateless functional component. You can pass `Welcome` a `user` property by writing:
+Le sfide precedenti riguardavano la creazione e la composizione di elementi JSX, componenti funzionali e componenti ES6 di classe style in React. Con queste fondamenta, è il momento di guardare un'altra caratteristica molto comune in React: le **props**. In React, puoi passare props, o proprietà, a componenti figli. Diciamo che tu abbia un componente `App` che presenta un componente figlio chiamato `Welcome` che è un componente funzionale senza stato. Puoi passare a `Welcome` una proprietà `user` scrivendo:
 
 ```jsx
 <App>
@@ -16,21 +16,21 @@ The previous challenges covered a lot about creating and composing JSX elements,
 </App>
 ```
 
-You use **custom HTML attributes** created by you and supported by React to be passed to the component. In this case, the created property `user` is passed to the component `Welcome`. Since `Welcome` is a stateless functional component, it has access to this value like so:
+Utilizzi degli **attributi HTML personalizzati** creati da te e passati da React al componente. In questo caso, la proprietà `user` che hai creato viene passata al componente `Welcome`. Dal momento che `Welcome` è un componente funzionale senza stato, ha accesso a questo valore in questo modo:
 
 ```jsx
 const Welcome = (props) => <h1>Hello, {props.user}!</h1>
 ```
 
-It is standard to call this value `props` and when dealing with stateless functional components, you basically consider it as an argument to a function which returns JSX. You can access the value of the argument in the function body. With class components, you will see this is a little different.
+È comune chiamare questo valore `props` e quando si tratta di componenti funzionali senza stato, lo consideri fondamentalmente come un argomento per una funzione che restituisce JSX. Puoi accedere al valore dell'argomento nel corpo della funzione. Con i componenti di classe, vedrai che questo è un po' diverso.
 
 # --instructions--
 
-There are `Calendar` and `CurrentDate` components in the code editor. When rendering `CurrentDate` from the `Calendar` component, pass in a property of `date` assigned to the current date from JavaScript's `Date` object. Then access this `prop` in the `CurrentDate` component, showing its value within the `p` tags. Note that for `prop` values to be evaluated as JavaScript, they must be enclosed in curly brackets, for instance `date={Date()}`.
+Nell'editor di codice ci sono i componenti `Calendar` e `CurrentDate`. Quando fai il rendering di `CurrentDate` dal componente `Calendar`, passagli una proprietà `date` assegnata alla data corrente dall'oggetto `Date` di JavaScript. Quindi accedi a questa `prop` nel componente `CurrentDate`, mostrandone il valore all'interno dei tag `p`. Nota che affinché i valori `prop` siano valutati come JavaScript, devono essere racchiusi tra parentesi graffe, ad esempio `date={Date()}`.
 
 # --hints--
 
-The `Calendar` component should return a single `div` element.
+Il componente `Calendar` dovrebbe restituire un singolo elemento `div`.
 
 ```js
 assert(
@@ -41,7 +41,7 @@ assert(
 );
 ```
 
-The second child of the `Calendar` component should be the `CurrentDate` component.
+Il secondo figlio del componente `Calendar` dovrebbe essere il componente `CurrentDate`.
 
 ```js
 assert(
@@ -52,7 +52,7 @@ assert(
 );
 ```
 
-The `CurrentDate` component should have a prop called `date`.
+Il componente `CurrentDate` dovrebbe avere una prop chiamata `date`.
 
 ```js
 assert(
@@ -63,7 +63,7 @@ assert(
 );
 ```
 
-The `date` prop of the `CurrentDate` should contain a string of text.
+La proprietà `date` di `CurrentDate` dovrebbe contenere una stringa di testo.
 
 ```js
 assert(
@@ -75,13 +75,13 @@ assert(
 );
 ```
 
-The `date` prop should be generated by calling `Date()`
+La proprietà `date` dovrebbe essere generata chiamando `Date()`
 
 ```js
 assert(/<CurrentDatedate={Date\(\)}\/>/.test(__helpers.removeWhiteSpace(code)));
 ```
 
-The `CurrentDate` component should render the value from the `date` prop in the `p` tag.
+Il componente `CurrentDate` dovrebbe presentare nel tag `p` il valore della proprietà `date`.
 
 ```js
 let date = 'dummy date';

curriculum/challenges/italian/03-front-end-libraries/react/pass-state-as-props-to-child-components.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d403617a
-title: Pass State as Props to Child Components
+title: Passare State come Props ai componenti figli
 challengeType: 6
 forumTopicId: 301403
 dashedName: pass-state-as-props-to-child-components
@@ -8,19 +8,19 @@ dashedName: pass-state-as-props-to-child-components
 
 # --description--
 
-You saw a lot of examples that passed props to child JSX elements and child React components in previous challenges. You may be wondering where those props come from. A common pattern is to have a stateful component containing the `state` important to your app, that then renders child components. You want these components to have access to some pieces of that `state`, which are passed in as props.
+Hai visto un sacco di esempi che hanno passato le proprietà a elementi JSX figli e a componenti React figli nelle sfide precedenti. Potresti chiederti da dove provengono quelle proprietà. Un modello comune è quello di avere un componente stateful contenente lo `state` importante per la tua app, che poi presenta i componenti figli. Vuoi che questi componenti abbiano accesso ad alcune parti di quello `state`che viene passato come props (proprietà).
 
-For example, maybe you have an `App` component that renders a `Navbar`, among other components. In your `App`, you have `state` that contains a lot of user information, but the `Navbar` only needs access to the user's username so it can display it. You pass that piece of `state` to the `Navbar` component as a prop.
+Ad esempio, forse hai un componente `App` che presenta una `Navbar`, tra gli altri componenti. Nella tua `App` hai `state` che contiene molte informazioni dell'utente, ma la `Navbar` ha solo bisogno di accedere al nome utente dell'utente in modo da visualizzarlo. Passa quel pezzo di `state` al componente `Navbar` come una prop.
 
-This pattern illustrates some important paradigms in React. The first is *unidirectional data flow*. State flows in one direction down the tree of your application's components, from the stateful parent component to child components. The child components only receive the state data they need. The second is that complex stateful apps can be broken down into just a few, or maybe a single, stateful component. The rest of your components simply receive state from the parent as props, and render a UI from that state. It begins to create a separation where state management is handled in one part of code and UI rendering in another. This principle of separating state logic from UI logic is one of React's key principles. When it's used correctly, it makes the design of complex, stateful applications much easier to manage.
+Questo modello illustra alcuni paradigmi importanti in React. Il primo è il *flusso di dati unidirezionale*. Lo stato scorre in una direzione lungo l'albero dei componenti della tua applicazione, dal componente genitore stateful ai componenti figli. I componenti figlio ricevono solo i dati di stato di cui hanno bisogno. Il secondo è che complesse app stateful possono essere suddivise in alcuni, o anche un singolo componente stateful. Il resto dei tuoi componenti semplicemente riceve lo stato dal genitore come props, e presenta un'interfaccia utente da quello stato. Si comincia col creare una separazione in cui la gestione dello stato viene gestita in una parte del codice e il rendering dell'interfaccia utente in un'altra. Questo principio di separazione della logica dello stato dalla logica dell'interfaccia utente è uno dei principi chiave di React. Quando viene utilizzato correttamente, rende la progettazione di applicazioni stateful complesse molto più facile da gestire.
 
 # --instructions--
 
-The `MyApp` component is stateful and renders a `Navbar` component as a child. Pass the `name` property in its `state` down to the child component, then show the `name` in the `h1` tag that's part of the `Navbar` render method. `name` should appear after the text `Hello, my name is:`.
+Il componente `MyApp` è stateful e presenta un componente `Navbar` come figlio. Passa la proprietà `name` del suo `state` al componente figlio, poi mostra il `name` nel tag `h1` che fa parte del metodo render di `Navbar`. `name` dovrebbe apparire dopo il testo `Hello, my name is:`.
 
 # --hints--
 
-The `MyApp` component should render with a `Navbar` component inside.
+Il componente `MyApp` dovrebbe eseguire il render con un componente `Navbar` al suo interno.
 
 ```js
 assert(
@@ -34,7 +34,7 @@ assert(
 );
 ```
 
-The `Navbar` component should receive the `MyApp` state property `name` as props.
+Il componente `Navbar` dovrebbe ricevere la proprietà `name` dello stato di `MyApp` come proprietà.
 
 ```js
 async () => {
@@ -50,7 +50,7 @@ async () => {
 };
 ```
 
-The `h1` element in `Navbar` should render the `name` prop.
+L'elemento `h1` in `Navbar` dovrebbe presentare la proprietà `name`.
 
 ```js
 async () => {

curriculum/challenges/italian/03-front-end-libraries/react/render-a-class-component-to-the-dom.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036167
-title: Render a Class Component to the DOM
+title: Presentare un componente di classe nel DOM
 challengeType: 6
 forumTopicId: 301404
 dashedName: render-a-class-component-to-the-dom
@@ -8,19 +8,19 @@ dashedName: render-a-class-component-to-the-dom
 
 # --description--
 
-You may remember using the ReactDOM API in an earlier challenge to render JSX elements to the DOM. The process for rendering React components will look very similar. The past few challenges focused on components and composition, so the rendering was done for you behind the scenes. However, none of the React code you write will render to the DOM without making a call to the ReactDOM API.
+Potresti ricordare l'uso dell'API ReactDOM in una sfida precedente, usata per fare il render degli elementi JSX nel DOM. Il processo di rendering dei componenti di React sarà molto simile. Le poche sfide viste finora si sono concentrate su componenti e composizione, e il rendering è stato fatto per te dietro le quinte. Tuttavia, niente del codice React che scrivi sarà presentato nel DOM senza effettuare una chiamata all'API ReactDOM.
 
-Here's a refresher on the syntax: `ReactDOM.render(componentToRender, targetNode)`. The first argument is the React component that you want to render. The second argument is the DOM node that you want to render that component within.
+Ecco un ripasso della sintassi: `ReactDOM.render(componentToRender, targetNode)`. Il primo argomento è il componente React che si desidera presentare. Il secondo argomento è il nodo del DOM all'interno del quale si desidera fare il render di quel componente.
 
-React components are passed into `ReactDOM.render()` a little differently than JSX elements. For JSX elements, you pass in the name of the element that you want to render. However, for React components, you need to use the same syntax as if you were rendering a nested component, for example `ReactDOM.render(<ComponentToRender />, targetNode)`. You use this syntax for both ES6 class components and functional components.
+I componenti React sono passati in `ReactDOM.render()` in modo un po' diverso dagli elementi JSX. Per gli elementi JSX, passi il nome dell'elemento che desideri presentare. Tuttavia, per i componenti React, è necessario utilizzare la stessa sintassi come se si stesse presentando un componente nidificato, ad esempio `ReactDOM.render(<ComponentToRender />, targetNode)`. Si utilizza questa sintassi sia per i componenti di classe ES6 che per i componenti funzionali.
 
 # --instructions--
 
-Both the `Fruits` and `Vegetables` components are defined for you behind the scenes. Render both components as children of the `TypesOfFood` component, then render `TypesOfFood` to the DOM. There is a `div` with `id='challenge-node'` available for you to use.
+I componenti `Fruits` e `Vegetables` sono definiti per te dietro le quinte. Presenta entrambi i componenti come figli del componente `TypesOfFood`, quindi presenta `TypesOfFood` nel DOM. C'è un `div` con `id='challenge-node'` pronto all'uso per te.
 
 # --hints--
 
-The `TypesOfFood` component should return a single `div` element.
+Il componente `TypesOfFood` dovrebbe restituire un singolo elemento `div`.
 
 ```js
 assert(
@@ -31,7 +31,7 @@ assert(
 );
 ```
 
-The `TypesOfFood` component should render the `Fruits` component after the `h1` element.
+Il componente `TypesOfFood` dovrebbe presentare il componente `Fruits` dopo l'elemento `h1`.
 
 ```js
 assert(
@@ -42,7 +42,7 @@ assert(
 );
 ```
 
-The `TypesOfFood` component should render the `Vegetables` component after `Fruits`.
+Il componente `TypesOfFood` dovrebbe presentare il componente `Vegetables` dopo `Fruits`.
 
 ```js
 assert(
@@ -53,7 +53,7 @@ assert(
 );
 ```
 
-The `TypesOfFood` component should render to the DOM within the `div` with the id `challenge-node`.
+Il componente `TypesOfFood` dovrebbe essere presentato nel DOM all'interno del `div` con l'id `challenge-node`.
 
 ```js
 assert(

curriculum/challenges/italian/03-front-end-libraries/react/render-conditionally-from-props.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036188
-title: Render Conditionally from Props
+title: Presentare condizionalmente dalle Props
 challengeType: 6
 forumTopicId: 301405
 dashedName: render-conditionally-from-props
@@ -8,21 +8,21 @@ dashedName: render-conditionally-from-props
 
 # --description--
 
-So far, you've seen how to use `if/else`, `&&`, and the ternary operator (`condition ? expressionIfTrue : expressionIfFalse`) to make conditional decisions about what to render and when. However, there's one important topic left to discuss that lets you combine any or all of these concepts with another powerful React feature: props. Using props to conditionally render code is very common with React developers — that is, they use the value of a given prop to automatically make decisions about what to render.
+Finora, hai visto come usare `if/else`, `&&`, e l'operatore ternario (`condition ? expressionIfTrue : expressionIfFalse`) per prendere decisioni condizionali su cosa presentare e quando. Tuttavia, c'è ancora un argomento importante da discutere che consente di combinare uno o tutti questi concetti con un'altra potente funzionalità di React: le props. Usare le proprietà (props) per presentare il codice condizionalmente è molto comune tra gli sviluppatori di React — cioè essi usano il valore di una determinata proprietà per prendere automaticamente delle decisioni su cosa presentare.
 
-In this challenge, you'll set up a child component to make rendering decisions based on props. You'll also use the ternary operator, but you can see how several of the other concepts that were covered in the last few challenges might be just as useful in this context.
+In questa sfida, configurerai un componente figlio per prendere decisioni di rendering basate sulle props. Utilizzerai anche l'operatore ternario, ma puoi vedere come molti degli altri concetti che sono stati trattati nelle ultime sfide potrebbero essere altrettanto utili in questo contesto.
 
 # --instructions--
 
-The code editor has two components that are partially defined for you: a parent called `GameOfChance`, and a child called `Results`. They are used to create a simple game where the user presses a button to see if they win or lose.
+L'editor di codice ha due componenti che sono parzialmente definiti per te: un genitore chiamato `GameOfChance`, e un figlio chiamato `Results`. Essi sono utilizzati per creare un semplice gioco in cui l'utente preme un bottone per vedere se vince o perde.
 
-First, you'll need a simple expression that randomly returns a different value every time it is run. You can use `Math.random()`. This method returns a value between `0` (inclusive) and `1` (exclusive) each time it is called. So for 50/50 odds, use `Math.random() >= .5` in your expression. Statistically speaking, this expression will return `true` 50% of the time, and `false` the other 50%. In the render method, replace `null` with the above expression to complete the variable declaration.
+In primo luogo, avrai bisogno di una semplice espressione che restituisca casualmente un valore diverso ogni volta che viene eseguita. Puoi usare `Math.random()`. Questo metodo restituisce un valore compreso tra `0` (incluso) e `1` (escluso) ogni volta che viene chiamato. Quindi, per avere delle quote 50/50, usa `Math.random() >= .5` nella tua espressione. Statisticamente parlando, questa espressione restituirà `true` il 50% delle volte, e `false` l'altro 50%. Nel metodo render, sostituisci `null` con l'espressione vista sopra per completare la dichiarazione della variabile.
 
-Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the `Results` component as a child of `GameOfChance`, and pass in `expression` as a prop called `fiftyFifty`. In the `Results` component, write a ternary expression to render the `h1` element with the text `You Win!` or `You Lose!` based on the `fiftyFifty` prop that's being passed in from `GameOfChance`. Finally, make sure the `handleClick()` method is correctly counting each turn so the user knows how many times they've played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row.
+Ora hai un'espressione che puoi usare per prendere una decisione casuale nel codice. Successivamente dovrai implementarla. Presenta il componente `Results` come figlio di `GameOfChance`, e passagli `expression` come una proprietà chiamata `fiftyFifty`. Nel componente `Results`, scrivi un'espressione ternaria per presentare l'elemento `h1` con il testo `You Win!` o `You Lose!` basato sulla proprietà `fiftyFifty` che viene passata da `GameOfChance`. Infine, assicurati che il metodo `handleClick()` stia contando correttamente ogni turno in modo che l'utente sappia quante volte ha giocato. Questo serve anche a far sapere all'utente che il componente è stato effettivamente aggiornato nel caso in cui vinca o perda due volte di fila.
 
 # --hints--
 
-The `GameOfChance` component should exist and render to the page.
+Il componente `GameOfChance` dovrebbe esistere e essere presentato nella pagina.
 
 ```js
 assert.strictEqual(
@@ -31,7 +31,7 @@ assert.strictEqual(
 );
 ```
 
-`GameOfChance` should return a single `button` element.
+`GameOfChance` dovrebbe restituire un singolo elemento `button`.
 
 ```js
 assert.strictEqual(
@@ -40,7 +40,7 @@ assert.strictEqual(
 );
 ```
 
-`GameOfChance` should return a single instance of the `Results` component, which has a prop called `fiftyFifty`.
+`GameOfChance` dovrebbe restituire una singola istanza del componente `Results`, che ha una proprietà chiamata `fiftyFifty`.
 
 ```js
 assert(
@@ -53,7 +53,7 @@ assert(
 );
 ```
 
-`GameOfChance` state should be initialized with a property of `counter` set to a value of `1`.
+Lo stato di `GameOfChance` dovrebbe essere inizializzato con una proprietà `counter` impostata su un valore di `1`.
 
 ```js
 assert.strictEqual(
@@ -62,7 +62,7 @@ assert.strictEqual(
 );
 ```
 
-When the `GameOfChance` component is first rendered to the DOM, a `p` element should be returned with the inner text of `Turn: 1`.
+Quando il componente `GameOfChance` viene presentato per la prima volta nel DOM, dovrebbe essere restituito un elemento `p` con il testo interno di `Turn: 1`.
 
 ```js
 assert.strictEqual(
@@ -71,7 +71,7 @@ assert.strictEqual(
 );
 ```
 
-Each time the button is clicked, the counter state should be incremented by a value of 1, and a single `p` element should be rendered to the DOM that contains the text `Turn: N`, where `N` is the value of the counter state.
+Ogni volta che viene fatto click sul pulsante, lo stato del contatore deve essere incrementato di un valore di 1, e nel DOM dovrebbe essere presentato un singolo elemento `p` che contiene il testo `Turn: N`, dove `N` è il valore dello stato del contatore.
 
 ```js
 (() => {
@@ -123,7 +123,7 @@ Each time the button is clicked, the counter state should be incremented by a va
 })();
 ```
 
-When the `GameOfChance` component is first mounted to the DOM and each time the button is clicked thereafter, a single `h1` element should be returned that randomly renders either `You Win!` or `You Lose!`.
+Quando il componente `GameOfChance` viene montato per la prima volta nel DOM e ogni volta che il bottone viene cliccato successivamente, dovrebbe essere restituito un singolo elemento `h1` che scrive casualmente `You Win!` o `You Lose!`.
 
 ```js
 (() => {

curriculum/challenges/italian/03-front-end-libraries/react/render-html-elements-to-the-dom.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24bbe0dba28a8d3cbd4c5f
-title: Render HTML Elements to the DOM
+title: Presentare gli elementi HTML nel DOM
 challengeType: 6
 forumTopicId: 301406
 dashedName: render-html-elements-to-the-dom
@@ -8,37 +8,37 @@ dashedName: render-html-elements-to-the-dom
 
 # --description--
 
-So far, you've learned that JSX is a convenient tool to write readable HTML within JavaScript. With React, we can render this JSX directly to the HTML DOM using React's rendering API known as ReactDOM.
+Finora, hai imparato che JSX è uno strumento utile per scrivere HTML leggibile all'interno di JavaScript. Con React, possiamo presentare questo JSX direttamente nel DOM HTML utilizzando l'API di rendering di React conosciuta come ReactDOM.
 
-ReactDOM offers a simple method to render React elements to the DOM which looks like this: `ReactDOM.render(componentToRender, targetNode)`, where the first argument is the React element or component that you want to render, and the second argument is the DOM node that you want to render the component to.
+ReactDOM offre un metodo semplice per presentare gli elementi React nel DOM che appare così: `ReactDOM.render(componentToRender, targetNode)`, dove il primo argomento è l'elemento React o il componente che si desidera presentare, e il secondo argomento è il nodo DOM nel quale si desidera visualizzare il componente.
 
-As you would expect, `ReactDOM.render()` must be called after the JSX element declarations, just like how you must declare variables before using them.
+Come ci si aspetterebbe, `ReactDOM.render()` deve essere chiamato dopo le dichiarazioni degli elementi JSX, proprio come è necessario dichiarare le variabili prima di usarle.
 
 # --instructions--
 
-The code editor has a simple JSX component. Use the `ReactDOM.render()` method to render this component to the page. You can pass defined JSX elements directly in as the first argument and use `document.getElementById()` to select the DOM node to render them to. There is a `div` with `id='challenge-node'` available for you to use. Make sure you don't change the `JSX` constant.
+L'editor di codice contiene un semplice componente JSX. Usa il metodo `ReactDOM.render()` per presentare questo componente nella pagina. Puoi passare gli elementi JSX che hai definito direttamente come primo argomento e utilizzare `document.getElementById()` per selezionare il nodo DOM nel quale fare il render. C'è un `div` con `id='challenge-node'` pronto all'uso per te. Assicurati di non modificare la costante `JSX`.
 
 # --hints--
 
-The constant `JSX` should return a `div` element.
+La costante `JSX` dovrebbe restituire un elemento `div`.
 
 ```js
 assert(JSX.type === 'div');
 ```
 
-The `div` should contain an `h1` tag as the first element.
+Il `div` dovrebbe contenere un tag `h1` come primo elemento.
 
 ```js
 assert(JSX.props.children[0].type === 'h1');
 ```
 
-The `div` should contain a `p` tag as the second element.
+Il `div` dovrebbe contenere un tag `p` come secondo elemento.
 
 ```js
 assert(JSX.props.children[1].type === 'p');
 ```
 
-The provided JSX element should render to the DOM node with id `challenge-node`.
+L'elemento JSX fornito dovrebbe essere presentato nel nodo DOM con id `challenge-node`.
 
 ```js
 assert(

curriculum/challenges/italian/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d403618d
-title: Render React on the Server with renderToString
+title: Presentare React nel server con renderToString
 challengeType: 6
 forumTopicId: 301407
 dashedName: render-react-on-the-server-with-rendertostring
@@ -8,17 +8,17 @@ dashedName: render-react-on-the-server-with-rendertostring
 
 # --description--
 
-So far, you have been rendering React components on the client. Normally, this is what you will always do. However, there are some use cases where it makes sense to render a React component on the server. Since React is a JavaScript view library and you can run JavaScript on the server with Node, this is possible. In fact, React provides a `renderToString()` method you can use for this purpose.
+Finora, hai presentato i componenti React sul client. Questo è quello che farai normalmente. Tuttavia, ci sono alcuni casi di utilizzo in cui ha senso presentare un componente React sul server. Dato che React è una libreria di visualizzazione JavaScript ed è possibile eseguire JavaScript sul server con Node, questo è possibile. Infatti, React fornisce un metodo `renderToString()` che puoi usare a questo scopo.
 
-There are two key reasons why rendering on the server may be used in a real world app. First, without doing this, your React apps would consist of a relatively empty HTML file and a large bundle of JavaScript when it's initially loaded to the browser. This may not be ideal for search engines that are trying to index the content of your pages so people can find you. If you render the initial HTML markup on the server and send this to the client, the initial page load contains all of the page's markup which can be crawled by search engines. Second, this creates a faster initial page load experience because the rendered HTML is smaller than the JavaScript code of the entire app. React will still be able to recognize your app and manage it after the initial load.
+Ci sono due ragioni chiave per cui il rendering sul server può essere utilizzato in un'app del mondo reale. In primo luogo, senza fare questo, le tue applicazioni React consisterebbero in un file HTML relativamente vuoto e in un grande pacchetto di JavaScript da caricare inizialmente sul browser. Questo potrebbe non essere ideale per i motori di ricerca che stanno cercando di indicizzare il contenuto delle tue pagine in modo che le persone possano trovarti. Se si esegue il rendering del markup HTML iniziale sul server e lo si invia al client, il caricamento iniziale della pagina conterrà tutti i markup della pagina che possono essere letti dai motori di ricerca. In secondo luogo, questo crea un'esperienza di caricamento iniziale della pagina più veloce perché l'HTML presentato è più piccolo del codice JavaScript dell'intera app. React sarà comunque in grado di riconoscere la tua app e gestirla dopo il caricamento iniziale.
 
 # --instructions--
 
-The `renderToString()` method is provided on `ReactDOMServer`, which is available here as a global object. The method takes one argument which is a React element. Use this to render `App` to a string.
+Il metodo `renderToString()` è fornito su `ReactDOMServer`, disponibile qui come oggetto globale. Il metodo richiede un argomento che è un elemento di React. Usa questo per presentare `App` in una stringa.
 
 # --hints--
 
-The `App` component should render to a string using `ReactDOMServer.renderToString`.
+Il componente `App` dovrebbe fare il rendering in una stringa usando `ReactDOMServer.renderToString`.
 
 ```js
 (getUserInput) =>

curriculum/challenges/italian/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036172
-title: Render State in the User Interface Another Way
+title: Presentare lo stato nell'interfaccia utente in un altro modo
 challengeType: 6
 forumTopicId: 301408
 dashedName: render-state-in-the-user-interface-another-way
@@ -8,17 +8,17 @@ dashedName: render-state-in-the-user-interface-another-way
 
 # --description--
 
-There is another way to access `state` in a component. In the `render()` method, before the `return` statement, you can write JavaScript directly. For example, you could declare functions, access data from `state` or `props`, perform computations on this data, and so on. Then, you can assign any data to variables, which you have access to in the `return` statement.
+C'è un altro modo per accedere allo `state` in un componente. Nel metodo `render()`, prima dell'istruzione `return`, è possibile scrivere direttamente del JavaScript. Ad esempio, è possibile dichiarare funzioni, accedere ai dati da `state` o `props`, eseguire calcoli su questi dati, e così via. Poi, puoi assegnare qualsiasi dato alle variabili a cui hai accesso nell'istruzione `return`.
 
 # --instructions--
 
-In the `MyComponent` render method, define a `const` called `name` and set it equal to the name value in the component's `state`. Because you can write JavaScript directly in this part of the code, you don't have to enclose this reference in curly braces.
+Nel metodo di rendering `MyComponent`, definisci una `const` chiamata `name` e impostala al valore di name nello `state` del componente. Poiché in questa parte del codice è possibile scrivere direttamente in JavaScript, non è necessario racchiudere questo riferimento tra parentesi graffe.
 
-Next, in the return statement, render this value in an `h1` tag using the variable `name`. Remember, you need to use the JSX syntax (curly braces for JavaScript) in the return statement.
+Successivamente, nell'istruzione return, presenta questo valore in un tag `h1` utilizzando la variabile `name`. Ricorda però che nell'istruzione return dovrai utilizzare la sintassi JSX (parentesi graffe per il JavaScript).
 
 # --hints--
 
-`MyComponent` should have a key `name` with value `freeCodeCamp` stored in its state.
+`MyComponent` dovrebbe avere una chiave `name` con valore `freeCodeCamp` memorizzato nel suo stato.
 
 ```js
 assert(
@@ -27,7 +27,7 @@ assert(
 );
 ```
 
-`MyComponent` should render an `h1` header enclosed in a single `div`.
+`MyComponent` dovrebbe presentare un'intestazione `h1` racchiusa in un singolo `div`.
 
 ```js
 assert(
@@ -37,14 +37,14 @@ assert(
 );
 ```
 
-The rendered `h1` tag should include a reference to `{name}`.
+Il tag `h1` presentato dovrebbe includere un riferimento a `{name}`.
 
 ```js
 (getUserInput) =>
   assert(/<h1>\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput('index')));
 ```
 
-The rendered `h1` header should contain text rendered from the component's state.
+L'intestazione `h1` dovrebbe contenere testo presentato dallo stato del componente.
 
 ```js
 async () => {

curriculum/challenges/italian/03-front-end-libraries/react/render-state-in-the-user-interface.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036171
-title: Render State in the User Interface
+title: Presentare lo stato nell'interfaccia utente
 challengeType: 6
 forumTopicId: 301409
 dashedName: render-state-in-the-user-interface
@@ -8,23 +8,23 @@ dashedName: render-state-in-the-user-interface
 
 # --description--
 
-Once you define a component's initial state, you can display any part of it in the UI that is rendered. If a component is stateful, it will always have access to the data in `state` in its `render()` method. You can access the data with `this.state`.
+Una volta definito lo stato iniziale di un componente, è possibile visualizzarne qualsiasi parte nell'interfaccia utente che viene presentata. Se un componente è stateful, avrà sempre accesso ai dati dello `state` nel suo metodo `render()`. È possibile accedere ai dati con `this.state`.
 
-If you want to access a state value within the `return` of the render method, you have to enclose the value in curly braces.
+Se desideri accedere a un valore di stato all'interno del `return` del metodo render, devi racchiudere il valore in parentesi graffe.
 
-`state` is one of the most powerful features of components in React. It allows you to track important data in your app and render a UI in response to changes in this data. If your data changes, your UI will change. React uses what is called a virtual DOM, to keep track of changes behind the scenes. When state data updates, it triggers a re-render of the components using that data - including child components that received the data as a prop. React updates the actual DOM, but only where necessary. This means you don't have to worry about changing the DOM. You simply declare what the UI should look like.
+`state` è una delle caratteristiche più potenti dei componenti di React. Ti permette di tracciare dati importanti nella tua app e presentare un'interfaccia utente in risposta alle modifiche di questi dati. Se i tuoi dati cambiano, la tua interfaccia utente cambierà. React utilizza quello che viene chiamato un DOM (Document Object Model) virtuale, per tenere traccia dei cambiamenti dietro le quinte. Quando lo stato dei dati si aggiorna, si attiva un re-render dei componenti che utilizzano tali dati - compresi i componenti figli che hanno ricevuto i dati come proprietà. React aggiorna il DOM, ma solo se necessario. Questo significa che non devi preoccuparti di cambiare il DOM. Semplicemente dichiari come dovrebbe apparire l'interfaccia utente.
 
-Note that if you make a component stateful, no other components are aware of its `state`. Its `state` is completely encapsulated, or local to that component, unless you pass state data to a child component as `props`. This notion of encapsulated `state` is very important because it allows you to write certain logic, then have that logic contained and isolated in one place in your code.
+Nota che se fai un componente stateful, nessun altro componente è a conoscenza del suo `state`. Il suo `state` è completamente incapsulato, o locale a quel componente, a meno che non passi i dati di stato a un componente figlio come `props`. Questa nozione di `state` incapsulato è molto importante perché permette di scrivere una certa logica, e poi di avere quella logica contenuta e isolata in un unico punto del tuo codice.
 
 # --instructions--
 
-In the code editor, `MyComponent` is already stateful. Define an `h1` tag in the component's render method which renders the value of `name` from the component's state.
+Nell'editor di codice, `MyComponent` è già stateful. Definisci un tag `h1` nel metodo render del componente che presenta il valore di `name` prendendolo dallo stato del componente.
 
-**Note:** The `h1` should only render the value from `state` and nothing else. In JSX, any code you write with curly braces `{ }` will be treated as JavaScript. So to access the value from `state` just enclose the reference in curly braces.
+**Nota:** L'elemento `h1` dovrebbe presentare solo il valore dallo `state` e nient'altro. In JSX, qualsiasi codice che scrivi tra parentesi graffe `{ }` sarà trattato come JavaScript. Quindi, per accedere al valore dallo `state` basta racchiudere il riferimento nelle parentesi graffe.
 
 # --hints--
 
-`MyComponent` should have a key `name` with value `freeCodeCamp` stored in its state.
+`MyComponent` dovrebbe avere una chiave `name` con valore `freeCodeCamp` memorizzato nel suo stato.
 
 ```js
 assert(
@@ -33,7 +33,7 @@ assert(
 );
 ```
 
-`MyComponent` should render an `h1` header enclosed in a single `div`.
+`MyComponent` dovrebbe presentare un'intestazione `h1` racchiusa in un singolo `div`.
 
 ```js
 assert(
@@ -43,7 +43,7 @@ assert(
 );
 ```
 
-The rendered `h1` header should contain text rendered from the component's state.
+L'intestazione `h1` dovrebbe contenere solo testo presentato dallo stato del componente.
 
 ```js
 async () => {

curriculum/challenges/italian/03-front-end-libraries/react/render-with-an-if-else-condition.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036184
-title: Render with an If-Else Condition
+title: Presentare con una condizione If-Else
 challengeType: 6
 forumTopicId: 301410
 dashedName: render-with-an-if-else-condition
@@ -8,17 +8,17 @@ dashedName: render-with-an-if-else-condition
 
 # --description--
 
-Another application of using JavaScript to control your rendered view is to tie the elements that are rendered to a condition. When the condition is true, one view renders. When it's false, it's a different view. You can do this with a standard `if/else` statement in the `render()` method of a React component.
+Un'altra applicazione dell'uso di JavaScript per controllare la vista presentata è quella di legare gli elementi che sono presentati ad una condizione. Quando la condizione è vera, una vista viene presentata. Quando è falsa, viene presentata una vista diversa. Puoi farlo con un comando `if/else` standard nel metodo `render()` di un componente React.
 
 # --instructions--
 
-MyComponent contains a `boolean` in its state which tracks whether you want to display some element in the UI or not. The `button` toggles the state of this value. Currently, it renders the same UI every time. Rewrite the `render()` method with an `if/else` statement so that if `display` is `true`, you return the current markup. Otherwise, return the markup without the `h1` element.
+MyComponent contiene un `boolean` nel suo stato che traccia se si desidera o meno visualizzare qualche elemento nell'interfaccia utente. Il `button` commuta lo stato di questo valore. Attualmente, esso presenta la stessa interfaccia utente ogni volta. Riscrivi il metodo `render()` con un'istruzione `if/else` in modo che se `display` è `true`, restituisca il markup corrente. Altrimenti, restituisci il markup senza l'elemento `h1`.
 
-**Note:** You must write an `if/else` to pass the tests. Use of the ternary operator will not pass here.
+**Nota:** Devi scrivere un `if/else` per superare i test. L'uso dell'operatore ternario non supererà i test qui, anche se sarebbe corretto.
 
 # --hints--
 
-`MyComponent` should exist and render.
+`MyComponent` dovrebbe esistere ed effettuare il render.
 
 ```js
 assert(
@@ -29,7 +29,7 @@ assert(
 );
 ```
 
-When `display` is set to `true`, a `div`, `button`, and `h1` should render.
+Quando `display` è impostato a `true`, dovrebbero essere presentati un `div`, un `button` e un `h1`.
 
 ```js
 async () => {
@@ -50,7 +50,7 @@ async () => {
 };
 ```
 
-When `display` is set to `false`, only a `div` and `button` should render.
+Quando `display` è impostato su `false`, dovrebbero essere presentati solo un `div` e un `button`.
 
 ```js
 async () => {
@@ -71,7 +71,7 @@ async () => {
 };
 ```
 
-The render method should use an `if/else` statement to check the condition of `this.state.display`.
+Il metodo render dovrebbe utilizzare un'istruzione `if/else` per controllare la condizione di `this.state.display`.
 
 ```js
 (getUserInput) =>

curriculum/challenges/italian/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d403616f
-title: Review Using Props with Stateless Functional Components
+title: Ripasso dell'uso delle Props con componenti funzionali senza stato
 challengeType: 6
 forumTopicId: 301411
 dashedName: review-using-props-with-stateless-functional-components
@@ -8,19 +8,19 @@ dashedName: review-using-props-with-stateless-functional-components
 
 # --description--
 
-Except for the last challenge, you've been passing props to stateless functional components. These components act like pure functions. They accept props as input and return the same view every time they are passed the same props. You may be wondering what state is, and the next challenge will cover it in more detail. Before that, here's a review of the terminology for components.
+Fatta eccezione per l'ultima sfida, hai sempre passato le props a componenti funzionali senza stato. Questi componenti agiscono come funzioni pure. Accettano le props come input e restituiscono la stessa vista ogni volta che vengono passate le stesse proprietà. Potresti chiederti cosa sia lo stato e la prossima sfida lo spiegherà con maggiore dettaglio. Prima però, ecco un ripasso della terminologia per i componenti.
 
-A *stateless functional component* is any function you write which accepts props and returns JSX. A *stateless component*, on the other hand, is a class that extends `React.Component`, but does not use internal state (covered in the next challenge). Finally, a *stateful component* is a class component that does maintain its own internal state. You may see stateful components referred to simply as components or React components.
+Un *componente funzionale senza stato* è una qualsiasi funzione che accetta props e restituisce JSX. Un *componente senza stato*, d'altra parte, è una classe che estende `React.Component`, ma non utilizza lo stato interno (coperto nella prossima sfida). Infine, un *componente stateful* è un componente di classe che mantiene il proprio stato interno. Spesso si fa riferimento ai componenti stateful chiamandoli semplicemente componenti o componenti React.
 
-A common pattern is to try to minimize statefulness and to create stateless functional components wherever possible. This helps contain your state management to a specific area of your application. In turn, this improves development and maintenance of your app by making it easier to follow how changes to state affect its behavior.
+Un modello comune è quello di cercare di minimizzare l'estensione dello stato e di creare componenti funzionali senza stato, laddove possibile. Questo aiuta a contenere la gestione dello stato in un'area specifica della tua applicazione. A sua volta, questo migliora lo sviluppo e la manutenzione della tua app rendendo più facile seguire come le modifiche allo stato influenzano il suo comportamento.
 
 # --instructions--
 
-The code editor has a `CampSite` component that renders a `Camper` component as a child. Define the `Camper` component and assign it default props of `{ name: 'CamperBot' }`. Inside the `Camper` component, render any code that you want, but make sure to have one `p` element that includes only the `name` value that is passed in as a `prop`. Finally, define `propTypes` on the `Camper` component to require `name` to be provided as a prop and verify that it is of type `string`.
+L'editor di codice ha un componente `CampSite` che presenta un componente `Camper` come figlio. Definisci il componente `Camper` e assegnagli la proprietà di default `{ name: 'CamperBot' }`. All'interno del componente `Camper`, presenta il codice che vuoi, ma assicurati di avere un elemento `p` che include solo il valore del `name` che viene passato come `prop`. Infine, definisci `propTypes` nel componente `Camper` in modo che richieda che `name` venga fornito come prop verificando che sia di tipo `string`.
 
 # --hints--
 
-The `CampSite` component should render.
+Il componente `CampSite` dovrebbe effettuare il render.
 
 ```js
 assert(
@@ -31,7 +31,7 @@ assert(
 );
 ```
 
-The `Camper` component should render.
+Il componente `Camper` dovrebbe effettuare il render.
 
 ```js
 assert(
@@ -42,7 +42,7 @@ assert(
 );
 ```
 
-The `Camper` component should include default props which assign the string `CamperBot` to the key `name`.
+Il componente `Camper` dovrebbe includere delle props predefinite che assegnano la stringa `CamperBot` alla chiave `name`.
 
 ```js
 assert(
@@ -52,7 +52,7 @@ assert(
 );
 ```
 
-The `Camper` component should include prop types which require the `name` prop to be of type `string`.
+Il componente `Camper` dovrebbe includere tipi di prop che richiedono che la proprietà `name` sia di tipo `string`.
 
 ```js
 assert(
@@ -62,7 +62,7 @@ assert(
 );
 ```
 
-The `Camper` component should contain a `p` element with only the text from the `name` prop.
+Il componente `Camper` dovrebbe contenere un elemento `p` che abbia come unico testo la proprietà `name`.
 
 ```js
 assert(

curriculum/challenges/italian/03-front-end-libraries/react/set-state-with-this.setstate.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036173
-title: Set State with this.setState
+title: Impostare lo stato con this.setState
 challengeType: 6
 forumTopicId: 301412
 dashedName: set-state-with-this-setstate
@@ -8,7 +8,7 @@ dashedName: set-state-with-this-setstate
 
 # --description--
 
-The previous challenges covered component `state` and how to initialize state in the `constructor`. There is also a way to change the component's `state`. React provides a method for updating component `state` called `setState`. You call the `setState` method within your component class like so: `this.setState()`, passing in an object with key-value pairs. The keys are your state properties and the values are the updated state data. For instance, if we were storing a `username` in state and wanted to update it, it would look like this:
+Le sfide precedenti riguardavano il componente `state` e come inizializzare lo stato nel `constructor`. C'è anche un modo per cambiare lo `state` del componente. React fornisce un metodo per l'aggiornamento dello `state` del componente chiamato `setState`. Chiamerai il metodo `setState` all'interno della classe component in questo modo: `this.setState()`, passandogli un oggetto con coppie chiave-valore. Le chiavi sono le proprietà dello stato e i valori sono i dati dello stato aggiornato. Per esempio, se stessimo memorizzando uno `username` nello stato e volessimo aggiornarlo, potremmo fare così:
 
 ```jsx
 this.setState({
@@ -16,17 +16,17 @@ this.setState({
 });
 ```
 
-React expects you to never modify `state` directly, instead always use `this.setState()` when state changes occur. Also, you should note that React may batch multiple state updates in order to improve performance. What this means is that state updates through the `setState` method can be asynchronous. There is an alternative syntax for the `setState` method which provides a way around this problem. This is rarely needed but it's good to keep it in mind! Please consult the [React documentation](https://facebook.github.io/react/docs/state-and-lifecycle.html) for further details.
+React si aspetta che tu non modifichi mai lo `state` direttamente: usa sempre `this.setState()` quando si verificano cambiamenti di stato. Inoltre, dovresti notare che React può raggruppare più aggiornamenti di stato al fine di migliorare le prestazioni. Ciò significa che gli aggiornamenti di stato attraverso il metodo `setState` possono essere asincroni. C'è una sintassi alternativa per il metodo `setState` che fornisce un modo per aggirare questo problema. Questo raramente è necessario, ma è bene tenerlo in mente! Consulta la [Documentazione di React](https://facebook.github.io/react/docs/state-and-lifecycle.html) per ulteriori dettagli.
 
 # --instructions--
 
-There is a `button` element in the code editor which has an `onClick()` handler. This handler is triggered when the `button` receives a click event in the browser, and runs the `handleClick` method defined on `MyComponent`. Within the `handleClick` method, update the component `state` using `this.setState()`. Set the `name` property in `state` to equal the string `React Rocks!`.
+C'è un elemento `button` nell'editor di codice che ha un gestore `onClick()`. Questo gestore viene attivato quando il `button` riceve un evento click nel browser, ed esegue il metodo `handleClick` definito in `MyComponent`. All'interno del metodo `handleClick`, aggiorna lo `state` del componente usando `this.setState()`. Imposta la proprietà `name` in `state` in modo che sia uguale alla stringa `React Rocks!`.
 
-Click the button and watch the rendered state update. Don't worry if you don't fully understand how the click handler code works at this point. It's covered in upcoming challenges.
+Fai clic sul bottone e guarda l'aggiornamento della presentazione dello stato. Non preoccuparti se ancora non capisci completamente come funziona il codice di gestione del click. Lo vedremo nelle prossime sfide.
 
 # --hints--
 
-The state of `MyComponent` should initialize with the key value pair `{ name: Initial State }`.
+Lo stato di `MyComponent` dovrebbe essere inizializzato con la coppia chiave/valore `{ name: Initial State }`.
 
 ```js
 assert(
@@ -35,13 +35,13 @@ assert(
 );
 ```
 
-`MyComponent` should render an `h1` header.
+`MyComponent` dovrebbe presentare un'intestazione `h1`.
 
 ```js
 assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1);
 ```
 
-The rendered `h1` header should contain text rendered from the component's state.
+L'intestazione `h1` dovrebbe contenere testo presentato dallo stato del componente.
 
 ```js
 async () => {
@@ -57,7 +57,7 @@ async () => {
 };
 ```
 
-Calling the `handleClick` method on `MyComponent` should set the name property in state to equal `React Rocks!`.
+Chiamando il metodo `handleClick` su `MyComponent` si dovrebbe impostare la proprietà name nello stato sulla stringa `React Rocks!`.
 
 ```js
 async () => {

curriculum/challenges/italian/03-front-end-libraries/react/use--for-a-more-concise-conditional.md

@@ -8,21 +8,21 @@ dashedName: use--for-a-more-concise-conditional
 
 # --description--
 
-The `if/else` statements worked in the last challenge, but there's a more concise way to achieve the same result. Imagine that you are tracking several conditions in a component and you want different elements to render depending on each of these conditions. If you write a lot of `else if` statements to return slightly different UIs, you may repeat code which leaves room for error. Instead, you can use the `&&` logical operator to perform conditional logic in a more concise way. This is possible because you want to check if a condition is `true`, and if it is, return some markup. Here's an example:
+Le istruzioni `if/else` hanno funzionato nell'ultima sfida, ma c'è un modo più conciso per raggiungere lo stesso risultato. Immagina di dover tracciare diverse condizioni in un componente e di volere che elementi differenti siano presentati a seconda di ciascuna di queste condizioni. Se scrivi un sacco di istruzioni `else if` per restituire interfacce utente leggermente diverse, puoi dover ripetere il codice lasciando spazio a degli errori. Puoi invece utilizzare l'operatore logico `&&` per eseguire la logica condizionale in modo più conciso. Questo è possibile perché si desidera controllare se una condizione è `true`, e se è così, restituire qualche markup. Ecco un esempio:
 
 ```jsx
 {condition && <p>markup</p>}
 ```
 
-If the `condition` is `true`, the markup will be returned. If the condition is `false`, the operation will immediately return `false` after evaluating the `condition` and return nothing. You can include these statements directly in your JSX and string multiple conditions together by writing `&&` after each one. This allows you to handle more complex conditional logic in your `render()` method without repeating a lot of code.
+Se la `condition` è `true`, il markup verrà restituito. Se la condizione è `false`, l'operazione restituirà immediatamente `false` dopo aver valutato la `condition` e non restituirà nulla. Puoi includere queste istruzioni direttamente nel tuo JSX e legando più condizioni insieme scrivendo `&&` dopo ognuna. Questo ti permette di gestire una logica condizionale più complessa nel tuo metodo `render()` senza ripetere un sacco di codice.
 
 # --instructions--
 
-Solve the previous example again, so the `h1` only renders if `display` is `true`, but use the `&&` logical operator instead of an `if/else` statement.
+Risolvi nuovamente l'esempio precedente, in modo che `h1` venga presentato solo se `display` è `true`, ma usa l'operatore logico `&&` invece di un'istruzione `if/else`.
 
 # --hints--
 
-`MyComponent` should exist and render.
+`MyComponent` dovrebbe esistere ed effettuare il render.
 
 ```js
 assert(
@@ -33,7 +33,7 @@ assert(
 );
 ```
 
-When `display` is set to `true`, a `div`, `button`, and `h1` should render.
+Quando `display` è impostato a `true`, dovrebbero essere presentati un `div`, un `button` e un `h1`.
 
 ```js
 async () => {
@@ -54,7 +54,7 @@ async () => {
 };
 ```
 
-When `display` is set to `false`, only a `div` and `button` should render.
+Quando `display` è impostato su `false`, dovrebbero essere presentati solo un `div` e un `button`.
 
 ```js
 async () => {
@@ -75,7 +75,7 @@ async () => {
 };
 ```
 
-The render method should use the `&&` logical operator to check the condition of `this.state.display`.
+Il metodo render dovrebbe utilizzare l'operatore logico `&&` per controllare la condizione di `this.state.display`.
 
 ```js
 (getUserInput) => assert(getUserInput('index').includes('&&'));

curriculum/challenges/italian/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036187
-title: Use a Ternary Expression for Conditional Rendering
+title: Usare un'espressione ternaria per il rendering condizionale
 challengeType: 6
 forumTopicId: 301414
 dashedName: use-a-ternary-expression-for-conditional-rendering
@@ -8,7 +8,7 @@ dashedName: use-a-ternary-expression-for-conditional-rendering
 
 # --description--
 
-Before moving on to dynamic rendering techniques, there's one last way to use built-in JavaScript conditionals to render what you want: the <dfn>ternary operator</dfn>. The ternary operator is often utilized as a shortcut for `if/else` statements in JavaScript. They're not quite as robust as traditional `if/else` statements, but they are very popular among React developers. One reason for this is because of how JSX is compiled, `if/else` statements can't be inserted directly into JSX code. You might have noticed this a couple challenges ago — when an `if/else` statement was required, it was always *outside* the `return` statement. Ternary expressions can be an excellent alternative if you want to implement conditional logic within your JSX. Recall that a ternary operator has three parts, but you can combine several ternary expressions together. Here's the basic syntax:
+Prima di passare alle tecniche di rendering dinamiche, c'è un ultimo modo per utilizzare le condizionali JavaScript integrate per presentare quello che vuoi: l'<dfn>operatore ternario</dfn>. L'operatore ternario è spesso utilizzato come scorciatoia per le istruzioni `if/else` in JavaScript. Non è robusto come le tradizionali istruzioni `if/else`, ma è molto popolare tra gli sviluppatori React. Uno dei motivi è che per come JSX è compilato, le istruzioni `if/else` non possono essere inserite direttamente nel codice JSX. Potresti averlo notato un paio di sfide fa — quando era richiesta un'istruzione `if/else`, era sempre inserita *fuori* dall'istruzione `return`. Le espressioni ternarie possono essere un'ottima alternativa se vuoi implementare una logica condizionale all'interno del tuo JSX. Ricordiamo che un operatore ternario ha tre parti, ma è possibile combinare diverse espressioni ternarie insieme. Ecco la sintassi di base:
 
 ```jsx
 condition ? expressionIfTrue : expressionIfFalse;
@@ -16,13 +16,13 @@ condition ? expressionIfTrue : expressionIfFalse;
 
 # --instructions--
 
-The code editor has three constants defined within the `CheckUserAge` component's `render()` method. They are called `buttonOne`, `buttonTwo`, and `buttonThree`. Each of these is assigned a simple JSX expression representing a button element. First, initialize the state of `CheckUserAge` with `input` and `userAge` both set to values of an empty string.
+L'editor di codice ha tre costanti definite nel metodo `render()` del componente `CheckUserAge`. Si chiamano `buttonOne`, `buttonTwo`e `buttonThree`. Ad ognuno di questi viene assegnata una semplice espressione JSX che rappresenta un elemento button. Innanzitutto, inizializza lo stato di `CheckUserAge` con `input` e `userAge` entrambi impostati su una stringa vuota.
 
-Once the component is rendering information to the page, users should have a way to interact with it. Within the component's `return` statement, set up a ternary expression that implements the following logic: when the page first loads, render the submit button, `buttonOne`, to the page. Then, when a user enters their age and clicks the button, render a different button based on the age. If a user enters a number less than `18`, render `buttonThree`. If a user enters a number greater than or equal to `18`, render `buttonTwo`.
+Una volta che il componente sta presentando delle informazioni sulla pagina, gli utenti dovrebbero avere un modo per interagire con esso. All'interno dell'istruzione `return` del componente, imposta un'espressione ternaria che implementa la seguente logica: quando la pagina viene caricata inizialmente, presenta il pulsante di invio, `buttonOne`, sulla pagina. Poi, quando un utente inserisce la sua età e fa click sul bottone, presenta un pulsante diverso in base all'età. Se un utente inserisce un numero inferiore a `18`, presenta `buttonThree`. Se un utente inserisce un numero maggiore o uguale a `18`, presenta `buttonTwo`.
 
 # --hints--
 
-The `CheckUserAge` component should render with a single `input` element and a single `button` element.
+Il componente `CheckUserAge` dovrebbe presentare un singolo elemento `input` e un singolo elemento `button`.
 
 ```js
 assert(
@@ -33,7 +33,7 @@ assert(
 );
 ```
 
-The `CheckUserAge` component's state should be initialized with a property of `userAge` and a property of `input`, both set to a value of an empty string.
+Lo stato del componente `CheckUserAge` dovrebbe essere inizializzato con una proprietà di `userAge` e una proprietà `input`, entrambe impostate sul valore di una stringa vuota.
 
 ```js
 assert(
@@ -42,7 +42,7 @@ assert(
 );
 ```
 
-When the `CheckUserAge` component is first rendered to the DOM, the `button`'s inner text should be Submit.
+Quando il componente `CheckUserAge` viene presentato per la prima volta nel DOM, il testo interno del `button` dovrebbe essere Submit.
 
 ```js
 assert(
@@ -51,7 +51,7 @@ assert(
 );
 ```
 
-When a number of less than 18 is entered into the `input` element and the `button` is clicked, the `button`'s inner text should read `You Shall Not Pass`.
+Quando viene inserito un numero inferiore a 18 nell'elemento `input` e viene cliccato il `button`, il testo all'interno del `button` dovrebbe essere `You Shall Not Pass`.
 
 ```js
 (() => {
@@ -83,7 +83,7 @@ When a number of less than 18 is entered into the `input` element and the `butto
 })();
 ```
 
-When a number greater than or equal to 18 is entered into the `input` element and the `button` is clicked, the `button`'s inner text should read `You May Enter`.
+Quando un numero maggiore o uguale a 18 viene inserito nell'elemento `input` e il `button` viene cliccato, il testo interno del `button` dovrebbe essere `You May Enter`.
 
 ```js
 (() => {
@@ -115,7 +115,7 @@ When a number greater than or equal to 18 is entered into the `input` element an
 })();
 ```
 
-Once a number has been submitted, and the value of the `input` is once again changed, the `button` should return to reading `Submit`.
+Una volta che un numero è stato inviato, e il valore dell'`input` è cambiato ancora una volta, il `button` dovrebbe tornare al testo `Submit`.
 
 ```js
 (() => {
@@ -156,7 +156,7 @@ Once a number has been submitted, and the value of the `input` is once again cha
 })();
 ```
 
-Your code should not contain any `if/else` statements.
+Il tuo codice non dovrebbe contenere alcuna istruzione `if/else`.
 
 ```js
 assert(

curriculum/challenges/italian/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036183
-title: Use Advanced JavaScript in React Render Method
+title: Usare JavaScript avanzato nel metodo Render di React
 challengeType: 6
 forumTopicId: 301415
 dashedName: use-advanced-javascript-in-react-render-method
@@ -8,17 +8,17 @@ dashedName: use-advanced-javascript-in-react-render-method
 
 # --description--
 
-In previous challenges, you learned how to inject JavaScript code into JSX code using curly braces, `{ }`, for tasks like accessing props, passing props, accessing state, inserting comments into your code, and most recently, styling your components. These are all common use cases to put JavaScript in JSX, but they aren't the only way that you can utilize JavaScript code in your React components.
+Nelle sfide precedenti, hai imparato come iniettare il codice JavaScript nel codice JSX utilizzando le parentesi graffe, `{ }`, per attività come accedere alle props, passare props, accedere allo stato, inserire commenti nel codice e, più recentemente, stilizzare i componenti. Questi sono tutti casi in cui normalmente si inserisce del JavaScript in JSX, ma non sono l'unico modo in cui è possibile utilizzare il codice JavaScript nei componenti React.
 
-You can also write JavaScript directly in your `render` methods, before the `return` statement, ***without*** inserting it inside of curly braces. This is because it is not yet within the JSX code. When you want to use a variable later in the JSX code *inside* the `return` statement, you place the variable name inside curly braces.
+Puoi anche scrivere JavaScript direttamente nei tuoi metodi `render`, prima dell'istruzione `return`, ***senza*** inserirlo all'interno delle parentesi graffe. Questo perché non è ancora all'interno del codice JSX. Quando successivamente vorrai utilizzare una variabile nel codice JSX *all'interno* dell'istruzione `return`, posizionerai il nome della variabile all'interno delle parentesi graffe.
 
 # --instructions--
 
-In the code provided, the `render` method has an array that contains 20 phrases to represent the answers found in the classic 1980's Magic Eight Ball toy. The button click event is bound to the `ask` method, so each time the button is clicked a random number will be generated and stored as the `randomIndex` in state. On line 52, delete the string `change me!` and reassign the `answer` const so your code randomly accesses a different index of the `possibleAnswers` array each time the component updates. Finally, insert the `answer` const inside the `p` tags.
+Nel codice fornito, il metodo `render` ha un array che contiene 20 frasi per rappresentare le risposte trovate nel classico giocattolo degli anni '80 Magica Palla Otto. L'evento click del bottone è associato al metodo `ask`, così ogni volta che il pulsante viene cliccato un numero casuale verrà generato e memorizzato come `randomIndex` nello stato. Alla riga 52, elimina la stringa `change me!` e riassegna la costante `answer` in modo che il tuo codice acceda casualmente ad un diverso indice dell'array `possibleAnswers` ogni volta che il componente si aggiorna. Infine, inserisci la costante `answer` all'interno dei tag `p`.
 
 # --hints--
 
-The `MagicEightBall` component should exist and should render to the page.
+Il componente `MagicEightBall` dovrebbe esistere ed essere presentato nella pagina.
 
 ```js
 assert.strictEqual(
@@ -28,7 +28,7 @@ assert.strictEqual(
 );
 ```
 
-`MagicEightBall`'s first child should be an `input` element.
+Il primo figlio di `MagicEightBall` dovrebbe essere un elemento `input`.
 
 ```js
 assert.strictEqual(
@@ -40,7 +40,7 @@ assert.strictEqual(
 );
 ```
 
-`MagicEightBall`'s third child should be a `button` element.
+Il terzo figlio di `MagicEightBall` dovrebbe essere un elemento `button`.
 
 ```js
 assert.strictEqual(
@@ -52,7 +52,7 @@ assert.strictEqual(
 );
 ```
 
-`MagicEightBall`'s state should be initialized with a property of `userInput` and a property of `randomIndex` both set to a value of an empty string.
+Lo stato di `MagicEightBall` dovrebbe essere inizializzato con una proprietà `userInput` e una proprietà `randomIndex` entrambe impostate su un valore di una stringa vuota.
 
 ```js
 assert(
@@ -62,7 +62,7 @@ assert(
 );
 ```
 
-When `MagicEightBall` is first mounted to the DOM, it should return an empty `p` element.
+Quando `MagicEightBall` viene montato per la prima volta sul DOM, dovrebbe restituire un elemento `p` vuoto.
 
 ```js
 assert(
@@ -71,7 +71,7 @@ assert(
 );
 ```
 
-When text is entered into the `input` element and the button is clicked, the `MagicEightBall` component should return a `p` element that contains a random element from the `possibleAnswers` array.
+Quando il testo viene inserito nell'elemento `input` e il pulsante viene cliccato, il componente `MagicEightBall` dovrebbe restituire un elemento `p` che contiene un elemento casuale prendendolo dall'array `possibleAnswers`.
 
 ```js
 (() => {

curriculum/challenges/italian/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d403618c
-title: Use Array.filter() to Dynamically Filter an Array
+title: Usare Array.filter() per filtrare dinamicamente un array
 challengeType: 6
 forumTopicId: 301416
 dashedName: use-array-filter-to-dynamically-filter-an-array
@@ -8,7 +8,7 @@ dashedName: use-array-filter-to-dynamically-filter-an-array
 
 # --description--
 
-The `map` array method is a powerful tool that you will use often when working with React. Another method related to `map` is `filter`, which filters the contents of an array based on a condition, then returns a new array. For example, if you have an array of users that all have a property `online` which can be set to `true` or `false`, you can filter only those users that are online by writing:
+Il metodo degli array `map` è un potente strumento che userai spesso lavorando con React. Un altro metodo collegato a `map` è `filter`, che filtra il contenuto di un array in base a una condizione, restituendo un nuovo array. Ad esempio, se hai un array di utenti che hanno tutti una proprietà `online` che può essere impostata a `true` o `false`, puoi filtrare solo gli utenti che sono online scrivendo:
 
 ```js
 let onlineUsers = users.filter(user => user.online);
@@ -16,11 +16,11 @@ let onlineUsers = users.filter(user => user.online);
 
 # --instructions--
 
-In the code editor, `MyComponent`'s `state` is initialized with an array of users. Some users are online and some aren't. Filter the array so you see only the users who are online. To do this, first use `filter` to return a new array containing only the users whose `online` property is `true`. Then, in the `renderOnline` variable, map over the filtered array, and return a `li` element for each user that contains the text of their `username`. Be sure to include a unique `key` as well, like in the last challenges.
+Nell'editor di codice, lo `state` di `MyComponent` è inizializzato con un array di utenti. Alcuni utenti sono online e altri no. Filtra l'array in modo da vedere solo gli utenti che sono online. Per fare questo, prima usa `filter` per restituire un nuovo array contenente solo gli utenti la cui proprietà `online` è `true`. Poi, nella variabile `renderOnline`, mappa l'array filtrato, e restituisci un elemento `li` contenente il testo dello `username` di ogni utente. Assicurati di includere anche una `key` unica, come nelle ultime sfide.
 
 # --hints--
 
-`MyComponent` should exist and render to the page.
+`MyComponent` dovrebbe esistere e essere presentato nellla pagina.
 
 ```js
 assert.strictEqual(
@@ -29,7 +29,7 @@ assert.strictEqual(
 );
 ```
 
-`MyComponent`'s state should be initialized to an array of six users.
+Lo stato di `MyComponent` dovrebbe essere inizializzato ad un array di sei utenti.
 
 ```js
 assert(
@@ -40,7 +40,7 @@ assert(
 );
 ```
 
-`MyComponent` should return a `div`, an `h1`, and then an unordered list containing `li` elements for every user whose online status is set to `true`.
+`MyComponent` dovrebbe restituire un `div`, un `h1`, e poi una lista non ordinata contenente degli elementi `li` per ogni utente il cui stato online è impostato a `true`.
 
 ```js
 (() => {
@@ -83,7 +83,7 @@ assert(
 })();
 ```
 
-`MyComponent` should render `li` elements that contain the `username` of each online user.
+`MyComponent` dovrebbe restituire gli elementi `li` che contengono lo `username` di ogni utente online.
 
 ```js
 (() => {
@@ -109,7 +109,7 @@ assert(
 })();
 ```
 
-Each list item element should have a unique `key` attribute.
+Ogni elemento della lista dovrebbe avere un attributo `key` univoco.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08823
-title: Add a Negative Margin to an Element
+title: Adicionar margem negativa a um elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cnpyGs3'
 forumTopicId: 16166
@@ -9,19 +9,19 @@ dashedName: add-a-negative-margin-to-an-element
 
 # --description--
 
-An element's `margin` controls the amount of space between an element's `border` and surrounding elements.
+A propriedade `margin` de um elemento controla a quantidade de espaço entre a borda (`border`) de um elemento e os elementos ao redor.
 
-If you set an element's `margin` to a negative value, the element will grow larger.
+Se você definir a propriedade `margin` de um elemento com um valor negativo, o elemento ficará maior.
 
 # --instructions--
 
-Try to set the `margin` to a negative value like the one for the red box.
+Tente definir a propriedade `margin` com um valor negativo como o da caixa vermelha.
 
-Change the `margin` of the blue box to `-15px`, so it fills the entire horizontal width of the yellow box around it.
+Altere a propriedade `margin` da caixa azul para `-15px`, de modo a preencher toda a largura horizontal da caixa amarela ao redor.
 
 # --hints--
 
-Your `blue-box` class should give elements `-15px` of `margin`.
+O elemento de classe `blue-box` deve possuir a propriedade `margin` com o valor de `-15px`.
 
 ```js
 assert($('.blue-box').css('margin-top') === '-15px');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-borders-around-your-elements.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9bedf08813
-title: Add Borders Around Your Elements
+title: Adicionar bordas ao redor dos elementos
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c2MvnHZ'
 forumTopicId: 16630
@@ -9,9 +9,9 @@ dashedName: add-borders-around-your-elements
 
 # --description--
 
-CSS borders have properties like `style`, `color` and `width`.
+Bordas CSS têm propriedades como `style`, `color` e `width`.
 
-For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:
+Por exemplo, se quiséssemos criar uma borda vermelha de 5 pixels ao redor de um elemento HTML, poderíamos usar esta classe:
 
 ```html
 <style>
@@ -25,9 +25,9 @@ For example, if we wanted to create a red, 5 pixel border around an HTML element
 
 # --instructions--
 
-Create a class called `thick-green-border`. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo.
+Crie uma classe chamada `thick-green-border`. Esta classe deve adicionar uma borda sólida e verde de 10px ao redor de um elemento HTML. Por fim, aplique a classe na foto do gato.
 
-Remember that you can apply multiple classes to an element using its `class` attribute, by separating each class name with a space. For example:
+Lembre-se de que você pode aplicar várias classes a um mesmo elemento usando o atributo `class`. Basta separar o nome de cada classe com um espaço em branco. Por exemplo:
 
 ```html
 <img class="class1 class2">
@@ -35,19 +35,19 @@ Remember that you can apply multiple classes to an element using its `class` att
 
 # --hints--
 
-Your `img` element should have the class `smaller-image`.
+O elemento `img` deve possuir a classe `smaller-image`.
 
 ```js
 assert($('img').hasClass('smaller-image'));
 ```
 
-Your `img` element should have the class `thick-green-border`.
+O elemento `img` deve possuir a classe `thick-green-border`.
 
 ```js
 assert($('img').hasClass('thick-green-border'));
 ```
 
-Your image should have a border width of `10px`.
+A imagem deve possuir uma borda com a largura de `10px`.
 
 ```js
 assert(
@@ -57,13 +57,13 @@ assert(
 );
 ```
 
-Your image should have a border style of `solid`.
+A imagem deve possuir uma borda com o estilo `solid`.
 
 ```js
 assert($('img').css('border-right-style') === 'solid');
 ```
 
-The border around your `img` element should be green.
+A borda ao redor do elemento `img` deve ser verde.
 
 ```js
 assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1248bd9aedf08824
-title: Add Different Margins to Each Side of an Element
+title: Adicionar diferentes margens a cada lado de um elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cg4RWh4'
 forumTopicId: 16633
@@ -9,35 +9,35 @@ dashedName: add-different-margins-to-each-side-of-an-element
 
 # --description--
 
-Sometimes you will want to customize an element so that it has a different `margin` on each of its sides.
+Às vezes, você pode querer personalizar um elemento para que ele tenha a propriedade `margin` diferente em cada um de seus lados.
 
-CSS allows you to control the `margin` of all four individual sides of an element with the `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties.
+O CSS permite que você controle a propriedade `margin` de todos os quatro lados de um elemento com as seguintes propriedades: `margin-top`, `margin-right`, `margin-left` e `margin-bottom`.
 
 # --instructions--
 
-Give the blue box a `margin` of `40px` on its top and left side, but only `20px` on its bottom and right side.
+No elemento de classe "blue-box", adicione a propriedade `margin` com um valor de `40px` em cima e no lado esquerdo. E apenas `20px` em baixo e no lado direito.
 
 # --hints--
 
-Your `blue-box` class should give the top of elements `40px` of `margin`.
+A classe `blue-box` deve criar uma margem (`margin`) de `40px` acima do elemento.
 
 ```js
 assert($('.blue-box').css('margin-top') === '40px');
 ```
 
-Your `blue-box` class should give the right of elements `20px` of `margin`.
+A classe `blue-box` deve criar uma margem (`margin`) de `20px` à direita do elemento.
 
 ```js
 assert($('.blue-box').css('margin-right') === '20px');
 ```
 
-Your `blue-box` class should give the bottom of elements `20px` of `margin`.
+A classe `blue-box` deve criar uma margem (`margin`) de `20px` abaixo do elemento.
 
 ```js
 assert($('.blue-box').css('margin-bottom') === '20px');
 ```
 
-Your `blue-box` class should give the left of elements `40px` of `margin`.
+A classe `blue-box` deve criar uma margem (`margin` de `40px` à esquerda do elemento.
 
 ```js
 assert($('.blue-box').css('margin-left') === '40px');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08824
-title: Add Different Padding to Each Side of an Element
+title: Adicionar diferentes preenchimentos a cada lado de um elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cB7mwUw'
 forumTopicId: 16634
@@ -9,35 +9,35 @@ dashedName: add-different-padding-to-each-side-of-an-element
 
 # --description--
 
-Sometimes you will want to customize an element so that it has different amounts of `padding` on each of its sides.
+Às vezes, você pode querer personalizar um elemento para que ele tenha a propriedade `padding` diferente em cada um de seus lados.
 
-CSS allows you to control the `padding` of all four individual sides of an element with the `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties.
+O CSS permite que você controle a propriedade `padding` nos quatro lados de um elemento com as seguintes propriedades: `padding-top`, `padding-right`, `padding-left` e `padding-bottom`.
 
 # --instructions--
 
-Give the blue box a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side.
+Dê à caixa azul um preenchimento (`padding`) de `40px` em seus lados superior e esquerdo, mas apenas `20px` em seus lados inferior e direito.
 
 # --hints--
 
-Your `blue-box` class should give the top of the elements `40px` of `padding`.
+A classe `blue-box` deve criar um preenchimento (`padding`) de `40px` acima do elemento.
 
 ```js
 assert($('.blue-box').css('padding-top') === '40px');
 ```
 
-Your `blue-box` class should give the right of the elements `20px` of `padding`.
+A classe `blue-box` deve criar um preenchimento (`padding`) de `20px` à direita do elemento.
 
 ```js
 assert($('.blue-box').css('padding-right') === '20px');
 ```
 
-Your `blue-box` class should give the bottom of the elements `20px` of `padding`.
+A classe `blue-box` deve criar um preenchimento (`padding`) de `20px` abaixo do elemento.
 
 ```js
 assert($('.blue-box').css('padding-bottom') === '20px');
 ```
 
-Your `blue-box` class should give the left of the elements `40px` of `padding`.
+A classe `blue-box` deve criar um preenchimento (`padding`) de `40px` à esquerda do elemento.
 
 ```js
 assert($('.blue-box').css('padding-left') === '40px');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08814
-title: Add Rounded Corners with border-radius
+title: Criar cantos arredondados em um elemento com border-radius
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cbZm2hg'
 forumTopicId: 16649
@@ -9,23 +9,23 @@ dashedName: add-rounded-corners-with-border-radius
 
 # --description--
 
-Your cat photo currently has sharp corners. We can round out those corners with a CSS property called `border-radius`.
+Atualmente, a foto do gato possui bordas pontiagudas. Podemos arredondar essas bordas com uma propriedade do CSS chamada `border-radius`.
 
 # --instructions--
 
-You can specify a `border-radius` with pixels. Give your cat photo a `border-radius` of `10px`.
+Você pode definir o valor da propriedade `border-radius` em pixels. Faça com com que a foto do gato tenha uma borda. Defina a propriedade `border-radius` com o valor de `10px`.
 
-**Note:** This challenge allows for multiple possible solutions. For example, you may add `border-radius` to either the `.thick-green-border` class or the `.smaller-image` class.
+**Observação:** este desafio aceita mais de uma solução. Por exemplo, você pode adicionar `border-radius` tanto à classe `.thick-green-border` quanto à classe `.smaller-image`.
 
 # --hints--
 
-Your image element should have the class `thick-green-border`.
+A imagem deve ter a classe `thick-green-border`.
 
 ```js
 assert($('img').hasClass('thick-green-border'));
 ```
 
-Your image should have a border radius of `10px`.
+A imagem deve ter a propriedade border-radius com o valor de `10px`.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08822
-title: Adjust the Margin of an Element
+title: Ajustar a margem de um elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cVJarHW'
 forumTopicId: 16654
@@ -9,19 +9,19 @@ dashedName: adjust-the-margin-of-an-element
 
 # --description--
 
-An element's `margin` controls the amount of space between an element's `border` and surrounding elements.
+A propriedade `margin` controla a quantidade de espaço entre a borda (`border`) de um elemento e os elementos ao redor.
 
-Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger `margin` than the blue box, making it appear smaller.
+Aqui, podemos ver que a caixa azul e a caixa vermelha estão aninhadas dentro da caixa amarela. Observe que a caixa vermelha tem uma `margin` maior do que a caixa azul, fazendo com que ela pareça menor.
 
-When you increase the blue box's `margin`, it will increase the distance between its border and surrounding elements.
+Se você aumentar o valor da propriedade `margin` da caixa azul, a distância entre a borda e os elementos ao redor será maior.
 
 # --instructions--
 
-Change the `margin` of the blue box to match that of the red box.
+Altere a `margin` da caixa azul para que combine com a da caixa vermelha.
 
 # --hints--
 
-Your `blue-box` class should give elements `20px` of `margin`.
+A classe `blue-box` deve dar `20px` de `margin` aos elementos.
 
 ```js
 assert($('.blue-box').css('margin-top') === '20px');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md

@@ -1,6 +1,6 @@
 ---
 id: bad88fee1348bd9aedf08825
-title: Adjust the Padding of an Element
+title: Ajustar o espaçamento de um elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cED8ZC2'
 forumTopicId: 301083
@@ -9,25 +9,25 @@ dashedName: adjust-the-padding-of-an-element
 
 # --description--
 
-Now let's put our Cat Photo App away for a little while and learn more about styling HTML.
+Agora vamos deixar nosso aplicativo Cat Photo de lado um pouco e aprender mais sobre como estilizar o HTML.
 
-You may have already noticed this, but all HTML elements are essentially little rectangles.
+Talvez você já tenha percebido, mas todos os elementos HTML são, essencialmente, pequenos retângulos.
 
-Three important properties control the space that surrounds each HTML element: `padding`, `border`, and `margin`.
+Existem três propriedades importantes que controlam o espaço ao redor de um elemento HTML: `padding`, `border` e `margin`.
 
-An element's `padding` controls the amount of space between the element's content and its `border`.
+O preenchimento (`padding`) de um elemento controla a quantidade de espaço entre o conteúdo e a borda (`border`).
 
-Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more `padding` than the blue box.
+Aqui, podemos ver que a caixa azul e a caixa vermelha estão aninhadas dentro da caixa amarela. Observe que a caixa vermelha possui mais preenchimento (`padding`) do que a caixa azul.
 
-When you increase the blue box's `padding`, it will increase the distance (`padding`) between the text and the border around it.
+Quando você aumenta o `padding` da caixa azul, a distância/preenchimento (`padding`) entre o texto e a borda também aumenta.
 
 # --instructions--
 
-Change the `padding` of your blue box to match that of your red box.
+Altere o `padding` da caixa azul para combinar com o da caixa vermelha.
 
 # --hints--
 
-Your `blue-box` class should give elements `20px` of `padding`.
+A classe `blue-box` deve criar no elemento um preenchimento (`padding`) de `20px`.
 
 ```js
 assert($('.blue-box').css('padding-top') === '20px');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md

@@ -1,6 +1,6 @@
 ---
 id: 5a9d7286424fe3d0e10cad13
-title: Attach a Fallback value to a CSS Variable
+title: Definir um valor reserva para uma variável CSS
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c6bDNfp'
 forumTopicId: 301084
@@ -9,25 +9,25 @@ dashedName: attach-a-fallback-value-to-a-css-variable
 
 # --description--
 
-When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid.
+Ao usar uma variável como o valor de uma propriedade no CSS, você pode definir um valor reserva (fallback) que seu navegador usará se a variável for inválida.
 
-**Note:** This fallback is not used to increase browser compatibility, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable.
+**Observação:** esse valor reserva não é utilizado para aumentar a compatibilidade do seu código entre navegadores e não funcionará no Internet Explorer. Em vez disso, ele é usado quando o navegador não encontra a variável.
 
-Here's how you do it:
+Veja como você pode fazer isso:
 
 ```css
 background: var(--penguin-skin, black);
 ```
 
-This will set background to `black` if your variable wasn't set. Note that this can be useful for debugging.
+O exemplo acima fará com que a propriedade background (plano de fundo) tenha o valor `black` caso a variável não tenha sido definida. Perceba que isso pode ser útil para debugging (depuração).
 
 # --instructions--
 
-It looks like there is a problem with the variables supplied to the `.penguin-top` and `.penguin-bottom` classes. Rather than fix the typo, add a fallback value of `black` to the `background` property of the `.penguin-top` and `.penguin-bottom` classes.
+Parece que há um problema com as variáveis fornecidas para as classes `.penguin-top` e `.penguin-bottom`. Ao invés de corrigir o erro de digitação, defina um valor reserva na propriedade `background` das classes `.penguin-top` e `.penguin-bottom`. O valor reserva deve ser `black`.
 
 # --hints--
 
-The fallback value of `black` should be used in the `background` property of the `penguin-top` class.
+O valor reserva `black` deve ser utilizado na propriedade `background` da classe `penguin-top`.
 
 ```js
 assert(
@@ -37,7 +37,7 @@ assert(
 );
 ```
 
-The fallback value of `black` should be used in `background` property of the `penguin-bottom` class.
+O valor reserva `black` deve ser utilizado na propriedade `background` da classe `penguin-bottom`.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md

@@ -1,6 +1,6 @@
 ---
 id: 5a9d72a1424fe3d0e10cad15
-title: Change a variable for a specific area
+title: Alterar uma variável em uma área específica
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cdRwbuW'
 forumTopicId: 301085
@@ -9,17 +9,17 @@ dashedName: change-a-variable-for-a-specific-area
 
 # --description--
 
-When you create your variables in `:root` they will set the value of that variable for the whole page.
+Quando você cria suas variáveis em `:root`, elas ficam disponíveis para uso em toda a página.
 
-You can then over-write these variables by setting them again within a specific element.
+Mas nada impede que você redefina os valores dessas variáveis dentro de qualquer outro seletor CSS.
 
 # --instructions--
 
-Change the value of `--penguin-belly` to `white` in the `penguin` class.
+Na classe `penguin`, altere o valor da variável `--penguin-belly` para `white`.
 
 # --hints--
 
-The `penguin` class should reassign the `--penguin-belly` variable to `white`.
+A classe `penguin` deve redefinir o valor da variável `--penguin-belly` para `white`.
 
 ```js
 assert(
@@ -27,7 +27,7 @@ assert(
 );
 ```
 
-The `penguin` class should not contain the `background-color` property
+A classe `penguin` não deve conter a propriedade `background-color`
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-the-color-of-text.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08803
-title: Change the Color of Text
+title: Alterar a cor do texto
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cRkVmSm'
 forumTopicId: 16775
@@ -9,39 +9,39 @@ dashedName: change-the-color-of-text
 
 # --description--
 
-Now let's change the color of some of our text.
+Agora vamos mudar a cor de uma parte do nosso texto.
 
-We can do this by changing the `style` of your `h2` element.
+Podemos fazer isso alterando o `style` do seu elemento `h2`.
 
-The property that is responsible for the color of an element's text is the `color` style property.
+A propriedade responsável pela cor do texto de um elemento é a propriedade de estilo `color`.
 
-Here's how you would set your `h2` element's text color to blue:
+Você pode definir a cor do texto do elemento `h2` para azul assim:
 
 ```html
 <h2 style="color: blue;">CatPhotoApp</h2>
 ```
 
-Note that it is a good practice to end inline `style` declarations with a `;` .
+Observe que é uma boa prática terminar as propriedades declaradas no atributo `style` com um `;`.
 
 # --instructions--
 
-Change your `h2` element's style so that its text color is red.
+Altere o estilo do elemento `h2` para que a cor do texto seja vermelha.
 
 # --hints--
 
-Your `h2` element should have a `style` declaration.
+O elemento `h2` deve possuir o atributo `style`.
 
 ```js
 assert($('h2').attr('style'));
 ```
 
-Your `h2` element should have color set to `red`.
+O texto do elemento `h2` deve possuir a cor `red` (vermelho).
 
 ```js
 assert($('h2')[0].style.color === 'red');
 ```
 
-Your `style` declaration should end with a `;` .
+O valor da propriedade declarada em `style` deve terminar com um `;` .
 
 ```js
 assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08806
-title: Change the Font Size of an Element
+title: Altere o Tamanho da Fonte de um Elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c3bvDc8'
 forumTopicId: 16777
@@ -9,7 +9,7 @@ dashedName: change-the-font-size-of-an-element
 
 # --description--
 
-Font size is controlled by the `font-size` CSS property, like this:
+O tamanho da fonte é controlado pela propriedade CSS `font-size`, assim:
 
 ```css
 h1 {
@@ -19,11 +19,11 @@ h1 {
 
 # --instructions--
 
-Inside the same `<style>` tag that contains your `red-text` class, create an entry for `p` elements and set the `font-size` to 16 pixels (`16px`).
+Dentro da tag `<style>` que contém a classe `red-text`, crie um seletor de elementos `p` e defina a propriedade `font-size` com o valor de `16px`.
 
 # --hints--
 
-Between the `style` tags, give the `p` elements `font-size` of `16px`. Browser and Text zoom should be at 100%.
+Entre as tags `style`, defina a propriedade `font-size` com o valor de `16px` no seletor CSS `p` que você criou. O zoom do navegador e do texto devem estar em 100%.
 
 ```js
 assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/create-a-custom-css-variable.md

@@ -1,6 +1,6 @@
 ---
 id: 5a9d726c424fe3d0e10cad11
-title: Create a custom CSS Variable
+title: Criar variáveis no CSS
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cQd27Hr'
 forumTopicId: 301086
@@ -9,21 +9,21 @@ dashedName: create-a-custom-css-variable
 
 # --description--
 
-To create a CSS variable, you just need to give it a name with two hyphens in front of it and assign it a value like this:
+Para criar uma variável no CSS, você precisa dar um nome, prefixar este nome com dois hífens e atribuir um valor a ela, assim:
 
 ```css
 --penguin-skin: gray;
 ```
 
-This will create a variable named `--penguin-skin` and assign it the value of `gray`. Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.
+Isso vai criar uma variável chamada `--penguin-skin` e atribuir a ela o valor de `gray`. Agora você pode usar essa variável em outro lugar do seu CSS para alterar o valor de outros elementos para cinza (gray).
 
 # --instructions--
 
-In the `penguin` class, create a variable name `--penguin-skin` and give it a value of `gray`.
+Na classe `penguin`, crie uma variável chamada `--penguin-skin` e atribua a ela o valor `gray`.
 
 # --hints--
 
-`penguin` class should declare the `--penguin-skin` variable and assign it to `gray`.
+A classe `penguin` deve declarar a variável `--penguin-skin` e atribuí-la o valor de `gray`.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fed1348bd9aede07836
-title: Give a Background Color to a div Element
+title: Criar uma cor de fundo em um elemento div
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cdRKMCk'
 forumTopicId: 18190
@@ -9,9 +9,9 @@ dashedName: give-a-background-color-to-a-div-element
 
 # --description--
 
-You can set an element's background color with the `background-color` property.
+Você pode definir a cor de fundo de um elemento com a propriedade `background-color`.
 
-For example, if you wanted an element's background color to be `green`, you'd put this within your `style` element:
+Por exemplo, se você quiser que a cor de fundo de um elemento seja `green` (verde), você deve colocar o seguinte código dentro do elemento `style`:
 
 ```css
 .green-background {
@@ -21,23 +21,23 @@ For example, if you wanted an element's background color to be `green`, you'd pu
 
 # --instructions--
 
-Create a class called `silver-background` with the `background-color` of `silver`. Assign this class to your `div` element.
+Crie uma classe chamada `silver-background` com a `background-color` de `silver`. Atribua esta classe ao elemento `div`.
 
 # --hints--
 
-Your`div` element should have the class `silver-background`.
+O elemento `div` deve ter a classe `silver-background`.
 
 ```js
 assert($('div').hasClass('silver-background'));
 ```
 
-Your `div` element should have a silver background.
+O elemento `div` deve ter um fundo de cor prata (silver).
 
 ```js
 assert($('div').css('background-color') === 'rgb(192, 192, 192)');
 ```
 
-A class named `silver-background` should be defined within the `style` element and the value of `silver` should be assigned to the `background-color` property.
+Uma classe chamada `silver-background` deve ser definida dentro do elemento `style` e o valor `silver` deve ser atribuído à propriedade `background-color`.
 
 ```js
 assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/import-a-google-font.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08807
-title: Import a Google Font
+title: Importar uma tipografia do Google
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cM9MRsJ'
 forumTopicId: 18200
@@ -9,41 +9,41 @@ dashedName: import-a-google-font
 
 # --description--
 
-In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are many sources for web fonts on the Internet. For this example we will focus on the Google Fonts library.
+Além de definir tipografias comuns que são encontradas na maioria dos sistemas operacionais, podemos também definir tipografias não padronizadas e customizadas para serem usadas em nosso site. Na Internet, existem muitos lugares onde podemos encontrar tipografias. Neste desafio, vamos usar a biblioteca do Google Fonts.
 
-[Google Fonts](https://fonts.google.com/) is a free library of web fonts that you can use in your CSS by referencing the font's URL.
+[Google Fonts](https://fonts.google.com/) é uma biblioteca gratuita de tipografias que você pode usar em seu CSS ao referenciar a URL da tipografia.
 
-So, let's go ahead and import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).
+Então, vamos importar e aplicar uma tipografia a partir do Google.
 
-To import a Google Font, you can copy the font's URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the `Lobster` font. To do this, copy the following code snippet and paste it into the top of your code editor (before the opening `style` element):
+Para importar uma tipografia, você pode copiar a URL da tipografia a partir da biblioteca do Google Fonts e colá-la em seu HTML. Para esse desafio, vamos importar a tipografia `Lobster`. Para fazer isso, copie o seguinte fragmento de código e cole-o no começo de seu editor de código-fonte (antes da tag de abertura do elemento `style`):
 
 ```html
 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 ```
 
-Now you can use the `Lobster` font in your CSS by using `Lobster` as the FAMILY_NAME as in the following example:
+Agora você pode usar a fonte `Lobster` em seu CSS ao substituir FAMILY_NAME no código abaixo por `Lobster`:
 
 ```css
 font-family: FAMILY_NAME, GENERIC_NAME;
 ```
 
-The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.
+O GENERIC_NAME é opcional e é uma tipografia alternativa caso a tipografia anterior não esteja disponível. Essa questão será abordada no próximo desafio.
 
-Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the `"Open Sans"` font, but not to use the `Lobster` font.
+O nome da família de uma tipografia diferencia maiúsculas de minúsculas e deve estar entre aspas caso possua mais de uma palavra. Por exemplo, você precisa de aspas para usar a fonte `"Open Sans"`, mas não para usar a fonte `Lobster`.
 
 # --instructions--
 
-Import the `Lobster` font to your web page. Then, use an element selector to set `Lobster` as the `font-family` for your `h2` element.
+Importe a tipografia `Lobster` na sua página web. Então, crie um seletor para o elemento `h2` e defina a propriedade `font-family` com o valor de `Lobster`.
 
 # --hints--
 
-You should import the `Lobster` font.
+Você deve importar a tipografia `Lobster`.
 
 ```js
 assert($('link[href*="googleapis" i]').length);
 ```
 
-Your `h2` element should use the font `Lobster`.
+O elemento `h2` deve usar a tipografia `Lobster`.
 
 ```js
 assert(
@@ -53,7 +53,7 @@ assert(
 );
 ```
 
-You should only use an `h2` element selector to change the font.
+Você deve usar apenas um seletor para referenciar o elemento `h2` para alterar a tipografia.
 
 ```js
 assert(
@@ -63,7 +63,7 @@ assert(
 );
 ```
 
-Your `p` element should still use the font `monospace`.
+O elemento `p` ainda deve usar a tipografia `monospace`.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md

@@ -1,6 +1,6 @@
 ---
 id: 5b7d72c338cd7e35b63f3e14
-title: Improve Compatibility with Browser Fallbacks
+title: Melhorar a compatibilidade do CSS com navegadores antigos
 challengeType: 0
 videoUrl: ''
 forumTopicId: 301087
@@ -9,19 +9,19 @@ dashedName: improve-compatibility-with-browser-fallbacks
 
 # --description--
 
-When working with CSS you will likely run into browser compatibility issues at some point. This is why it's important to provide browser fallbacks to avoid potential problems.
+Ao trabalhar com CSS, você provavelmente terá problemas de compatibilidade entre navegadores em algum momento. É por isso que é importante pensar em um plano B para evitar possíveis problemas.
 
-When your browser parses the CSS of a webpage, it ignores any properties that it doesn't recognize or support. For example, if you use a CSS variable to assign a background color on a site, Internet Explorer will ignore the background color because it does not support CSS variables. In that case, the browser will use whatever value it has for that property. If it can't find any other value set for that property, it will revert to the default value, which is typically not ideal.
+Quando o navegador analisa o CSS de uma página web, ele ignora todas as propriedades que não reconhece ou suporta. Por exemplo, se você usar uma variável CSS para atribuir uma cor de fundo em um site, o Internet Explorer irá ignorar a cor de fundo porque não oferece suporte a variáveis CSS. Nesse caso, o navegador usará qualquer outro valor que ele encontrar para essa propriedade. Se ele não conseguir encontrar nenhum outro valor definido para essa propriedade, ele reverterá para o valor padrão, que normalmente não é o ideal.
 
-This means that if you do want to provide a browser fallback, it's as easy as providing another more widely supported value immediately before your declaration. That way an older browser will have something to fall back on, while a newer browser will just interpret whatever declaration comes later in the cascade.
+Para evitar esse comportamento, você pode criar um plano B. E isso é tão fácil quanto fornecer outro valor que possua um suporte mais amplo. Dessa forma, um navegador mais antigo terá algo em que se apoiar, enquanto que um navegador mais recente interpretará qualquer estilo declarado posteriormente.
 
 # --instructions--
 
-It looks like a variable is being used to set the background color of the `.red-box` class. Let's improve our browser compatibility by adding another `background` declaration right before the existing declaration and set its value to `red`.
+Parece que uma variável está sendo usada para definir a cor de fundo da classe `.red-box`. Vamos melhorar a compatibilidade do nosso código com os navegadores mais antigos adicionando outra propriedade, `background`, logo antes da propriedade que já existe e definir seu valor para `red`.
 
 # --hints--
 
-Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration.
+O seletor `.red-box` deve possuir uma propriedade reserva para a propriedade `background` existente. Crie outra propriedade `background` com o valor `red` imediatamente antes da propriedade de "background" existente.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/inherit-css-variables.md

@@ -1,6 +1,6 @@
 ---
 id: 5a9d7295424fe3d0e10cad14
-title: Inherit CSS Variables
+title: Herdar variáveis no CSS
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cyLZZhZ'
 forumTopicId: 301088
@@ -9,19 +9,19 @@ dashedName: inherit-css-variables
 
 # --description--
 
-When you create a variable, it is available for you to use inside the selector in which you create it. It also is available in any of that selector's descendants. This happens because CSS variables are inherited, just like ordinary properties.
+Quando você cria uma variável, ela fica disponível para uso dentro do seletor em que ela foi criada. Ela também fica disponível para uso em qualquer um dos elementos descendentes desse seletor. Isso acontece porque as variáveis no CSS são herdadas, assim como as propriedades comuns.
 
-To make use of inheritance, CSS variables are often defined in the <dfn>:root</dfn> element.
+Para fazer uso da herança, as variáveis CSS são frequentemente definidas no elemento <dfn>:root</dfn>.
 
-`:root` is a <dfn>pseudo-class</dfn> selector that matches the root element of the document, usually the `html` element. By creating your variables in `:root`, they will be available globally and can be accessed from any other selector in the style sheet.
+`:root` é um seletor do tipo <dfn>pseudo-class</dfn> que corresponde ao elemento raiz do documento, geralmente o elemento `html`. Ao criar variáveis usando a pseudo-classe `:root`, elas estarão disponíveis globalmente e podem ser acessadas a partir de qualquer outro seletor no CSS.
 
 # --instructions--
 
-Define a variable named `--penguin-belly` in the `:root` selector and give it the value of `pink`. You can then see that the variable is inherited and that all the child elements which use it get pink backgrounds.
+Crie uma variável chamada `--penguin-belly` no pseudo-classe `:root` e dê a ela o valor `pink`. Após criá-la, note que a variável é herdada e que todos os elementos filhos que a usam têm fundo rosa.
 
 # --hints--
 
-The `--penguin-belly` variable should be declared in the `:root` and assigned the value `pink`.
+A variável `--penguin-belly` deve ser declarada no `:root` com o valor `pink`.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08746
-title: Inherit Styles from the Body Element
+title: Herdar estilos do elemento body
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c9bmdtR'
 forumTopicId: 18204
@@ -9,27 +9,27 @@ dashedName: inherit-styles-from-the-body-element
 
 # --description--
 
-Now we've proven that every HTML page has a `body` element, and that its `body` element can also be styled with CSS.
+No desafio anterior, provamos que cada página HTML tem um elemento `body`, e que o elemento `body` também pode ser estilizado com CSS.
 
-Remember, you can style your `body` element just like any other HTML element, and all your other elements will inherit your `body` element's styles.
+Lembre-se de que você pode definir o estilo do elemento `body` como qualquer outro elemento HTML, e todos os outros elementos herdarão os estilos do elemento `body`.
 
 # --instructions--
 
-First, create a `h1` element with the text `Hello World`
+Primeiro, crie um elemento `h1` com o texto `Hello World`
 
-Then, let's give all elements on your page the color of `green` by adding `color: green;` to your `body` element's style declaration.
+Então, vamos dar a todos os elementos da página a cor `green` adicionando `color: green;` à declaração de estilo do elemento `body`.
 
-Finally, give your `body` element the font-family of `monospace` by adding `font-family: monospace;` to your `body` element's style declaration.
+Por fim, dê ao elemento `body` a tipografia `monospace` adicionando `font-family: monospace;` à declaração de estilo do elemento `body`.
 
 # --hints--
 
-You should create an `h1` element.
+Você deve criar um elemento `h1`.
 
 ```js
 assert($('h1').length > 0);
 ```
 
-Your `h1` element should have the text `Hello World`.
+O elemento `h1` deve conter o texto `Hello World`.
 
 ```js
 assert(
@@ -40,7 +40,7 @@ assert(
 );
 ```
 
-Your `h1` element should have a closing tag.
+O elemento `h1` deve ter uma tag de fechamento.
 
 ```js
 assert(
@@ -50,13 +50,13 @@ assert(
 );
 ```
 
-Your `body` element should have the `color` property of `green`.
+O elemento `body` deve ter a propriedade `color` com o valor `green`.
 
 ```js
 assert($('body').css('color') === 'rgb(0, 128, 0)');
 ```
 
-Your `body` element should have the `font-family` property of `monospace`.
+O elemento `body` deve ter a propriedade `font-family` com o valor `monospace`.
 
 ```js
 assert(
@@ -66,7 +66,7 @@ assert(
 );
 ```
 
-Your `h1` element should inherit the font `monospace` from your `body` element.
+O elemento `h1` deve herdar a fonte `monospace` do elemento `body`.
 
 ```js
 assert(
@@ -77,7 +77,7 @@ assert(
 );
 ```
 
-Your `h1` element should inherit the color green from your `body` element.
+O elemento `h1` deve herdar a cor verde do elemento `body`.
 
 ```js
 assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08815
-title: Make Circular Images with a border-radius
+title: Criar imagens redondas com border-radius
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c2MvrcB'
 forumTopicId: 18229
@@ -9,21 +9,21 @@ dashedName: make-circular-images-with-a-border-radius
 
 # --description--
 
-In addition to pixels, you can also specify the `border-radius` using a percentage.
+Além dos pixels, você também pode definir o valor da propriedade `border-radius` usando porcentagem.
 
 # --instructions--
 
-Give your cat photo a `border-radius` of `50%`.
+Dê à foto do gato a propriedade `border-radius` com valor de `50%`.
 
 # --hints--
 
-Your image should have a border radius of `50%`, making it perfectly circular.
+A imagem deve ter a propriedade border-radius com valor de `50%`, tornando-a perfeitamente redonda.
 
 ```js
 assert(parseInt($('img').css('border-top-left-radius')) > 48);
 ```
 
-The `border-radius` value should use a percentage value of `50%`.
+O valor da propriedade `border-radius` deve ser `50%`.
 
 ```js
 assert(code.match(/50%/g));

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf07756
-title: Override All Other Styles by using Important
+title: Sobrescrever todos os outros estilos usando a palavra important
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cm24rcp'
 forumTopicId: 18249
@@ -9,19 +9,19 @@ dashedName: override-all-other-styles-by-using-important
 
 # --description--
 
-Yay! We just proved that inline styles will override all the CSS declarations in your `style` element.
+Uhuu! Acabamos de provar que os estilos inline sobrescrevem todas as declarações CSS feitas no elemento `style`.
 
-But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.
+Mas veja bem. Existe mais uma forma de sobrescrever o CSS que declaramos anteriormente. Este é o método mais poderoso de todos. Mas antes de continuarmos, vamos falar sobre o motivo de você querer substituir o CSS.
 
-In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use `!important`.
+Em muitas situações, você usará bibliotecas CSS. E elas podem, acidentalmente, substituir o CSS. Portanto, quando você precisar ter certeza absoluta de que um elemento deve possuir um CSS específico, poderá usar `!important`.
 
-Let's go all the way back to our `pink-text` class declaration. Remember that our `pink-text` class was overridden by subsequent class declarations, id declarations, and inline styles.
+Vamos voltar à nossa classe `pink-text`. Lembre-se de que a classe `pink-text` foi sobrescrita por declarações de classe posteriores, declarações de id e estilos inline.
 
 # --instructions--
 
-Let's add the keyword `!important` to your pink-text element's color declaration to make 100% sure that your `h1` element will be pink.
+Vamos adicionar a palavra-chave `!important` à declaração de estilo do elemento `h1` para ter 100% de certeza de que ele terá a cor de texto rosa.
 
-An example of how to do this is:
+Um exemplo de como fazer isso:
 
 ```css
 color: red !important;
@@ -29,31 +29,31 @@ color: red !important;
 
 # --hints--
 
-Your `h1` element should have the class `pink-text`.
+O elemento `h1` deve ter a classe `pink-text`.
 
 ```js
 assert($('h1').hasClass('pink-text'));
 ```
 
-Your `h1` element should have the class `blue-text`.
+O elemento `h1` deve ter a classe `blue-text`.
 
 ```js
 assert($('h1').hasClass('blue-text'));
 ```
 
-Your `h1` element should have the `id` of `orange-text`.
+O elemento `h1` deve ter o atributo `id` de valor `orange-text`.
 
 ```js
 assert($('h1').attr('id') === 'orange-text');
 ```
 
-Your `h1` element should have the inline style of `color: white`.
+O elemento `h1` deve ter o estilo inline `color: white`.
 
 ```js
 assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
 ```
 
-Your `pink-text` class declaration should have the `!important` keyword to override all other declarations.
+A classe `pink-text` deve ter a palavra-chave `!important` para sobrescrever todas as outras declarações.
 
 ```js
 assert(
@@ -61,7 +61,7 @@ assert(
 );
 ```
 
-Your `h1` element should be pink.
+O elemento `h1` deve ser rosa.
 
 ```js
 assert($('h1').css('color') === 'rgb(255, 192, 203)');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd8aedf06756
-title: Override Class Declarations by Styling ID Attributes
+title: Sobrescrever estilos de classes por estilos de ID
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cRkpDhB'
 forumTopicId: 18251
@@ -9,23 +9,23 @@ dashedName: override-class-declarations-by-styling-id-attributes
 
 # --description--
 
-We just proved that browsers read CSS from top to bottom in order of their declaration. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last. Notice that if we even had put `blue-text` before `pink-text` in our `h1` element's classes, it would still look at the declaration order and not the order of their use!
+No desafio anterior vimos que os navegadores leem o CSS de cima para baixo, seguindo a ordem de aparição das declarações de estilos. Isso significa que, em caso de conflito, o navegador utilizará a última declaração CSS escrita. No elemento `h1`, observe que se tivéssemos declarado a classe `blue-text` antes de classe `pink-text`, o h1 continuaria a aplicar os estilos baseado em quem foi declarado por último!
 
-But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?
+Mas isso não é tudo. Existem outras maneiras de sobrescrever o CSS. Você se lembra dos atributos de id?
 
-Let's override your `pink-text` and `blue-text` classes, and make your `h1` element orange, by giving the `h1` element an id and then styling that id.
+Vamos sobrescrever as classes `pink-text` e `blue-text` dando ao elemento `h1` um id e então estilizar este id de forma a tornar o elemento `h1` laranja.
 
 # --instructions--
 
-Give your `h1` element the `id` attribute of `orange-text`. Remember, id styles look like this:
+Dê ao elemento `h1` o atributo `id` com o valor `orange-text`. Lembre-se de que é assim que se aplica um id:
 
 ```html
 <h1 id="orange-text">
 ```
 
-Leave the `blue-text` and `pink-text` classes on your `h1` element.
+Não apague as classes `blue-text` e `pink-text` do elemento `h1`.
 
-Create a CSS declaration for your `orange-text` id in your `style` element. Here's an example of what this looks like:
+Crie uma declaração CSS para o id `orange-text` no elemento `style`. Um exemplo de como fazer isso:
 
 ```css
 #brown-text {
@@ -33,47 +33,47 @@ Create a CSS declaration for your `orange-text` id in your `style` element. Here
 }
 ```
 
-**Note:** It doesn't matter whether you declare this CSS above or below `pink-text` class, since the `id` attribute will always take precedence.
+**Observação:** não importa se você declara esse CSS acima ou abaixo da classe `pink-text`, já que o atributo `id` sempre terá prioridade.
 
 # --hints--
 
-Your `h1` element should have the class `pink-text`.
+O elemento `h1` deve ter a classe `pink-text`.
 
 ```js
 assert($('h1').hasClass('pink-text'));
 ```
 
-Your `h1` element should have the class `blue-text`.
+O elemento `h1` deve ter a classe `blue-text`.
 
 ```js
 assert($('h1').hasClass('blue-text'));
 ```
 
-Your `h1` element should have the id of `orange-text`.
+O elemento `h1` deve ter o id `orange-text`.
 
 ```js
 assert($('h1').attr('id') === 'orange-text');
 ```
 
-There should be only one `h1` element.
+Deve haver apenas 1 elemento `h1`.
 
 ```js
 assert($('h1').length === 1);
 ```
 
-Your `orange-text` id should have a CSS declaration.
+O id `orange-text` deve ser referenciado no CSS.
 
 ```js
 assert(code.match(/#orange-text\s*{/gi));
 ```
 
-Your `h1` should not have any `style` attributes.
+O `h1` não deve ter nenhum atributo `style`.
 
 ```js
 assert(!code.match(/<h1.*style.*>/gi));
 ```
 
-Your `h1` element should be orange.
+O elemento `h1` deve ser laranja.
 
 ```js
 assert($('h1').css('color') === 'rgb(255, 165, 0)');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf06756
-title: Override Class Declarations with Inline Styles
+title: Sobrescrever estilos de classe com estilos inline
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cGJDRha'
 forumTopicId: 18252
@@ -9,47 +9,47 @@ dashedName: override-class-declarations-with-inline-styles
 
 # --description--
 
-So we've proven that id declarations override class declarations, regardless of where they are declared in your `style` element CSS.
+No desafio anterior, vimos que os estilos declarados com id sobrescrevem as declarações feitas com classes, independente de onde as classes foram declaradas no elemento `style`.
 
-There are other ways that you can override CSS. Do you remember inline styles?
+Mas existem outras maneiras de sobrescrever o CSS. Você se lembra dos estilos inline?
 
 # --instructions--
 
-Use an inline style to try to make our `h1` element white. Remember, inline styles look like this:
+Use um estilo inline para tentar tornar o elemento `h1` branco. Lembre-se, estilos inline são declarados dessa forma:
 
 ```html
 <h1 style="color: green;">
 ```
 
-Leave the `blue-text` and `pink-text` classes on your `h1` element.
+Não apague as classes `blue-text` e `pink-text` do elemento `h1`.
 
 # --hints--
 
-Your `h1` element should have the class `pink-text`.
+O elemento `h1` deve ter a classe `pink-text`.
 
 ```js
 assert($('h1').hasClass('pink-text'));
 ```
 
-Your `h1` element should have the class `blue-text`.
+O elemento `h1` deve ter a classe `blue-text`.
 
 ```js
 assert($('h1').hasClass('blue-text'));
 ```
 
-Your `h1` element should have the id of `orange-text`.
+O elemento `h1` deve ter o id `orange-text`.
 
 ```js
 assert($('h1').attr('id') === 'orange-text');
 ```
 
-Your `h1` element should have an inline style.
+O elemento `h1` deve ter um estilo inline.
 
 ```js
 assert(document.querySelector('h1[style]'));
 ```
 
-Your `h1` element should be white.
+O elemento `h1` deve ser branco.
 
 ```js
 assert($('h1').css('color') === 'rgb(255, 255, 255)');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf04756
-title: Override Styles in Subsequent CSS
+title: Substituir estilos no CSS baseado na ordem de aparição
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cGJDQug'
 forumTopicId: 18253
@@ -9,47 +9,47 @@ dashedName: override-styles-in-subsequent-css
 
 # --description--
 
-Our `pink-text` class overrode our `body` element's CSS declaration!
+A classe `pink-text` sobrescreveu a declaração de estilo do elemento `body`!
 
-We just proved that our classes will override the `body` element's CSS. So the next logical question is, what can we do to override our `pink-text` class?
+Com isso, podemos perceber que classes sobrescrevem os estilos declarados no elemento `body`. Isso nos leva à pergunta: o que podemos fazer para substituir a classe `pink-text`?
 
 # --instructions--
 
-Create an additional CSS class called `blue-text` that gives an element the color blue. Make sure it's below your `pink-text` class declaration.
+Crie uma classe CSS adicional chamada `blue-text` que dá a um elemento a cor azul. Certifique-se de que esta nova classe esteja abaixo da classe `pink-text`.
 
-Apply the `blue-text` class to your `h1` element in addition to your `pink-text` class, and let's see which one wins.
+Além de classe `pink-text`, aplique a classe `blue-text` ao elemento `h1`, e vamos ver qual tem maior prioridade.
 
-Applying multiple class attributes to a HTML element is done with a space between them like this:
+A aplicação de várias classes a um mesmo elemento HTML é feita com um espaço entre cada uma, assim:
 
 ```html
 class="class1 class2"
 ```
 
-**Note:** It doesn't matter which order the classes are listed in the HTML element.
+**Observação:** a ordem das classes dentro do atributo "class" não é importante.
 
-However, the order of the `class` declarations in the `<style>` section is what is important. The second declaration will always take precedence over the first. Because `.blue-text` is declared second, it overrides the attributes of `.pink-text`
+O importante é a ordem em que as classes (`class`) são declaradas dentro da tag `<style>`. A última declaração sempre terá prioridade sobre a anterior. Como a classe `.blue-text` é declarada por último, ela sobrescreve os estilos que foram declarados na classe `.pink-text`
 
 # --hints--
 
-Your `h1` element should have the class `pink-text`.
+O elemento `h1` deve ter a classe `pink-text`.
 
 ```js
 assert($('h1').hasClass('pink-text'));
 ```
 
-Your `h1` element should have the class `blue-text`.
+O elemento `h1` deve ter a classe `blue-text`.
 
 ```js
 assert($('h1').hasClass('blue-text'));
 ```
 
-Both `blue-text` and `pink-text` should belong to the same `h1` element.
+Tanto a classe `blue-text` quanto a classe `pink-text` devem pertencer ao mesmo elemento `h1`.
 
 ```js
 assert($('.pink-text').hasClass('blue-text'));
 ```
 
-Your `h1` element should be blue.
+O texto do elemento `h1` deve ser azul.
 
 ```js
 assert($('h1').css('color') === 'rgb(0, 0, 255)');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08756
-title: Prioritize One Style Over Another
+title: Priorize um estilo em detrimento de outro
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cZ8wnHv'
 forumTopicId: 18258
@@ -9,33 +9,33 @@ dashedName: prioritize-one-style-over-another
 
 # --description--
 
-Sometimes your HTML elements will receive multiple styles that conflict with one another.
+Às vezes, seus elementos HTML receberão vários estilos que conflitam entre si.
 
-For example, your `h1` element can't be both green and pink at the same time.
+Por exemplo, o elemento `h1` não pode ser verde e rosa ao mesmo tempo.
 
-Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class *override* the `body` element's `color: green;` CSS property?
+Vamos ver o que acontece quando criamos uma classe que torna o texto rosa e, em seguida, aplicamos ela a um elemento. Nossa classe *substituirá* a propriedade CSS `color: green;` do elemento `body`?
 
 # --instructions--
 
-Create a CSS class called `pink-text` that gives an element the color pink.
+Crie uma classe CSS chamada `pink-text` que fornece a cor rosa a um elemento.
 
-Give your `h1` element the class of `pink-text`.
+Dê ao elemento `h1` a classe `pink-text`.
 
 # --hints--
 
-Your `h1` element should have the class `pink-text`.
+O elemento `h1` deve ter a classe `pink-text`.
 
 ```js
 assert($('h1').hasClass('pink-text'));
 ```
 
-Your `<style>` should have a `pink-text` CSS class that changes the `color`.
+A tag `<style>` deve ter uma classe CSS de nome `pink-text` que altera a propriedade `color`.
 
 ```js
 assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
 ```
 
-Your `h1` element should be pink.
+O elemento `h1` deve ser rosa.
 
 ```js
 assert($('h1').css('color') === 'rgb(255, 192, 203)');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aede08807
-title: Set the Font Family of an Element
+title: Definir a família tipográfica de um elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c3bvpCg'
 forumTopicId: 18278
@@ -9,9 +9,9 @@ dashedName: set-the-font-family-of-an-element
 
 # --description--
 
-You can set which font an element should use, by using the `font-family` property.
+Você pode definir qual tipografia um elemento deve usar utilizando a propriedade `font-family`.
 
-For example, if you wanted to set your `h2` element's font to `sans-serif`, you would use the following CSS:
+Por exemplo, se você quiser definir a tipografia do elemento `h2` como `sans-serif`, deverá usar o seguinte CSS:
 
 ```css
 h2 {
@@ -21,11 +21,11 @@ h2 {
 
 # --instructions--
 
-Make all of your `p` elements use the `monospace` font.
+Faça com que todos os elementos `p` usem a fonte `monospace`.
 
 # --hints--
 
-Your `p` elements should use the font `monospace`.
+Os elementos `p` devem usar a tipografia `monospace`.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md

@@ -1,6 +1,6 @@
 ---
 id: bad87eee1348bd9aede07836
-title: Set the id of an Element
+title: Definir o id de um elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cN6MEc2'
 forumTopicId: 18279
@@ -9,13 +9,13 @@ dashedName: set-the-id-of-an-element
 
 # --description--
 
-In addition to classes, each HTML element can also have an `id` attribute.
+Além das classes, cada elemento HTML também pode ter um atributo `id`.
 
-There are several benefits to using `id` attributes: You can use an `id` to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.
+Existem vários benefícios em usar atributos `id`: você pode usar um `id` para estilizar um único elemento como também pode selecionar e modificar elementos específicos com JavaScript (você aprenderá mais sobre isso depois).
 
-`id` attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same `id` attribute.
+Os atributos `id` devem possuir valores únicos. Os navegadores não exigem que você faça isso, mas é uma prática recomendada e amplamente aceita. Portanto, não dê a mais de um elemento o mesmo atributo `id`.
 
-Here's an example of how you give your `h2` element the id of `cat-photo-app`:
+Aqui está um exemplo de como você dá a um elemento `h2` o id de `cat-photo-app`:
 
 ```html
 <h2 id="cat-photo-app">
@@ -23,11 +23,11 @@ Here's an example of how you give your `h2` element the id of `cat-photo-app`:
 
 # --instructions--
 
-Give your `form` element the id `cat-photo-form`.
+Dê ao elemento `form` o id `cat-photo-form`.
 
 # --hints--
 
-Your `form` element should have the id of `cat-photo-form`.
+O elemento `form` deve ter o atributo id com o valor `cat-photo-form`.
 
 ```js
 assert($('form').attr('id') === 'cat-photo-form');

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/size-your-images.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9acdf08812
-title: Size Your Images
+title: Alterar o tamanho de imagens
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cM9MmCP'
 forumTopicId: 18282
@@ -9,9 +9,9 @@ dashedName: size-your-images
 
 # --description--
 
-CSS has a property called `width` that controls an element's width. Just like with fonts, we'll use `px` (pixels) to specify the image's width.
+O CSS tem uma propriedade chamada `width` que controla a largura de um elemento. Assim como com as fontes, usaremos `px` (pixels) para especificar a largura da imagem.
 
-For example, if we wanted to create a CSS class called `larger-image` that gave HTML elements a width of 500 pixels, we'd use:
+Por exemplo, se quiséssemos criar uma classe CSS chamada `larger-image` que desse aos elementos HTML uma largura de 500 pixels, escreveríamos:
 
 ```html
 <style>
@@ -23,11 +23,11 @@ For example, if we wanted to create a CSS class called `larger-image` that gave
 
 # --instructions--
 
-Create a class called `smaller-image` and use it to resize the image so that it's only 100 pixels wide.
+Crie uma classe chamada `smaller-image` e use-a para redimensionar a imagem para que tenha apenas 100 pixels de largura.
 
 # --hints--
 
-Your `img` element should have the class `smaller-image`.
+O elemento `img` deve ter a classe `smaller-image`.
 
 ```js
 assert(
@@ -36,7 +36,7 @@ assert(
 );
 ```
 
-Your image should be 100 pixels wide.
+A imagem deve ter 100 pixels de largura.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08719
-title: Use Abbreviated Hex Code
+title: Usar códigos hexadecimais de modo abreviado
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cRkpKAm'
 forumTopicId: 18338
@@ -9,63 +9,63 @@ dashedName: use-abbreviated-hex-code
 
 # --description--
 
-Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.
+Muitas pessoas ficam confusas ao ter de escolher entre mais de 16 milhões de cores. É difícil lembrar de códigos hexadecimais. Felizmente, você pode "encurtar" alguns desses códigos.
 
-For example, red's hex code `#FF0000` can be shortened to `#F00`. This shortened form gives one digit for red, one digit for green, and one digit for blue.
+Por exemplo, o código hexadecimal para vermelho `#FF0000` pode ser reduzido para `#F00`. Esta forma abreviada fornece um dígito para vermelho, um dígito para verde e um dígito para azul.
 
-This reduces the total number of possible colors to around 4,000. But browsers will interpret `#FF0000` and `#F00` as exactly the same color.
+Isso reduz o número total de cores possíveis para cerca de 4.000. Mas os navegadores interpretarão tanto `#FF0000` quanto `#F00` como sendo exatamente a mesma cor.
 
 # --instructions--
 
-Go ahead, try using the abbreviated hex codes to color the correct elements.
+Tente usar os códigos hexadecimais abreviados para colorir os elementos corretos.
 
-<table class='table table-striped'><tbody><tr><th>Color</th><th>Short Hex Code</th></tr><tr><td>Cyan</td><td><code>#0FF</code></td></tr><tr><td>Green</td><td><code>#0F0</code></td></tr><tr><td>Red</td><td><code>#F00</code></td></tr><tr><td>Fuchsia</td><td><code>#F0F</code></td></tr></tbody></table>
+<table class='table table-striped'><tbody><tr><th>Cor</th><th>Código hexadecimal abreviado</th></tr><tr><td>Ciano</td><td><code>#0FF</code></td></tr><tr><td>Verde</td><td><code>#0F0</code></td></tr><tr><td>Vermelho</td><td><code>#F00</code></td></tr><tr><td>Fúcsia</td><td><code>#F0F</code></td></tr></tbody></table>
 
 # --hints--
 
-Your `h1` element with the text `I am red!` should be given the `color` red.
+O elemento `h1` com o texto `I am red!` deve receber a propriedade `color` com o valor hexadecimal que representa a cor vermelha.
 
 ```js
 assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
 ```
 
-The abbreviated `hex code` for the color red should be used instead of the hex code `#FF0000`.
+O código hexadecimal (`hex code`) abreviado que representa a cor vermelha deve ser usado em vez do código hexadecimal `#FF0000`.
 
 ```js
 assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
 ```
 
-Your `h1` element with the text `I am green!` should be given the `color` green.
+O elemento `h1` com o texto `I am green!` deve receber a propriedade `color` com o valor hexadecimal que representa a cor verde.
 
 ```js
 assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
 ```
 
-The abbreviated `hex code` for the color green should be used instead of the hex code `#00FF00`.
+O código hexadecimal (`hex code`) abreviado que representa a cor verde deve ser usado em vez do código hexadecimal `#00FF00`.
 
 ```js
 assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
 ```
 
-Your `h1` element with the text `I am cyan!` should be given the `color` cyan.
+O elemento `h1` com o texto `I am cyan!` deve receber a propriedade `color` com o valor hexadecimal que representa a cor ciano.
 
 ```js
 assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
 ```
 
-The abbreviated `hex code` for the color cyan should be used instead of the hex code `#00FFFF`.
+O código hexadecimal (`hex code`) abreviado que representa a cor ciano deve ser usado em vez do código hexadecimal `#00FFFF`.
 
 ```js
 assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
 ```
 
-Your `h1` element with the text `I am fuchsia!` should be given the `color` fuchsia.
+O elemento `h1` com o texto `I am fuchsia!` deve receber a propriedade `color` com o valor hexadecimal que representa a cor fúcsia.
 
 ```js
 assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
 ```
 
-The abbreviated `hex code` for the color fuchsia should be used instead of the hex code `#FF00FF`.
+O código hexadecimal (`hex code`) abreviado que representa a cor fúcsia deve ser usado em vez do código hexadecimal `#FF00FF`.
 
 ```js
 assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md

@@ -1,6 +1,6 @@
 ---
 id: bad87dee1348bd9aede07836
-title: Use an id Attribute to Style an Element
+title: Usar um atributo id para definir o estilo de um elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cakyZfL'
 forumTopicId: 18339
@@ -9,11 +9,11 @@ dashedName: use-an-id-attribute-to-style-an-element
 
 # --description--
 
-One cool thing about `id` attributes is that, like classes, you can style them using CSS.
+Uma coisa interessante sobre os atributos `id` é que, assim como as classes, você pode estilizá-los usando CSS.
 
-However, an `id` is not reusable and should only be applied to one element. An `id` also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the `id` will be applied.
+No entanto, um `id` não é reutilizável e deve ser aplicado apenas a um elemento. Um `id` também tem uma especificidade (importância) mais alta do que uma classe, portanto, se ambos forem aplicados ao mesmo elemento e tiverem estilos conflitantes, os estilos do `id` serão aplicados.
 
-Here's an example of how you can take your element with the `id` attribute of `cat-photo-element` and give it the background color of green. In your `style` element:
+Aqui está um exemplo de como você pode pegar seu elemento com o atributo `id` de `cat-photo-element` e dar a ele a cor de fundo verde. No elemento `style`:
 
 ```css
 #cat-photo-element {
@@ -21,27 +21,27 @@ Here's an example of how you can take your element with the `id` attribute of `c
 }
 ```
 
-Note that inside your `style` element, you always reference classes by putting a `.` in front of their names. You always reference ids by putting a `#` in front of their names.
+Observe que, dentro do elemento `style`, você sempre faz referência às classes colocando um `.` na frente de seus nomes. Você sempre faz referência aos ids colocando um `#` na frente de seus nomes.
 
 # --instructions--
 
-Try giving your form, which now has the `id` attribute of `cat-photo-form`, a green background.
+Tente dar ao seu formulário, que agora tem o atributo `id` de `cat-photo-form`, um fundo verde.
 
 # --hints--
 
-Your `form` element should have the id of `cat-photo-form`.
+O elemento `form` deve ter o id de `cat-photo-form`.
 
 ```js
 assert($('form').attr('id') === 'cat-photo-form');
 ```
 
-Your `form` element should have the `background-color` of green.
+O elemento `form` deve ter a propriedade `background-color` com o valor green (verde).
 
 ```js
 assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
 ```
 
-Your `form` element should have an `id` attribute.
+O elemento `form` deve ter um atributo `id`.
 
 ```js
 assert(
@@ -50,7 +50,7 @@ assert(
 );
 ```
 
-You should not give your `form` any `class` or `style` attributes.
+Você não deve fornecer ao `form` os atributos `class` ou `style`.
 
 ```js
 assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08805
-title: Use CSS Selectors to Style Elements
+title: Usar seletores CSS para definir o estilo de elementos
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cJKMBT2'
 forumTopicId: 18349
@@ -9,20 +9,20 @@ dashedName: use-css-selectors-to-style-elements
 
 # --description--
 
-With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.
+Com CSS, existem centenas de propriedades que você pode usar para alterar a aparência de um elemento na página.
 
-When you entered `<h2 style="color: red;">CatPhotoApp</h2>`, you were styling that individual `h2` element with inline CSS, which stands for Cascading Style Sheets.
+Quando você digitou `<h2 style="color: red;">CatPhotoApp</h2>`, você estava estilizando individualmente esse elemento `h2` de forma inline.
 
-That's one way to specify the style of an element, but there's a better way to apply CSS.
+Essa é uma maneira de especificar o estilo de um elemento, mas há uma maneira melhor de aplicar o CSS.
 
-At the top of your code, create a `style` block like this:
+Na parte superior do seu código, crie uma tag `style`:
 
 ```html
 <style>
 </style>
 ```
 
-Inside that style block, you can create a <dfn>CSS selector</dfn> for all `h2` elements. For example, if you wanted all `h2` elements to be red, you would add a style rule that looks like this:
+Dentro desse bloco de estilo, você pode criar um <dfn>seletor CSS</dfn> para todos os elementos de `h2`. Por exemplo, se quisesse que todos os elementos `h2` fossem vermelhos, você adicionaria uma regra de estilo semelhante a esta:
 
 ```html
 <style>
@@ -32,39 +32,39 @@ Inside that style block, you can create a <dfn>CSS selector</dfn> for all `h2` e
 </style>
 ```
 
-Note that it's important to have both opening and closing curly braces (`{` and `}`) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.
+Observe que é importante ter abertura e fechamento de chaves (`{` e `}`) em torno das regras de estilo de cada elemento. Você também precisa se certificar de que a definição de estilo do seu elemento está entre a abertura e o fechamento das tags. Finalmente, certifique-se de adicionar um ponto e vírgula ao final das regras de estilo de cada um dos seus elementos.
 
 # --instructions--
 
-Delete your `h2` element's style attribute, and instead create a CSS `style` block. Add the necessary CSS to turn all `h2` elements blue.
+Exclua o atributo de estilo `h2` e, em vez disso, crie uma tag `style`. Adicione o CSS necessário para transformar a cor de todos os elementos `h2` em azul.
 
 # --hints--
 
-The `style` attribute should be removed from your `h2` element.
+O atributo `style` deve ser removido do elemento `h2`.
 
 ```js
 assert(!$('h2').attr('style'));
 ```
 
-You should create a `style` element.
+Você deve criar um elemento `style`.
 
 ```js
 assert($('style') && $('style').length >= 1);
 ```
 
-Your `h2` element should be blue.
+O elemento `h2` deve ser azul.
 
 ```js
 assert($('h2').css('color') === 'rgb(0, 0, 255)');
 ```
 
-Your stylesheet `h2` declaration should be valid with a semicolon and closing brace.
+O código referente ao `h2` deve ter abertura e fechamento com chaves e cada propriedade deve terminar com ponto e vírgula.
 
 ```js
 assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
 ```
 
-All your `style` elements should be valid and have closing tags.
+Os elementos `style` devem ser válidos e ter tags de fechamento.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md

@@ -1,6 +1,6 @@
 ---
 id: bad87fee1348bd9aedf08726
-title: Use Hex Code for Specific Colors
+title: Usar códigos hexadecimais para selecionar cores específicas
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c8W9mHM'
 forumTopicId: 18350
@@ -9,11 +9,11 @@ dashedName: use-hex-code-for-specific-colors
 
 # --description--
 
-Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.
+Você sabia que existem outras maneiras de representar cores no CSS? Uma dessas formas é chamada de código hexadecimal ou, abreviadamente, hex code (em inglês).
 
-We usually use <dfn>decimals</dfn>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <dfn>Hexadecimals</dfn> (or <dfn>hex</dfn>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. You can find more information about [hexadecimal numbers here](https://en.wikipedia.org/wiki/Hexadecimal).
+Normalmente, usamos <dfn>decimais</dfn>, ou números de base 10, que usam os símbolos de 0 a 9 para cada dígito. <dfn>Hexadecimais</dfn> (ou <dfn>hex</dfn>) são números de base 16. Isso significa que eles usam dezesseis símbolos diferentes. Como os decimais, os símbolos de 0 a 9 representam os valores de zero a nove. Além deles, temos A, B, C, D, E e F, que representam os valores de dez a quinze. Ao todo, números de 0 a F podem representar um dígito em hexadecimal, com 16 valores possíveis. Você pode encontrar mais informações sobre [números hexadecimais aqui](https://pt.wikipedia.org/wiki/Sistema_de_numera%C3%A7%C3%A3o_hexadecimal).
 
-In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, `#000000` is black and is also the lowest possible value. You can find more information about the [RGB color system here](https://en.wikipedia.org/wiki/RGB_color_model).
+No CSS, podemos usar 6 dígitos hexadecimais para representar as cores, dois de cada para os componentes vermelho (R), verde (G) e azul (B). Por exemplo, `#000000` é preto e também é o valor mais baixo possível. Você pode encontrar mais informações sobre o [sistema de cores RGB aqui](https://pt.wikipedia.org/wiki/RGB).
 
 ```css
 body {
@@ -23,17 +23,17 @@ body {
 
 # --instructions--
 
-Replace the word `black` in our `body` element's background-color with its hex code representation, `#000000`.
+Substitua a palavra `black` na cor de fundo do elemento `body` por sua representação em código hexadecimal, `#000000`.
 
 # --hints--
 
-Your `body` element should have the background-color of black.
+O elemento `body` deve ter a cor de fundo preta.
 
 ```js
 assert($('body').css('background-color') === 'rgb(0, 0, 0)');
 ```
 
-The `hex code` for the color black should be used instead of the word `black`.
+O código hexadecimal (`hex code`) para a cor preta deve ser usado no lugar da palavra `black`.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md

@@ -1,6 +1,6 @@
 ---
 id: bad82fee1348bd9aedf08721
-title: Use RGB to Mix Colors
+title: Usar RGB para Misturar Cores
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cm24JU6'
 forumTopicId: 18368
@@ -9,23 +9,23 @@ dashedName: use-rgb-to-mix-colors
 
 # --description--
 
-Just like with hex code, you can mix colors in RGB by using combinations of different values.
+Assim como com o código hexadecimal, você pode misturar cores em RGB usando combinações de valores diferentes.
 
 # --instructions--
 
-Replace the hex codes in our `style` element with their correct RGB values.
+Substitua os códigos hexadecimais em nosso elemento `style` por seus valores RGB corretos.
 
-<table class='table table-striped'><tbody><tr><th>Color</th><th>RGB</th></tr><tr><td>Blue</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Red</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Orchid</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Sienna</td><td><code>rgb(160, 82, 45)</code></td></tr></tbody></table>
+<table class='table table-striped'><tbody><tr><th>Cor</th><th>RGB</th></tr><tr><td>Azul</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Vermelho</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Orquídea</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Siena</td><td><code>rgb(160, 82, 45)</code></td></tr></tbody></table>
 
 # --hints--
 
-Your `h1` element with the text `I am red!` should have the `color` red.
+O elemento `h1` com o texto `I am red!` deve ter a propriedade `color` com um valor red (vermelho).
 
 ```js
 assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
 ```
 
-You should use `rgb` for the color red.
+Você deve usar `rgb` para inserir a cor vermelha.
 
 ```js
 assert(
@@ -35,13 +35,13 @@ assert(
 );
 ```
 
-Your `h1` element with the text `I am orchid!` should have the `color` orchid.
+O elemento `h1` com o texto `I am orchid!` deve ter a propriedade `color` com um valor orchid (orquídea).
 
 ```js
 assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
 ```
 
-You should use `rgb` for the color orchid.
+Você deve usar `rgb` para inserir a cor orquídea.
 
 ```js
 assert(
@@ -51,13 +51,13 @@ assert(
 );
 ```
 
-Your `h1` element with the text `I am blue!` should have the `color` blue.
+O elemento `h1` com o texto `I am blue!` deve ter a propriedade `color` com um valor blue (azul).
 
 ```js
 assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
 ```
 
-You should use `rgb` for the color blue.
+Você deve usar `rgb` para inserir a cor azul.
 
 ```js
 assert(
@@ -67,13 +67,13 @@ assert(
 );
 ```
 
-Your `h1` element with the text `I am sienna!` should have the `color` sienna.
+O elemento `h1` com o texto `I am sienna!` deve ter a propriedade `color` com um valor sienna (siena).
 
 ```js
 assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
 ```
 
-You should use `rgb` for the color sienna.
+Você deve usar `rgb` para inserir a cor siena.
 
 ```js
 assert(