chore(i18n,learn): processed translations (#45621)
This commit is contained in:
camperbot
GitHub
@ -75,7 +75,7 @@ assert($('label').attr('for') == 'email');
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
@ -112,7 +112,7 @@ assert($('label').attr('for') == 'email');
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
|
||||
@ -72,7 +72,7 @@ assert($('#second').attr('accesskey') == 'c');
|
||||
<h2><a id="second" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
@ -99,7 +99,7 @@ assert($('#second').attr('accesskey') == 'c');
|
||||
<h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
|
||||
@ -60,7 +60,7 @@ assert($('div').length == 0);
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
@ -86,7 +86,7 @@ assert($('div').length == 0);
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
|
||||
@ -114,7 +114,7 @@ assert($('p').length == 4);
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
@ -158,7 +158,7 @@ assert($('p').length == 4);
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
|
||||
@ -27,19 +27,19 @@ Cambia el `background-color` de cada elemento `div` sobre la base de los nombres
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe usar la función `hsl()` para declarar el color `green`.
|
||||
Tu código debe tener la propiedad `hsl()` para declarar el color verde.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Tu código debe usar la función `hsl()` para declarar el color `cyan`.
|
||||
Tu código debe tener la propiedad `hsl()` para declarar el color cyan.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Tu código debe usar la función `hsl()` para declarar el color `blue`.
|
||||
Tu código debe tener la propiedad `hsl()` para declarar el color blue.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
|
||||
@ -36,7 +36,7 @@ Finalmente, en el selector `heart::before`, establece su propiedad `content` en
|
||||
|
||||
# --hints--
|
||||
|
||||
La propiedad `background-color` del selector `heart::after` debe ser `pink`.
|
||||
La propiedad de `background-color` del selector `heart::after` debe ser `pink`.
|
||||
|
||||
```js
|
||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||
@ -57,7 +57,7 @@ La propiedad `transform` para la clase `heart` debe usar una función `rotate()`
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
```
|
||||
|
||||
El `content` del selector `heart::before` debe ser una cadena vacía.
|
||||
El `contenido` de `heart::before` debe ser una cadena vacía.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
|
||||
Un desafío anterior discutió la palabra clave `ease-out` que describe un cambio de animación que se acelera primero y luego se ralentiza al final de la animación. A la derecha, se muestra la diferencia entre la palabra clave `ease-out` (para el elemento azul) y la palabra clave `linear` (para el elemento rojo). Se pueden lograr progresiones de animación similares a la palabra clave `ease-out` utilizando una función de curva Bezier cúbica personalizada.
|
||||
|
||||
En general, el cambio de los puntos de anclaje `p1` y `p2` impulsa la creación de diferentes curvas Bezier, que controlan como la animación progresa a través del tiempo. Aquí hay un ejemplo de una curva de Bezier que usa valores para imitar el estilo de facilidad:
|
||||
En general, el cambio de los puntos de anclaje `p1` y `p2` impulsa la creación de diferentes curvas Bezier, que controlan como la animación progresa a través del tiempo. Aquí tienes un ejemplo de una curva Bezier usando valores para imitar el estilo de `ease-out`:
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
|
||||
@ -47,7 +47,7 @@ La parada de color en 0 píxeles debe ser `yellow`.
|
||||
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
```
|
||||
|
||||
Una parada de color a 40 píxeles debe ser `yellow`.
|
||||
La primera parada de color en 40 píxeles debe ser `yellow`.
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px/gi));
|
||||
|
||||
@ -15,7 +15,7 @@ Para crear una variable CSS, solo tienes que darle un nombre que comience con do
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
Esto creará una variable llamada `--penguin-skin` y le asignará el valor `gray`. Ahora puedes usar esa variable en cualquier otro lugar de tu código CSS para cambiar el valor de otros elementos a "gray" (gris).
|
||||
Esto creará una variable llamada `--penguin-skin` y le asignará el valor `gray`. Ahora puedes usar esa variable en cualquier lugar de tu CSS para cambiar el valor de otras propiedades a gris.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -77,7 +77,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `h1` debe heredar el color "green" de tu elemento `body`.
|
||||
Tu elemento `h1` debe heredar el color `green` de tu elemento `body`.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
|
||||
@ -27,7 +27,7 @@ class="class1 class2"
|
||||
|
||||
**Nota:** No importa el orden en que las clases estén enlistadas dentro del elemento HTML.
|
||||
|
||||
Sin embargo, lo importante es el orden de las declaraciones de `class` clases en la sección `<style>`. La segunda declaración siempre tendrá prioridad sobre la primera. Debido a que `.blue-text` ha sido declarada en segundo lugar, sobrescribirá los atributos de `.pink-text`
|
||||
Sin embargo, lo importante es el orden de las declaraciones de `class` clases en la sección `<style>`. La segunda declaración siempre tendrá prioridad sobre la primera. Debido a que `.blue-text` fue declaradado segundo, este sobreescribirá los atributos de `.pink-text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ Por ejemplo, cuando la pantalla es más pequeña o más grande que el breakpoint
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modifica el selector `:root` de la `media query` para que `--penguin-size` sea redefinido y reciba un valor de `200px`. Además, redefine `--penguin-skin` y asígnale el valor `black` (negro). Luego, cambia el tamaño de la vista previa para ver este cambio en acción.
|
||||
Modifica el selector de la media query `:root` para que `--penguin-size` se redefina y asigne el valor de `200px`. Además, redefine `--penguin-skin` y asígnale el valor `black` (negro). Luego, cambia el tamaño de la vista previa para ver este cambio en acción.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ Debes asignar al elemento `h1` que tiene el texto `I am red!` ("¡Soy de color r
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Debes usar el `hex code` abreviado para el color rojo en lugar del código hexadecimal `#FF0000`.
|
||||
Debes usar la abreviación hexadecimal para el color rojo en lugar del código hexadecimal `#FF0000`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||
@ -41,7 +41,7 @@ Debes asignar al elemento `h1` que tiene el texto `I am green!` ("¡Soy de color
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
Debes usar el `hex code` abreviado para el color verde en lugar del código hexadecimal `#00FF00`.
|
||||
Debes usar la abreviación hexadecimal para el color verde en lugar del código hexadecimal `#00FF00`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
@ -53,7 +53,7 @@ Debes asignar al elemento `h1` que tiene el texto `I am cyan!` ("¡Soy de color
|
||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
Debes usar el `hex code` abreviado para el color cian en lugar del código hexadecimal `#00FFFF`.
|
||||
Debes usar la abreviación hexadecimal para el color gris en lugar del código hexadecimal `#00FFFF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
@ -65,7 +65,7 @@ Debes asignar al elemento `h1` que tiene el texto `I am fuchsia!` ("¡Soy de col
|
||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
Debes usar el `hex code` abreviado para el color fucsia en lugar del código hexadecimal `#FF00FF`.
|
||||
Debes usar la abreviación hexadecimal para el color fuchsia en lugar del código hexadecimal `#FF00FF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||
|
||||
@ -27,13 +27,13 @@ Reemplaza la palabra `black` en el "background-color" (color de fondo) de nuestr
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu elemento `body` debe tener "background-color" black (negro).
|
||||
Tu elemento `body` debe tener un `background-color` black (negro).
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Debes usar el `hex code` correspondiente al color negro en lugar de la palabra reservada `black`.
|
||||
Debes usar el código hexadecimal correspondiente al color negro en lugar de la palabra reservada `black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
|
||||
Puedes hacer que una casilla de verificación o botón de radio se marque por defecto usando el atributo `checked`.
|
||||
|
||||
Para hacer esto, simplemente agrega la palabra `checked` al interior de un elemento de entrada. Por ejemplo:
|
||||
Para hacer esto, simplemente agrega la palabra `checked` al interior de un elemento `input`. Por ejemplo:
|
||||
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
|
||||
@ -43,7 +43,7 @@ Cada uno de tus comentarios debe cerrarse con `-->`.
|
||||
assert(code.match(/[^fc]-->/g).length > 1);
|
||||
```
|
||||
|
||||
No debes cambiar el orden de los elementos `h1` `h2` o `p` en el código.
|
||||
No debes cambiar el orden de los elementos `h1`, `h2` o `p` en el código.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: inform-with-the-paragraph-element
|
||||
|
||||
# --description--
|
||||
|
||||
Los elementos `p` son el elemento preferido para el texto de los párrafos en los sitios web. `p` es la abreviatura de "párrafo" (paragraph).
|
||||
El elemento `p` es el elemento preferido para el texto de los párrafos en los sitios web. `p` es la abreviatura de "párrafo" (paragraph).
|
||||
|
||||
Puedes crear un elemento párrafo de esta manera:
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ Recuerda que establecer un contenedor flexible como fila coloca los elementos fl
|
||||
|
||||
Hay varias opciones para espaciar los elementos flexibles a lo largo de la línea que representa el eje principal. Uno de los más utilizados es `justify-content: center;`, el cual alinea hacia el centro todos los elementos flexibles dentro del contenedor flexible. Otras opciones incluyen:
|
||||
|
||||
<ul><li><code>flex-start</code>: alinea los elementos con el inicio del contenedor flex. Para una fila, esto empuja los elementos a la izquierda del contenedor. Para una columna, esto empuja los elementos a la parte superior del contenedor. Esta es la alineación predeterminada si no se especifica ningún tipo de <code>justify-content</code>.</li><li><code>flex-end</code>: alinea los elementos con el final del contenedor flex. Para una fila, esto empuja los elementos a la derecha del contenedor. Para una columna, esto empuja los elementos a la parte inferior del contenedor.</li><li><code>space-between</code>: alinea los elementos en el centro del eje principal, con un espacio extra entre los elementos. Los primeros y últimos elementos son empujados hasta el borde del contenedor flexible. Por ejemplo, en una fila el primer elemento está en el lado izquierdo del contenedor, el último elemento está en el lado derecho del contenedor, luego el espacio restante se distribuye uniformemente entre los demás elementos.</li><li><code>space-around</code>: similar a <code>space-between</code> pero los primeros y últimos elementos no están fijados en los bordes del contenedor, el espacio se distribuye alrededor de todos los elementos con la mitad de un espacio en ambos extremos del contenedor flexible.</li><li><code>space-evenly</code>: Distribuye el espacio de manera uniforme entre los elementos flexibles con un espacio completo en ambos extremos del contenedor flexible</li></ul>
|
||||
<ul><li><code>flex-start</code>: alinea los elementos con el inicio del contenedor flex. Para una fila, esto empuja los elementos a la izquierda del contenedor. Para una columna, esto empuja los elementos a la parte superior del contenedor. Esta es la alineación predeterminada si no se especifica ningún tipo de <code>justify-content</code>.</li><li><code>flex-end</code>: alinea los elementos con el final del contenedor flex. Para una fila, esto empuja los elementos a la derecha del contenedor. Para una columna, esto empuja los elementos a la parte inferior del contenedor.</li><li><code>space-between</code>: alinea los elementos en el centro del eje principal, con un espacio extra entre los elementos. Los primeros y últimos elementos son empujados hasta el borde del contenedor flexible. Por ejemplo, en una fila el primer elemento está en el lado izquierdo del contenedor, el último elemento está en el lado derecho del contenedor, luego el espacio restante se distribuye uniformemente entre los demás elementos.</li><li><code>space-around</code>: similar a <code>space-between</code> pero los primeros y últimos elementos no están fijados en los bordes del contenedor, el espacio se distribuye alrededor de todos los elementos con la mitad de un espacio en ambos extremos del contenedor flexible.</li><li><code>space-evenly</code>: Distribuye el espacio de manera uniforme entre los flex items con un espacio completo en cualquier extremo del flex container.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
||||
|
||||
# --description--
|
||||
|
||||
CSS flexbox tiene una característica para dividir un elemento flexible en varias filas (o columnas). De forma predeterminada, un contenedor flexible encajará todos los elementos flexibles juntos. Por ejemplo, una fila estará completa en una sola línea.
|
||||
CSS flexbox tiene una característica para dividir un flex container en varias filas (o columnas). De forma predeterminada, un contenedor flexible encajará todos los elementos flexibles juntos. Por ejemplo, una fila estará completa en una sola línea.
|
||||
|
||||
Sin embargo, usar la propiedad `flex-wrap` le indica al CSS que envuelva los elementos. Esto significa que los elementos extra se mueven hacia una nueva fila o columna. El punto de ruptura donde ocurre la envoltura depende del tamaño de los elementos y del tamaño del contenedor.
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ Después de crear una plantilla de área para tu contenedor de cuadrícula (grid
|
||||
}
|
||||
```
|
||||
|
||||
Esto le dice a la cuadrícula que quieres que la clase `item1` se ubique en el área llamada `header`. En este caso, el elemento usará la totalidad de la fila superior porque esa área se llama header.
|
||||
Esto le dice a la cuadrícula que quieres que la clase `item1` se ubique en el área llamada `header`. En este caso, el item usará la totalidad de la fila superior debido a que esa área es nombrada como el área `header`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ Haz una cuadrícula con tres columnas que tengan las siguientes dimensiones de a
|
||||
|
||||
# --hints--
|
||||
|
||||
La clase `container` debe tener una propiedad `grid-template-columns` que tenga tres columnas con los siguientes anchos: `1fr, 100px, and 2fr`.
|
||||
Tu clase `container` debe tener una propiedad `grid-template-columns` que tenga tres columnas con los siguientes anchos: `1fr`, `100px`, y `2fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user