diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md index 121f4d84b6..40b81c37b1 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md @@ -42,7 +42,7 @@ dashedName: nest-an-anchor-element-within-a-paragraph 此示例的最終輸出結果是這樣： -你可以訪問 link to www.freecodecamp.org。 +Here's a link to www.freecodecamp.org for you to follow. # --instructions-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md index 5db345d570..3a811ccadb 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md @@ -42,7 +42,7 @@ dashedName: nest-an-anchor-element-within-a-paragraph 此示例的最终输出结果是这样： -你可以访问 link to www.freecodecamp.org。 +Here's a link to www.freecodecamp.org for you to follow. # --instructions-- diff --git a/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md b/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md index cf9f0a6e40..b13163fdd8 100644 --- a/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md +++ b/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md @@ -11,7 +11,7 @@ dashedName: create-a-bulleted-unordered-list HTML tiene un elemento especial para crear listas no ordenadas, o listas con estilo de viñetas. -Las listas no ordenadas comienzan con un elemento `` +Las listas no ordenadas comienzan con un elemento ``. Por ejemplo: diff --git a/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md b/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md index 927e0e6f4f..4d7240b8bf 100644 --- a/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md +++ b/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md @@ -34,7 +34,7 @@ assert( ); ``` -Tu formulario `form` debe tener un atributo `action` que esté establecido como `https://www.freecatphotoapp.com/submit-cat-photo` +Tu formulario `form` debe tener un atributo `action` que esté establecido como `https://www.freecatphotoapp.com/submit-cat-photo`. ```js const action = $('form').attr('action'); diff --git a/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md b/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md index e04f8db114..54c2bcc02d 100644 --- a/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md +++ b/curriculum/challenges/espanol/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md @@ -42,7 +42,7 @@ El texto, `link to www.freecodecamp.org`, dentro de un elemento `a` se llama a www.freecodecamp.org para que lo sigas. +Here's a link to www.freecodecamp.org for you to follow. # --instructions-- diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md index ed7f022fb3..54f2e81ca4 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md @@ -9,7 +9,7 @@ dashedName: global-vs--local-scope-in-functions # --description-- -Es posible tener variables locales y globales con el mismo nombre. Cuando haces esto, la variable `local` tiene precedencia sobre la variable `global`. +Es posible tener variables locales y globales con el mismo nombre. Cuando haces esto, la variable local tiene precedencia sobre la variable global. En este ejemplo: @@ -21,7 +21,7 @@ function myFun() { } ``` -La función `myFun` devolverá la cadena `Head` porque está presente la versión `local` de la variable. +La función `myFun` devolverá la cadena `Head` porque está presente la versión local de la variable. # --instructions-- diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md index 48dc4c4abc..a0a41794b3 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md @@ -19,23 +19,23 @@ var sandwich = ["peanut butter", "jelly", "bread"] # --instructions-- -Modifica el nuevo arreglo `myArray` para que contenga tanto una `string` como un `number` (en ese orden). +Modifica el nuevo arreglo `myArray` para que contenga tanto una cadena como un número (en ese orden). # --hints-- -`myArray` debe ser un arreglo (`array`). +`myArray` debe ser un arreglo. ```js assert(typeof myArray == 'object'); ``` -El primer elemento en `myArray` debe ser una cadena (`string`). +El primer elemento en `myArray` debe ser una cadena. ```js assert(typeof myArray[0] !== 'undefined' && typeof myArray[0] == 'string'); ``` -El segundo elemento en `myArray` debe ser un número (`number`). +El segundo elemento en `myArray` debe ser un número. ```js assert(typeof myArray[1] !== 'undefined' && typeof myArray[1] == 'number'); diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md index 67ed29ab68..d8a30a83af 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md @@ -17,7 +17,7 @@ Animal.prototype.eat = function() { }; ``` -Este desafío y el siguiente cubrirán como reutilizar los métodos de `Animal's` dentro de `Bird` y `Dog` sin tener que definirlos otra vez. Se utiliza una técnica llamada herencia. Este desafío cubre el primer paso: crear una instancia del `supertype` (o objecto padre). Ya conoces una forma de crear una instancia de `Animal` utilizando el operador `new`: +Este desafío y el siguiente cubrirán como reutilizar los métodos de `Animal` dentro de `Bird` y `Dog` sin tener que definirlos otra vez. Se utiliza una técnica llamada herencia. Este desafío cubre el primer paso: crear una instancia del `supertype` (o objecto padre). Ya conoces una forma de crear una instancia de `Animal` utilizando el operador `new`: ```js let animal = new Animal(); @@ -29,7 +29,7 @@ Hay algunas desventajas cuando se utiliza esta sintaxis para la herencia, pero s let animal = Object.create(Animal.prototype); ``` -`Object.create(obj)` crea un objeto nuevo y establece `obj` como el `prototype` del nuevo objeto. Recuerda que `prototype` es como la "receta" para crear un objecto. Al establecer el `prototype` de `animal` como el `prototype` de `Animal's`, estás dándole a la instancia `animal` la misma “receta" que a cualquier otra instancia de `Animal`. +`Object.create(obj)` crea un objeto nuevo y establece `obj` como el `prototype` del nuevo objeto. Recuerda que `prototype` es como la "receta" para crear un objecto. Al establecer el `prototype` de `animal` como el `prototype` de `Animal`, estás dándole a la instancia `animal` la misma “receta" que a cualquier otra instancia de `Animal`. ```js animal.eat(); diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md index e6348cda01..66246e986b 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md @@ -36,10 +36,10 @@ Bird.prototype.eat = function() { }; ``` -Si tienes una instancia de `let duck = new Bird();` y llamas a `duck.eat()`, de esta manera es como JavaScript busca el método en la cadena de `duck’s` `prototype`: +Si tienes una instancia de `let duck = new Bird();` y llamas a `duck.eat()`, así es como JavaScript busca el método en la cadena `prototype` de `duck`: 1. `duck` => ¿Está `eat()` definido aquí? No. -2. `Bird` => ¿Está `eat()` definido aquí? => Sí. Ejecutala y detén la búsqueda. +2. `Bird` => ¿Está `eat()` definido aquí? => Sí. Ejecútala y detén la búsqueda. 3. `Animal` => `eat()` también está definido, pero JavaScript dejó de buscar antes de llegar a este nivel. 4. Object => JavaScript dejó de buscar antes de llegar a este nivel. diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md index 9741aa37fb..418bac7326 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md @@ -19,7 +19,7 @@ let duck = new Bird(); duck.constructor ``` -Pero `duck` y todas las instancias de `Bird` deberían mostrar que fueron construidas por `Bird` y no `Animal`. Para hacer esto, puedes establecer de forma manual la propiedad constructor `Bird's` al objeto `Bird`: +Pero `duck` y todas las instancias de `Bird` deberían mostrar que fueron construidas por `Bird` y no `Animal`. Para ello, puedes establecer manualmente la propiedad del constructor de `Bird` al objeto `Bird`: ```js Bird.prototype.constructor = Bird; diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md index a02dd72c05..ce61d48011 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md @@ -12,7 +12,7 @@ Dado que `numLegs` probablemente tendrán el mismo valor para todas las instanci Esto puede que no sea un problema cuando sólo hay dos instancias, pero imagina si hay millones de instancias. Eso sería un montón de variables duplicadas. -Una mejor manera es usar `Bird’s` `prototype`. Las propiedades del `prototype` se comparten entre TODAS las instancias de `Bird`. A continuación se explica cómo añadir `numLegs` al prototipo `Bird prototype`: +Una mejor forma es utilizar el `prototype` de `Bird`. Las propiedades del `prototype` se comparten entre TODAS las instancias de `Bird`. A continuación se explica cómo añadir `numLegs` al prototipo `Bird prototype`: ```js Bird.prototype.numLegs = 2; @@ -45,7 +45,7 @@ assert(beagle.numLegs !== undefined); assert(typeof beagle.numLegs === 'number'); ``` -`numLegs` debe ser una propiedad `prototype`, no una propiedad `own`. +`numLegs` debe ser una propiedad `prototype`, no una propiedad directa. ```js assert(beagle.hasOwnProperty('numLegs') === false); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/access-props-using-this.props.md b/curriculum/challenges/espanol/03-front-end-libraries/react/access-props-using-this.props.md index 93d96e4f8c..fb1170ea92 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/access-props-using-this.props.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/access-props-using-this.props.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403616e -title: Access Props Using this.props +title: Accede a propiedades "props" usando this.props challengeType: 6 forumTopicId: 301375 dashedName: access-props-using-this-props @@ -8,17 +8,17 @@ dashedName: access-props-using-this-props # --description-- -The last several challenges covered the basic ways to pass props to child components. But what if the child component that you're passing a prop to is an ES6 class component, rather than a stateless functional component? The ES6 class component uses a slightly different convention to access props. +Los últimos desafíos cubrieron las formas básicas de pasar propiedades a un componente hijo. Pero, ¿qué pasa si el componente hijo al que se le pasa una propiedad es un componente de clase ES6, en lugar de un componente funcional sin estado? Los componentes de clase ES6 usan una convención un poco diferente para acceder a las propiedades. -Anytime you refer to a class component within itself, you use the `this` keyword. To access props within a class component, you preface the code that you use to access it with `this`. For example, if an ES6 class component has a prop called `data`, you write `{this.props.data}` in JSX. +Cada vez que se hace referencia a un componente de clase en sí mismo, se utiliza la palabra clave `this`. Para acceder a las propiedades dentro de un componente de clase, se antepone al código que se utiliza para acceder a él con `this`. Por ejemplo, si un componente de clase de ES6 tiene una propiedad llamada `data`, se escribirá `{this.props.data}` en JSX. # --instructions-- -Render an instance of the `ReturnTempPassword` component in the parent component `ResetPassword`. Here, give `ReturnTempPassword` a prop of `tempPassword` and assign it a value of a string that is at least 8 characters long. Within the child, `ReturnTempPassword`, access the `tempPassword` prop within the `strong` tags to make sure the user sees the temporary password. +Renderiza una instancia del componente `ReturnTempPassword` en el componente padre `ResetPassword`. Aquí, dale a `ReturnTempPassword` una propiedad de `tempPassword` y asígnale un valor de una cadena que tenga al menos 8 caracteres. Dentro del componente hijo, `ReturnTempPassword`, accede a la propiedad `tempPassword` dentro de las etiquetas `strong` para asegurarte que el usuario vea una contraseña temporal. # --hints-- -The `ResetPassword` component should return a single `div` element. +El componente `ResetPassword` debe devolver un único elemento `div`. ```js assert( @@ -29,7 +29,7 @@ assert( ); ``` -The fourth child of `ResetPassword` should be the `ReturnTempPassword` component. +El cuarto componente hijo de `ResetPassword` debe ser el componente `ReturnTempPassword`. ```js assert( @@ -42,7 +42,7 @@ assert( ); ``` -The `ReturnTempPassword` component should have a prop called `tempPassword`. +El componente `ReturnTempPassword` debe tener una propiedad llamada `tempPassword`. ```js assert( @@ -53,7 +53,7 @@ assert( ); ``` -The `tempPassword` prop of `ReturnTempPassword` should be equal to a string of at least `8` characters. +La propiedad `tempPassword` de `ReturnTempPassword` debe ser igual a una cadena de al menos 8 caracteres. ```js assert( @@ -66,7 +66,7 @@ assert( ); ``` -The `ReturnTempPassword` component should display the password you create as the `tempPassword` prop within `strong` tags. +El componente `ReturnTempPassword` debe mostrar la contraseña creada en la propiedad `tempPassword` dentro de las etiquetas `strong`. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/add-comments-in-jsx.md b/curriculum/challenges/espanol/03-front-end-libraries/react/add-comments-in-jsx.md index 94a2131b27..68a598cdb9 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/add-comments-in-jsx.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/add-comments-in-jsx.md @@ -1,6 +1,6 @@ --- id: 5a24bbe0dba28a8d3cbd4c5e -title: Add Comments in JSX +title: Agrega comentarios en JSX challengeType: 6 forumTopicId: 301376 dashedName: add-comments-in-jsx @@ -8,35 +8,35 @@ dashedName: add-comments-in-jsx # --description-- -JSX is a syntax that gets compiled into valid JavaScript. Sometimes, for readability, you might need to add comments to your code. Like most programming languages, JSX has its own way to do this. +JSX es una sintaxis que se compila en JavaScript válido. A veces, para facilitar la lectura, es necesario añadir comentarios al código. Como la mayoría de los lenguajes de programación, JSX tiene su propia manera de hacerlo. -To put comments inside JSX, you use the syntax `{/* */}` to wrap around the comment text. +Para agregar comentarios dentro de JSX, se utiliza la sintaxis `{/* */}` para envolver el texto del comentario. # --instructions-- -The code editor has a JSX element similar to what you created in the last challenge. Add a comment somewhere within the provided `div` element, without modifying the existing `h1` or `p` elements. +El editor de código tiene un elemento JSX similar al que creaste en el último desafío. Agrega un comentario en algún lugar dentro del elemento `div`, sin modificar los elementos `h1` o `p`. # --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 elemento `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 existing `h1` and `p` elements should not be modified. +Los elementos `h1` y `p` existentes no deben ser modificados. ```js assert( @@ -45,7 +45,7 @@ assert( ); ``` -The `JSX` should use valid comment syntax. +El elemento`JSX` debe usar una sintaxis de comentario válida. ```js assert(/
[\s\S]*{\s*\/\*[\s\S]*\*\/\s*}[\s\S]*<\/div>/.test(code)); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react/add-inline-styles-in-react.md b/curriculum/challenges/espanol/03-front-end-libraries/react/add-inline-styles-in-react.md index 90a5175310..b1620389ff 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react/add-inline-styles-in-react.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react/add-inline-styles-in-react.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036182 -title: Add Inline Styles in React +title: Agrega estilos en línea en React challengeType: 6 forumTopicId: 301378 dashedName: add-inline-styles-in-react @@ -8,41 +8,41 @@ dashedName: add-inline-styles-in-react # --description-- -You may have noticed in the last challenge that there were several other syntax differences from HTML inline styles in addition to the `style` attribute set to a JavaScript object. First, the names of certain CSS style properties use camel case. For example, the last challenge set the size of the font with `fontSize` instead of `font-size`. Hyphenated words like `font-size` are invalid syntax for JavaScript object properties, so React uses camel case. As a rule, any hyphenated style properties are written using camel case in JSX. +Es posible que hayas notado en el último desafío que había otras diferencias de sintaxis con respecto a los estilos en línea de HTML, además del atributo `style` establecido en un objeto de JavaScript. En primer lugar, los nombres de ciertas propiedades de estilo CSS utilizan camel case. Por ejemplo, el último desafío establece el tamaño de la fuente con `fontSize` en lugar de `font-size`. Palabras que incluyen guion como `font-size` son sintaxis inválidas para propiedades de objetos de JavaScript, por lo que React utiliza camel case. Como regla, cualquier propiedad de estilo que usa guion se escribe usando camel case en JSX. -All property value length units (like `height`, `width`, and `fontSize`) are assumed to be in `px` unless otherwise specified. If you want to use `em`, for example, you wrap the value and the units in quotes, like `{fontSize: "4em"}`. Other than the length values that default to `px`, all other property values should be wrapped in quotes. +Todas las unidades de longitud del valor de la propiedad (como `height`, `width`, y `fontSize`) se supone que están en `px` a menos que se especifique lo contrario. Si quieres utilizar `em`, por ejemplo, debes envolver el valor y las unidades entre comillas, como `{fontSize: "4em"}`. Aparte de los valores de longitud que por defecto son `px`, todos los demás valores de las propiedades deben estar envueltos entre comillas. # --instructions-- -If you have a large set of styles, you can assign a style `object` to a constant to keep your code organized. Initialize a `styles` constant and assign an `object` with three style properties and their values to it. Give the `div` a color of `"purple"`, a font-size of `40`, and a border of `"2px solid purple"`. Then set the `style` attribute equal to the `styles` constant. +Si tienes una gran cantidad de estilos, puedes asignar un `object` de estilos a una constante para mantener tu código organizado. Declara tu constante "styles" como una variable global al principio del archivo. Inicializa la constante `styles` y asígnale un `object` con tres propiedades de estilo y sus valores. Dale al `div` un color `purple`, un tamaño de fuente de `40` y un borde `2px solid purple`. Luego asigna al atributo `style` la constante `styles`. # --hints-- -The `styles` variable should be an `object` with three properties. +La variable `styles` debe ser un `object` con tres propiedades. ```js assert(Object.keys(styles).length === 3); ``` -The `styles` variable should have a `color` property set to a value of `purple`. +La variable `styles` debe contener una propiedad `color` con el valor de `purple`. ```js assert(styles.color === 'purple'); ``` -The `styles` variable should have a `fontSize` property set to a value of `40`. +La variable `styles` debe contener una propiedad `fontSize` con el valor de `40`. ```js assert(styles.fontSize === 40); ``` -The `styles` variable should have a `border` property set to a value of `2px solid purple`. +La variable `styles` debe contener una propiedad `border` con el valor de `2px solid purple`. ```js assert(styles.border === '2px solid purple'); ``` -The component should render a `div` element. +El componente debe renderizar un elemento `div`. ```js assert( @@ -53,7 +53,7 @@ assert( ); ``` -The `div` element should have its styles defined by the `styles` object. +El elemento `div` debe tener sus estilos definidos en el objeto `styles`. ```js assert( diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md index 2baee22c3f..743d3ffaed 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md @@ -34,7 +34,7 @@ assert( ); ``` -O elemento `form` deve ter o atributo `action` definido como `https://www.freecatphotoapp.com/submit-cat-photo` +O elemento `form` deve ter o atributo `action` definido como `https://www.freecatphotoapp.com/submit-cat-photo`. ```js const action = $('form').attr('action'); diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md index f40f6dcbd3..d0c60327b6 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md @@ -42,7 +42,7 @@ O texto, `link to www.freecodecamp.org`, dentro do elemento `a`, é chamado de < O resultado final do exemplo ficará assim: -Aqui está um link para www.freecodecamp.org para você clicar. +Here's a link to www.freecodecamp.org for you to follow. # --instructions-- diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md index d5680637d8..f48e01422f 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md @@ -1,6 +1,6 @@ --- id: 5a9036d038fddaf9a66b5d32 -title: Add Columns with grid-template-columns +title: Criar colunas com grid-template-columns challengeType: 0 videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv' forumTopicId: 301117 @@ -9,7 +9,7 @@ dashedName: add-columns-with-grid-template-columns # --description-- -Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the `grid-template-columns` property on a grid container as demonstrated below: +Só criar um elemento grid não faz muita coisa. Você também precisa definir a estrutura do grid. Para adicionar colunas ao grid, use a propriedade `grid-template-columns` em um grid container, como demonstrado abaixo: ```css .container { @@ -18,15 +18,15 @@ Simply creating a grid element doesn't get you very far. You need to define the } ``` -This will give your grid two columns that are each 50px wide. The number of parameters given to the `grid-template-columns` property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column. +Isso vai dar ao grid duas colunas, cada uma com 50px de largura. O número dos parâmetros dados à propriedade `grid-template-columns` indica o número de colunas no grid. O valor de cada parâmetro indica a largura de cada coluna. # --instructions-- -Give the grid container three columns that are each `100px` wide. +Dê ao grid container três colunas com `100px` de largura. # --hints-- -`container` class should have a `grid-template-columns` property with three units of `100px`. +O elemento de classe `container` deve ter a propriedade `grid-template-columns` com três parâmetros de `100px`. ```js assert( @@ -55,7 +55,7 @@ assert( display: grid; /* Only change code below this line */ - + /* Only change code above this line */ } diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md index 4a96f7fd57..7dd1971650 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md @@ -1,6 +1,6 @@ --- id: 5a9036ee38fddaf9a66b5d37 -title: Add Gaps Faster with grid-gap +title: Criar espaçamentos com grid-gap challengeType: 0 videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv' forumTopicId: 301118 @@ -9,15 +9,15 @@ dashedName: add-gaps-faster-with-grid-gap # --description-- -`grid-gap` is a shorthand property for `grid-row-gap` and `grid-column-gap` from the previous two challenges that's more convenient to use. If `grid-gap` has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns. +`grid-gap` é uma propriedade abreviada para `grid-row-gap` e `grid-column-gap` dos dois últimos desafios, que é mais conveniente usar. Se `grid-gap` possui apenas um valor, ele vai criar um espaçamento entre todas as linhas e colunas. No entanto, se houver dois valores, o primeiro valor será usado para definir o espaçamento entre as linhas e o segundo para definir o espaçamento entre as colunas. # --instructions-- -Use `grid-gap` to introduce a `10px` gap between the rows and `20px` gap between the columns. +Use a propriedade `grid-gap` para criar um espaçamento de `10px` entre as linhas e um espaçamento de `20px` entre as colunas. # --hints-- -`container` class should have a `grid-gap` property that introduces a `10px` gap between the rows and a `20px` gap between the columns. +O elemento de classe `container` deve ter a propriedade `grid-gap` que cria um espaçamento de `10px` entre as linhas e um espaçamento de `20px` entre as colunas. ```js assert( @@ -49,7 +49,7 @@ assert( grid-template-rows: 1fr 1fr 1fr; /* Only change code below this line */ - + /* Only change code above this line */ } diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md index 80cc7894d3..313d0e2b30 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md @@ -1,6 +1,6 @@ --- id: 5a9036e138fddaf9a66b5d33 -title: Add Rows with grid-template-rows +title: Criar linhas com grid-template-rows challengeType: 0 videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua' forumTopicId: 301119 @@ -9,15 +9,15 @@ dashedName: add-rows-with-grid-template-rows # --description-- -The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the `grid-template-rows` property in the same way you used `grid-template-columns` in the previous challenge. +O grid que você criou no último desafio definirá o número de linhas automaticamente. Para ajustar as linhas manualmente, use a propriedade `grid-template-rows` da mesma maneira que você usou `grid-template-columns` no desafio anterior. # --instructions-- -Add two rows to the grid that are `50px` tall each. +Adicione duas linhas ao grid com `50px` de altura cada. # --hints-- -`container` class should have a `grid-template-rows` property with two units of `50px`. +O elemento de classe `container` deve ter a propriedade `grid-template-rows` com dois valores de `50px`. Cada valor deve estar separado por um espaço. ```js assert( @@ -47,7 +47,7 @@ assert( grid-template-columns: 100px 100px 100px; /* Only change code below this line */ - + /* Only change code above this line */ } diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md index eaecfedfb8..5cdb8d917f 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md @@ -1,6 +1,6 @@ --- id: 5a90376038fddaf9a66b5d3c -title: Align All Items Horizontally using justify-items +title: Alinhar todos os itens horizontalmente usando justify-items challengeType: 0 videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn' forumTopicId: 301120 @@ -9,15 +9,15 @@ dashedName: align-all-items-horizontally-using-justify-items # --description-- -Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all at once horizontally by using `justify-items` on your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move **all** the items in our grid to the desired alignment. +Às vezes, você quer que todos os itens no seu grid possuam o mesmo alinhamento. Você pode usar as propriedades aprendidas anteriormente e alinhá-los individualmente ou pode alinhá-los todos de uma vez horizontalmente usando a propriedade `justify-items` em seu grid container. Essa propriedade aceita todos os mesmos valores que você aprendeu nos dois desafios anteriores. A diferença é que ela moverá **todos** os itens do grid para o alinhamento especificado. # --instructions-- -Use this property to center all our items horizontally. +Use esta propriedade para centralizar horizontalmente todos itens. # --hints-- -`container` class should have a `justify-items` property that has the value of `center`. +O elemento de classe `container` deve ter a propriedade `justify-items` com o valor de `center`. ```js assert( @@ -50,7 +50,7 @@ assert( grid-gap: 10px; /* Only change code below this line */ - + /* Only change code above this line */ } diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md index 9299195765..115e8f1eb2 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md @@ -1,6 +1,6 @@ --- id: 5a94fdf869fb03452672e45b -title: Align All Items Vertically using align-items +title: Alinhar todos os itens verticalmente usando align-items challengeType: 0 videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv' forumTopicId: 301121 @@ -9,15 +9,15 @@ dashedName: align-all-items-vertically-using-align-items # --description-- -Using the `align-items` property on a grid container will set the vertical alignment for all the items in our grid. +Usar a propriedade `align-items` em um grid container vai definir um alinhamento vertical para todos os grid items. # --instructions-- -Use it now to move all the items to the end of each cell. +Use-o agora para mover todos os itens para o final de cada célula. # --hints-- -`container` class should have a `align-items` property that has the value of `end`. +O elemento de classe `container` deve ter a propriedade `align-items` com o valor de `end`. ```js assert( @@ -48,7 +48,7 @@ assert( grid-gap: 10px; /* Only change code below this line */ - + /* Only change code above this line */ } diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md index dd069b37ff..ca4886b057 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md @@ -1,6 +1,6 @@ --- id: 5a90374338fddaf9a66b5d3a -title: Align an Item Horizontally using justify-self +title: Alinhar um item horizontalmente usando justify-self challengeType: 0 videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq' forumTopicId: 301122 @@ -9,21 +9,21 @@ dashedName: align-an-item-horizontally-using-justify-self # --description-- -In CSS Grid, the content of each item is located in a box which is referred to as a cell. You can align the content's position within its cell horizontally using the `justify-self` property on a grid item. By default, this property has a value of `stretch`, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well: +No CSS Grid, o conteúdo de cada item está localizado em uma caixa que chamamos de célula. Você pode alinhar a posição do conteúdo dentro da célula horizontalmente usando a propriedade `justify-self` em um grid item. Por padrão, esta propriedade possui um valor de `stretch`, que fará com que o conteúdo preencha toda a largura da célula. Esta propriedade do CSS Grid também aceita outros valores: -`start`: aligns the content at the left of the cell, +`start`: alinha o conteúdo à esquerda da célula, -`center`: aligns the content in the center of the cell, +`center`: alinha o conteúdo no centro da célula, -`end`: aligns the content at the right of the cell. +`end`: alinha o conteúdo à direita da célula. # --instructions-- -Use the `justify-self` property to center the item with the class `item2`. +Use a propriedade `justify-self` para centralizar o item que possui a classe `item2`. # --hints-- -`item2` class should have a `justify-self` property that has the value of `center`. +O elemento de classe `item2` deve ter a propriedade `justify-self` com o valor de `center`. ```js assert( @@ -43,7 +43,7 @@ assert( background: LightSalmon; /* Only change code below this line */ - + /* Only change code above this line */ } diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md index 82c8018e92..cfd9209f02 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md @@ -1,6 +1,6 @@ --- id: 5a90375238fddaf9a66b5d3b -title: Align an Item Vertically using align-self +title: Alinhar um item verticalmente usando align-self challengeType: 0 videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz' forumTopicId: 301123 @@ -9,15 +9,15 @@ dashedName: align-an-item-vertically-using-align-self # --description-- -Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you use the `align-self` property on an item. This property accepts all of the same values as `justify-self` from the last challenge. +Assim como você pode alinhar um item horizontalmente, também existe uma maneira de alinhar um item verticalmente. Para fazer isso, você deve usar a propriedade `align-self` em um grid item. Esta propriedade aceita todos os mesmos valores que `justify-self` do último desafio. # --instructions-- -Align the item with the class `item3` vertically at the `end`. +Alinhe verticalmente o item com a classe `item3` ao final (`end`) da célula. # --hints-- -`item3` class should have a `align-self` property that has the value of `end`. +O elemento de classe `item3` deve ter a propriedade `align-self` com o valor de `end`. ```js assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi)); @@ -36,7 +36,7 @@ assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi)); background: PaleTurquoise; /* Only change code below this line */ - + /* Only change code above this line */ } diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md index 93a364f7da..56e114789b 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md @@ -1,6 +1,6 @@ --- id: 5a90373638fddaf9a66b5d39 -title: Use grid-row to Control Spacing +title: Usar grid-row para controlar a posição das linhas challengeType: 0 videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4' forumTopicId: 301137 @@ -9,15 +9,15 @@ dashedName: use-grid-row-to-control-spacing # --description-- -Of course, you can make items consume multiple rows just like you can with columns. You define the horizontal lines you want an item to start and stop at using the `grid-row` property on a grid item. +Obviamente, você pode fazer com que os itens ocupem várias linhas, assim como fez com as colunas. Basta definir as divisões horizontais nas quais deseja que um item comece e pare usando a propriedade `grid-row` em um grid item. # --instructions-- -Make the element with the `item5` class consume the last two rows. +Faça com que o elemento de classe `item5` ocupe as duas últimas linhas. # --hints-- -`item5` class should have a `grid-row` property. +O elemento de classe `item5` deve ter a propriedade `grid-row`. ```js assert( @@ -25,7 +25,7 @@ assert( ); ``` -`item5` class should have a `grid-row` property which results in it consuming the last two rows of the grid. +A classe `item5` deve ter a propriedade `grid-row` definida para que o elemento ocupe as duas últimas linhas do grid. ```js const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;