diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md index 8faae131af..e03f97bf5d 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md +++ b/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 ) ); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md index 62a450b2ef..778b62c4f2 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md +++ b/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 ) ); ``` diff --git a/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md b/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md index b7450f9d52..c3c02b2421 100644 --- a/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md +++ b/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 ) ); ``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/pass-an-array-as-props.md b/curriculum/challenges/espanol/03-front-end-libraries/react/pass-an-array-as-props.md index a5b7170b30..8ed35cbc29 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/pass-an-array-as-props.md +++ b/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 @@ -16,15 +16,15 @@ The last challenge demonstrated how to pass information from a parent component ``` -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) =>

{props.colors.join(', ')}

` This will join all `colors` array items into a comma separated string and produce: `

green, blue, red

` 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) =>

{props.colors.join(', ')}

` Esto unirá a todos elementos `colors` del arreglo en una cadena separada por comas y se convertirá en: `

green, blue, red

` 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( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/pass-state-as-props-to-child-components.md b/curriculum/challenges/espanol/03-front-end-libraries/react/pass-state-as-props-to-child-components.md index e0554a5a98..232f60a1b8 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/pass-state-as-props-to-child-components.md +++ b/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 () => { diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/render-a-class-component-to-the-dom.md b/curriculum/challenges/espanol/03-front-end-libraries/react/render-a-class-component-to-the-dom.md index 2e3a9a7a56..e758cd2b14 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/render-a-class-component-to-the-dom.md +++ b/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(, 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(, 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( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/render-conditionally-from-props.md b/curriculum/challenges/espanol/03-front-end-libraries/react/render-conditionally-from-props.md index 75979d54bc..dea89f2542 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/render-conditionally-from-props.md +++ b/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({ - counter: 0 // Change this line + this.setState(prevState => { + // 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({ - counter: this.state.counter + 1 + this.setState(prevState => { + return { + counter: prevState.counter + 1 + } }); } render() { diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/render-html-elements-to-the-dom.md b/curriculum/challenges/espanol/03-front-end-libraries/react/render-html-elements-to-the-dom.md index d5167e4e13..3ab79b44e4 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/render-html-elements-to-the-dom.md +++ b/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( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.md b/curriculum/challenges/espanol/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.md index bfced52d4b..f0d9b797b3 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.md +++ b/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) => diff --git a/curriculum/challenges/italian/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md b/curriculum/challenges/italian/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md index ba70a06330..919e79da08 100644 --- a/curriculum/challenges/italian/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md +++ b/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 ) ); ``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md index 91d8545abd..2f5a0e0afa 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md +++ b/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 CSS Box Model. 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 normal flow 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 CSS Box Model. 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 normal flow (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'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md index f4bc236532..b6e2441930 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md +++ b/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( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md index 1cc3f61037..f94517c3fa 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md +++ b/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'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md index 35787cfba3..dc0d4a7c48 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md +++ b/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( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md index 7b46659742..f0db8c30c3 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md +++ b/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( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md index 5cf78250d4..5ba0cf1563 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md +++ b/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)); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md index e962328bc6..28d25ebffe 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md +++ b/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)); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md index 6a0f81eee7..af1fbca78d 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md +++ b/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 ) ); ``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md index 288fc8ce76..5468cfd6a1 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md +++ b/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( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md index 9c80077317..297c4fe599 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md +++ b/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: -
red (#FF0000) and cyan (#00FFFF)
green (#00FF00) and magenta (#FF00FF)
blue (#0000FF) and yellow (#FFFF00)
+
vermelho (#FF0000) e ciano (#00FFFF)
verde (#00FF00) e magenta (#FF00FF)
azul (#0000FF) e amarelo (#FFFF00)
-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)'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md index 7f4bbbd27c..0b576f1abe 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md +++ b/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: -
ColorHex Code
orange#FF7F00
cyan#00FFFF
raspberry#FF007F
+
CorCódigo Hex
laranja#FF7F00
ciano#00FFFF
framboesa#FF007F
# --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)); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md index 14f512c553..a510e1e445 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md +++ b/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( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md index e91a65e334..480539bd53 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md +++ b/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)); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md index 0eb38a456a..d201ac3339 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md +++ b/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'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md index 3909a6ce24..a49e249d9e 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md +++ b/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'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md index 651d36a0dd..547834e0b8 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md +++ b/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'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md index 85932dd7b3..74f7dee246 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md +++ b/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( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md index ec59324e6d..02b2f65a34 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md +++ b/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( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md index 1ebc81473a..6ac41f7533 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md +++ b/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. - + # --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'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md index a57caba304..e4d2be9366 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md +++ b/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'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md index 34ffb58433..b1a3eb78d1 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md +++ b/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-- - -

In the style tags, set the font-size of the:

+# --instructions--

Na tag style, defina a propriedade font-size das tags:

# --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; diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.md index d50c75f67b..2a24730cb6 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.md +++ b/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'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.md index aec407d16e..e9a5310d9d 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.md +++ b/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-- - + # --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'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.md index 950e5d4c77..1e9c29f3d9 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.md +++ b/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'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md index 63d9325115..c301705624 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md +++ b/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( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md index 60907efc65..d9e2aeeb0e 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md +++ b/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)); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md index 44e322f70c..44a3dfec45 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md +++ b/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