chore(i18n,curriculum): processed translations (#42751)

curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md

@@ -22,7 +22,7 @@ dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
 ```js
 assert(
   code.match(
-    /background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
+    /background(-image)?:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\2\s*\)/gi
   )
 );
 ```

curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md

@@ -22,7 +22,7 @@ dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
 ```js
 assert(
   code.match(
-    /background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
+    /background(-image)?:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\2\s*\)/gi
   )
 );
 ```

curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md

@@ -22,7 +22,7 @@ Tu elemento `body` debe tener una propiedad `background` asignado con `url()` qu
 ```js
 assert(
   code.match(
-    /background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
+    /background(-image)?:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\2\s*\)/gi
   )
 );
 ```

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

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d403616a
-title: Pass an Array as Props
+title: Pasa un arreglo como props
 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.
+El último desafío demostró cómo pasar información desde un componente padre a un componente hijo como `props` o propiedades. Este desafío busca demostrar cómo se pueden pasar arreglos como `props`. Para pasar un arreglo a un elemento JSX, debe ser tratado como JavaScript y envolverlo entre llaves.
 
 ```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.
+El componente hijo entonces tiene acceso a la propiedad del arreglo `colors`. Los métodos de arreglo, como `join()` pueden ser usados al acceder a la propiedad. `const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>` Esto unirá a todos elementos `colors` del arreglo en una cadena separada por comas y se convertirá en: `<p>green, blue, red</p>` Más tarde, aprenderemos sobre otros métodos comunes para representar arreglos de datos en 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.
+Están los componentes `List` y `ToDo` en el editor de código. Al renderizar cada `List` del componente `ToDo`, pasa una propiedad `tasks` asignada a un arreglo de tareas pendientes, por ejemplo `["walk dog", "workout"]`. Luego, accede a este arreglo de `tasks` en el componente `List`, mostrando su valor dentro del elemento `p`. Usa `join(", ")` para mostrar el arreglo `props.tasks` en el elemento `p` como una lista separada por comas. La lista de hoy debe tener al menos 2 tareas y la de mañana debe tener al menos 3 tareas.
 
 # --hints--
 
-The `ToDo` component should return a single outer `div`.
+El componente `ToDo` debe devolver un solo elemento `div`.
 
 ```js
 assert(
@@ -35,7 +35,7 @@ assert(
 );
 ```
 
-The third child of the `ToDo` component should be an instance of the `List` component.
+El tercer hijo del componente `ToDo` debe ser una instancia 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.
+El quinto hijo del componente `ToDo` debe ser una instancia 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.
+Ambas instancias del componente `List` deben tener una propiedad llamada `tasks` y `tasks` debe ser de tipo arreglo.
 
 ```js
 assert(
@@ -71,7 +71,7 @@ assert(
 );
 ```
 
-The first `List` component representing the tasks for today should have 2 or more items.
+El primer componente `List` que representa las tareas de hoy debe tener 2 o más elementos.
 
 ```js
 assert(
@@ -82,7 +82,7 @@ assert(
 );
 ```
 
-The second `List` component representing the tasks for tomorrow should have 3 or more items.
+El segundo componente `List` que representa las tareas para mañana debe tener 3 o más elementos.
 
 ```js
 assert(
@@ -93,7 +93,7 @@ assert(
 );
 ```
 
-The `List` component should render the value from the `tasks` prop in the `p` tag.
+El componente `List` debe renderizar el valor del prop `tasks` en la etiqueta `p`.
 
 ```js
 assert(

curriculum/challenges/espanol/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: Pasa el estado como "props" a componentes hijos
 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.
+Has visto varios ejemplos de como pasar props a elementos JSX hijos y a componentes React hijos en desafíos anteriores. Te preguntarás de dónde vienen esos props. Un patrón común es tener un componente con estado que contenga el `state` importante para tu aplicación, que luego renderiza los componentes hijos. Quieres que estos componentes tengan acceso a algunas partes de ese `state`, el cual se pasa como props.
 
-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.
+Por ejemplo, tal vez tengas un componente `App` que renderiza una `Navbar`, entre otros componentes. En tu `App`, tienes un `state` que contiene mucha información del usuario, pero la `Navbar` sólo necesita acceder al nombre de usuario para poder mostrarlo. Pasas esa parte del `state` al componente `Navbar` como 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.
+Este patrón ilustra algunos paradigmas importantes en React. El primero es *unidirectional data flow*. El componente de estado fluye en una sola dirección descendiendo en el árbol de componentes de tu aplicación, desde el componente padre hasta los componentes hijos. Los componentes hijos únicamente reciben los datos del componente de estado que ellos necesitan. La segunda es que las aplicaciones con estado pueden ser divididas en solo algunos, o tal vez un solo, componente con estado. El resto de tus componentes simplemente reciben el estado del padre como props, y renderizan la interfaz de usuario a partir de ese estado. Esto comienza a crear una separación donde la administración de estado es manejada en una parte del código y la renderización de la interfaz de usuario en otra. Este principio de separar la lógica de estado de la lógica de la interfaz de usuario es uno de los principios clave de React. Cuando se utiliza correctamente, hace que el diseño de aplicaciones complejas y de estado sea mucho más fácil de gestionar.
 
 # --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:`.
+El componente `MyApp` es de estado y renderiza un componente `Navbar` como un componente hijo. Pasa la propiedad `name` en su `state` al componente hijo, luego muestra el `name` en la etiqueta `h1` que es parte del método de renderizado de `Navbar`. `name` debe aparecer luego del texto `Hello, my name is:`.
 
 # --hints--
 
-The `MyApp` component should render with a `Navbar` component inside.
+El componente `MyApp` debe renderizare con un componente `Navbar` dentro.
 
 ```js
 assert(
@@ -34,7 +34,7 @@ assert(
 );
 ```
 
-The `Navbar` component should receive the `MyApp` state property `name` as props.
+El componente `Navbar` debe recibir la propiedad de estado `name` de `MyApp` como props.
 
 ```js
 async () => {
@@ -50,7 +50,7 @@ async () => {
 };
 ```
 
-The `h1` element in `Navbar` should render the `name` prop.
+El elemento `h1` en `Navbar` debe renderizar el prop `name`.
 
 ```js
 async () => {

curriculum/challenges/espanol/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: Renderiza un componente de clase al 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.
+Puede que recuerdes haber usado la API ReactDOM en un desafío anterior para renderizar elementos JSX al DOM. El proceso para renderizar los componentes de React será muy similar. Los últimos desafíos se centraron en los componentes y la composición, por lo que el renderizado se ha realizado tras bambalinas. Sin embargo, ninguna parte de código de React que escribas se procesará en el DOM sin realizar una llamada a la API de 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.
+Aquí va un recordatorio de la sintaxis: `ReactDOM.render(componentToRender, targetNode)`. El primer argumento es el componente de React que deseas renderizar. El segundo argumento es el nodo del DOM en el que deseas renderizar ese 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.
+Los componentes de React se pasan a `ReactDOM.render()` de manera un poco diferente a como se hace con los elementos JSX. Para los elementos JSX, pasas el nombre del elemento que deseas representar. Sin embargo, para los componentes de React, debes usar la misma sintaxis que si estuvieras renderizando un componente anidado, por ejemplo, `ReactDOM.render(<ComponentToRender />, targetNode)`. Se utiliza esta sintaxis tanto para los componentes de clase ES6 como para los componentes funcionales.
 
 # --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.
+Los componentes `Fruits` y `Vegetables` se definen por ti tras bambalinas. Renderiza ambos componentes como hijos del componente `TypesOfFood`, y luego renderiza `TypesOfFood` al DOM. Hay un `div` con `id='challenge-node'` disponible para que lo uses.
 
 # --hints--
 
-The `TypesOfFood` component should return a single `div` element.
+El componente `TypesOfFood` debe devolver un solo elemento `div`.
 
 ```js
 assert(
@@ -31,7 +31,7 @@ assert(
 );
 ```
 
-The `TypesOfFood` component should render the `Fruits` component after the `h1` element.
+El componente `TypesOfFood` debe renderizar el componente `Fruits` después del elemento `h1`.
 
 ```js
 assert(
@@ -42,7 +42,7 @@ assert(
 );
 ```
 
-The `TypesOfFood` component should render the `Vegetables` component after `Fruits`.
+El componente `TypesOfFood` debe renderizar el componente `Vegetables` después de `Fruits`.
 
 ```js
 assert(
@@ -53,7 +53,7 @@ assert(
 );
 ```
 
-The `TypesOfFood` component should render to the DOM within the `div` with the id `challenge-node`.
+El componente `TypesOfFood` debe renderizarse al DOM dentro del `div` con el id `challenge-node`.
 
 ```js
 assert(

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

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036188
-title: Render Conditionally from Props
+title: Renderiza condicionalmente a partir de "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`, `&&,` `null` 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.
+Hasta ahora, has visto cómo utilizar `if/else`, `&&`, y el operador ternario (`condition ? expressionIfTrue : expressionIfFalse`) para tomar decisiones condicionales sobre qué renderizar y cuándo. Sin embargo, queda un tema importante por discutir que te permite combinar cualquier o todos estos conceptos con otra poderosa característica de React: los props. El uso de props para renderizar condicionalmente el código es muy común entre los desarrolladores de React, es decir, utilizan el valor de una prop dada para automáticamente tomar decisiones sobre qué renderizar.
 
-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.
+En este desafío, configurarás un componente hijo para tomar decisiones de renderizado basadas en props. También usarás el operador ternario, pero puedes ver cómo varios de los otros conceptos que se cubrieron en los últimos desafíos podrían ser igual de útiles en este contexto.
 
 # --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.
+El editor de código tiene dos componentes que están parcialmente definidos para ti: un padre llamado `GameOfChance`, y un hijo llamado `Results`. Se utilizan para crear un juego sencillo en el que el usuario presiona un botón para ver si gana o pierde.
 
-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.
+Primero, necesitarás una expresión simple que devuelva al azar un valor diferente cada vez que se ejecute. Puedes usar `Math.random()`. Este método devuelve un valor entre `0` (inclusivo) y `1` (exclusivo) cada vez que se llama. Así que para las probabilidades de 50/50, usa `Math.random() >= .5` en tu expresión. Estadísticamente hablando, esta expresión devolverá `true` 50% de las veces, y `false` el otro 50%. En el método de renderizado, reemplaza `null` con la expresión anterior para completar la declaración de variables.
 
-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.
+Ahora tienes una expresión que puedes usar para tomar una decisión aleatoria en el código. A continuación, debes implementar esto. Renderiza el componente `Results` como hijo de `GameOfChance`, y pásalo a `expression` como un prop llamado `fiftyFifty`. En el componente `Results`, escribe una expresión ternaria para renderizar el elemento `h1` con el texto `You Win!` o `You Lose!` basado en el prop `fiftyFifty` que está siendo pasado desde `GameOfChance`. Finalmente, asegúrate de que el método `handleClick()` está contando correctamente cada turno para que el usuario sepa cuántas veces ha jugado. Esto también sirve para que el usuario sepa que el componente se ha actualizado en caso de que gane o pierda dos veces seguidas.
 
 # --hints--
 
-The `GameOfChance` component should exist and render to the page.
+El componente `GameOfChance` debe existir y renderizarse en la página.
 
 ```js
 assert.strictEqual(
@@ -31,7 +31,7 @@ assert.strictEqual(
 );
 ```
 
-`GameOfChance` should return a single `button` element.
+`GameOfChance` debe devolver un solo 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` debe devolver una sola instancia del componente `Results`, que tiene un prop llamado `fiftyFifty`.
 
 ```js
 assert(
@@ -53,7 +53,7 @@ assert(
 );
 ```
 
-`GameOfChance` state should be initialized with a property of `counter` set to a value of `1`.
+El estado de `GameOfChance` debe inicializarse con la propiedad `counter` establecida en valor `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`.
+Cuando el componente `GameOfChance` es renderizado por primera vez en el DOM, un elemento `p` debe ser devuelto con el texto interno `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.
+Cada vez que se hace clic en el botón, el contador debe incrementarse por un valor de 1, y un único elemento `p` debe ser renderizado al DOM que contiene el texto `Turn: N`, donde `N` es el valor del contador.
 
 ```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!`.
+Cuando el componente `GameOfChance` se monta por primera vez en el DOM y cada vez que se hace clic en el botón, un solo elemento `h1` debe ser devuelto, el cual renderiza aleatoriamente `You Win!` o `You Lose!`.
 
 ```js
 (() => {
@@ -240,8 +240,11 @@ class GameOfChance extends React.Component {
     this.handleClick = this.handleClick.bind(this);
   }
   handleClick() {
-    this.setState({
+    this.setState(prevState => {
-      counter: 0 // Change this line
+      // Complete the return statement:
+      return {
+        counter: prevState
+      }
     });
   }
   render() {
@@ -280,8 +283,10 @@ class GameOfChance extends React.Component {
     this.handleClick = this.handleClick.bind(this);
   }
   handleClick() {
-    this.setState({
+    this.setState(prevState => {
-      counter: this.state.counter + 1
+      return {
+        counter: prevState.counter + 1
+      }
     });
   }
   render() {

curriculum/challenges/espanol/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: Renderiza elementos HTML al 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.
+Hasta ahora, has aprendido que JSX es una herramienta conveniente para escribir HTML legible dentro de JavaScript. Con React, podemos renderizar este JSX directamente al DOM HTML usando la API de renderizado de React conocida como 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 ofrece un método simple para renderizar elementos React al DOM que se ve así: `ReactDOM.render(componentToRender, targetNode)`, donde el primer argumento es el elemento o componente React que deseas renderizar, y el segundo argumento es el nodo DOM al que se quiere renderizar el 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.
+Como era de esperarse, `ReactDOM.render()` debe llamarse después de las declaraciones de los elementos JSX, al igual que hay que declarar las variables antes de usarlas.
 
 # --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.
+El editor de código tiene un componente JSX simple. Usa el método `ReactDOM.render()` para renderizar este componente a la página. Puedes pasar elementos JSX definidos directamente como el primer argumento y utilizar `document.getElementById()` para seleccionar el nodo DOM al que renderizar. Hay un `div` con `id='challenge-node'` disponible para que lo uses. Asegúrate de no cambiar la constante `JSX`.
 
 # --hints--
 
-The constant `JSX` should return a `div` element.
+La constante `JSX` debe devolver un elemento `div`.
 
 ```js
 assert(JSX.type === 'div');
 ```
 
-The `div` should contain an `h1` tag as the first element.
+El `div` debe contener una etiqueta `h1` como primer elemento.
 
 ```js
 assert(JSX.props.children[0].type === 'h1');
 ```
 
-The `div` should contain a `p` tag as the second element.
+El elemento `div` debe contener una etiqueta `p` como segundo elemento.
 
 ```js
 assert(JSX.props.children[1].type === 'p');
 ```
 
-The provided JSX element should render to the DOM node with id `challenge-node`.
+El elemento JSX proporcionado debe renderizarse al nodo DOM con id `challenge-node`.
 
 ```js
 assert(

curriculum/challenges/espanol/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: Renderiza React en el servidor 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.
+Hasta ahora, has estado renderizando componentes React en el cliente. Normalmente, esto es lo que siempre harás. Sin embargo, hay algunos casos de uso donde tiene sentido renderizar un componente React en el servidor. Dado que React es una biblioteca de vistas de JavaScript y se puede ejecutar JavaScript en el servidor con Node, esto es posible. De hecho, React proporciona un método `renderToString()` que puedes usar para este propósito.
 
-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.
+Hay dos razones clave por las que el renderizado en el servidor puede ser usado en una aplicación del mundo real. Primero, sin hacer esto, tus aplicaciones de React consistirían en un archivo HTML relativamente vacío y un gran paquete de JavaScript cuando se carga inicialmente en el navegador. Esto puede no ser ideal para motores de búsqueda que intentan indexar el contenido de tus páginas para que la gente pueda encontrarte. Si renderizas el código HTML inicial en el servidor y lo envía al cliente, la carga de la página inicial contiene todo el código de la página que los motores de búsqueda pueden rastrear. Segundo, esto crea una experiencia de carga de página inicial más rápida porque el HTML renderizado es más pequeño que el código JavaScript de toda la aplicación. React aún podrá reconocer tu aplicación y administrarla después de la carga inicial.
 
 # --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.
+El método `renderToString()` se proporciona en `ReactDOMServer`, el cual está disponible aquí como un objeto global. El método toma un argumento que es un elemento React. Usa esto para renderizar `App` a una cadena.
 
 # --hints--
 
-The `App` component should render to a string using `ReactDOMServer.renderToString`.
+El componente `App` debe renderizar a una cadena usando `ReactDOMServer.renderToString`.
 
 ```js
 (getUserInput) =>

curriculum/challenges/italian/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md

@@ -22,7 +22,7 @@ Il tuo elemento `body` dovrebbe avere una proprietà `background` impostata su u
 ```js
 assert(
   code.match(
-    /background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
+    /background(-image)?:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\2\s*\)/gi
   )
 );
 ```

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781e367417b2b2512ac9
-title: Change an Element's Relative Position
+title: Mudar a posição relativa de um elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/czVmMtZ'
 forumTopicId: 301044
@@ -9,9 +9,9 @@ dashedName: change-an-elements-relative-position
 
 # --description--
 
-CSS treats each HTML element as its own box, which is usually referred to as the <dfn>CSS Box Model</dfn>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <dfn>normal flow</dfn> of a document, but CSS offers the position property to override it.
+O CSS trata cada elemento HTML como uma caixa. Esse conceito é geralmente referido como <dfn>CSS Box Model</dfn>. Elementos de nível de bloco são empilhados um em cima do outro (pense nas divs, parágrafos e títulos) enquanto os elementos de linha são inseridos um lado do outro (como imagens ou spans). Essa é a organização padrão dos elementos no CSS e é chamada de <dfn>normal flow</dfn> (fluxo normal). Mas o CSS também oferece uma propriedade para posicionar os elementos de forma manual.
 
-When the position of an element is set to `relative`, it allows you to specify how CSS should move it *relative* to its current position in the normal flow of the page. It pairs with the CSS offset properties of `left` or `right`, and `top` or `bottom`. These say how many pixels, percentages, or ems to move the item *away* from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
+Ao definir a posição de um elemento para `relative`, o CSS permite que você mova o elemento *relativamente* à sua posição atual. Ela trabalha em conjunto com as propriedades de deslocamento do CSS `left` (esquerda) ou `right` (direita) e `top` (superior) ou `bottom` (inferior). Estas propriedades definem quantos pixels, porcentagens ou ems deslocar o elemento *para longe* de onde ele inicialmente foi posicionado. O exemplo a seguir afasta o parágrafo em 10 pixels a partir da parte inferior:
 
 ```css
 p {
@@ -20,23 +20,23 @@ p {
 }
 ```
 
-Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.
+Alterar a posição de um elemento para relativo não o remove do fluxo normal - outros elementos em torno dele ainda se comportam como se o item estivesse em sua posição padrão.
 
-**Note:** Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
+**Observção:** o posicionamento dá a você muita flexibilidade e poder sobre o layout visual de uma página. É bom lembrar que a posição visual dos elementos não importa. O que importa é o código HTML final ser organizado e fazer sentido quando for lido de cima para baixo. É assim que os usuários com deficiências visuais (que dependem de dispositivos como leitores de tela) acessam seu conteúdo.
 
 # --instructions--
 
-Change the `position` of the `h2` to `relative`, and use a CSS offset to move it 15 pixels away from the `top` of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements.
+No elemento `h2`, altere a propriedade `position` para `relative` e use a propriedade `top` para mover o elemento a partir do topo. Observe que a posição dos elementos h1 e p não sofre nenhuma alteração.
 
 # --hints--
 
-The `h2` element should have a `position` property set to `relative`.
+O elemento `h2` deve ter a propriedade `position` com o valor de `relative`.
 
 ```js
 assert($('h2').css('position') == 'relative');
 ```
 
-Your code should use a CSS offset to relatively position the `h2` 15px away from the `top` of where it normally sits.
+Você deve utilizar a propriedade CSS de deslocamento `top` para afastar o elemento `h2` em 15 pixels.
 
 ```js
 assert($('h2').css('top') == '15px');

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a8367417b2b2512ae7
-title: Change Animation Timing with Keywords
+title: Mudar a velocidade da animação usando palavras-chave
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cJKvwCM'
 forumTopicId: 301045
@@ -9,17 +9,17 @@ dashedName: change-animation-timing-with-keywords
 
 # --description--
 
-In CSS animations, the `animation-timing-function` property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your `animation-duration`), the `animation-timing-function` says how the car accelerates and decelerates over the course of the drive.
+Nas animações CSS, a propriedade `animation-timing-function` controla a velocidade do movimento do elemento no decorrer da animação. Se a animação for um carro se movendo do ponto A para o ponto B em um determinado tempo (`animation-duration`), a propriedade `animation-timing-function` controla como o carro acelera e desacelera no decorrer da animação.
 
-There are a number of predefined keywords available for popular options. For example, the default value is `ease`, which starts slow, speeds up in the middle, and then slows down again in the end. Other options include `ease-out`, which is quick in the beginning then slows down, `ease-in`, which is slow in the beginning, then speeds up at the end, or `linear`, which applies a constant animation speed throughout.
+Existem algumas palavras-chave disponíveis que cobrem os casos de uso mais comuns. Por exemplo, o valor padrão é `ease`, que começa devagar, acelera no meio e depois diminui a velocidade novamente no final. Outras opções incluem `ease-out`, que é rápido no início e em seguida, diminui, `ease-in`, que é lento no início, e acelera no final ou `linear`, que aplica uma velocidade de animação constante do começo ao fim.
 
 # --instructions--
 
-For the elements with id of `ball1` and `ball2`, add an `animation-timing-function` property to each, and set `#ball1` to `linear`, and `#ball2` to `ease-out`. Notice the difference between how the elements move during the animation but end together, since they share the same `animation-duration` of 2 seconds.
+Nos elementos de id `ball1` e `ball2`, adicione a propriedade `animation-timing-function`. Por fim, defina para `#ball1` o valor `linear` e para `#ball2` o valor `ease-out`. Observe a diferença entre como os elementos se movem durante a animação, mas terminam juntos, já que eles compartilham o mesmo `animation-duration` de 2 segundos.
 
 # --hints--
 
-The value of the `animation-timing-function` property for the element with the id `ball1` should be `linear`.
+O elemento com id `ball1` deve possuir a propriedade `animation-timing-function` com o valor de `linear`.
 
 ```js
 const ball1Animation = __helpers.removeWhiteSpace(
@@ -28,7 +28,7 @@ const ball1Animation = __helpers.removeWhiteSpace(
 assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
 ```
 
-The value of the `animation-timing-function` property for the element with the id `ball2` should be `ease-out`.
+O elemento com id `ball2` deve possuir a propriedade `animation-timing-function` com o valor de `ease-out`.
 
 ```js
 const ball2Animation = __helpers.removeWhiteSpace(

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a3367417b2b2512acf
-title: Change the Position of Overlapping Elements with the z-index Property
+title: Alterar a ordem de aparição de elementos sobrepostos com a propriedade z-index
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cM94aHk'
 forumTopicId: 301046
@@ -9,15 +9,15 @@ dashedName: change-the-position-of-overlapping-elements-with-the-z-index-propert
 
 # --description--
 
-When elements are positioned to overlap (i.e. using `position: absolute | relative | fixed | sticky`), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the `z-index` property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the `z-index` property of an element move it higher in the stack than those with lower values.
+Quando os elementos são posicionados para se sobrepor (ou seja, usando `position: absolute | relative | fixed | sticky`), o elemento que vem por último no código HTML aparecerá, por padrão, por cima dos elementos anteriores. No entanto, a propriedade `z-index` pode modificar a ordem em que os elementos são empilhados (sobrepostos) uns sobre os outros. Essa propriedade deve receber um número inteiro (ou seja, um número do conjuntos dos inteiros e não decimal). Valores maiores para a propriedade `z-index` de um elemento movem-no para cima na pilha. Valores menores movem-no para baixo na pilha.
 
 # --instructions--
 
-Add a `z-index` property to the element with the class name of `first` (the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle).
+Na classe `first`, adicione a propriedade `z-index` com o valor de 2. Isso fará com que o retângulo vermelho cubra o retângulo azul.
 
 # --hints--
 
-The element with class `first` should have a `z-index` value of 2.
+O elemento com a classe `first` deve ter a propriedade `z-index` com o valor de 2.
 
 ```js
 assert($('.first').css('z-index') == '2');

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a5367417b2b2512ad6
-title: Create a Gradual CSS Linear Gradient
+title: Criar um gradiente linear com CSS
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cg4dpt9'
 forumTopicId: 301047
@@ -9,15 +9,15 @@ dashedName: create-a-gradual-css-linear-gradient
 
 # --description--
 
-Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the `background` property's `linear-gradient()` function. Here is the general syntax:
+A aplicação de cores em elementos HTML não se limita a apenas uma única cor. O CSS oferece a possibilidade de utilizar transições de cor, também conhecidas como gradientes, nos elementos HTML. Isso pode ser feito por meio da função `linear-gradient()` da propriedade `background`. Aqui está a sintaxe padrão:
 
 ```css
 background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
 ```
 
-The first argument specifies the direction from which color transition starts - it can be stated as a degree, where `90deg` makes a horizontal gradient (from left to right) and `45deg` makes a diagonal gradient (from bottom left to top right). The following arguments specify the order of colors used in the gradient.
+O primeiro argumento define a direção em que a transição da cor começa - pode ser declarado como um grau, onde `90deg` cria um gradiente horizontal (da esquerda para a direita) e `45deg` cria um gradiente diagonal (da esquerda inferior para a direita superior). Os argumentos seguintes especificam a ordem das cores utilizadas no gradiente.
 
-Example:
+Exemplo:
 
 ```css
 background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
@@ -25,11 +25,11 @@ background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
 
 # --instructions--
 
-Use a `linear-gradient()` for the `div` element's `background`, and set it from a direction of 35 degrees to change the color from `#CCFFFF` to `#FFCCCC`.
+No elemento `div`, use a função `linear-gradient()` na propriedade `background`. Defina a direção do gradiente para 35 graus e use as cores `#CCFFFF` e `#FFCCCC`.
 
 # --hints--
 
-The `div` element should have a `linear-gradient` `background` with the specified direction and colors.
+O elemento `div` deve ter uma cor gradiente (`linear-gradient`) de plano de fundo (`background`) com a direção e cores especificadas anteriormente.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a6367417b2b2512add
-title: Create a Graphic Using CSS
+title: Criar um desenho usando CSS
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cEDWPs6'
 forumTopicId: 301048
@@ -9,33 +9,33 @@ dashedName: create-a-graphic-using-css
 
 # --description--
 
-By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the `box-shadow` property that sets the shadow of an element, along with the `border-radius` property that controls the roundness of the element's corners.
+Ao manipular diferentes seletores e propriedades, você pode criar formas interessantes. Uma das mais fáceis de criar é a forma de lua crescente. Neste desafio, você precisa trabalhar com a propriedade `box-shadow` que define a sombra de um elemento, junto da propriedade `border-radius` que controla o arredondamento dos cantos do elemento.
 
-You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.
+Você criará um objeto redondo e transparente com uma sombra nítida ligeiramente deslocada para o lado - a sombra será a forma de lua.
 
-In order to create a round object, the `border-radius` property should be set to a value of 50%.
+Para criar um objeto redondo, a propriedade `border-radius` deve ter um valor de 50%.
 
-You may recall from an earlier challenge that the `box-shadow` property takes values for `offset-x`, `offset-y`, `blur-radius`, `spread-radius` and a color value in that order. The `blur-radius` and `spread-radius` values are optional.
+Você deve se lembrar de um desafio anterior que a propriedade `box-shadow` recebe valores para o eixo horizontal (`offset-x`), eixo vertical (`offset-y`), `blur-radius`, `spread-radius` e um valor de cor, nessa ordem. Os valores `blur-radius` e `spread-radius` são opcionais.
 
 # --instructions--
 
-Manipulate the square element in the editor to create the moon shape. First, change the `background-color` to `transparent`, then set the `border-radius` property to 50% to make the circular shape. Finally, change the `box-shadow` property to set the `offset-x` to 25px, the `offset-y` to 10px, `blur-radius` to 0, `spread-radius` to 0, and color to `blue`.
+Manipule o elemento quadrado no editor para criar a forma da lua. Primeiro, altere a propriedade `background-color` para `transparent` e, em seguida, defina a propriedade `border-radius` para 50% para fazer a forma circular. Finalmente, altere a propriedade `box-shadow` e defina o `offset-x` para 25px, o `offset-y` para 10px, `blur-radius` para 0, `spread-radius` para 0 e cor para azul (`blue`).
 
 # --hints--
 
-The value of the `background-color` property should be set to `transparent`.
+A propriedade `background-color` deve ter o valor de `transparent`.
 
 ```js
 assert(code.match(/background-color:\s*?transparent;/gi));
 ```
 
-The value of the `border-radius` property should be set to `50%`.
+A propriedade `border-radius` deve ter o valor de `50%`.
 
 ```js
 assert(code.match(/border-radius:\s*?50%;/gi));
 ```
 
-The value of the `box-shadow` property should be set to 25px for `offset-x`, 10px for `offset-y`, 0 for `blur-radius`, 0 for `spread-radius`, and finally `blue` for the color.
+A propriedade `box-shadow` deve receber 25px para o eixo horizontal (`offset-x`), 10px para o eixo vertical (`offset-y`), 0 para `blur-radius`, 0 para `spread-radius` e, finalmente, azul (`blue`) para a cor.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a6367417b2b2512ade
-title: Create a More Complex Shape Using CSS and HTML
+title: Criar formas complexas usando CSS e HTML
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cPpz4fr'
 forumTopicId: 301050
@@ -9,7 +9,7 @@ dashedName: create-a-more-complex-shape-using-css-and-html
 
 # --description--
 
-One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the `::before` and `::after` pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a `::before` pseudo-element is used to add a rectangle to an element with the class `heart`:
+Uma das formas mais populares do mundo é a forma de coração e, neste desafio, você criará um usando CSS puro. Mas primeiro, você precisa entender os pseudo-elementos `::before` e `::after`. Esses pseudo-elementos são usados para adicionar algo antes ou depois de um elemento selecionado. No exemplo a seguir, um pseudo-elemento `::before` é usado para adicionar um retângulo a um elemento com a classe `heart`:
 
 ```css
 .heart::before {
@@ -24,19 +24,19 @@ One of the most popular shapes in the world is the heart shape, and in this chal
 }
 ```
 
-For the `::before` and `::after` pseudo-elements to function properly, they must have a defined `content` property. This property is usually used to add things like a photo or text to the selected element. When the `::before` and `::after` pseudo-elements are used to make shapes, the `content` property is still required, but it's set to an empty string. In the above example, the element with the class of `heart` has a `::before` pseudo-element that produces a yellow rectangle with height and width of `50px` and `70px`, respectively. This rectangle has round corners due to its 25% `border-radius` and is positioned absolutely at `5px` from the left and `50px` above the top of the element.
+Para que os pseudo-elementos `::before` e `::after` funcionem corretamente, eles devem ter a propriedade `content` definida. Esta propriedade é geralmente usada para adicionar coisas como uma foto ou texto ao elemento selecionado. Quando os pseudo-elementos `::before` e `::after` são usados para criar formas, a propriedade `content` ainda é necessária, mas é definida com um valor vazio. No exemplo acima, o elemento com a classe `heart` tem um pseudo-elemento `::before` que produz um retângulo amarelo com altura e largura de `50px` e `70px`, respectivamente. Este retângulo tem cantos arredondados por conta da propriedade `border-radius` de 25% e está posicionado absolutamente `5px` a esquerda e `50px` acima do topo do elemento.
 
 # --instructions--
 
-Transform the element on the screen to a heart. In the `heart::after` selector, change the `background-color` to `pink` and the `border-radius` to 50%.
+Transforme o elemento em tela em um coração. No seletor `heart::after`, altere a propriedade `background-color` para `pink` e `border-radius` para 50%.
 
-Next, target the element with the class `heart` (just `heart`) and fill in the `transform` property. Use the `rotate()` function with -45 degrees.
+Em seguida, adicione a propriedade `transform` no elemento com a classe `heart` (apenas `heart`). Use a função `rotate()` com o valor de -45 graus.
 
-Finally, in the `heart::before` selector, set its `content` property to an empty string.
+Finalmente, no seletor `heart::before`, a propriedade `content` deve possuir um valor vazio.
 
 # --hints--
 
-The `background-color` property of the `heart::after` selector should be `pink`.
+A propriedade `background-color` do seletor `heart::after` deve ter o valor `pink`.
 
 ```js
 const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
@@ -45,19 +45,19 @@ assert(
 );
 ```
 
-The `border-radius` of the `heart::after` selector should be 50%.
+A propriedade `border-radius` do seletor `heart::after` deve ter um valor de 50%.
 
 ```js
 assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
 ```
 
-The `transform` property for the `heart` class should use a `rotate()` function set to -45 degrees.
+A propriedade `transform` da classe `heart` deve usar a função `rotate()` com o valor de -45 graus.
 
 ```js
 assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
 ```
 
-The `content` of the `heart::before` selector should be an empty string.
+A propriedade `content` do seletor `heart::before` deve ter um valor vazio.
 
 ```js
 assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a7367417b2b2512ae1
-title: Create Movement Using CSS Animation
+title: Criar movimentos usando animações CSS
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c7amZfW'
 forumTopicId: 301051
@@ -9,9 +9,9 @@ dashedName: create-movement-using-css-animation
 
 # --description--
 
-When elements have a specified `position`, such as `fixed` or `relative`, the CSS offset properties `right`, `left`, `top`, and `bottom` can be used in animation rules to create movement.
+Quando os elementos têm a propriedade `position` definida, como `fixed` ou `relative`, as propriedades de deslocamento CSS `right`, `left`, `top` e `bottom` podem ser usadas em regras de animação para criar movimento.
 
-As shown in the example below, you can push the item downwards then upwards by setting the `top` property of the `50%` keyframe to 50px, but having it set to 0px for the first (`0%`) and the last (`100%`) keyframe.
+Conforme mostrado no exemplo abaixo, você pode empurrar o item para baixo e para cima. No keyframe de `50%` a propriedade `top` recebeu 50px, empurrando o elemento para baixo. Já nos keyframes `0%` e `100%`, a propriedade recebeu 0px.
 
 ```css
 @keyframes rainbow {
@@ -32,23 +32,23 @@ As shown in the example below, you can push the item downwards then upwards by s
 
 # --instructions--
 
-Add a horizontal motion to the `div` animation. Using the `left` offset property, add to the `@keyframes` rule so rainbow starts at 0 pixels at `0%`, moves to 25 pixels at `50%`, and ends at -25 pixels at `100%`. Don't replace the `top` property in the editor - the animation should have both vertical and horizontal motion.
+Adicione um movimento horizontal na `div`. Usando a propriedade de deslocamento `left`, defina na regra `@keyframes` para que o arco-íris comece em 0 pixels em `0%` e se mova para 25 pixels em `50%` e termine em -25 pixels em `100%`. Não substitua a propriedade `top` no editor - a animação deve ter movimento vertical e horizontal.
 
 # --hints--
 
-The `@keyframes` rule for `0%` should use the `left` offset of 0px.
+A regra `@keyframes` em `0%` deve usar a propriedade `left` com o valor de 0px.
 
 ```js
 assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi));
 ```
 
-The `@keyframes` rule for `50%` should use the `left` offset of 25px.
+A regra `@keyframes` em `50%` deve usar a propriedade `left` com o valor de 25px.
 
 ```js
 assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi));
 ```
 
-The `@keyframes` rule for `100%` should use the `left` offset of -25px.
+A regra `@keyframes` em `100%` deve usar a propriedade `left` com o valor de -25px.
 
 ```js
 assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi));

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a5367417b2b2512ad8
-title: Create Texture by Adding a Subtle Pattern as a Background Image
+title: Criar textura adicionando um padrão sutil como uma imagem de fundo
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cQdwJC8'
 forumTopicId: 301052
@@ -9,20 +9,20 @@ dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
 
 # --description--
 
-One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The `background` property supports the `url()` function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.
+Uma forma de adicionar textura e interesse a um plano de fundo e fazê-lo se destacar mais é adicionar um padrão sutil. O segredo é o equilíbrio, pois você não quer que o fundo se destaque muito e acabe se distanciando do primeiro plano. A propriedade `background` suporta a função `url()` que aponta para uma imagem que será a textura ou padrão escolhido. O endereço do imagem é colocado entre aspas dentro dos parênteses.
 
 # --instructions--
 
-Using the url of `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png`, set the `background` of the whole page with the `body` selector.
+Usando o url `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png`, defina a propriedade `background` de toda a página usando o seletor `body`.
 
 # --hints--
 
-Your `body` element should have a `background` property set to a `url()` with the given link.
+O elemento `body` deve ter a propriedade `background` com a função `url()` apontando para o link forncido anteriormente.
 
 ```js
 assert(
   code.match(
-    /background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
+    /background(-image)?:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\2\s*\)/gi
   )
 );
 ```

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a7367417b2b2512ae2
-title: Create Visual Direction by Fading an Element from Left to Right
+title: Criar uma direção visual ao esmaecer um elemento da esquerda para a direita
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cGJqqAE'
 forumTopicId: 301054
@@ -9,17 +9,17 @@ dashedName: create-visual-direction-by-fading-an-element-from-left-to-right
 
 # --description--
 
-For this challenge, you'll change the `opacity` of an animated element so it gradually fades as it reaches the right side of the screen.
+Neste desafio, você irá alterar a propriedade `opacity` (opacidade) de um elemento animado para que ele desapareça gradualmente ao atingir o lado direito da tela.
 
-In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the `@keyframes` rule.
+Na animação exibida, o elemento redondo com o fundo gradiente se move para a direita na marca de 50% da animação na regra `@keyframes`.
 
 # --instructions--
 
-Target the element with the id of `ball` and add the `opacity` property set to 0.1 at `50%`, so the element fades as it moves to the right.
+Selecione o elemento com o id de `ball` e adicione a propriedade `opacity` com o valor de 0.1 em `50%`, para que o elemento desapareça conforme ele se move para a direita.
 
 # --hints--
 
-The `keyframes` rule for fade should set the `opacity` property to 0.1 at 50%.
+A regra `keyframes` para esmaecimento deve definir a propriedade `opacity` para 0.1 em 50%.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a3367417b2b2512ad1
-title: Learn about Complementary Colors
+title: Cores complementares
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c2MD3Tr'
 forumTopicId: 301056
@@ -9,33 +9,33 @@ dashedName: learn-about-complementary-colors
 
 # --description--
 
-Color theory and its impact on design is a deep topic and only the basics are covered in the following challenges. On a website, color can draw attention to content, evoke emotions, or create visual harmony. Using different combinations of colors can really change the look of a website, and a lot of thought can go into picking a color palette that works with your content.
+A teoria da cor e seu impacto no design é um tópico profundo e apenas o básico será abordado nos próximos desafios. Em um site, a cor pode chamar a atenção para o conteúdo, despertar emoções ou criar harmonia visual. Usar diferentes combinações de cores pode realmente mudar a aparência de um site, e pode ser necessário dedicar um bom tempo para escolher uma paleta de cores que combine com o conteúdo.
 
-The color wheel is a useful tool to visualize how colors relate to each other - it's a circle where similar hues are neighbors and different hues are farther apart. When two colors are opposite each other on the wheel, they are called complementary colors. They have the characteristic that if they are combined, they "cancel" each other out and create a gray color. However, when placed side-by-side, these colors appear more vibrant and produce a strong visual contrast.
+O círculo cromático é uma ferramenta útil para visualizar como as cores se relacionam umas com as outras - é um círculo onde cores semelhantes são vizinhas e cores diferentes estão mais afastadas. Quando duas cores estão em lados opostas na roda, elas são chamadas de cores complementares. Elas têm a característica de que, quando combinadas, se "cancelam" e criam uma cor cinza. No entanto, quando colocadas lado a lado, essas cores parecem mais vibrantes e produzem um forte contraste visual.
 
-Some examples of complementary colors with their hex codes are:
+Alguns exemplos de cores complementares, e seus códigos hexadecimais, são:
 
-<blockquote>red (#FF0000) and cyan (#00FFFF)<br>green (#00FF00) and magenta (#FF00FF)<br>blue (#0000FF) and yellow (#FFFF00)</blockquote>
+<blockquote>vermelho (#FF0000) e ciano (#00FFFF)<br>verde (#00FF00) e magenta (#FF00FF)<br>azul (#0000FF) e amarelo (#FFFF00)</blockquote>
 
-This is different than the outdated RYB color model that many of us were taught in school, which has different primary and complementary colors. Modern color theory uses the additive RGB model (like on a computer screen) and the subtractive CMY(K) model (like in printing). Read [here](https://en.wikipedia.org/wiki/Color_model) for more information on this complex subject.
+Isso é diferente do modelo de cores RYB desatualizado que muitos de nós aprendemos na escola, que tem cores primárias e complementares diferentes. A teoria das cores moderna usa o modelo RGB aditivo (comum para telas) e o modelo CMY (K) subtrativo (comum na impressão). Você pode clicar [aqui](https://en.wikipedia.org/wiki/Color_model) para obter mais informações sobre este assunto.
 
-There are many color picking tools available online that have an option to find the complement of a color.
+Na Internet, existem muitas ferramentas de seleção de cores que oferecem a opção de encontrar o complemento de uma cor.
 
-**Note:** Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.
+**Observação:** usar cores pode ser uma maneira poderosa de adicionar interesse visual a uma página. No entanto, a cor por si só não deve ser usada como a única forma de transmitir informações importantes. Tenha em mente que usuários com deficiência visual podem não entender esse conteúdo. Esse problema será abordado com mais detalhes nos desafios de acessibilidade aplicada.
 
 # --instructions--
 
-Change the `background-color` property of the `blue` and `yellow` classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background.
+Altere a propriedade `background-color` das classes `blue` (azul) e `yellow` (amarelo) para as cores respectivas. Observe como as cores parecem diferentes uma da outra quando comparadas com o fundo branco.
 
 # --hints--
 
-The `div` element with class `blue` should have a `background-color` of blue.
+O elemento `div` com a classe `blue` deve ter a propriedade `background-color` com o valor azul (blue).
 
 ```js
 assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
 ```
 
-The `div` element with class `yellow` should have a `background-color` of yellow.
+O elemento `div` com a classe `yellow` deve ter a propriedade `background-color` com o valor amarelo (yellow).
 
 ```js
 assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a4367417b2b2512ad2
-title: Learn about Tertiary Colors
+title: Cores terciárias
 challengeType: 0
 forumTopicId: 301057
 dashedName: learn-about-tertiary-colors
@@ -8,41 +8,41 @@ dashedName: learn-about-tertiary-colors
 
 # --description--
 
-Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory. Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B) and yellow (R + G). You saw these colors in the Complementary Colors challenge. These secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to that primary color on the color wheel. For example, magenta is made with red and blue, and is the complement to green.
+Monitores de computador e telas de dispositivos criam cores diferentes ao combinar quantidades de luz vermelha, verde e azul. Na teoria moderna das cores, isso é conhecido como o modelo de cores aditivas RGB. Vermelho - red (R), verde - green (G) e azul - blue (B) são chamados de cores primárias. A mistura de duas cores primárias cria cores secundárias: ciano (G + B), magenta (R + B) e amarelo (R + G). Você viu essas cores no desafio Cores complementares. A cor secundária formada da mistura de duas cores primárias acaba sendo o complemento a cor primária que não foi utilizada na criação dessa cor secundária. No círculo cromático, essa cor secundária é o oposto da cor primária que não foi utilizada em sua criação. Para visualizar melhor, procure por círculo cromático na Internet e olhe para a cor magenta. Ela é uma cor secundária criada a partir da mistura das cores vermelho e azul e é o oposto da cor verde.
 
-Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, within the RGB color model, red (primary) and yellow (secondary) make orange (tertiary). This adds six more colors to a simple color wheel for a total of twelve.
+As cores terciárias são o resultado da combinação de uma cor primária com uma cor secundária próxima. Por exemplo, dentro do modelo de cores RGB, a mistura de vermelho (primário) e amarelo (secundário) cria-se o laranja (terciário). Essa combinação adiciona mais seis cores a um círculo cromático simples, somando um total de doze cores.
 
-There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. This scheme starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but are more subtle than using two complementary colors.
+Existem vários métodos de seleção de cores diferentes que resultam em uma combinação harmoniosa de design. Um exemplo que usa cores terciárias é o chamado esquema de cores complementares divididas. Esse esquema começa com uma cor de base e a emparelha com as duas cores adjacentes (próximas) ao seu complemento. As três cores fornecem forte contraste visual, mas são mais sutis do que usar duas cores complementares.
 
-Here are three colors created using the split-complement scheme:
+Aqui estão três cores criadas usando o esquema de cores complementares divididas:
 
-<table class='table table-striped'><thead><tr><th>Color</th><th>Hex Code</th></tr></thead><thead></thead><tbody><tr><td>orange</td><td>#FF7F00</td></tr><tr><td>cyan</td><td>#00FFFF</td></tr><tr><td>raspberry</td><td>#FF007F</td></tr></tbody></table>
+<table class='table table-striped'><thead><tr><th>Cor</th><th>Código Hex</th></tr></thead><thead></thead><tbody><tr><td>laranja</td><td>#FF7F00</td></tr><tr><td>ciano</td><td>#00FFFF</td></tr><tr><td>framboesa</td><td>#FF007F</td></tr></tbody></table>
 
 # --instructions--
 
-Change the `background-color` property of the `orange`, `cyan`, and `raspberry` classes to their respective colors. Make sure to use the hex codes and not the color names.
+Altere a propriedade `background-color` das classes `orange` (laranja), `cyan` (ciano) e `raspberry` (framboesa) para suas respectivas cores. Certifique-se de usar os códigos hexadecimais e não os nomes das cores.
 
 # --hints--
 
-The `div` element with class `orange` should have a `background-color` of orange.
+O elemento `div` com a classe `orange` deve ter a propriedade `background-color` de cor laranja.
 
 ```js
 assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
 ```
 
-The `div` element with class `cyan` should have a `background-color` of cyan.
+O elemento `div` com a classe `cyan` deve ter a propriedade `background-color` de cor ciano.
 
 ```js
 assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
 ```
 
-The `div` element with class `raspberry` should have a `background-color` of raspberry.
+O elemento `div` com a classe `raspberry` deve ter a propriedade `background-color` de cor framboesa.
 
 ```js
 assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
 ```
 
-All `background-color` values for the color classes should be hex codes and not color names.
+Todos os valores de cada propriedade `background-color` devem ser códigos hexadecimais e não nomes de cores.
 
 ```js
 assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a9367417b2b2512ae8
-title: Learn How Bezier Curves Work
+title: Aprenda como as curvas de Bézier funcionam
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c9bDrs8'
 forumTopicId: 301058
@@ -9,25 +9,25 @@ dashedName: learn-how-bezier-curves-work
 
 # --description--
 
-The last challenge introduced the `animation-timing-function` property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.
+O último desafio introduziu a propriedade `animation-timing-function` e algumas palavras-chave que mudam a velocidade de uma animação ao longo de sua duração. O CSS oferece uma opção diferente das palavras-chave que fornece um controle ainda mais preciso sobre como a animação é reproduzida, através do uso de curvas de Bézier.
 
-In CSS animations, Bezier curves are used with the `cubic-bezier` function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation.
+Nas animações com CSS, as curvas de Bézier são usadas com a função `cubic-bezier`. O formato da curva representa a forma como a animação é reproduzida. A curva é criada com base em um sistema de coordenadas 1 por 1. O eixo X deste sistema de coordenadas é a duração da animação (pense nele como uma escala de tempo), e o eixo Y é a mudança na animação.
 
-The `cubic-bezier` function consists of four main points that sit on this 1 by 1 grid: `p0`, `p1`, `p2`, and `p3`. `p0` and `p3` are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the `p1` and `p2` "anchor" points in the form: `(x1, y1, x2, y2)`. Pulling it all together, here's an example of a Bezier curve in CSS code:
+A função `cubic-bezier` consiste em quatro pontos principais que ficam nesta grade de 1 por 1: `p0`, `p1`, `p2` e `p3`. `p0` e `p3` já estão definidos para você - eles são os pontos de início e de final que estão sempre localizados respectivamente na origem (0, 0) e (1, 1). Você define os valores de x e y para os outros dois pontos e onde você os coloca na grade dita o formato da curva para que a animação aconteça. Isto é feito no CSS declarando os valores de x e y dos pontos "âncora" `p1` e `p2`, no formato: `(x1, y1, x2, y2)`. Juntando tudo, aqui está um exemplo de uma curva de Bézier:
 
 ```css
 animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
 ```
 
-In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the `linear` keyword. In other words, it changes at a constant speed.
+No exemplo acima, os valores de x e y são equivalentes para cada ponto (x1 = 0,25 = y1 e x2 = 0. 5 = y2), que se você se lembrar da aula de geometria, resulta em uma linha que estende da origem ao ponto (1, 1). Esta animação é uma mudança linear de um elemento durante a reprodução de uma animação, e é o mesmo que usar a palavra-chave `linear`. Em outras palavras, a animação acontece a uma velocidade constante.
 
 # --instructions--
 
-For the element with the id of `ball1`, change the value of the `animation-timing-function` property from `linear` to its equivalent `cubic-bezier` function value. Use the point values given in the example above.
+Para o elemento com id de `ball1`, altere o valor da propriedade `animation-timing-function` de `linear` para seu valor equivalente na função `cubic-bezier`. Use os valores dos pontos dados no exemplo acima.
 
 # --hints--
 
-The value of the `animation-timing-function` property for the element with the id `ball1` should be the linear-equivalent `cubic-bezier` function.
+O valor da propriedade `animation-timing-function` para o elemento com id `ball1` deve ser a função `cubic-bezier` com pontos equivalentes a palavra-chave linear.
 
 ```js
 assert(
@@ -36,7 +36,7 @@ assert(
 );
 ```
 
-The value of the `animation-timing-function` property for the element with the id `ball2` should not change.
+O valor da propriedade `animation-timing-function` para o elemento com id `ball2` não deve ser mudado.
 
 ```js
 const ball2Animation = __helpers.removeWhiteSpace(

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a7367417b2b2512adf
-title: Learn How the CSS @keyframes and animation Properties Work
+title: Aprenda como funcionam as propriedades de animação e @keyframes do CSS
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cakprhv'
 forumTopicId: 301059
@@ -9,13 +9,13 @@ dashedName: learn-how-the-css-keyframes-and-animation-properties-work
 
 # --description--
 
-To animate an element, you need to know about the animation properties and the `@keyframes` rule. The animation properties control how the animation should behave and the `@keyframes` rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first:
+Para animar um elemento, você precisa aprender as propriedades de animação e a regra `@keyframes`. As propriedades de animação controlam como a animação deve se comportar e a regra `@keyframes` controla o que acontece durante essa animação. Existem oito propriedades de animação no total. Este desafio será simples e vai abranger os dois mais importantes:
 
-`animation-name` sets the name of the animation, which is later used by `@keyframes` to tell CSS which rules go with which animations.
+`animation-name` define o nome da animação, que mais tarde será usado por `@keyframes` para dizer ao CSS quais regras combinam com quais animações.
 
-`animation-duration` sets the length of time for the animation.
+`animation-duration` define a duração da animação.
 
-`@keyframes` is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific "frames" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of `@keyframes` and the animation properties:
+`@keyframes` é como especificar exatamente o que acontece na animação ao longo de sua duração. Isso é feito fornecendo propriedades CSS para "tempos" específicos durante a animação, com porcentagens que variam de 0% a 100%. Se você comparar isso a um filme, as propriedades CSS em 0% representariam como o elemento seria exibido na cena de abertura. As propriedades do CSS em 100% representariam como o elemento aparecia no final, antes do rolamento dos créditos. Por fim, o CSS faz a parte mágica de criar a transição do elemento ao longo da duração da animação. Aqui está um exemplo para ilustrar o uso de `@keyframes` e as propriedades de animação:
 
 ```css
 #anim {
@@ -33,45 +33,45 @@ To animate an element, you need to know about the animation properties and the `
 }
 ```
 
-For the element with the `anim` id, the code snippet above sets the `animation-name` to `colorful` and sets the `animation-duration` to 3 seconds. Then the `@keyframes` rule links to the animation properties with the name `colorful`. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.
+Para o elemento com o id `anim`, o trecho de código acima define o valor da propriedade `animation-name` como `colorful` e define o valor da propriedade `animation-duration` como 3 segundos. Em seguida, a regra `@keyframes` é vinculada às propriedades da animação com o nome `colorful`. Ela define a cor como azul no início da animação (0%), que mudará para amarelo no final da animação (100%). Você não está limitado apenas a transições de início e fim, você pode definir propriedades para qualquer valor entre 0% e 100%.
 
 # --instructions--
 
-Create an animation for the element with the id `rect`, by setting the `animation-name` to `rainbow` and the `animation-duration` to 4 seconds. Next, declare a `@keyframes` rule, and set the `background-color` at the beginning of the animation (`0%`) to blue, the middle of the animation (`50%`) to green, and the end of the animation (`100%`) to yellow.
+Crie uma animação para o elemento com o id `rect`, definindo o valor da propriedade `animation-name` como `rainbow` e o valor da propriedade `animation-duration` como 4 segundos. Em seguida, declare uma regra `@keyframes` e defina a propriedade `background-color` no início da animação (`0%`) para azul, o meio da animação (`50%`) para verde e o final da animação (`100%`) para amarelo.
 
 # --hints--
 
-The element with id of `rect` should have an `animation-name` property with a value of `rainbow`.
+O elemento com id `rect` deve ter a propriedade `animation-name` com o valor de `rainbow`.
 
 ```js
 assert($('#rect').css('animation-name') == 'rainbow');
 ```
 
-The element with id of `rect` should have an `animation-duration` property with a value of 4s.
+O elemento com o id `rect` deve ter a propriedade `animation-duration` com o valor de 4s.
 
 ```js
 assert($('#rect').css('animation-duration') == '4s');
 ```
 
-The `@keyframes` rule should use the `animation-name` of `rainbow`.
+O nome da regra `@keyframes` deve ser o mesmo da propriedade `animation-name`, `rainbow`.
 
 ```js
 assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
 ```
 
-The `@keyframes` rule for `rainbow` should use a `background-color` of `blue` at 0%.
+A regra `@keyframes` para `rainbow` deve usar a propriedade `background-color` com o valor `blue` em 0%.
 
 ```js
 assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
 ```
 
-The `@keyframes` rule for `rainbow` should use a `background-color` of `green` at 50%.
+A regra `@keyframes` para `rainbow` deve usar a propriedade `background-color` com o valor `green` em 50%.
 
 ```js
 assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
 ```
 
-The `@keyframes` rule for rainbow should use a `background-color` of `yellow` at 100%.
+A regra `@keyframes` para `rainbow` deve usar a propriedade `background-color` com o valor `yellow` em 100%.
 
 ```js
 assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781e367417b2b2512acb
-title: Lock an Element to its Parent with Absolute Positioning
+title: Prender um elemento ao seu elemento pai com posicionamento absolute
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cyLJ7c3'
 forumTopicId: 301060
@@ -9,29 +9,29 @@ dashedName: lock-an-element-to-its-parent-with-absolute-positioning
 
 # --description--
 
-The next option for the CSS `position` property is `absolute`, which locks the element in place relative to its parent container. Unlike the `relative` position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.
+A próxima opção da propriedade CSS `position` é `absolute`, que prende o elemento relativamente ao contêiner do seu elemento pai. Diferente da posição `relative`, esta posição remove o elemento do fluxo normal do documento, fazendo com que os itens ao seu redor o ignorem. As propriedades de deslocamento do CSS (top ou bottom e left ou right) são usadas para ajustar a posição.
 
-One nuance with absolute positioning is that it will be locked relative to its closest *positioned* ancestor. If you forget to add a position rule to the parent item, (this is typically done using `position: relative;`), the browser will keep looking up the chain and ultimately default to the `body` tag.
+Um detalhe do posicionamento absoluto é que a posição do elemento será vinculada relativamente ao elemento ancestral mais próximo que tenha definida uma propriedade position diferente de *static*. Se você esquecer de adicionar a propriedade position ao elemento pai, (isso é geralmente feito utilizando `position: relative;`), o navegador continuará buscando a propriedade position nos elementos anteriores até chegar ao elemento `body`.
 
 # --instructions--
 
-Lock the `#searchbar` element to the top-right of its `section` parent by declaring its `position` as `absolute`. Give it `top` and `right` offsets of 50 pixels each.
+Prenda o elemento `#searchbar` no canto superior direito do elemento `section` pai, declarando a propriedade `position` com o valor de `absolute`. Dê a ele as propriedade `top` e `right` de 50 pixels cada.
 
 # --hints--
 
-The `#searchbar` element should have a `position` set to `absolute`.
+O elemento `#searchbar` deve ter a proprieade `position` com o valor de `absolute`.
 
 ```js
 assert($('#searchbar').css('position') == 'absolute');
 ```
 
-Your code should use the `top` CSS offset of 50 pixels on the `#searchbar` element.
+Você deve usar a propriedade CSS `top` com o valor de 50 pixels no elemento `#searchbar`.
 
 ```js
 assert($('#searchbar').css('top') == '50px');
 ```
 
-Your code should use the `right` CSS offset of 50 pixels on the `#searchbar` element.
+Você deve usar a propriedade CSS `right` com o valor de 50 pixels no elemento `#searchbar`.
 
 ```js
 assert($('#searchbar').css('right') == '50px');

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781e367417b2b2512acc
-title: Lock an Element to the Browser Window with Fixed Positioning
+title: Prender um elemento na tela com posicionamento fixed
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c2MDNUR'
 forumTopicId: 301061
@@ -9,29 +9,29 @@ dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
 
 # --description--
 
-The next layout scheme that CSS offers is the `fixed` position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it is positioned, which may require some layout adjustments elsewhere.
+O próximo esquema de layout que o CSS oferece é a posição `fixed`, que é um tipo de posicionamento absoluto que prende um elemento em relação à janela do navegador. Semelhante ao posicionamento absoluto, ele é usado com as propriedades de deslocamento CSS e também remove o elemento do fluxo normal do documento. Outros itens não "percebem" onde ele está posicionado, o que pode exigir alguns ajustes em algum lugar do layout.
 
-One key difference between the `fixed` and `absolute` positions is that an element with a fixed position won't move when the user scrolls.
+Uma diferença chave entre os posicionamentos `fixed` e `absolute` é que o elemento com o posicionamento fixo não irá se mover quando o usuário rolar a página.
 
 # --instructions--
 
-The navigation bar in the code is labeled with an id of `navbar`. Change its `position` to `fixed`, and offset it 0 pixels from the `top` and 0 pixels from the `left`. After you have added the code, scroll the preview window to see how the navigation stays in place.
+A barra de navegação no código CSS está rotulada com o id de `navbar`. Modifique seu `position` para `fixed` e dê a ele às propriedades `top` e `left` 0 pixels. Depois de adicionar o código, role a janela de pré-visualização para ver como a barra navegação se mantém no lugar.
 
 # --hints--
 
-The `#navbar` element should have a `position` set to `fixed`.
+O elemento `#navbar` deve ter a propriedade `position` com o valor `fixed`.
 
 ```js
 assert($('#navbar').css('position') == 'fixed');
 ```
 
-Your code should use the `top` CSS offset of 0 pixels on the `#navbar` element.
+A propriedade `top` deve ter o valor de 0 pixels no elemento `#navbar`.
 
 ```js
 assert($('#navbar').css('top') == '0px');
 ```
 
-Your code should use the `left` CSS offset of 0 pixels on the `#navbar` element.
+A propriedade `left` deve ter o valor de 0 pixels no elemento `#navbar`.
 
 ```js
 assert($('#navbar').css('left') == '0px');

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a8367417b2b2512ae4
-title: Make a CSS Heartbeat using an Infinite Animation Count
+title: Criar uma animação infinita de um coração batendo com CSS
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cDZpDUr'
 forumTopicId: 301062
@@ -9,23 +9,23 @@ dashedName: make-a-css-heartbeat-using-an-infinite-animation-count
 
 # --description--
 
-Here's one more continuous animation example with the `animation-iteration-count` property that uses the heart you designed in a previous challenge.
+Neste desafio veremos mais um exemplo de animação infinita com a propriedade `animation-iteration-count` que usa o coração que você projetou em um desafio anterior.
 
-The one-second long heartbeat animation consists of two animated pieces. The `heart` elements (including the `:before` and `:after` pieces) are animated to change size using the `transform` property, and the background `div` is animated to change its color using the `background` property.
+A animação de batimento de um segundo de duração consiste em duas partes animadas. Os elementos `heart` (incluindo as partes `:before` e `:after`) são animados para alterar o tamanho usando a propriedade `transform`, e o fundo da `div` é animado para mudar sua cor usando a propriedade `background`.
 
 # --instructions--
 
-Keep the heart beating by adding the `animation-iteration-count` property for both the `back` class and the `heart` class and setting the value to `infinite`. The `heart:before` and `heart:after` selectors do not need any animation properties.
+Mantenha o coração batendo adicionando a propriedade `animation-iteration-count` com o valor `infinite` nas classes `back` e `heart`. Os seletores `heart:before` e `heart:after` não precisam de nenhuma propriedade de animação.
 
 # --hints--
 
-The `animation-iteration-count` property for the `heart` class should have a value of `infinite`.
+A propriedade `animation-iteration-count` da classe `heart` deve ter o valor de `infinite`.
 
 ```js
 assert($('.heart').css('animation-iteration-count') == 'infinite');
 ```
 
-The `animation-iteration-count` property for the `back` class should have a value of `infinite`.
+A propriedade `animation-iteration-count` da classe `back` deve ter o valor de `infinite`.
 
 ```js
 assert($('.back').css('animation-iteration-count') == 'infinite');

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a9367417b2b2512aea
-title: Make Motion More Natural Using a Bezier Curve
+title: Tornar o movimento da animação mais natural usando uma curva de Bézier
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c7akWUv'
 forumTopicId: 301063
@@ -9,25 +9,25 @@ dashedName: make-motion-more-natural-using-a-bezier-curve
 
 # --description--
 
-This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the `linear` and `ease-out` cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this.
+Este desafio anima um elemento para replicar o movimento de uma bola sendo quicada. Desafios anteriores cobriram as curvas cúbicas de Bezier `linear` e `ease-out`, no entanto, nenhuma descreve o movimento de quicar com precisão. Você precisa personalizar uma curva de Bézier para isso.
 
-The `animation-timing-function` automatically loops at every keyframe when the `animation-iteration-count` is set to infinite. Since there is a keyframe rule set in the middle of the animation duration (at `50%`), it results in two identical animation progressions at the upward and downward movement of the ball.
+A propriedade `animation-timing-function` faz automaticamente um loop em cada quadro-chave (keyframe) quando a propriedade `animation-iteration-count` é definida com o valor de infinite. Como há uma regra keyframe definida no meio da duração da animação (em `50%`), isso resulta em duas progressões de animação idênticas no movimento para cima e para baixo da bola.
 
-The following cubic Bezier curve simulates a juggling movement:
+A seguinte curva cúbica de Bézier simula um movimento de malabarismo:
 
 ```css
 cubic-bezier(0.3, 0.4, 0.5, 1.6);
 ```
 
-Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on a 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one. This results in a bouncing movement that is ideal for simulating the juggling ball.
+Observe que o valor de y2 é maior que 1. Embora a curva cúbica de Bézier seja mapeada em um sistema de coordenadas de 1 por 1 e só possa aceitar valores de x de 0 a 1, o valor de y pode ser definido com números maiores que um. Isso resulta em um movimento de salto ideal para simular a bola de malabarismo.
 
 # --instructions--
 
-Change value of the `animation-timing-function` of the element with the id of `green` to a `cubic-bezier` function with x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649.
+Altere o valor da propriedade `animation-timing-function` do elemento com o id de `green` para uma função `cubic-bezier` com os valores de x1, y1, x2, e y2 definidos respectivamente para 0,311, 0,441, 0,444, 1,649.
 
 # --hints--
 
-The value of the `animation-timing-function` property for the element with the id `green` should be a `cubic-bezier` function with x1, y1, x2, y2 values as specified.
+O valor da propriedade `animation-timing-function` para o elemento com o id `green` deve ser uma função `cubic-bezier` com os valores x1, y1, x2 e y2 conforme especificado.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md

@@ -1,6 +1,6 @@
 ---
 id: 58a7a6ebf9a6318348e2d5aa
-title: Modify Fill Mode of an Animation
+title: Modificar o modo de preenchimento de uma animação
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cVJDmcE'
 forumTopicId: 301064
@@ -9,9 +9,9 @@ dashedName: modify-fill-mode-of-an-animation
 
 # --description--
 
-That's great, but it doesn't work right yet. Notice how the animation resets after `500ms` has passed, causing the button to revert back to the original color. You want the button to stay highlighted.
+Está legal, mas ainda podemos melhorar. Observe como a animação é reiniciada após `500ms`, fazendo com que o botão volte à cor original. Nós queremos que o botão permaneça destacado.
 
-This can be done by setting the `animation-fill-mode` property to `forwards`. The `animation-fill-mode` specifies the style applied to an element when the animation has finished. You can set it like so:
+Isso pode ser feito definindo a propriedade `animation-fill-mode` com o valor `forwards`. O `animation-fill-mode` especifica o estilo que será aplicado a um elemento quando a animação terminar. Você pode configurá-la assim:
 
 ```css
 animation-fill-mode: forwards;
@@ -19,11 +19,11 @@ animation-fill-mode: forwards;
 
 # --instructions--
 
-Set the `animation-fill-mode` property of `button:hover` to `forwards` so the button stays highlighted when a user hovers over it.
+Defina a propriedade `animation-fill-mode` do seletor `button:hover` com o valor `forwards` para que o botão permaneça destacado quando o usuário tirar o mouse.
 
 # --hints--
 
-`button:hover` should have a `animation-fill-mode` property with a value of `forwards`.
+O seletor `button:hover` deve ter a propriedade `animation-fill-mode` com o valor `forwards`.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781e367417b2b2512aca
-title: Move a Relatively Positioned Element with CSS Offsets
+title: Mova um elemento posicionado relativamente com as propriedades de deslocamentos CSS
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c9bQEA4'
 forumTopicId: 301065
@@ -9,23 +9,23 @@ dashedName: move-a-relatively-positioned-element-with-css-offsets
 
 # --description--
 
-The CSS offsets of `top` or `bottom`, and `left` or `right` tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the `top` offset moved the `h2` downwards. Likewise, using a `left` offset moves an item to the right.
+As propriedades de deslocamento CSS `top` ou `bottom` e `left` ou `right` informam ao navegador o quanto deslocar um elemento em relação onde ele ficaria no fluxo normal do documento. Ao deslocar um elemento para um determinado ponto, você move o elemento para o lado oposto da propriedade (de deslocamento) usada. Como você viu no desafio anterior, usar a propriedade de deslocamento `top` moveu o elemento `h2` para baixo. Da mesma forma, usar a propriedade de deslocamento `left` move um item para a direita.
 
-<img src='https://cdn-media-1.freecodecamp.org/imgr/eWWi3gZ.gif' alt=''>
+<img src='https://cdn-media-1.freecodecamp.org/imgr/eWWi3gZ.gif' alt='' />
 
 # --instructions--
 
-Use CSS offsets to move the `h2` 15 pixels to the right and 10 pixels up.
+Use as propriedade de deslocamento CSS para mover o `h2` 15 pixels para a direita e 10 pixels para cima.
 
 # --hints--
 
-Your code should use a CSS offset to relatively position the `h2` 10px upwards. In other words, move it 10px away from the `bottom` of where it normally sits.
+Você deve usar um deslocamento CSS para posicionar o elemento `h2` 10px para cima. Em outras palavras, use a propriedade `bottom` para movê-lo de onde ele está.
 
 ```js
 assert($('h2').css('bottom') == '10px');
 ```
 
-Your code should use a CSS offset to relatively position the `h2` 15px towards the right. In other words, move it 15px away from the `left` of where it normally sits.
+Você deve usar um deslocamento CSS para posicionar o elemento `h2` 15px à direita. Em outras palavras, use a propriedade `left` para move-lo de onde ele está.
 
 ```js
 assert($('h2').css('left') == '15px');

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a3367417b2b2512ace
-title: Push Elements Left or Right with the float Property
+title: Empurre os elementos para a esquerda ou direita com a propriedade float
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c2MDqu2'
 forumTopicId: 301066
@@ -9,21 +9,21 @@ dashedName: push-elements-left-or-right-with-the-float-property
 
 # --description--
 
-The next positioning tool does not actually use `position`, but sets the `float` property of an element. Floating elements are removed from the normal flow of a document and pushed to either the `left` or `right` of their containing parent element. It's commonly used with the `width` property to specify how much horizontal space the floated element requires.
+A próxima ferramenta de posicionamento não usa a propriedade `position`, mas define a propriedade `float` de um elemento. Os elementos flutuantes são removidos do fluxo normal de um documento e colocados à esquerda (`left`) ou direita (`right`) do elemento pai que os contém. Essa propriedade é comumente usada com a propriedade `width` para especificar quanto espaço horizontal o elemento flutuante precisa.
 
 # --instructions--
 
-The given markup would work well as a two-column layout, with the `section` and `aside` elements next to each other. Give the `#left` item a `float` of `left` and the `#right` item a `float` of `right`.
+O código fornecido funcionaria bem como um layout de duas colunas, com os elementos `section` e `aside` um ao lado do outro. Dê ao elemento `#left` a propriedade `float` com o valor `left` e ao elemento `#right` a propriedade `float` com o valor `right`.
 
 # --hints--
 
-The element with id `left` should have a `float` value of `left`.
+O elemento com id `left` deve ter a propriedade `float` com o valor `left`.
 
 ```js
 assert($('#left').css('float') == 'left');
 ```
 
-The element with id `right` should have a `float` value of `right`.
+O elemento com id `right` deve ter a propriedade`float` com o valor `right`.
 
 ```js
 assert($('#right').css('float') == 'right');

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781c367417b2b2512ac2
-title: Set the font-size for Multiple Heading Elements
+title: Definir o tamanho da tipografia para vários elementos de cabeçalho
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cPpQNT3'
 forumTopicId: 301067
@@ -9,54 +9,52 @@ dashedName: set-the-font-size-for-multiple-heading-elements
 
 # --description--
 
-The `font-size` property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all `h1` through `h6` tags to balance the heading sizes.
+A propriedade `font-size` é usada para especificar o quão grande será o texto em um determinado elemento. Essa propriedade pode ser usada em múltiplos elementos para criar uma consistência visual dos textos na página. Nesse desafio, você vai definir os tamanhos das tipografias das tags `h1` até `h6` para balancear os tamanhos dos cabeçalhos.
 
-# --instructions--
+# --instructions-- <p>Na tag <code>style</code>, defina a propriedade <code>font-size</code> das tags:</p>
-
-  <p>In the <code>style</code> tags, set the <code>font-size</code> of the:</p>
 
   <ul>
-    <li><code>h1</code> tag to 68px.</li>
+    <li><code>h1</code> para 68px.</li>
-    <li><code>h2</code> tag to 52px.</li>
+    <li><code>h2</code> para 52px.</li>
-    <li><code>h3</code> tag to 40px.</li>
+    <li><code>h3</code> para 40px.</li>
-    <li><code>h4</code> tag to 32px.</li>
+    <li><code>h4</code> para 32px.</li>
-    <li><code>h5</code> tag to 21px.</li>
+    <li><code>h5</code> para 21px.</li>
-    <li><code>h6</code> tag to 14px.</li>
+    <li><code>h6</code> para 14px.</li>
   </ul>
 
 # --hints--
 
-Your code should set the `font-size` property for the `h1` tag to 68 pixels.
+A tag `h1` deve ter a propriedade `font-size` com o valor de 68 pixels.
 
 ```js
 assert($('h1').css('font-size') == '68px');
 ```
 
-Your code should set the `font-size` property for the `h2` tag to 52 pixels.
+A tag `h2` deve ter a propriedade `font-size` com o valor de 52 pixels.
 
 ```js
 assert($('h2').css('font-size') == '52px');
 ```
 
-Your code should set the `font-size` property for the `h3` tag to 40 pixels.
+A tag `h3` deve ter a propriedade `font-size` com o valor de 40 pixels.
 
 ```js
 assert($('h3').css('font-size') == '40px');
 ```
 
-Your code should set the `font-size` property for the `h4` tag to 32 pixels.
+A tag `h4` deve ter a propriedade `font-size` com o valor de 32 pixels.
 
 ```js
 assert($('h4').css('font-size') == '32px');
 ```
 
-Your code should set the `font-size` property for the `h5` tag to 21 pixels.
+A tag `h5` deve ter a propriedade `font-size` com o valor de 21 pixels.
 
 ```js
 assert($('h5').css('font-size') == '21px');
 ```
 
-Your code should set the `font-size` property for the `h6` tag to 14 pixels.
+A tag `h6` deve ter a propriedade `font-size` com o valor de 14 pixels.
 
 ```js
 const regex = /h6\s*\{\s*font-size\s*:\s*14px\s*(;\s*\}|\})/i;

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781c367417b2b2512ac4
-title: Set the font-size of Paragraph Text
+title: Definir o tamanho da tipografia do texto de um parágrafo
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cVJ36Cr'
 forumTopicId: 301068
@@ -9,15 +9,15 @@ dashedName: set-the-font-size-of-paragraph-text
 
 # --description--
 
-The `font-size` property in CSS is not limited to headings, it can be applied to any element containing text.
+A propriedade `font-size` no CSS não se limita a cabeçalhos, ela pode ser aplicada a qualquer elemento que contenha texto.
 
 # --instructions--
 
-Change the value of the `font-size` property for the paragraph to 16px to make it more visible.
+Altere o valor da propriedade `font-size` do parágrafo para 16px para torná-lo mais visível.
 
 # --hints--
 
-Your `p` tag should have a `font-size` of 16 pixels.
+A tag `p` deve ter a propriedade `font-size` com o valor de 16 pixels.
 
 ```js
 assert($('p').css('font-size') == '16px');

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781c367417b2b2512ac3
-title: Set the font-weight for Multiple Heading Elements
+title: Defina a espessura da tipografia para vários elementos de cabeçalho
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/crVWRHq'
 forumTopicId: 301069
@@ -9,47 +9,47 @@ dashedName: set-the-font-weight-for-multiple-heading-elements
 
 # --description--
 
-You set the `font-size` of each heading tag in the last challenge, here you'll adjust the `font-weight`.
+Você definiu a propriedade `font-size` de cada tag de título no último desafio. neste desafio você irá usar a propriedade `font-weight`.
 
-The `font-weight` property sets how thick or thin characters are in a section of text.
+A propriedade `font-weight` define a grossura ou finura dos caracteres de um texto.
 
 # --instructions--
 
-<ul><li>Set the <code>font-weight</code> of the <code>h1</code> tag to 800.</li><li>Set the <code>font-weight</code> of the <code>h2</code> tag to 600.</li><li>Set the <code>font-weight</code> of the <code>h3</code> tag to 500.</li><li>Set the <code>font-weight</code> of the <code>h4</code> tag to 400.</li><li>Set the <code>font-weight</code> of the <code>h5</code> tag to 300.</li><li>Set the <code>font-weight</code> of the <code>h6</code> tag to 200.</li></ul>
+<ul><li>No seletor <code>h1</code>, defina a propriedade <code>font-weight</code> com o valor de 800.</li><li>No seletor <code>h2</code>, defina a propriedade <code>font-weight</code> com o valor de 600.</li><li>No seletor <code>h3</code>, defina a propriedade <code>font-weight</code> com o valor de 500.</li><li>No seletor <code>h4</code>, defina a propriedade <code>font-weight</code> com o valor de 400.</li><li>No seletor <code>h5</code>, defina a propriedade <code>font-weight</code> com o valor de 300.</li><li>No seletor <code>h6</code>, defina a propriedade <code>font-weight</code> com o valor de 200.</li></ul>
 
 # --hints--
 
-Your code should set the `font-weight` property for the `h1` tag to 800.
+No seletor `h1`, você deve definir a propriedade `font-weight` com o valor de 800.
 
 ```js
 assert($('h1').css('font-weight') == '800');
 ```
 
-Your code should set the `font-weight` property for the `h2` tag to 600.
+No seletor `h2`, você deve definir a propriedade `font-weight` com o valor de 600.
 
 ```js
 assert($('h2').css('font-weight') == '600');
 ```
 
-Your code should set the `font-weight` property for the `h3` tag to 500.
+No seletor `h3`, você deve definir a propriedade `font-weight` com o valor de 500.
 
 ```js
 assert($('h3').css('font-weight') == '500');
 ```
 
-Your code should set the `font-weight` property for the `h4` tag to 400.
+No seletor `h4`, você deve definir a propriedade `font-weight` com o valor de 400.
 
 ```js
 assert($('h4').css('font-weight') == '400');
 ```
 
-Your code should set the `font-weight` property for the `h5` tag to 300.
+No seletor `h5`, você deve definir a propriedade `font-weight` com o valor de 300.
 
 ```js
 assert($('h5').css('font-weight') == '300');
 ```
 
-Your code should set the `font-weight` property for the `h6` tag to 200.
+No seletor `h6`, você deve definir a propriedade `font-weight` com o valor de 200.
 
 ```js
 assert($('h6').css('font-weight') == '200');

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781d367417b2b2512ac5
-title: Set the line-height of Paragraphs
+title: Definir a altura da linha dos parágrafos
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/crVWdcv'
 forumTopicId: 301070
@@ -9,15 +9,15 @@ dashedName: set-the-line-height-of-paragraphs
 
 # --description--
 
-CSS offers the `line-height` property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.
+O CSS oferece a propriedade `line-height` para alterar a altura de cada linha em um bloco de texto. Ela altera a quantidade de espaço vertical que cada linha de texto possui.
 
 # --instructions--
 
-Add a `line-height` property to the `p` tag and set it to 25px.
+Adicione a propriedade `line-height` com o valor de 25px à tag `p`.
 
 # --hints--
 
-Your code should set the `line-height` of the `p` tag to 25 pixels.
+No seletor `p`, você deve definir a propriedade `line-height` com o valor de 25 pixels.
 
 ```js
 assert($('p').css('line-height') == '25px');

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a9367417b2b2512ae9
-title: Use a Bezier Curve to Move a Graphic
+title: Use uma curva de Bézier para mover um elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c6bnRCK'
 forumTopicId: 301071
@@ -9,23 +9,23 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
 
 # --description--
 
-A previous challenge discussed the `ease-out` keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the `ease-out` keyword (for the blue element) and `linear` keyword (for the red element) is demonstrated. Similar animation progressions to the `ease-out` keyword can be achieved by using a custom cubic Bezier curve function.
+Em um desafio anterior, tratamos da palavra-chave `ease-out`, que descreve uma mudança de animação que começa acelerando e desacelera ao final da animação. À direita, a diferença entre a palavra-chave `ease-out` (para o elemento azul) e a palavra-chave `linear` (para o elemento vermelho) é demonstrada. Progressões de animação semelhantes à palavra-chave `ease-out` podem ser alcançadas usando a função de curva de Bézier cúbica.
 
-In general, changing the `p1` and `p2` anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style:
+Em geral, alterar os pontos de ancoragem `p1` (ponto 1) e `p2` (ponto 2) leva à criação de diferentes curvas de Bézier, que controlam como a animação progride ao longo do tempo. Aqui está um exemplo de curva de Bézier usando valores para imitar o estilo ease-out:
 
 ```css
 animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
 ```
 
-Remember that all `cubic-bezier` functions start with `p0` at (0, 0) and end with `p3` at (1, 1). In this example, the curve moves faster through the Y-axis (starts at 0, goes to `p1` y value of 0, then goes to `p2` y value of 1) than it moves through the X-axis (0 to start, then 0 for `p1`, up to 0.58 for `p2`). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.
+Lembre-se de que todas as funções `cubic-bezier` começam com `p0` em (0, 0) e terminam com `p3` em (1, 1). Neste exemplo, a curva se move mais rápido através do eixo Y (começa em 0, vai para o valor de y 0 de `p1`, então vai para o valor de y 1 de `p2`). Então, ela se move através do eixo X (0 para o início, então 0 para `p1`, até 0.58 para `p2`). Como resultado, a mudança no elemento animado progride mais rápido do que o tempo da animação para aquele segmento. Perto do final da curva, a relação entre a mudança nos valores x e y se inverte - o valor de y se move de 1 para 1 (sem mudança) e o valor de x se move de 0.58 para 1, fazendo com que o progresso das mudanças na animação seja mais lento em comparação com a duração da animação.
 
 # --instructions--
 
-To see the effect of this Bezier curve in action, change the `animation-timing-function` of the element with id of `red` to a `cubic-bezier` function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly.
+Para ver o efeito desta curva de Bézier em ação, altere a `animation-timing-function` do elemento com id de `red` para um `cubic-bezier` função com os valores x1, y1, x2, y2 definidos respectivamente para 0, 0, 0.58, 1. Isso fará com que os dois elementos progridam na animação de maneira semelhante.
 
 # --hints--
 
-The value of the `animation-timing-function` property of the element with the id `red` should be a `cubic-bezier` function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .
+O valor da propriedade `animation-timing-function` do elemento com o id `red` deve ser uma função `cubic-bezier` com os valores x1, y1, x2, y2 definidos respectivamente como 0, 0, 0.58, 1.
 
 ```js
 assert(
@@ -33,13 +33,13 @@ assert(
 );
 ```
 
-The element with the id `red` should no longer have the `animation-timing-function` property of `linear`.
+O elemento com o id `red` não deve mais ter a propriedade `animation-timing-function` de valor `linear`.
 
 ```js
 assert($('#red').css('animation-timing-function') !== 'linear');
 ```
 
-The value of the `animation-timing-function` property for the element with the id `blue` should not change.
+O valor da propriedade `animation-timing-function` para o elemento com o id `blue` não deve ser alterado.
 
 ```js
 const blueBallAnimation = __helpers.removeWhiteSpace(

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a5367417b2b2512ad7
-title: Use a CSS Linear Gradient to Create a Striped Element
+title: Use um gradiente linear com CSS para criar um elemento listrado
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c6bmQh2'
 forumTopicId: 301072
@@ -9,57 +9,57 @@ dashedName: use-a-css-linear-gradient-to-create-a-striped-element
 
 # --description--
 
-The `repeating-linear-gradient()` function is very similar to `linear-gradient()` with the major difference that it repeats the specified gradient pattern. `repeating-linear-gradient()` accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge.
+A função `repeating-linear-gradient()` é muito semelhante a `linear-gradient()`, com a principal diferença de que repete o padrão de gradiente especificado. `repeating-linear-gradient()` aceita uma variedade de valores, mas, para simplificar, você vai trabalhar com um valor de ângulo e valores de interrupção de cor neste desafio.
 
-The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.
+O valor do ângulo é a direção do gradiente. As interrupções de cor são como valores de largura que marcam onde ocorre uma transição e são fornecidas com uma porcentagem ou um número de pixels.
 
-In the example demonstrated in the code editor, the gradient starts with the color `yellow` at 0 pixels which blends into the second color `blue` at 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color `green`, which itself blends into the fourth color value `red` as that is 80 pixels away from the beginning of the gradient.
+No exemplo demonstrado no editor de código, o gradiente começa com a cor amarela (`yellow`) em 0 pixels, que se mistura com a segunda cor (`blue`) a 40 pixels de distância do início. Como a próxima interrupção de cor também está em 40 pixels, o gradiente muda imediatamente para a terceira cor (`green`), que se mistura com o valor da quarta cor (`red`), pois está a 80 pixels de distância desde o início do gradiente.
 
-For this example, it helps to think about the color stops as pairs where every two colors blend together.
+Para este exemplo, ajuda pensar nas interrupções de cor como pares onde cada duas cores se misturam.
 
 ```css
 0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
 ```
 
-If every two color stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes.
+Se cada dois valores finais de cores forem da mesma cor, a mistura não será perceptível porque está entre a mesma cor, seguida por uma transição brusca para a próxima cor. Assim, ao final, você terá listras.
 
 # --instructions--
 
-Make stripes by changing the `repeating-linear-gradient()` to use a gradient angle of `45deg`, then set the first two color stops to `yellow`, and finally the second two color stops to `black`.
+Faça listras alterando o `repeating-linear-gradient()` para usar um ângulo de gradiente de `45deg` e, em seguida, defina as duas primeiras interrupções de cor para `yellow` e, finalmente, as duas interrupções de cor posteriores como `black`.
 
 # --hints--
 
-The angle of the `repeating-linear-gradient()` should be 45deg.
+O ângulo do `repeating-linear-gradient()` deve ser de 45 graus.
 
 ```js
 assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
 ```
 
-The angle of the `repeating-linear-gradient()` should no longer be 90deg
+O ângulo do `repeating-linear-gradient()` não deve mais ser de 90 graus.
 
 ```js
 assert(!code.match(/90deg/gi));
 ```
 
-The color stop at 0 pixels should be `yellow`.
+A interrupção de cor em 0 pixels deve ser `yellow`.
 
 ```js
 assert(code.match(/yellow\s+?0(px)?/gi));
 ```
 
-One color stop at 40 pixels should be `yellow`.
+A interrupção de cor em 40 pixels deve ser `yellow`.
 
 ```js
 assert(code.match(/yellow\s+?40px/gi));
 ```
 
-The second color stop at 40 pixels should be `black`.
+A segunda interrupção de cor em 40 pixels deve ser `black`.
 
 ```js
 assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
 ```
 
-The last color stop at 80 pixels should be `black`.
+A última interrupção de cor em 80 pixels deve ser `black`.
 
 ```js
 assert(code.match(/black\s+?80px/gi));

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a7367417b2b2512ae0
-title: Use CSS Animation to Change the Hover State of a Button
+title: Use animações CSS para alterar o estado de foco de um botão
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cg4vZAa'
 forumTopicId: 301073
@@ -9,9 +9,9 @@ dashedName: use-css-animation-to-change-the-hover-state-of-a-button
 
 # --description--
 
-You can use CSS `@keyframes` to change the color of a button in its hover state.
+Você pode usar a regra CSS `@keyframes` para alterar a cor de um botão em seu estado de foco.
 
-Here's an example of changing the width of an image on hover:
+Aqui está um exemplo de alteração da largura de uma imagem ao passar o cursor do mouse por cima:
 
 ```html
 <style>
@@ -32,19 +32,19 @@ Here's an example of changing the width of an image on hover:
 
 # --instructions--
 
-Note that `ms` stands for milliseconds, where 1000ms is equal to 1s.
+Observe que `ms` representa milissegundos, onde 1000ms é igual a 1s.
 
-Use CSS `@keyframes` to change the `background-color` of the `button` element so it becomes `#4791d0` when a user hovers over it. The `@keyframes` rule should only have an entry for `100%`.
+Use a regra CSS `@keyframes` para alterar a propriedade `background-color` do elemento `button` para que se torne `#4791d0` quando um usuário passar o cursor do mouse sobre ele. A regra `@keyframes` deve ter apenas um frame de `100%`.
 
 # --hints--
 
-The @keyframes rule should use the `animation-name` background-color.
+A regra @keyframes deve usar como nome o valor da propriedade `animation-name`, que é background-color.
 
 ```js
 assert(code.match(/@keyframes\s+?background-color\s*?{/g));
 ```
 
-There should be one rule under `@keyframes` that changes the `background-color` to `#4791d0` at 100%.
+Deve haver uma regra no `@keyframes` que altera a propriedade `background-color` para `#4791d0` quando a animação estiver em 100%.
 
 ```js
 assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a6367417b2b2512adb
-title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
+title: Use a propriedade skewX de transformação do CSS para distorcer um elemento ao longo do eixo X
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cyLP8Sr'
 forumTopicId: 301074
@@ -9,9 +9,9 @@ dashedName: use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-
 
 # --description--
 
-The next function of the `transform` property is `skewX()`, which skews the selected element along its X (horizontal) axis by a given degree.
+A próxima função da propriedade `transform` é `skewX()`, que inclina o elemento selecionado ao longo de seu eixo X (horizontal) em um determinado grau.
 
-The following code skews the paragraph element by -32 degrees along the X-axis.
+O código a seguir inclina o elemento de parágrafo em -32 graus ao longo do eixo X.
 
 ```css
 p {
@@ -21,11 +21,11 @@ p {
 
 # --instructions--
 
-Skew the element with the id of `bottom` by 24 degrees along the X-axis by using the `transform` property.
+Incline o elemento com o id `bottom` em 24 graus ao longo do eixo X usando a propriedade `transform`.
 
 # --hints--
 
-The element with id `bottom` should be skewed by 24 degrees along its X-axis.
+O elemento com id `bottom` deve ser inclinado em 24 graus ao longo de seu eixo X.
 
 ```js
 assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a6367417b2b2512adc
-title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
+title: Use a propriedade skewY de transformação do CSS para distorcer um elemento ao longo do eixo Y
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c2MZ2uB'
 forumTopicId: 301075
@@ -9,15 +9,15 @@ dashedName: use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-
 
 # --description--
 
-Given that the `skewX()` function skews the selected element along the X-axis by a given degree, it is no surprise that the `skewY()` property skews an element along the Y (vertical) axis.
+Dado que a função `skewX()` inclina o elemento selecionado ao longo do eixo X em um determinado grau, não é nenhuma surpresa que a propriedade `skewY()` inclina um elemento ao longo do eixo Y (vertical).
 
 # --instructions--
 
-Skew the element with the id of `top` -10 degrees along the Y-axis by using the `transform` property.
+Incline o elemento com a id de `top` -10 graus ao longo do eixo Y usando a propriedade `transform`.
 
 # --hints--
 
-The element with id `top` should be skewed by -10 degrees along its Y-axis.
+O elemento com id `top` deve ser inclinado em -10 graus ao longo de seu eixo Y.
 
 ```js
 assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a5367417b2b2512ad9
-title: Use the CSS Transform scale Property to Change the Size of an Element
+title: Use a propriedade scale de transformação do CSS para alterar o tamanho de um elemento
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c2MZVSg'
 forumTopicId: 301076
@@ -9,7 +9,7 @@ dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-elemen
 
 # --description--
 
-To change the scale of an element, CSS has the `transform` property, along with its `scale()` function. The following code example doubles the size of all the paragraph elements on the page:
+Para alterar a escala de um elemento, o CSS possui a propriedade `transform`, junto com sua função `scale()`. O exemplo de código a seguir dobra o tamanho de todos os elementos de parágrafo na página:
 
 ```css
 p {
@@ -19,11 +19,11 @@ p {
 
 # --instructions--
 
-Increase the size of the element with the id of `ball2` to 1.5 times its original size.
+Aumente o tamanho do elemento com o id de `ball2` para 1.5 vezes seu tamanho original.
 
 # --hints--
 
-The `transform` property for `#ball2` should be set to scale it to 1.5 times its size.
+A propriedade `transform` em `#ball2` deve ser configurada para dimensioná-la para 1.5 vezes seu tamanho.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78a5367417b2b2512ada
-title: Use the CSS Transform scale Property to Scale an Element on Hover
+title: Use a propriedade scale de transformação do CSS para dimensionar um elemento ao passar o cursor do mouse sobre ele
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cyLPJuM'
 forumTopicId: 301077
@@ -9,9 +9,9 @@ dashedName: use-the-css-transform-scale-property-to-scale-an-element-on-hover
 
 # --description--
 
-The `transform` property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as `:hover` that specify a certain state of an element, the `transform` property can easily add interactivity to your elements.
+A propriedade `transform` tem uma variedade de funções que permitem dimensionar, mover, girar ou inclinar os elementos, entre outras. Quando usado com pseudoclasses como `:hover`, que especificam um certo estado de um elemento, a propriedade `transform` pode facilmente adicionar interatividade aos seus elementos.
 
-Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:
+Aqui está um exemplo para dimensionar os elementos do parágrafo para 2.1 vezes seu tamanho original quando um usuário passa o mouse sobre eles:
 
 ```css
 p:hover {
@@ -19,15 +19,15 @@ p:hover {
 }
 ```
 
-**Note:** Applying a transform to a `div` element will also affect any child elements contained in the div.
+**Observação:** aplicar uma transformação a um elemento `div` também afetará quaisquer elementos filho contidos na div.
 
 # --instructions--
 
-Add a CSS rule for the `hover` state of the `div` and use the `transform` property to scale the `div` element to 1.1 times its original size when a user hovers over it.
+Adicione uma regra CSS para o estado `hover` da `div` e use a propriedade `transform` para dimensionar o elemento `div` para 1.1 vezes seu tamanho original quando um usuário passa o mouse sobre ele.
 
 # --hints--
 
-The size of the `div` element should scale 1.1 times when the user hovers over it.
+O tamanho do elemento `div` deve ser dimensionado 1.1 vez quando o usuário passa o mouse sobre ele.
 
 ```js
 assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781a367417b2b2512ab9
-title: Use the em Tag to Italicize Text
+title: Use a tag em para colocar o texto em itálico
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cVJRBtp'
 forumTopicId: 301078
@@ -9,21 +9,21 @@ dashedName: use-the-em-tag-to-italicize-text
 
 # --description--
 
-To emphasize text, you can use the `em` tag. This displays text as italicized, as the browser applies the CSS of `font-style: italic;` to the element.
+Para enfatizar o texto, você pode usar a tag `em`. Essa tag exibe o texto em itálico, pois o navegador, através do CSS, aplica a propriedade e valor `font-style: italic;` ao elemento.
 
 # --instructions--
 
-Wrap an `em` tag around the contents of the paragraph tag to give it emphasis.
+Envolva o conteúdo da tag de parágrafo com uma tag `em` para dar ênfase.
 
 # --hints--
 
-Your code should add an `em` tag to the markup.
+O código deve adicionar uma tag `em` ao html.
 
 ```js
 assert($('em').length == 1);
 ```
 
-The `em` tag should wrap around the contents of the `p` tag but not the `p` tag itself.
+A tag `em` deve envolver o conteúdo da tag `p`, mas não a tag `p` em si.
 
 ```js
 assert($('p').children().length == 1 && $('em').children().length == 2);

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781b367417b2b2512aba
-title: Use the s Tag to Strikethrough Text
+title: Use a tag s para deixar o texto tachado
 challengeType: 0
 videoUrl: ''
 forumTopicId: 301079
@@ -9,21 +9,21 @@ dashedName: use-the-s-tag-to-strikethrough-text
 
 # --description--
 
-To strikethrough text, which is when a horizontal line cuts across the characters, you can use the `s` tag. It shows that a section of text is no longer valid. With the `s` tag, the browser applies the CSS of `text-decoration: line-through;` to the element.
+Para deixar o texto tachado, ou seja, para que uma linha horizontal corte os caracteres do texto, você pode usar a tag `s`. Isso mostra que uma seção de texto não é mais válida. Com a tag `s`, o navegador aplica o CSS de `text-decoration: line-through;` ao elemento.
 
 # --instructions--
 
-Wrap the `s` tag around `Google` inside the `h4` tag and then add the word `Alphabet` beside it, which should not have the strikethrough formatting.
+Envolva a tag `s` em torno da palavra `Google` que está dentro da tag `h4` e, em seguida, adicione a palavra `Alphabet` ao lado dela. Essa segunda palavra não deverá estar tachada.
 
 # --hints--
 
-Your code should add one `s` tag to the markup.
+O código deve adicionar uma tag `s` ao código html.
 
 ```js
 assert($('s').length == 1);
 ```
 
-A `s` tag should wrap around the `Google` text in the `h4` tag. It should not contain the word `Alphabet`.
+A tag `s` deve envolver o texto `Google` na tag `h4`. A palavra `Alphabet` não deve estar tachada.
 
 ```js
 assert(
@@ -36,7 +36,7 @@ assert(
 );
 ```
 
-You should include the word `Alphabet` in the `h4` tag, without strikethrough formatting.
+Você deve incluir a palavra `Alphabet` na tag `h4`, sem deixá-la tachada.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781a367417b2b2512ab7
-title: Use the strong Tag to Make Text Bold
+title: Use a tag strong para deixar o texto em negrito
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/ceJNBSb'
 forumTopicId: 301080
@@ -9,27 +9,27 @@ dashedName: use-the-strong-tag-to-make-text-bold
 
 # --description--
 
-To make text bold, you can use the `strong` tag. This is often used to draw attention to text and symbolize that it is important. With the `strong` tag, the browser applies the CSS of `font-weight: bold;` to the element.
+Para deixar o texto em negrito, você pode usar a tag `strong`. Ela é geralmente é usada para chamar a atenção para o texto e simbolizar que ele é importante. Com a tag `strong`, o navegador aplica o CSS de `font-weight: bold;` ao elemento.
 
 # --instructions--
 
-Wrap a `strong` tag around `Stanford University` text inside the `p` tag (do not include the period).
+Envolva uma tag `strong` ao redor do texto `Stanford University` dentro da tag `p` (não inclua o ponto final).
 
 # --hints--
 
-Your code should add one `strong` tag to the markup.
+O seu código deve adicionar uma tag `strong` ao html.
 
 ```js
 assert($('strong').length == 1);
 ```
 
-The `strong` tag should be inside the `p` tag.
+A tag `strong` deve estar dentro da tag `p`.
 
 ```js
 assert($('p').children('strong').length == 1);
 ```
 
-The `strong` tag should wrap around the words `Stanford University`.
+A tag `strong` deve envolver as palavras `Stanford University`.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781c367417b2b2512ac0
-title: Use the text-transform Property to Make Text Uppercase
+title: Use a propriedade text-transform para deixar o texto em letras maiúsculas
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cvVZQSP'
 forumTopicId: 301081
@@ -9,25 +9,25 @@ dashedName: use-the-text-transform-property-to-make-text-uppercase
 
 # --description--
 
-The `text-transform` property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.
+A propriedade `text-transform` no CSS é usada para alterar a aparência do texto. É uma maneira conveniente de garantir que o texto em uma página da web seja exibido de forma consistente, sem precisar alterar o conteúdo do texto dos elementos dentro do HTML.
 
-The following table shows how the different `text-transform`values change the example text "Transform me".
+A tabela a seguir mostra como os diferentes valores de `text-transform` alteram o texto no exemplo "Me transforme".
 
-<table class='table table-striped'><thead><tr><th>Value</th><th>Result</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"transform me"</td></tr><tr><td><code>uppercase</code></td><td>"TRANSFORM ME"</td></tr><tr><td><code>capitalize</code></td><td>"Transform Me"</td></tr><tr><td><code>initial</code></td><td>Use the default value</td></tr><tr><td><code>inherit</code></td><td>Use the <code>text-transform</code> value from the parent element</td></tr><tr><td><code>none</code></td><td><strong>Default:</strong> Use the original text</td></tr></tbody></table>
+<table class='table table-striped'><thead><tr><th>Valor</th><th>Resultado</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"me transforme"</td></tr><tr><td><code>uppercase</code></td><td>"ME TRANSFORME"</td></tr><tr><td><code>capitalize</code></td><td>"Me Transforme"</td></tr><tr><td><code>initial</code></td><td>Use o valor padrão</td></tr><tr><td><code>inherit</code></td><td>Use o valor <code>text-transform</code> do elemento pai</td></tr><tr><td><code>none</code></td><td><strong>Padrão:</strong> usa o texto original do HTML</td></tr></tbody></table>
 
 # --instructions--
 
-Transform the text of the `h4` to be uppercase using the `text-transform` property.
+Transforme o texto de `h4` em letras maiúsculas usando a propriedade `text-transform`.
 
 # --hints--
 
-The `h4` text should be `uppercase`.
+O texto `h4` deve ter todas as letras maiúsculas (`uppercase`).
 
 ```js
 assert($('h4').css('text-transform') === 'uppercase');
 ```
 
-The original text of the h4 should not be changed.
+O texto original do h4 não deve ser alterado.
 
 ```js
 assert($('h4').text() !== $('h4').text().toUpperCase());

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md

@@ -1,6 +1,6 @@
 ---
 id: 587d781a367417b2b2512ab8
-title: Use the u Tag to Underline Text
+title: Use a tag u para sublinhar o texto
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cN6aQCL'
 forumTopicId: 301082
@@ -9,23 +9,23 @@ dashedName: use-the-u-tag-to-underline-text
 
 # --description--
 
-To underline text, you can use the `u` tag. This is often used to signify that a section of text is important, or something to remember. With the `u` tag, the browser applies the CSS of `text-decoration: underline;` to the element.
+Para sublinhar o texto, você pode usar a tag `u`. Essa tag geralmente é usada para dizer que uma parte do texto é importante ou algo deve ser lembrado. Com a tag `u`, o navegador aplica o CSS de `text-decoration: underline;` ao elemento.
 
 # --instructions--
 
-Wrap the `u` tag only around the text `Ph.D. students`.
+Envolva a tag `u` somente ao redor do texto `Ph.D. students`.
 
-**Note:** Try to avoid using the `u` tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
+**Observação:** tente evitar o uso da tag `u` nos casos em que ela pode ser confundida com um link. Lembre-se de que as tags âncora também têm uma formatação sublinhada por padrão.
 
 # --hints--
 
-Your code should add a `u` tag to the markup.
+O código deve adicionar uma tag `u` ao html.
 
 ```js
 assert($('u').length === 1);
 ```
 
-The `u` tag should wrap around the text `Ph.D. students`.
+A tag `u` deve envolver o texto `Ph.D. students`.
 
 ```js
 assert($('u').text() === 'Ph.D. students');